update handbook
diff --git a/handbook/.nojekyll b/handbook/.nojekyll
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/handbook/.nojekyll
diff --git a/handbook/200.html b/handbook/200.html
index eb145fa..2850bc5 100644
--- a/handbook/200.html
+++ b/handbook/200.html
@@ -3,11 +3,11 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content="Apache ECharts Handbook"><link data-n-head="1" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><base href="/handbook/"><link rel="preload" href="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script">
- <link href="/handbook/_nuxt/css/08bb349.css" rel="stylesheet"><link href="/handbook/_nuxt/css/cff74c8.css" rel="stylesheet"></head>
+ <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="/handbook/"><link rel="preload" href="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script">
+ <link href="/handbook/_nuxt/css/647e5e1.css" rel="stylesheet"><link href="/handbook/_nuxt/css/d986efb.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%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null},content:{dbHash:"570e7c13"}}}</script>
+ <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%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}</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 src="/handbook/_nuxt/a9bbbfa.js"></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js"></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js"></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js"></script></body>
+ <script src="/handbook/_nuxt/a88c0dc.js"></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js"></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js"></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js"></script></body>
</html>
diff --git a/handbook/README.md b/handbook/README.md
new file mode 100644
index 0000000..cf00435
--- /dev/null
+++ b/handbook/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/handbook/_nuxt/LICENSES b/handbook/_nuxt/LICENSES
index 3a1456c..78763c0 100644
--- a/handbook/_nuxt/LICENSES
+++ b/handbook/_nuxt/LICENSES
@@ -1,4 +1,23 @@
/*!
+ * vue-client-only v2.0.0
+ * (c) 2019-present egoist <0x142857@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 <0x142857@gmail.com>
+ * Released under the MIT License.
+ */
+
+
+/*!
* vue-router v3.5.1
* (c) 2021 Evan You
* @license MIT
@@ -54,6 +73,8 @@
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */
+/*! https://mths.be/punycode v1.4.1 by @mathias */
+
/**
* Prism: Lightweight, robust, elegant syntax highlighting
*
@@ -62,22 +83,3 @@
* @namespace
* @public
*/
-
-
-/*!
- * vue-client-only v2.0.0
- * (c) 2019-present egoist <0x142857@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 <0x142857@gmail.com>
- * Released under the MIT License.
- */
diff --git a/handbook/_nuxt/a88c0dc.js b/handbook/_nuxt/a88c0dc.js
new file mode 100644
index 0000000..92a9b42
--- /dev/null
+++ b/handbook/_nuxt/a88c0dc.js
@@ -0,0 +1 @@
+!function(e){function d(data){for(var d,f,t=data[0],o=data[1],l=data[2],i=0,h=[];i<t.length;i++)f=t[i],Object.prototype.hasOwnProperty.call(r,f)&&r[f]&&h.push(r[f][0]),r[f]=0;for(d in o)Object.prototype.hasOwnProperty.call(o,d)&&(e[d]=o[d]);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 d=n[i],c=!0,f=1;f<d.length;f++){var t=d[f];0!==r[t]&&(c=!1)}c&&(n.splice(i--,1),e=o(o.s=d[0]))}return e}var f={},t={4:0},r={4:0},n=[];function o(d){if(f[d])return f[d].exports;var c=f[d]={i:d,l:!1,exports:{}};return e[d].call(c.exports,c,c.exports,o),c.l=!0,c.exports}o.e=function(e){var d=[],c=function(){try{return document.createElement("link").relList.supports("preload")}catch(e){return!1}}();t[e]?d.push(t[e]):0!==t[e]&&{2:1,6:1}[e]&&d.push(t[e]=new Promise((function(d,f){for(var r="css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",n=o.p+r,l=document.getElementsByTagName("link"),i=0;i<l.length;i++){var h=(y=l[i]).getAttribute("data-href")||y.getAttribute("href");if(!("stylesheet"!==y.rel&&"preload"!==y.rel||h!==r&&h!==n))return d()}var m=document.getElementsByTagName("style");for(i=0;i<m.length;i++){var y;if((h=(y=m[i]).getAttribute("data-href"))===r||h===n)return d()}var v=document.createElement("link");v.rel=c?"preload":"stylesheet",c?v.as="style":v.type="text/css",v.onload=d,v.onerror=function(d){var c=d&&d.target&&d.target.src||n,r=new Error("Loading CSS chunk "+e+" failed.\n("+c+")");r.code="CSS_CHUNK_LOAD_FAILED",r.request=c,delete t[e],v.parentNode.removeChild(v),f(r)},v.href=n,document.getElementsByTagName("head")[0].appendChild(v)})).then((function(){if(t[e]=0,c){var d=document.createElement("link");d.href=o.p+"css/"+{2:"89761e6",3:"31d6cfe",6:"1c37eb7",7:"31d6cfe",8:"31d6cfe",9:"31d6cfe",10:"31d6cfe",11:"31d6cfe",12:"31d6cfe",13:"31d6cfe",14:"31d6cfe",15:"31d6cfe",16:"31d6cfe",17:"31d6cfe",18:"31d6cfe",19:"31d6cfe",20:"31d6cfe",21:"31d6cfe",22:"31d6cfe",23:"31d6cfe",24:"31d6cfe",25:"31d6cfe",26:"31d6cfe",27:"31d6cfe",28:"31d6cfe",29:"31d6cfe",30:"31d6cfe",31:"31d6cfe",32:"31d6cfe",33:"31d6cfe",34:"31d6cfe",35:"31d6cfe",36:"31d6cfe",37:"31d6cfe",38:"31d6cfe",39:"31d6cfe",40:"31d6cfe",41:"31d6cfe",42:"31d6cfe",43:"31d6cfe",44:"31d6cfe",45:"31d6cfe",46:"31d6cfe",47:"31d6cfe",48:"31d6cfe",49:"31d6cfe",50:"31d6cfe",51:"31d6cfe",52:"31d6cfe",53:"31d6cfe",54:"31d6cfe",55:"31d6cfe",56:"31d6cfe",57:"31d6cfe",58:"31d6cfe",59:"31d6cfe",60:"31d6cfe",61:"31d6cfe",62:"31d6cfe",63:"31d6cfe",64:"31d6cfe",65:"31d6cfe",66:"31d6cfe",67:"31d6cfe",68:"31d6cfe",69:"31d6cfe",70:"31d6cfe",71:"31d6cfe",72:"31d6cfe",73:"31d6cfe",74:"31d6cfe",75:"31d6cfe",76:"31d6cfe",77:"31d6cfe",78:"31d6cfe",79:"31d6cfe",80:"31d6cfe",81:"31d6cfe",82:"31d6cfe",83:"31d6cfe",84:"31d6cfe",85:"31d6cfe",86:"31d6cfe",87:"31d6cfe",88:"31d6cfe",89:"31d6cfe",90:"31d6cfe",91:"31d6cfe",92:"31d6cfe",93:"31d6cfe",94:"31d6cfe",95:"31d6cfe",96:"31d6cfe",97:"31d6cfe",98:"31d6cfe",99:"31d6cfe",100:"31d6cfe",101:"31d6cfe",102:"31d6cfe",103:"31d6cfe",104:"31d6cfe",105:"31d6cfe",106:"31d6cfe",107:"31d6cfe",108:"31d6cfe",109:"31d6cfe",110:"31d6cfe",111:"31d6cfe",112:"31d6cfe",113:"31d6cfe",114:"31d6cfe",115:"31d6cfe",116:"31d6cfe",117:"31d6cfe",118:"31d6cfe",119:"31d6cfe",120:"31d6cfe",121:"31d6cfe",122:"31d6cfe",123:"31d6cfe",124:"31d6cfe",125:"31d6cfe",126:"31d6cfe",127:"31d6cfe"}[e]+".css",d.rel="stylesheet",d.type="text/css",document.body.appendChild(d)}})));var f=r[e];if(0!==f)if(f)d.push(f[2]);else{var n=new Promise((function(d,c){f=r[e]=[d,c]}));d.push(f[2]=n);var l,script=document.createElement("script");script.charset="utf-8",script.timeout=120,o.nc&&script.setAttribute("nonce",o.nc),script.src=function(e){return o.p+"js/"+{2:"f9d67c6b735d3ad1caf6",3:"87d073533b02b80c9f5a",6:"a8538eba3f241a324560",7:"d9ae1847003efbc40617",8:"2e9721418ef592e1b5c4",9:"30a6ec95660d084d1473",10:"8740422d206a5f28b814",11:"a8add6612d7e2d857b36",12:"0dfcea8fbe16d514d8d7",13:"366f7ad6be95b8f56db3",14:"c4790b12e2e9567a0ef1",15:"911d7b85b7ac344417e5",16:"97dab2d2d3a3045f7809",17:"268d769798e4b768f97f",18:"59b7bfd614b9b7af3b5d",19:"102a2d6d4a3ace01dcb8",20:"d1b29c06c94c01d038f3",21:"1d26a9072b8ef0439053",22:"b9c4fb74d46dd3f07a1e",23:"9cae5d0339723a01b8cc",24:"f35a22d698d69b5f1e7c",25:"7b7766c05b4dfac68edd",26:"b91b2a7de712963c5ce2",27:"c1cd433365a1acdfa307",28:"a6d33d615c47551931a3",29:"09401beda4bef47430f5",30:"def2c5592ce5747885da",31:"586ffb442cd00f6388c2",32:"cfba90b34bdafa1de2d9",33:"cea1691acd58fb1cfdc3",34:"c7c5ed7688623823e36f",35:"fc8a3d9e02dfa622da3a",36:"2dac21140e9a711dbc9d",37:"ef9fabb5ed35c901c904",38:"f72f476b9896127f4160",39:"ad31e0a19768f4b18921",40:"a11fd8f9dfebc2c4e2fc",41:"43ca52abf392cbb19ed6",42:"bbab45710d8d55912084",43:"d26df00c22e66a620659",44:"986fdb22890a51fd3cd7",45:"257ccac711f94ae08444",46:"115b812c3a35ca66e69e",47:"f8d25e00e7d9c3a54679",48:"73812c7893e59b5541bd",49:"754ba7617eda8d165b0a",50:"18f1e609700a7bacff20",51:"8c305df7926580a3084b",52:"256bfc09f2265157a68d",53:"97cb9e8e23b546a88acd",54:"e35b2af89343d5fdfb6f",55:"029fdc8dbf2da11901b1",56:"5a2cdacef8764660e90f",57:"f1d89856a413be3573ba",58:"ad449dfd5fdcfb3dd8d8",59:"8b843ba40bed064e7dab",60:"c8202115ceaa17a66aa6",61:"cc35fa6476dcc80b4f1d",62:"640c834f52de46dd5d86",63:"164135d1bac6aa80040d",64:"23bc4e94e46ee3710490",65:"fc6e9368f0aedefe0966",66:"15427b3ebf3c8375d91f",67:"d2e624e13aeb9a5fdedb",68:"ec37465718176e3cb410",69:"720ad2bd81da1ff6ab64",70:"760b6453f24288d76446",71:"1478fcfc2724c8aa7ccc",72:"62ba2f989de415a036e0",73:"b8d54d9d6a91a7303c25",74:"8c0e9d23a3264ba34cf3",75:"83188ac1f619f3c94f4d",76:"0bba3e665320160fe0ec",77:"1e5a7f7d63a9e92373b8",78:"142f38fb609b75e729dc",79:"328c469c27b47b4c3f1f",80:"2eefa4b3e7d034302c37",81:"87bca500fffaccdabeb9",82:"3719c79c1dd05f482388",83:"4bfb171352d9a64e9093",84:"5ef99a256860d34294a2",85:"ed098c3662f96f0ef9b7",86:"fed49c89daacc7a4f92e",87:"db45232e8e94b8a7f094",88:"9670a8e6505bdaf98a3a",89:"1e3d8d997af80ac3c555",90:"d1902f19791110d35065",91:"5d1142ae6628d75175e9",92:"252403819a1920f74467",93:"4e08dd3cb7b737a2c89f",94:"8ef204dfd1e847f744f4",95:"2d6025ca0948f00762f7",96:"c4da154b32c4c2a3de37",97:"f737ab8a768a8caefcc2",98:"7a12cecdc21751569220",99:"c3b04247a56412f8a1d0",100:"40a0946845a463fb3fc7",101:"8aca0800230497efb3c5",102:"665c93bf69d53406f781",103:"acc1aa7273a915744df3",104:"611aafabdd03120aa457",105:"59434bd68f1a02bcf7de",106:"0f6ae1f3ae0558dca3c6",107:"9957e6b213f047f0b356",108:"473d6e136e307165746a",109:"c00d87bc389d852f56c9",110:"d349260dbe40b787f938",111:"a6a3fe16e7a764a89cd3",112:"5fdb54cffce312072f70",113:"25b8c557199d36fc6dd9",114:"54c1f437ae2a6c018af5",115:"a81717ff07ac7bd9f7ed",116:"cbd592f307d3efcb1e56",117:"dc8865ead84032fb4a3f",118:"c40b7baf053aa77317cb",119:"eda65be14bb72a5b114e",120:"2324884562014a2cee61",121:"1f920b728680adf1bc5d",122:"883c8a4a82d2802585c5",123:"4d6aa149079169848905",124:"c2ba106829ef31b86d5b",125:"c14b621ede8c3f27dc3f",126:"3799c7971bf94fc3bfb4",127:"7be2520855c4af391f2b"}[e]+".js"}(e);var h=new Error;l=function(d){script.onerror=script.onload=null,clearTimeout(m);var c=r[e];if(0!==c){if(c){var f=d&&("load"===d.type?"missing":d.type),t=d&&d.target&&d.target.src;h.message="Loading chunk "+e+" failed.\n("+f+": "+t+")",h.name="ChunkLoadError",h.type=f,h.request=t,c[1](h)}r[e]=void 0}};var m=setTimeout((function(){l({type:"timeout",target:script})}),12e4);script.onerror=script.onload=l,document.head.appendChild(script)}return Promise.all(d)},o.m=e,o.c=f,o.d=function(e,d,c){o.o(e,d)||Object.defineProperty(e,d,{enumerable:!0,get:c})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,d){if(1&d&&(e=o(e)),8&d)return e;if(4&d&&"object"==typeof e&&e&&e.__esModule)return e;var c=Object.create(null);if(o.r(c),Object.defineProperty(c,"default",{enumerable:!0,value:e}),2&d&&"string"!=typeof e)for(var f in e)o.d(c,f,function(d){return e[d]}.bind(null,f));return c},o.n=function(e){var d=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(d,"a",d),d},o.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},o.p="/handbook/_nuxt/",o.oe=function(e){throw console.error(e),e};var l=window.webpackJsonp=window.webpackJsonp||[],h=l.push.bind(l);l.push=d,l=l.slice();for(var i=0;i<l.length;i++)d(l[i]);var m=h;c()}([]);
\ No newline at end of file
diff --git a/handbook/_nuxt/a9bbbfa.js b/handbook/_nuxt/a9bbbfa.js
deleted file mode 100644
index 5937919..0000000
--- a/handbook/_nuxt/a9bbbfa.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e){function t(data){for(var t,n,o=data[0],d=data[1],f=data[2],i=0,h=[];i<o.length;i++)n=o[i],Object.prototype.hasOwnProperty.call(c,n)&&c[n]&&h.push(c[n][0]),c[n]=0;for(t in d)Object.prototype.hasOwnProperty.call(d,t)&&(e[t]=d[t]);for(m&&m(data);h.length;)h.shift()();return l.push.apply(l,f||[]),r()}function r(){for(var e,i=0;i<l.length;i++){for(var t=l[i],r=!0,n=1;n<t.length;n++){var o=t[n];0!==c[o]&&(r=!1)}r&&(l.splice(i--,1),e=d(d.s=t[0]))}return e}var n={},o={5:0},c={5:0},l=[];function d(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,d),r.l=!0,r.exports}d.e=function(e){var t=[],r=function(){try{return document.createElement("link").relList.supports("preload")}catch(e){return!1}}();o[e]?t.push(o[e]):0!==o[e]&&{3:1,8:1}[e]&&t.push(o[e]=new Promise((function(t,n){for(var c="css/"+{2:"31d6cfe",3:"792c393",4:"31d6cfe",7:"31d6cfe",8:"1c37eb7",9:"31d6cfe"}[e]+".css",l=d.p+c,f=document.getElementsByTagName("link"),i=0;i<f.length;i++){var h=(y=f[i]).getAttribute("data-href")||y.getAttribute("href");if(!("stylesheet"!==y.rel&&"preload"!==y.rel||h!==c&&h!==l))return t()}var m=document.getElementsByTagName("style");for(i=0;i<m.length;i++){var y;if((h=(y=m[i]).getAttribute("data-href"))===c||h===l)return t()}var v=document.createElement("link");v.rel=r?"preload":"stylesheet",r?v.as="style":v.type="text/css",v.onload=t,v.onerror=function(t){var r=t&&t.target&&t.target.src||l,c=new Error("Loading CSS chunk "+e+" failed.\n("+r+")");c.code="CSS_CHUNK_LOAD_FAILED",c.request=r,delete o[e],v.parentNode.removeChild(v),n(c)},v.href=l,document.getElementsByTagName("head")[0].appendChild(v)})).then((function(){if(o[e]=0,r){var t=document.createElement("link");t.href=d.p+"css/"+{2:"31d6cfe",3:"792c393",4:"31d6cfe",7:"31d6cfe",8:"1c37eb7",9:"31d6cfe"}[e]+".css",t.rel="stylesheet",t.type="text/css",document.body.appendChild(t)}})));var n=c[e];if(0!==n)if(n)t.push(n[2]);else{var l=new Promise((function(t,r){n=c[e]=[t,r]}));t.push(n[2]=l);var f,script=document.createElement("script");script.charset="utf-8",script.timeout=120,d.nc&&script.setAttribute("nonce",d.nc),script.src=function(e){return d.p+"js/"+{2:"a09bb2b5a3ee6724fd5d",3:"5f203866781801df115b",4:"1973e756ccd8175e73c2",7:"52a6ca2e1d8a75e184fd",8:"9fd40f9dd0812421e4d6",9:"15cd285820d51c8a3180"}[e]+".js"}(e);var h=new Error;f=function(t){script.onerror=script.onload=null,clearTimeout(m);var r=c[e];if(0!==r){if(r){var n=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src;h.message="Loading chunk "+e+" failed.\n("+n+": "+o+")",h.name="ChunkLoadError",h.type=n,h.request=o,r[1](h)}c[e]=void 0}};var m=setTimeout((function(){f({type:"timeout",target:script})}),12e4);script.onerror=script.onload=f,document.head.appendChild(script)}return Promise.all(t)},d.m=e,d.c=n,d.d=function(e,t,r){d.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.t=function(e,t){if(1&t&&(e=d(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(d.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)d.d(r,n,function(t){return e[t]}.bind(null,n));return r},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,"a",t),t},d.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},d.p="/handbook/_nuxt/",d.oe=function(e){throw console.error(e),e};var f=window.webpackJsonp=window.webpackJsonp||[],h=f.push.bind(f);f.push=t,f=f.slice();for(var i=0;i<f.length;i++)t(f[i]);var m=h;r()}([]);
\ No newline at end of file
diff --git a/handbook/_nuxt/content/db-570e7c13.json b/handbook/_nuxt/content/db-570e7c13.json
deleted file mode 100644
index 08b8166..0000000
--- a/handbook/_nuxt/content/db-570e7c13.json
+++ /dev/null
@@ -1 +0,0 @@
-{"_env":"NODEJS","_serializationMethod":"normal","_autosave":false,"_autosaveInterval":5000,"_collections":[{"name":"items","unindexedSortComparator":"js","defaultLokiOperatorPackage":"js","_dynamicViews":[],"uniqueNames":[],"transforms":{},"rangedIndexes":{},"_data":[{"slug":"get-started","toc":[{"id":"getting-apache-echarts","depth":2,"text":"Getting Apache ECharts"},{"id":"including-echarts","depth":2,"text":"Including ECharts"},{"id":"plotting-a-simple-chart","depth":2,"text":"Plotting a Simple Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"get-started"},"children":[{"type":"element","tag":"a","props":{"href":"#get-started","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Get Started"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"getting-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#getting-apache-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Getting Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts supports several download methods, which are further explained in the next tutorial "},{"type":"element","tag":"a","props":{"href":"en/basics/download"},"children":[{"type":"text","value":"Installation"}]},{"type":"text","value":". Here, we take the example of getting it from the "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jsDelivr"}]},{"type":"text","value":" CDN and explain how to install it quickly."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.jsdelivr.com/package/npm/echarts"}]},{"type":"text","value":" select "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dist/echarts.js"}]},{"type":"text","value":", click and save it as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" file."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"More information about these files can be found in the next tutorial "},{"type":"element","tag":"a","props":{"href":"en/basics/download"},"children":[{"type":"text","value":"Installation"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"including-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#including-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Including ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create a new "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" file in the directory where you just saved "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":", with the following content:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <!-- Include the ECharts file you just downloaded -->\n <script src=\"echarts.js\"></script>\n </head>\n</html>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When you open this "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":", you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"plotting-a-simple-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#plotting-a-simple-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Plotting a Simple Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"</head>"}]},{"type":"text","value":" tag introduced earlier."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<body>\n <! -- Prepare a DOM with a defined width and height for ECharts -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then you can initialize an echarts instance with the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":" method and set the echarts instance with [setOption]("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://echarts.apache.org//api.html#"}]},{"type":"text","value":" echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n <!-- Include the ECharts file you just downloaded -->\n <script src=\"echarts.min.js\"></script>\n </head>\n <body>\n <!-- Prepare a DOM with a defined width and height for ECharts -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n // Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n </script>\n </body>\n</html>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"And this is your first chart with Apache ECharts!"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/getting-started&reset=1&edit=1"},"children":[{"type":"text","value":"\n"}]}]},"text":"# Get Started\n\n## Getting Apache ECharts\n\nApache ECharts supports several download methods, which are further explained in the next tutorial [Installation](en/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/echarts](https://www.jsdelivr.com/package/npm/echarts) select `dist/echarts.js`, click and save it as `echarts.js` file.\n\n> More information about these files can be found in the next tutorial [Installation](en/basics/download).\n\n## Including ECharts\n\nCreate a new `index.html` file in the directory where you just saved `echarts.js`, with the following content:\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <!-- Include the ECharts file you just downloaded -->\n <script src=\"echarts.js\"></script>\n </head>\n</html>\n```\n\nWhen you open this `index.html`, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.\n\n## Plotting a Simple Chart\n\nBefore drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the `</head>` tag introduced earlier.\n\n```html\n<body>\n <! -- Prepare a DOM with a defined width and height for ECharts -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n```\n\nThen you can initialize an echarts instance with the [echarts.init](https://echarts.apache.org//api.html#echarts.init) method and set the echarts instance with [setOption](https://echarts.apache.org//api.html# echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n <!-- Include the ECharts file you just downloaded -->\n <script src=\"echarts.min.js\"></script>\n </head>\n <body>\n <!-- Prepare a DOM with a defined width and height for ECharts -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n // Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n </script>\n </body>\n</html>\n```\n\nAnd this is your first chart with Apache ECharts!\n\n<md-example src=\"doc-example/getting-started&reset=1&edit=1\"></md-example>\n","dir":"/en","path":"/en/get-started","extension":".md","createdAt":"2021-07-24T07:49:57.150Z","updatedAt":"2021-07-24T07:49:57.150Z","meta":{"version":0,"revision":0,"created":1627897108307},"$loki":1},{"slug":"posts","title":"Get Started","dir":"/en","path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":2},{"slug":"posts","title":"Basics","dir":"/en","children":[{"title":"Download ECharts","dir":"download"},{"title":"Import ECharts","dir":"import"},{"title":"Resources","dir":"resource","draft":true},{"title":"Inspiration","dir":"inspiration"},{"title":"Get Help","dir":"help"},{"title":"Release Note","dir":"release-note","children":[{"title":"ECharts 5.2.0","draft":true,"dir":"5-2-0"},{"title":"ECharts 5 Features","dir":"v5-feature"},{"title":"ECharts 5 Upgrade Guide","dir":"v5-upgrade-guide"}]}],"path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":3},{"slug":"posts","title":"Concepts","dir":"/en","children":[{"title":"Chart Container","dir":"chart-size"},{"title":"Chart Option","dir":"options","draft":true},{"title":"Series","dir":"series","draft":true},{"title":"Style","dir":"style"},{"title":"Dataset","dir":"dataset"},{"title":"Data Transform","dir":"data-transform"},{"title":"Coordinate","dir":"coordinate","draft":true},{"title":"Axis","dir":"axis"},{"title":"Visual Mapping","dir":"visual-map"},{"title":"Legend","dir":"legend"},{"title":"Event and Action","dir":"event"}],"path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":4},{"slug":"posts","title":"Application","dir":"/en","children":[{"title":"Common Charts","dir":"chart-types","children":[{"title":"Bar","dir":"bar","children":[{"title":"Basic Bar","dir":"basic-bar"},{"title":"Stacked Bar","dir":"stacked-bar"},{"title":"Bar Racing","dir":"bar-race","draft":true},{"title":"Bar Polar","dir":"polar-bar","draft":true},{"title":"Waterfall","dir":"waterfall","draft":true}]},{"title":"Line","dir":"line","children":[{"title":"Basic Line","dir":"basic-line"},{"title":"Stacked Line","dir":"stacked-line"},{"title":"Area Chart","dir":"area-line"},{"title":"Smoothed Line","dir":"smooth-line"},{"title":"Step Line","dir":"step-line"}]},{"title":"Pie","dir":"pie","children":[{"title":"Basic Pie","dir":"basic-pie"},{"title":"Ring Style","dir":"doughnut"},{"title":"Rose Style","dir":"rose"}]},{"title":"Scatter","dir":"scatter","children":[{"title":"Basic Scatter","dir":"basic-scatter"}]}]},{"title":"Mobile","dir":"mobile","draft":true},{"title":"Cross Platform","dir":"cross-platform","children":[{"title":"Server Side Rendering","dir":"server"}]},{"title":"Data","dir":"data","children":[{"title":"Dynamic Data","dir":"dynamic-data"},{"title":"Drilldown","dir":"drilldown","draft":true}]},{"title":"Label","dir":"label","children":[{"title":"Rich Text","dir":"rich-text"}]},{"title":"Interaction","dir":"interaction","children":[{"title":"Drag","dir":"drag"},{"title":"Connect","dir":"connect","draft":true}]}],"path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":5},{"slug":"posts","title":"Best Practice","dir":"/en","children":[{"title":"Mobile Optimization","dir":"mobile","draft":true},{"title":"Canvas vs. SVG","dir":"canvas-vs-svg"},{"title":"Aria","dir":"aria"}],"path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":6},{"slug":"posts","title":"Edit Handbook","dir":"/en","children":[{"title":"Edit Guide","dir":"edit-guide"}],"path":"/en/posts","extension":".yml","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T12:30:22.488Z","meta":{"version":0,"revision":0,"created":1627897108316},"$loki":7},{"slug":"get-started","toc":[{"id":"获取-apache-echarts","depth":2,"text":"获取 Apache ECharts"},{"id":"引入-apache-echarts","depth":2,"text":"引入 Apache ECharts"},{"id":"绘制一个简单的图表","depth":2,"text":"绘制一个简单的图表"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"快速上手"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"快速上手"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"获取-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%8E%B7%E5%8F%96-apache-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"获取 Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 支持多种下载方式,可以在下一篇教程"},{"type":"element","tag":"a","props":{"href":"zh/basics/download"},"children":[{"type":"text","value":"安装"}]},{"type":"text","value":"中查看所有方式。这里,我们以从 "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jsDelivr"}]},{"type":"text","value":" CDN 上获取为例,介绍如何快速安装。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://www.jsdelivr.com/package/npm/echarts"}]},{"type":"text","value":" 选择 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dist/echarts.js"}]},{"type":"text","value":",点击并保存为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" 文件。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"关于这些文件的介绍,可以在下一篇教程"},{"type":"element","tag":"a","props":{"href":"zh/basics/download"},"children":[{"type":"text","value":"安装"}]},{"type":"text","value":"中了解更多信息。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"引入-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%95%E5%85%A5-apache-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"引入 Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在刚才保存 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" 的目录新建一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" 文件,内容如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <!-- 引入刚刚下载的 ECharts 文件 -->\n <script src=\"echarts.js\"></script>\n </head>\n</html>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"打开这个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":",你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"绘制一个简单的图表"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"绘制一个简单的图表"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"</head>"}]},{"type":"text","value":" 之后,添加:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<body>\n <!-- 为 ECharts 准备一个定义了宽高的 DOM -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后就可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":" 方法初始化一个 echarts 实例并通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echartsInstance.setOption","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":" 方法生成一个简单的柱状图,下面是完整代码。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n <!-- 引入刚刚下载的 ECharts 文件 -->\n <script src=\"echarts.min.js\"></script>\n </head>\n <body>\n <!-- 为 ECharts 准备一个定义了宽高的 DOM -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // 基于准备好的dom,初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n </body>\n</html>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这样你的第一个图表就诞生了!"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/getting-started"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 快速上手\n\n## 获取 Apache ECharts\n\nApache ECharts 支持多种下载方式,可以在下一篇教程[安装](zh/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> 关于这些文件的介绍,可以在下一篇教程[安装](zh/basics/download)中了解更多信息。\n\n## 引入 Apache ECharts\n\n在刚才保存 `echarts.js` 的目录新建一个 `index.html` 文件,内容如下:\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <!-- 引入刚刚下载的 ECharts 文件 -->\n <script src=\"echarts.js\"></script>\n </head>\n</html>\n```\n\n打开这个 `index.html`,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。\n\n## 绘制一个简单的图表\n\n在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `</head>` 之后,添加:\n\n```html\n<body>\n <!-- 为 ECharts 准备一个定义了宽高的 DOM -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n```\n\n然后就可以通过 [echarts.init](https://echarts.apache.org//api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](https://echarts.apache.org//api.html#echartsInstance.setOption) 方法生成一个简单的柱状图,下面是完整代码。\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n <!-- 引入刚刚下载的 ECharts 文件 -->\n <script src=\"echarts.min.js\"></script>\n </head>\n <body>\n <!-- 为 ECharts 准备一个定义了宽高的 DOM -->\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // 基于准备好的dom,初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n </script>\n </body>\n</html>\n```\n\n这样你的第一个图表就诞生了!\n\n<md-example src=\"doc-example/getting-started\"></md-example>\n","dir":"/zh","path":"/zh/get-started","extension":".md","createdAt":"2021-07-24T07:49:57.150Z","updatedAt":"2021-07-24T07:49:57.151Z","meta":{"version":0,"revision":0,"created":1627897108333},"$loki":8},{"slug":"posts","title":"快速上手","dir":"/zh","path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":9},{"slug":"posts","title":"入门篇","dir":"/zh","children":[{"title":"获取 ECharts","dir":"download"},{"title":"在项目中引入 ECharts","dir":"import"},{"title":"资源列表","dir":"resource","draft":true},{"title":"获取灵感","dir":"inspiration"},{"title":"寻求帮助","dir":"help"},{"title":"版本介绍","dir":"release-note","children":[{"title":"ECharts 5.2.0","draft":true,"dir":"5-2-0"},{"title":"ECharts 5 新特性","dir":"v5-feature"},{"title":"ECharts 5 升级指南","dir":"v5-upgrade-guide"}]}],"path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":10},{"slug":"posts","title":"概念篇","dir":"/zh","children":[{"title":"图表容器及大小","dir":"chart-size"},{"title":"配置项","dir":"options","draft":true},{"title":"系列","dir":"series","draft":true},{"title":"样式","dir":"style"},{"title":"数据集","dir":"dataset"},{"title":"数据转换","dir":"data-transform"},{"title":"坐标系","dir":"coordinate","draft":true},{"title":"坐标轴","dir":"axis"},{"title":"视觉映射","dir":"visual-map"},{"title":"图例","dir":"legend"},{"title":"事件与行为","dir":"event"}],"path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":11},{"slug":"posts","title":"应用篇","dir":"/zh","children":[{"title":"常用图表类型","dir":"chart-types","children":[{"title":"柱状图","dir":"bar","children":[{"title":"基础柱状图","dir":"basic-bar"},{"title":"堆叠柱状图","dir":"stacked-bar"},{"title":"动态排序柱状图","dir":"bar-race","draft":true},{"title":"极坐标系柱状图","dir":"polar-bar","draft":true},{"title":"瀑布图","dir":"waterfall","draft":true},{"title":"视觉映射的柱状图","dir":"visual-map","draft":true}]},{"title":"折线图","dir":"line","children":[{"title":"基础折线图","dir":"basic-line"},{"title":"堆叠折线图","dir":"stacked-line"},{"title":"区域面积图","dir":"area-line"},{"title":"平滑曲线图","dir":"smooth-line"},{"title":"阶梯线图","dir":"step-line"}]},{"title":"饼图","dir":"pie","children":[{"title":"基础饼图","dir":"basic-pie"},{"title":"圆环图","dir":"doughnut"},{"title":"南丁格尔图(玫瑰图)","dir":"rose"}]},{"title":"散点图","dir":"scatter","children":[{"title":"基础散点图","dir":"basic-scatter"}]}]},{"title":"移动端优化","dir":"mobile","draft":true},{"title":"跨平台方案","dir":"cross-platform","children":[{"title":"百度智能小程序","dir":"baidu-app"},{"title":"微信小程序","dir":"wechat-app"},{"title":"服务端渲染","dir":"server"}]},{"title":"数据处理","dir":"data","children":[{"title":"动态的异步数据","dir":"dynamic-data"},{"title":"数据下钻","dir":"drilldown","draft":true}]},{"title":"标签","dir":"label","children":[{"title":"富文本标签","dir":"rich-text"}]},{"title":"交互","dir":"interaction","children":[{"title":"拖拽的实现","dir":"drag"},{"title":"多图联动","dir":"connect","draft":true}]}],"path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":12},{"slug":"posts","title":"最佳实践","dir":"/zh","children":[{"title":"移动端优化","dir":"mobile","draft":true},{"title":"Canvas vs. SVG","dir":"canvas-vs-svg"},{"title":"无障碍访问","dir":"aria"}],"path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":13},{"slug":"posts","title":"编辑本文档","dir":"/zh","children":[{"title":"文档编辑指南","dir":"edit-guide"}],"path":"/zh/posts","extension":".yml","createdAt":"2021-07-19T10:14:46.867Z","updatedAt":"2021-07-29T06:29:23.541Z","meta":{"version":0,"revision":0,"created":1627897108337},"$loki":14},{"slug":"mobile","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/best-practice","path":"/en/best-practice/mobile","extension":".md","createdAt":"2021-06-04T12:26:37.917Z","updatedAt":"2021-06-04T12:26:37.917Z","meta":{"version":0,"revision":0,"created":1627897108338},"$loki":15},{"slug":"coordinate","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/concepts","path":"/en/concepts/coordinate","extension":".md","createdAt":"2021-06-04T12:26:37.918Z","updatedAt":"2021-06-04T12:26:37.918Z","meta":{"version":0,"revision":0,"created":1627897108338},"$loki":16},{"slug":"series","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/concepts","path":"/en/concepts/series","extension":".md","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-06-04T12:26:37.919Z","meta":{"version":0,"revision":0,"created":1627897108339},"$loki":17},{"slug":"options","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/concepts","path":"/en/concepts/options","extension":".md","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-06-04T12:26:37.919Z","meta":{"version":0,"revision":0,"created":1627897108339},"$loki":18},{"slug":"tooltip","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/concepts","path":"/en/concepts/tooltip","extension":".md","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-06-04T12:26:37.919Z","meta":{"version":0,"revision":0,"created":1627897108340},"$loki":19},{"slug":"connect","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/application","path":"/zh/application/connect","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-06-04T12:26:37.922Z","meta":{"version":0,"revision":0,"created":1627897108340},"$loki":20},{"slug":"mobile","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/application","path":"/zh/application/mobile","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-06-04T12:26:37.923Z","meta":{"version":0,"revision":0,"created":1627897108341},"$loki":21},{"slug":"mobile","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/best-practice","path":"/zh/best-practice/mobile","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897108341},"$loki":22},{"slug":"coordinate","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/concepts","path":"/zh/concepts/coordinate","extension":".md","createdAt":"2021-06-04T12:26:37.933Z","updatedAt":"2021-06-04T12:26:37.933Z","meta":{"version":0,"revision":0,"created":1627897108342},"$loki":23},{"slug":"help","toc":[{"id":"technical-problems","depth":2,"text":"Technical Problems"},{"id":"make-sure-that-existing-documentation-do-not-solve-your-problem","depth":3,"text":"Make sure that existing documentation do not solve your problem"},{"id":"create-the-minimal-reproducible-demo","depth":3,"text":"Create the Minimal Reproducible Demo"},{"id":"determining-if-its-a-bug","depth":3,"text":"Determining if It's a Bug"},{"id":"non-technical-questions","depth":2,"text":"Non-technical questions"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"get-help"},"children":[{"type":"element","tag":"a","props":{"href":"#get-help","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Get Help"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"technical-problems"},"children":[{"type":"element","tag":"a","props":{"href":"#technical-problems","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Technical Problems"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"make-sure-that-existing-documentation-do-not-solve-your-problem"},"children":[{"type":"element","tag":"a","props":{"href":"#make-sure-that-existing-documentation-do-not-solve-your-problem","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Make sure that existing documentation do not solve your problem"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"API"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//option.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Option Manual"}]},{"type":"text","value":": you can try to use the search function"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Articles in this handbook"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//faq.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"FAQ"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Searching in "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GitHub issue"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using the search engine"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"create-the-minimal-reproducible-demo"},"children":[{"type":"element","tag":"a","props":{"href":"#create-the-minimal-reproducible-demo","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Create the Minimal Reproducible Demo"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Create an example on "},{"type":"element","tag":"a","props":{"href":"https://codepen.io/Ovilia/pen/dyYWXWM","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Codepen"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://codesandbox.io/s/mystifying-bash-2uthz","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Codesandbox"}]},{"type":"text","value":", which will make it easier for others to reproduce your problem."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See "},{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com/help/minimal-reproducible-example","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"How to Create a Minimal, Reproducible Example"}]},{"type":"text","value":" for a more detailed description."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"determining-if-its-a-bug"},"children":[{"type":"element","tag":"a","props":{"href":"#determining-if-its-a-bug","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Determining if It's a Bug"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"report-a-bug-or-request-a-new-feature"},"children":[{"type":"element","tag":"a","props":{"href":"#report-a-bug-or-request-a-new-feature","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Report a Bug or Request a New Feature"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the "},{"type":"element","tag":"a","props":{"href":"https://ecomfe.github.io/echarts-issue-helper/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"issue template"}]},{"type":"text","value":" to create a new issue and follow the prompts to describe it in detail."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"how-to-questions"},"children":[{"type":"element","tag":"a","props":{"href":"#how-to-questions","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"How-To Questions"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If it's not a bug, but you don't know how to achieve something, try the "},{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com"},"children":[{"type":"text","value":"stackoverflow.com"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you don't get an answer, you can also send an email to the email group "},{"type":"element","tag":"a","props":{"href":"mailto:dev@echarts.apache.org"},"children":[{"type":"text","value":"dev@echarts.apache.org"}]},{"type":"text","value":". In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"non-technical-questions"},"children":[{"type":"element","tag":"a","props":{"href":"#non-technical-questions","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Non-technical questions"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other questions can be sent in English to the mail group "},{"type":"element","tag":"a","props":{"href":"mailto:dev@echarts.apache.org"},"children":[{"type":"text","value":"dev@echarts.apache.org"}]},{"type":"text","value":"."}]}]},"text":"# 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 the community for help.\n\nTherefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:\n\n- [API](https://echarts.apache.org//api.html)\n- [Option Manual](https://echarts.apache.org//option.html): you can try to use the search function\n- Articles in this handbook\n- [FAQ](https://echarts.apache.org//faq.html)\n- Searching in [GitHub issue](https://github.com/apache/echarts/issues)\n- Using the search engine\n\n### Create the Minimal Reproducible Demo\n\nCreate an example on [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM), [Codesandbox](https://codesandbox.io/s/mystifying-bash-2uthz), which will make it easier for others to reproduce your problem.\n\nThe example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See [How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) for a more detailed description.\n\n### Determining if It's a Bug\n\n#### Report a Bug or Request a New Feature\n\nIf it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the [issue template](https://ecomfe.github.io/echarts-issue-helper/) to create a new issue and follow the prompts to describe it in detail.\n\n#### How-To Questions\n\nIf it's not a bug, but you don't know how to achieve something, try the <a href=\"https://stackoverflow.com\">stackoverflow.com</a>\n\nIf you don't get an answer, you can also send an email to the email group [dev@echarts.apache.org](mailto:dev@echarts.apache.org). In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.\n\n## Non-technical questions\n\nOther questions can be sent in English to the mail group [dev@echarts.apache.org](mailto:dev@echarts.apache.org).\n","dir":"/en/basics","path":"/en/basics/help","extension":".md","createdAt":"2021-07-24T08:39:19.734Z","updatedAt":"2021-07-24T08:46:55.955Z","meta":{"version":0,"revision":0,"created":1627897108365},"$loki":24},{"slug":"options","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/concepts","path":"/zh/concepts/options","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-06-04T12:26:37.934Z","meta":{"version":0,"revision":0,"created":1627897108367},"$loki":25},{"slug":"tooltip","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/concepts","path":"/zh/concepts/tooltip","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-06-04T12:26:37.934Z","meta":{"version":0,"revision":0,"created":1627897108368},"$loki":26},{"slug":"download","toc":[{"id":"installation","depth":2,"text":"Installation"},{"id":"use-from-github","depth":3,"text":"Use From GitHub"},{"id":"use-from-npm","depth":3,"text":"Use From npm"},{"id":"use-from-cdn","depth":3,"text":"Use From CDN"},{"id":"online-customization","depth":3,"text":"Online Customization"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"get-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#get-apache-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Get Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use From GitHub"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use From npm"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use From CDN"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Online Customization"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We'll go over each of these installation methods and the directory structure after download."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"installation"},"children":[{"type":"element","tag":"a","props":{"href":"#installation","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Installation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"use-from-github"},"children":[{"type":"element","tag":"a","props":{"href":"#use-from-github","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Use From GitHub"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can find links to each version on the "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/releases","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"release"}]},{"type":"text","value":" page of the "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"apache/echarts"}]},{"type":"text","value":" project. Click on the Source code in Assets at the bottom of the download page, and unzip the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" file in the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" directory to include the full ECharts functionality."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"use-from-npm"},"children":[{"type":"element","tag":"a","props":{"href":"#use-from-npm","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Use From npm"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"sh","line-highlights":"","file-name":""},"children":[{"type":"text","value":"npm install echarts --save\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See "},{"type":"element","tag":"a","props":{"href":"en/basics/import"},"children":[{"type":"text","value":"Introducing Apache ECharts in your project"}]},{"type":"text","value":" for details."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"use-from-cdn"},"children":[{"type":"element","tag":"a","props":{"href":"#use-from-cdn","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Use From CDN"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Recommend referencing "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts"}]},{"type":"text","value":" from jsDelivr."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"online-customization"},"children":[{"type":"element","tag":"a","props":{"href":"#online-customization","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Online Customization"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to introduce only some modules to reduce package size, you can use the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//builder.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts online customization"}]},{"type":"text","value":" function."}]}]},"text":"# 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 GitHub\n\nYou can find links to each version on the [release](https://github.com/apache/echarts/releases) page of the [apache/echarts](https://github.com/apache/echarts) project. Click on the Source code in Assets at the bottom of the download page, and unzip the `echarts.js` file in the `dist` directory to include the full ECharts functionality.\n\n### Use From npm\n\n```sh\nnpm install echarts --save\n```\n\nSee [Introducing Apache ECharts in your project](en/basics/import) for details.\n\n### Use From CDN\n\nRecommend referencing [echarts](https://www.jsdelivr.com/package/npm/echarts) from jsDelivr.\n\n### Online Customization\n\nIf you want to introduce only some modules to reduce package size, you can use the [ECharts online customization](https://echarts.apache.org//builder.html) function.\n","dir":"/en/basics","path":"/en/basics/download","extension":".md","createdAt":"2021-07-28T08:09:09.439Z","updatedAt":"2021-07-28T08:09:09.440Z","meta":{"version":0,"revision":0,"created":1627897108382},"$loki":27},{"slug":"series","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/concepts","path":"/zh/concepts/series","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-06-04T12:26:37.934Z","meta":{"version":0,"revision":0,"created":1627897108383},"$loki":28},{"slug":"import","toc":[{"id":"npm-installation-of-echarts","depth":2,"text":"NPM Installation of ECharts"},{"id":"introduce-echarts","depth":2,"text":"Introduce ECharts"},{"id":"importing-required-charts-and-components-to-have-minimal-bundle","depth":2,"text":"Importing Required Charts and Components to Have Minimal Bundle."},{"id":"minimal-option-type-in-typescript","depth":2,"text":"Minimal Option Type in TypeScript"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"use-apache-echarts-with-bundler-and-npm"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#use-apache-echarts-with-bundler-and-npm","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Use Apache ECharts with bundler and NPM"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If your development environment uses a package management tool like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yarn"}]},{"type":"text","value":" and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" via treeshaking."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"npm-installation-of-echarts"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#npm-installation-of-echarts","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"NPM Installation of ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can install ECharts via npm using the following command"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"shell","line-highlights":"","file-name":""},"children":[{"type":"text","value":"npm install echarts --save\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"introduce-echarts"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#introduce-echarts","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Introduce ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n\n// initialize the echarts instance\nvar myChart = echarts.init(document.getElementById('main'));\n// Draw the chart\nmyChart.setOption({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"importing-required-charts-and-components-to-have-minimal-bundle"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#importing-required-charts-and-components-to-have-minimal-bundle","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Importing Required Charts and Components to Have Minimal Bundle."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffix\nimport { BarChart } from 'echarts/charts';\n// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// The next step is the same as before, initialize the chart and set the configuration items\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVGRenderer"}]},{"type":"text","value":" as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":" module, which is not needed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The \"Full Code\" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"minimal-option-type-in-typescript"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#minimal-option-type-in-typescript","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Minimal Option Type in TypeScript"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"EChartsOption"}]},{"type":"text","value":" type. This stricter type can effectively help you check for missing components or charts."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\nimport {\n BarChart,\n // The series types are defined with the SeriesOption suffix\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // The component types are defined with the suffix ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Combine an Option type with only required components and charts via ComposeOption\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n"}]}]}]},"text":"# 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## NPM Installation of ECharts\n\nYou can install ECharts via npm using the following command\n\n```shell\nnpm install echarts --save\n```\n\n## Introduce ECharts\n\n```js\nimport * as echarts from 'echarts';\n\n// initialize the echarts instance\nvar myChart = echarts.init(document.getElementById('main'));\n// Draw the chart\nmyChart.setOption({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n```\n\n## Importing Required Charts and Components to Have Minimal Bundle.\n\nThe above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.\n\n```js\n// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffix\nimport { BarChart } from 'echarts/charts';\n// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// The next step is the same as before, initialize the chart and set the configuration items\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n```\n\n> Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import `CanvasRenderer` or `SVGRenderer` as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the `CanvasRenderer` module, which is not needed.\n\nThe \"Full Code\" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.\n\n## Minimal Option Type in TypeScript\n\nFor developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal `EChartsOption` type. This stricter type can effectively help you check for missing components or charts.\n\n```ts\nimport * as echarts from 'echarts/core';\nimport {\n BarChart,\n // The series types are defined with the SeriesOption suffix\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // The component types are defined with the suffix ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Combine an Option type with only required components and charts via ComposeOption\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n```\n","dir":"/en/basics","path":"/en/basics/import","extension":".md","createdAt":"2021-07-24T08:50:13.334Z","updatedAt":"2021-07-24T08:53:38.084Z","meta":{"version":0,"revision":0,"created":1627897108403},"$loki":29},{"slug":"inspiration","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"get-inspired"},"children":[{"type":"element","tag":"a","props":{"href":"#get-inspired","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Get Inspired"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following list provides some ideas when you have a question \"I don't know how to design a chart\" or \"I don't know how to use Apache ECharts to achieve a certain effect\"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Apache ECharts Official Examples"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\"Applications - Common Charts\" in this handbook"}]},{"type":"text","value":"\n"}]}]},"text":"# 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](https://echarts.apache.org//examples)\n- \"Applications - Common Charts\" in this handbook\n","dir":"/en/basics","path":"/en/basics/inspiration","extension":".md","createdAt":"2021-07-24T08:47:14.252Z","updatedAt":"2021-07-24T08:53:01.555Z","meta":{"version":0,"revision":0,"created":1627897108409},"$loki":30},{"slug":"aria","toc":[{"id":"overall-description-modification","depth":2,"text":"Overall Description Modification"},{"id":"customize-template-description","depth":2,"text":"Customize Template Description"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"web-accessibility"},"children":[{"type":"element","tag":"a","props":{"href":"#web-accessibility","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Web Accessibility"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/intro/aria","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WAI-ARIA"}]},{"type":"text","value":", the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Accessibility function was turn off by default, turn it on by define the value of "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.show"}]},{"type":"text","value":" as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":". ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"About the configuration item:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n aria: {\n show: true\n },\n title: {\n text: 'Referrer of a User',\n x: 'center'\n },\n series: [\n {\n name: 'Referrer',\n type: 'pie',\n data: [\n { value: 335, name: 'Direct Visit' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Union Ad' },\n { value: 135, name: 'Video Ad' },\n { value: 1548, name: 'Search Engine' }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-pie"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There will be an "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"area-label"}]},{"type":"text","value":" attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"null","line-highlights":"","file-name":""},"children":[{"type":"text","value":"This is a chart about \"Referrer of a User\" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"overall-description-modification"},"children":[{"type":"element","tag":"a","props":{"href":"#overall-description-modification","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Overall Description Modification"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Under this circumstance, user can define the overall description by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.description","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":" configuration item."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customize-template-description"},"children":[{"type":"element","tag":"a","props":{"href":"#customize-template-description","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customize Template Description"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The basic process to generate a description: If "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.show"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", then generate the ARIA description (otherwise, no.). If "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.description","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":" was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":" to cover the default if needed."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While using the template to generate, firstly make sure whether the title "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#title.text","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"title.text"}]},{"type":"text","value":" exist to decide to use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.general.withTitle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.general.withoutTitle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.general.withoutTitle"}]},{"type":"text","value":" as the overall description. Configuration item "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'{title}'"}]},{"type":"text","value":" will be replaced by the chart title. In another word, if "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" was defined as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"This is a chart about \"{title}\""}]},{"type":"text","value":", and the title is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Prize Distribution Chart'"}]},{"type":"text","value":", the description of this part will be "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'This is a chart about \"Prize Distribution Chart\"'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The complete process of generating description, please check: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ARIA Document"}]},{"type":"text","value":"."}]}]},"text":"# 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. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.\n\nThe Accessibility function was turn off by default, turn it on by define the value of [aria.show](https://echarts.apache.org/option.html#aria.show) as `true`. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.\n\nAbout the configuration item:\n\n```js\noption = {\n aria: {\n show: true\n },\n title: {\n text: 'Referrer of a User',\n x: 'center'\n },\n series: [\n {\n name: 'Referrer',\n type: 'pie',\n data: [\n { value: 335, name: 'Direct Visit' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Union Ad' },\n { value: 135, name: 'Video Ad' },\n { value: 1548, name: 'Search Engine' }\n ]\n }\n ]\n};\n```\n\n<md-example src=\"doc-example/aria-pie\"></md-example>\n\nThere will be an `area-label` attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:\n\n```\nThis is a chart about \"Referrer of a User\" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n```\n\n## Overall Description Modification\n\nFor some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.\n\nUnder this circumstance, user can define the overall description by [aria.description](https://echarts.apache.org/option.html#aria.description) configuration item.\n\n## Customize Template Description\n\nExcept for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.\n\nThe basic process to generate a description: If [aria.show](https://echarts.apache.org/option.html#aria.show) is `true`, then generate the ARIA description (otherwise, no.). If [aria.description](https://echarts.apache.org/option.html#aria.description) was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use `aria.description` to cover the default if needed.\n\nWhile using the template to generate, firstly make sure whether the title [title.text](https://echarts.apache.org/option.html#title.text) exist to decide to use [aria.general.withTitle](https://echarts.apache.org/option.html#aria.general.withTitle) or [aria.general.withoutTitle](https://echarts.apache.org/option.html#aria.general.withoutTitle) as the overall description. Configuration item `aria.general.withTitle` and `'{title}'` will be replaced by the chart title. In another word, if `aria.general.withTitle` was defined as `This is a chart about \"{title}\"`, and the title is `'Prize Distribution Chart'`, the description of this part will be `'This is a chart about \"Prize Distribution Chart\"'`.\n\nAfter generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.\n\nThe complete process of generating description, please check: [ARIA Document](https://echarts.apache.org/option.html#aria).\n","dir":"/en/best-practice","path":"/en/best-practice/aria","extension":".md","createdAt":"2021-06-04T12:26:37.915Z","updatedAt":"2021-07-21T09:55:26.921Z","meta":{"version":0,"revision":0,"created":1627897108429},"$loki":31},{"slug":"canvas-vs-svg","toc":[{"id":"how-to-choose-a-renderer","depth":2,"text":"How to Choose a Renderer?"},{"id":"how-to-use-the-renderer","depth":2,"text":"How to Use the Renderer"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"render-with-svg-or-canvas"},"children":[{"type":"element","tag":"a","props":{"href":"#render-with-svg-or-canvas","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Render with SVG or Canvas"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/releases","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts v4.0"}]},{"type":"text","value":" was released, ECharts provided the SVG render as an additional option. You can specify the "},{"type":"element","tag":"a","props":{"href":"http://echarts.baidu.com/api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"renderer parameter"}]},{"type":"text","value":" as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'canvas'"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'svg'"}]},{"type":"text","value":" while initializing a chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/zrender","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ZRender"}]},{"type":"text","value":". It formed an interchangeable SVG renderer and Canvas renderer."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"how-to-choose-a-renderer"},"children":[{"type":"element","tag":"a","props":{"href":"#how-to-choose-a-renderer","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"How to Choose a Renderer?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"effect"}]},{"type":"text","value":". However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"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 "},{"type":"element","tag":"a","props":{"href":"https://ecomfe.github.io/echarts-liquidfill/example/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"LiquidFill chart"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"For larger amounts of data (>1k is an experience value), canvas renderer is always recommended."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We strongly welcome "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/new","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"feedback"}]},{"type":"text","value":" from developers on their experiences and scenarios to help us make better optimizations."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: Currently, some special rendering still relies on Canvas: e.g. "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-lines.effect","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"trail effect"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples/editor.html?c=heatmap-bmap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"heatmap with blending effect"}]},{"type":"text","value":", etc."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"how-to-use-the-renderer"},"children":[{"type":"element","tag":"a","props":{"href":"#how-to-use-the-renderer","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"How to Use the Renderer"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts"}]},{"type":"text","value":" is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are using treeshakable import as described in "},{"type":"element","tag":"a","props":{"href":"en/basics/import"},"children":[{"type":"text","value":"Introducing Apache ECharts in your project"}]},{"type":"text","value":", you will need to import the required renderers manually"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\n// You can use only the renderers you need\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Then, we can "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html/api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"pass in the parameter"}]},{"type":"text","value":" when initializing the chart instance in code to select the renderer."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Use the Canvas renderer (default)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// Equivalent to.\nvar chart = echarts.init(containerDom);\n\n// using the SVG renderer\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n"}]}]}]},"text":"# 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. Since [ECharts v4.0](https://github.com/apache/echarts/releases) was released, ECharts provided the SVG render as an additional option. You can specify the [renderer parameter](http://echarts.baidu.com/api.html#echarts.init) as `'canvas'` or `'svg'` while initializing a chart.\n\n> SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library [ZRender](https://github.com/ecomfe/zrender). It formed an interchangeable SVG renderer and Canvas renderer.\n\n## How to Choose a Renderer?\n\nGenerally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual [effect](https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect). However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.\n\nThe choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.\n\n- In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.\n- In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n - 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 [LiquidFill chart](https://ecomfe.github.io/echarts-liquidfill/example/).\n - For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.\n\nWe strongly welcome [feedback](https://github.com/apache/echarts/issues/new) from developers on their experiences and scenarios to help us make better optimizations.\n\nNote: Currently, some special rendering still relies on Canvas: e.g. [trail effect](https://echarts.apache.org/option.html#series-lines.effect), [heatmap with blending effect](https://echarts.apache.org//examples/editor.html?c=heatmap-bmap), etc.\n\n## How to Use the Renderer\n\nIf `echarts` is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer\n\n```js\nimport * as echarts from 'echarts';\n```\n\nIf you are using treeshakable import as described in [Introducing Apache ECharts in your project](en/basics/import), you will need to import the required renderers manually\n\n```js\nimport * as echarts from 'echarts/core';\n// You can use only the renderers you need\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n```\n\nThen, we can [pass in the parameter](https://echarts.apache.org//api.html/api.html#echarts.init) when initializing the chart instance in code to select the renderer.\n\n```js\n// Use the Canvas renderer (default)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// Equivalent to.\nvar chart = echarts.init(containerDom);\n\n// using the SVG renderer\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n```\n","dir":"/en/best-practice","path":"/en/best-practice/canvas-vs-svg","extension":".md","createdAt":"2021-06-04T12:26:37.915Z","updatedAt":"2021-07-21T10:03:29.001Z","meta":{"version":0,"revision":0,"created":1627897108464},"$loki":32},{"slug":"axis","toc":[{"id":"x-axis-y-axis","depth":2,"text":"x-axis, y-axis"},{"id":"axis-line","depth":2,"text":"Axis Line"},{"id":"tick","depth":2,"text":"Tick"},{"id":"label","depth":2,"text":"Label"},{"id":"example","depth":2,"text":"Example"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"axis"},"children":[{"type":"element","tag":"a","props":{"href":"#axis","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Axis"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The x/y-axis in the Cartesian coordinate system."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"x-axis-y-axis"},"children":[{"type":"element","tag":"a","props":{"href":"#x-axis-y-axis","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"x-axis, y-axis"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/axis/charts_axis_img02.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: \"Sales Time\", \"Sales Location\" and \"product name\", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as \"Sales Quantity\" and \"Sales Price\"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When x-axis has a large span, we can use the zoom method to display part of the data in the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n dataZoom: []\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.offset","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"offset"}]},{"type":"text","value":" to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n {\n type: 'value',\n name: 'Sales Price'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"axis-line"},"children":[{"type":"element","tag":"a","props":{"href":"#axis-line","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Axis Line"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts provide the config of "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisLine","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisLine"}]},{"type":"text","value":". You can change the setting according to the demand, such as the arrow on two sides and the style of axes."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"tick"},"children":[{"type":"element","tag":"a","props":{"href":"#tick","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Tick"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts provide the config "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisTick","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisTick"}]},{"type":"text","value":". You can change the setting according to the demand, such as the length of ticks, and the style of ticks."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"label"},"children":[{"type":"element","tag":"a","props":{"href":"#label","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Label"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts provide the config "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisLabel","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisLabel"}]},{"type":"text","value":". You can change the setting according to the demand, such as the text alignment and the customized label content."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} ¥',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"example"},"children":[{"type":"element","tag":"a","props":{"href":"#example","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Example"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n axisLabel: {\n rotate: 30\n },\n data: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'Precipitation',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: 'Temperature',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: 'Precipitation',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: 'Temperature',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These are the concise intro of the usage of axis config. Check more details at: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Official Website"}]},{"type":"text","value":"."}]}]},"text":"# 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 and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:\n\n```js\noption = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n // ...\n};\n```\n\nThe x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: \"Sales Time\", \"Sales Location\" and \"product name\", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as \"Sales Quantity\" and \"Sales Price\".\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n }\n // ...\n};\n```\n\nWhen x-axis has a large span, we can use the zoom method to display part of the data in the chart.\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n dataZoom: []\n // ...\n};\n```\n\nIn two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config [offset](https://echarts.apache.org/option.html#xAxis.offset) to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n {\n type: 'value',\n name: 'Sales Price'\n // ...\n }\n ]\n // ...\n};\n```\n\n## Axis Line\n\nECharts provide the config of [axisLine](https://echarts.apache.org/option.html#xAxis.axisLine). You can change the setting according to the demand, such as the arrow on two sides and the style of axes.\n\n```js\noption = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## Tick\n\nECharts provide the config [axisTick](https://echarts.apache.org/option.html#xAxis.axisTick). You can change the setting according to the demand, such as the length of ticks, and the style of ticks.\n\n```js\noption = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## Label\n\nECharts provide the config [axisLabel](https://echarts.apache.org/option.html#xAxis.axisLabel). You can change the setting according to the demand, such as the text alignment and the customized label content.\n\n```js\noption = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} ¥',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n```\n\n## Example\n\nThe y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.\n\n```js [live]\noption = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n axisLabel: {\n rotate: 30\n },\n data: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'Precipitation',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: 'Temperature',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: 'Precipitation',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: 'Temperature',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n```\n\nThese are the concise intro of the usage of axis config. Check more details at: [Official Website](https://echarts.apache.org/option.html#xAxis).\n","dir":"/en/concepts","path":"/en/concepts/axis","extension":".md","createdAt":"2021-06-04T12:26:37.918Z","updatedAt":"2021-07-29T06:23:03.234Z","meta":{"version":0,"revision":0,"created":1627897108488},"$loki":33},{"slug":"chart-size","toc":[{"id":"initialization","depth":2,"text":"Initialization"},{"id":"define-a-parent-container-in-html","depth":3,"text":"Define a Parent Container in HTML"},{"id":"specify-the-chart-size","depth":3,"text":"Specify the chart size"},{"id":"reactive-of-the-container-size","depth":2,"text":"Reactive of the Container Size"},{"id":"listen-to-the-container-size-to-change-the-chart-size","depth":3,"text":"Listen to the Container Size to Change the Chart Size"},{"id":"state-a-specific-chart-size","depth":3,"text":"State a Specific Chart Size"},{"id":"dispose-and-rebuild-of-the-container-node","depth":3,"text":"Dispose and Rebuild of the Container Node"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"chart-container-and-size"},"children":[{"type":"element","tag":"a","props":{"href":"#chart-container-and-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Chart Container and Size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"a","props":{"href":"en/get-started"},"children":[{"type":"text","value":"Get Started"}]},{"type":"text","value":", we introduced the API to initialize the ECharts "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.init"}]}]},{"type":"text","value":". "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"API Document"}]},{"type":"text","value":" has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Refer to several common usage scenarios, here is the example to initialize a chart and change the size."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"initialization"},"children":[{"type":"element","tag":"a","props":{"href":"#initialization","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Initialization"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"define-a-parent-container-in-html"},"children":[{"type":"element","tag":"a","props":{"href":"#define-a-parent-container-in-html","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Define a Parent Container in HTML"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In general, you need to define a "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<div>"}]},{"type":"text","value":" node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opts.width"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opts.height"}]},{"type":"text","value":", the size of the chart will default to the size of the node."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To be noticed, before calling "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":", you need to make sure the container already has width and height."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"specify-the-chart-size"},"children":[{"type":"element","tag":"a","props":{"href":"#specify-the-chart-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Specify the chart size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'), null, {\n width: 600,\n height: 400\n });\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"reactive-of-the-container-size"},"children":[{"type":"element","tag":"a","props":{"href":"#reactive-of-the-container-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Reactive of the Container Size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"listen-to-the-container-size-to-change-the-chart-size"},"children":[{"type":"element","tag":"a","props":{"href":"#listen-to-the-container-size-to-change-the-chart-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Listen to the Container Size to Change the Chart Size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In some cases, we want to accordingly change the chart size while the size of containers changed."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can listen to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"window.onresize"}]},{"type":"text","value":" of the site to catch the event that the browser is resized. Then use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.resize","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.resize"}]}]},{"type":"text","value":" to resize the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n window.onresize = function() {\n myChart.resize();\n };\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"state-a-specific-chart-size"},"children":[{"type":"element","tag":"a","props":{"href":"#state-a-specific-chart-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"State a Specific Chart Size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Except for calling "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"resize()"}]},{"type":"text","value":" without parameters, you can state the height and width to implement the chart size different from the size of the container."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.resize({\n width: 800,\n height: 400\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"**Tips: ** Pay attention to how the API defined while reading the file. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"resize()"}]},{"type":"text","value":" API was sometimes mistaken for the form like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myCharts.resize(800, 400)"}]},{"type":"text","value":" which do not exist."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"dispose-and-rebuild-of-the-container-node"},"children":[{"type":"element","tag":"a","props":{"href":"#dispose-and-rebuild-of-the-container-node","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dispose and Rebuild of the Container Node"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The correct way is, call "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.dispose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.dispose"}]}]},{"type":"text","value":" to dispose the instance after the container was disposed, and call "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":" to initialize after the container was added again."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"**Tips: ** Call "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.dispose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.dispose"}]}]},{"type":"text","value":" to release resources while disposing the node to avoid memory leaks."}]},{"type":"text","value":"\n"}]}]},"text":"# Chart Container and Size\n\nIn [Get Started](en/get-started), we introduced the API to initialize the ECharts [`echarts.init`](https://echarts.apache.org//api.html#echarts.init). [API Document](https://echarts.apache.org//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 common usage scenarios, here is the example to initialize a chart and change the size.\n\n## Initialization\n\n### Define a Parent Container in HTML\n\nIn general, you need to define a `<div>` node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring `opts.width` or `opts.height`, the size of the chart will default to the size of the node.\n\n```html\n<div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n</script>\n```\n\nTo be noticed, before calling `echarts.init`, you need to make sure the container already has width and height.\n\n### Specify the chart size\n\nIf the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.\n\n```html\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'), null, {\n width: 600,\n height: 400\n });\n</script>\n```\n\n## Reactive of the Container Size\n\n### Listen to the Container Size to Change the Chart Size\n\nIn some cases, we want to accordingly change the chart size while the size of containers changed.\n\nFor instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.\n\nYou can listen to `window.onresize` of the site to catch the event that the browser is resized. Then use [`echartsInstance.resize`](https://echarts.apache.org/api.html#echartsInstance.resize) to resize the chart.\n\n```html\n<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n window.onresize = function() {\n myChart.resize();\n };\n</script>\n```\n\n### State a Specific Chart Size\n\nExcept for calling `resize()` without parameters, you can state the height and width to implement the chart size different from the size of the container.\n\n```js\nmyChart.resize({\n width: 800,\n height: 400\n});\n```\n\n> **Tips: ** Pay attention to how the API defined while reading the file. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.\n\n### Dispose and Rebuild of the Container Node\n\nWe assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.\n\nEssentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.\n\nThe correct way is, call [`echartsInstance.dispose`](https://echarts.apache.org/api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](https://echarts.apache.org//api.html#echarts.init) to initialize after the container was added again.\n\n> **Tips: ** Call [`echartsInstance.dispose`](https://echarts.apache.org/api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.\n","dir":"/en/concepts","path":"/en/concepts/chart-size","extension":".md","createdAt":"2021-06-04T12:26:37.918Z","updatedAt":"2021-07-29T06:25:53.259Z","meta":{"version":0,"revision":0,"created":1627897108518},"$loki":34},{"slug":"legend","toc":[{"id":"layout","depth":2,"text":"Layout"},{"id":"style","depth":2,"text":"Style"},{"id":"interactive","depth":2,"text":"Interactive"},{"id":"tips","depth":2,"text":"Tips"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"legend"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#legend","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Legend"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"layout"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#layout","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Layout"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use scrollable control if there are many legends."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"style"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#style","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Style"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For dark color background, use a light color for the background layer and text while changing the background to translucent."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The color of legend has many ways to design. For different charts, the legend style can be different."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"80%","height":"80%","src":"images/design/legend/charts_sign_img04.png"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"interactive"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#interactive","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Interactive"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n selected: {\n 'Legend A': true,\n 'Legend B': true,\n 'Legend C': false\n }\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"tips"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#tips","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Tips"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: [\n {\n name: 'Legend A',\n icon: 'rect'\n },\n {\n name: 'Legend B',\n icon: 'circle'\n },\n {\n name: 'Legend C',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: 'Legend A'\n // ...\n },\n {\n name: 'Legend B'\n // ...\n },\n {\n name: 'Legend C'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While there is only one kind of data in the chart, use the chart title rather than the legend to explain it."}]}]},"text":"# 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 need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:\n\n```js [live]\noption = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\nUse scrollable control if there are many legends.\n\n```js\noption = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']\n // ...\n }\n // ...\n};\n```\n\n## Style\n\nFor dark color background, use a light color for the background layer and text while changing the background to translucent.\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\nThe color of legend has many ways to design. For different charts, the legend style can be different.\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## Interactive\n\nDepend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n selected: {\n 'Legend A': true,\n 'Legend B': true,\n 'Legend C': false\n }\n // ...\n }\n // ...\n};\n```\n\n## Tips\n\nThe legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.\n\n```js\noption = {\n legend: {\n data: [\n {\n name: 'Legend A',\n icon: 'rect'\n },\n {\n name: 'Legend B',\n icon: 'circle'\n },\n {\n name: 'Legend C',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: 'Legend A'\n // ...\n },\n {\n name: 'Legend B'\n // ...\n },\n {\n name: 'Legend C'\n // ...\n }\n ]\n // ...\n};\n```\n\nWhile there is only one kind of data in the chart, use the chart title rather than the legend to explain it.\n","dir":"/en/concepts","path":"/en/concepts/legend","extension":".md","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-29T06:23:03.268Z","meta":{"version":0,"revision":0,"created":1627897108529},"$loki":35},{"slug":"event","toc":[{"id":"handling-the-mouse-events","depth":2,"text":"Handling the Mouse Events"},{"id":"event-of-component-interaction","depth":2,"text":"Event of Component Interaction"},{"id":"writing-code-to-trigger-component-action-manually","depth":2,"text":"Writing Code to Trigger Component Action Manually"},{"id":"listen-to-events-on-the-blank-area","depth":2,"text":"Listen to Events on the Blank Area"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"event-and-action"},"children":[{"type":"element","tag":"a","props":{"href":"#event-and-action","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Event and Action"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"click"}]},{"type":"text","value":" event."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(params) {\n // Print name in console\n console.log(params.name);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#events.legendselectchanged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'legendselectchanged'"}]},{"type":"text","value":" triggered while changing the legend selected (please notice that "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"legendselected"}]},{"type":"text","value":" won't be triggered in this situation), "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#events.legendselectchanged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'datazoom'"}]},{"type":"text","value":" triggered while zooming the data area."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"handling-the-mouse-events"},"children":[{"type":"element","tag":"a","props":{"href":"#handling-the-mouse-events","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Handling the Mouse Events"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts support general mouse events: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'click'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'dblclick'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mousedown'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mousemove'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseup'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseover'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseout'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'globalout'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'contextmenu'"}]},{"type":"text","value":". This is an example of opening the search result page after clicking the bar chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n// Config\nvar option = {\n xAxis: {\n data: [\n 'Shirt',\n 'Wool sweater',\n 'Chiffon shirt',\n 'Pants',\n 'High-heeled shoes',\n 'socks'\n ]\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// Use the option and data to display the chart\nmyChart.setOption(option);\n// Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https://www.google.com/search?q=' + encodeURIComponent(params.name)\n );\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All mouse events included "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"params"}]},{"type":"text","value":" which contained the data of the object."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Format:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type EventParams = {\n // The component name clicked,\n // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n // the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n // series name, works when componentType is 'series'.\n seriesName: string,\n // name of data (categories).\n name: string,\n // the index in 'data' array.\n dataIndex: number,\n // incoming raw data item\n data: Object,\n // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n // most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n // incoming data value\n value: number | Array,\n // color of the shape, works when componentType is 'series'.\n color: string\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Identify where the mouse clicked."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // Clicked on the markPoint\n if (params.seriesIndex === 5) {\n // clicked on the markPoint of the series with index = 5\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked at the edge of graph.\n } else {\n // clicked at the node of graph.\n }\n }\n }\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"query"}]},{"type":"text","value":" to trigger callback of the specified component:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.on(eventName, query, handler);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"query"}]},{"type":"text","value":" can be "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Object"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If it is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":", the format can be "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mainType"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mainType.subType"}]},{"type":"text","value":", such as:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If it is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Object"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"query"}]},{"type":"text","value":" can include more than one attribute:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"{\n ${mainType}Index: number // component index\n ${mainType}Name: string // component name\n ${mainType}Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // date item type, such as 'node', 'edge'\n element: string // name of element in custom series.\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Such as:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // when elements in series named 'uuu' triggered 'mouseover'\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // call this method while the edge of graph was clicked.\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // when data named 'my_el' triggered 'mouseup'.\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"event-of-component-interaction"},"children":[{"type":"element","tag":"a","props":{"href":"#event-of-component-interaction","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Event of Component Interaction"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#events","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"events"}]},{"type":"text","value":" document."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of listening to legend event:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Show/hide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n // State if legend is selected.\n var isSelected = params.selected[params.name];\n // print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n // print for all legends.\n console.log(params.selected);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"writing-code-to-trigger-component-action-manually"},"children":[{"type":"element","tag":"a","props":{"href":"#writing-code-to-trigger-component-action-manually","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Writing Code to Trigger Component Action Manually"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can trigger events such as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'legendselectchanged'"}]},{"type":"text","value":" not only by the user but also with code manually. It can be used to display the tooltip, select the legend."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.dispatchAction({ type: '' })"}]},{"type":"text","value":" is used to trigger the behavior. This manages all actions and can record the behaviors conveniently."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Commonly used behavior and corresponding parameters are listed in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#action","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"action"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following example shows how to highlight each sector one by one in the pie chart using "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dispatchAction"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: [\n 'Direct Access',\n 'Email Marketing',\n 'Affiliate Ads',\n 'Video Ads',\n 'Search Engines'\n ]\n },\n series: [\n {\n name: 'Access Source',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct Access' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Affiliate Ads' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"listen-to-events-on-the-blank-area"},"children":[{"type":"element","tag":"a","props":{"href":"#listen-to-events-on-the-blank-area","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Listen to Events on the Blank Area"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.getZr().on('click', function(event) {\n // This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n // This listener is listening to a `echarts event`.\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having zrender events, we can implement listen to events from the blank as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.getZr().on('click', function(event) {\n // No \"target\" means that mouse/pointer is not on\n // any of the graphic elements, which is \"blank\".\n if (!event.target) {\n // Click on blank. Do something.\n }\n});\n"}]}]}]},"text":"# 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('click', function(params) {\n // Print name in console\n console.log(params.name);\n});\n```\n\nThere are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as ['legendselectchanged'](https://echarts.apache.org/api.html#events.legendselectchanged) triggered while changing the legend selected (please notice that `legendselected` won't be triggered in this situation), ['datazoom'](https://echarts.apache.org/api.html#events.legendselectchanged) triggered while zooming the data area.\n\n## Handling the Mouse Events\n\nECharts support general mouse events: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. This is an example of opening the search result page after clicking the bar chart.\n\n```js\n// Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n// Config\nvar option = {\n xAxis: {\n data: [\n 'Shirt',\n 'Wool sweater',\n 'Chiffon shirt',\n 'Pants',\n 'High-heeled shoes',\n 'socks'\n ]\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// Use the option and data to display the chart\nmyChart.setOption(option);\n// Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https://www.google.com/search?q=' + encodeURIComponent(params.name)\n );\n});\n```\n\nAll mouse events included `params` which contained the data of the object.\n\nFormat:\n\n```js\ntype EventParams = {\n // The component name clicked,\n // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n // the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n // series name, works when componentType is 'series'.\n seriesName: string,\n // name of data (categories).\n name: string,\n // the index in 'data' array.\n dataIndex: number,\n // incoming raw data item\n data: Object,\n // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n // most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n // incoming data value\n value: number | Array,\n // color of the shape, works when componentType is 'series'.\n color: string\n};\n```\n\nIdentify where the mouse clicked.\n\n```js\nmyChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // Clicked on the markPoint\n if (params.seriesIndex === 5) {\n // clicked on the markPoint of the series with index = 5\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked at the edge of graph.\n } else {\n // clicked at the node of graph.\n }\n }\n }\n});\n```\n\nUse `query` to trigger callback of the specified component:\n\n```js\nchart.on(eventName, query, handler);\n```\n\n`query` can be `string` or `Object`.\n\nIf it is `string`, the format can be `mainType` or `mainType.subType`, such as:\n\n```js\nchart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n```\n\nIf it is `Object`, `query` can include more than one attribute:\n\n```js\n{\n ${mainType}Index: number // component index\n ${mainType}Name: string // component name\n ${mainType}Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // date item type, such as 'node', 'edge'\n element: string // name of element in custom series.\n}\n```\n\nSuch as:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // when elements in series named 'uuu' triggered 'mouseover'\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // call this method while the edge of graph was clicked.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // when data named 'my_el' triggered 'mouseup'.\n});\n```\n\nYou can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:\n\n```js\nmyChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n```\n\n## Event of Component Interaction\n\nAll Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the [events](https://echarts.apache.org//api.html#events) document.\n\nHere is an example of listening to legend event:\n\n```js\n// Show/hide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n // State if legend is selected.\n var isSelected = params.selected[params.name];\n // print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n // print for all legends.\n console.log(params.selected);\n});\n```\n\n## Writing Code to Trigger Component Action Manually\n\nYou can trigger events such as `'legendselectchanged'` not only by the user but also with code manually. It can be used to display the tooltip, select the legend.\n\nIn ECharts `myChart.dispatchAction({ type: '' })` is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.\n\nCommonly used behavior and corresponding parameters are listed in [action](https://echarts.apache.org//api.html#action).\n\nThe following example shows how to highlight each sector one by one in the pie chart using `dispatchAction`.\n\n```js [live]\noption = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: [\n 'Direct Access',\n 'Email Marketing',\n 'Affiliate Ads',\n 'Video Ads',\n 'Search Engines'\n ]\n },\n series: [\n {\n name: 'Access Source',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct Access' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Affiliate Ads' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n```\n\n## Listen to Events on the Blank Area\n\nSometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.\n\nBefore we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.\n\n```js\nmyChart.getZr().on('click', function(event) {\n // This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n // This listener is listening to a `echarts event`.\n});\n```\n\nzrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.\n\nHaving zrender events, we can implement listen to events from the blank as follows:\n\n```js\nmyChart.getZr().on('click', function(event) {\n // No \"target\" means that mouse/pointer is not on\n // any of the graphic elements, which is \"blank\".\n if (!event.target) {\n // Click on blank. Do something.\n }\n});\n```\n","dir":"/en/concepts","path":"/en/concepts/event","extension":".md","createdAt":"2021-06-04T12:26:37.919Z","updatedAt":"2021-07-21T11:13:55.330Z","meta":{"version":0,"revision":0,"created":1627897108564},"$loki":36},{"slug":"style","toc":[{"id":"theme","depth":2,"text":"Theme"},{"id":"color-palette","depth":2,"text":"Color Palette"},{"id":"customize-style-explicitly-itemstyle-linestyle-areastyle-label-","depth":2,"text":"Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)"},{"id":"style-of-emphasis-state","depth":2,"text":"Style of Emphasis State"},{"id":"visual-encoding-by-visualmap-component","depth":2,"text":"Visual Encoding by visualMap Component"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"overview-of-style-customization"},"children":[{"type":"element","tag":"a","props":{"href":"#overview-of-style-customization","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Overview of Style Customization"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This article provides an overview of the different approaches about Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" style customization. For example, how to config the color, size, shadow of the graphic elements and labels."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The term \"style\" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Theme"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Color Palette"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visual encoding (visualMap component)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"theme"},"children":[{"type":"element","tag":"a","props":{"href":"#theme","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Theme"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Setting a theme is the simplest way to change the color style. For example, in "},{"type":"element","tag":"a","props":{"href":"$%7BwebsitePath%7D/examples/en/index.html"},"children":[{"type":"text","value":"Examples page"}]},{"type":"text","value":", we can switch to dark mode and see the result of a different theme."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In our project, we can switch to dark theme like:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var chart = echarts.init(dom, 'dark');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/en/theme-builder.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"theme builder"}]},{"type":"text","value":". Theme can also be created or edited in it. The downloaded theme can be used as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a theme is downloaded as a JSON file, we should register it by ourselves, for example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var xhr = new XMLHttpRequest();\n// Assume the theme name is \"vintage\".\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If a theme is downloaded as a JS file, it will auto register itself:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"color-palette"},"children":[{"type":"element","tag":"a","props":{"href":"#color-palette","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Color Palette"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n // Global palette:\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // A palette only work for the series:\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // A palette only work for the series:\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customize-style-explicitly-itemstyle-linestyle-areastyle-label-"},"children":[{"type":"element","tag":"a","props":{"href":"#customize-style-explicitly-itemstyle-linestyle-areastyle-label-","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is a common way to set style explicitly. Throughout ECharts "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"option"}]},{"type":"text","value":", style related options can be set in various place, including "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.label","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"label"}]},{"type":"text","value":", etc."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generally speaking, all of the built-in components and series follow the naming convention like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" etc, although they may occur in different place according to different series or components."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the following code we add shadow, gradient to bubble chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"style-of-emphasis-state"},"children":[{"type":"element","tag":"a","props":{"href":"#style-of-emphasis-state","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Style of Emphasis State"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.emphasis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" property. The options in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.emphasis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" is the same as the ones for normal state, for example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Notice: Before ECharts4, the emphasis style should be written like this:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The option format is still "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"compatible"}]},{"type":"text","value":", but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the \"normal\" term, which makes the option more simple and neat."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"visual-encoding-by-visualmap-component"},"children":[{"type":"element","tag":"a","props":{"href":"#visual-encoding-by-visualmap-component","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Visual Encoding by visualMap Component"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":" supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in "},{"type":"element","tag":"a","props":{"href":"~Visual%20Map%20of%20Data"},"children":[{"type":"text","value":"Visual Map of Data"}]},{"type":"text","value":"."}]}]},"text":"# 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 understand.\n\nThese approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.\n\n- Theme\n- Color Palette\n- Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)\n- Visual encoding (visualMap component)\n\n## Theme\n\nSetting a theme is the simplest way to change the color style. For example, in [Examples page](${websitePath}/examples/en/index.html), we can switch to dark mode and see the result of a different theme.\n\nIn our project, we can switch to dark theme like:\n\n```js\nvar chart = echarts.init(dom, 'dark');\n```\n\nOther themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the [theme builder](https://echarts.apache.org/en/theme-builder.html). Theme can also be created or edited in it. The downloaded theme can be used as follows:\n\nIf a theme is downloaded as a JSON file, we should register it by ourselves, for example:\n\n```js\nvar xhr = new XMLHttpRequest();\n// Assume the theme name is \"vintage\".\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n```\n\nIf a theme is downloaded as a JS file, it will auto register itself:\n\n```js\n// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n```\n\n## Color Palette\n\nColor palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.\n\n```js\noption = {\n // Global palette:\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // A palette only work for the series:\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // A palette only work for the series:\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n```\n\n## Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)\n\nIt is a common way to set style explicitly. Throughout ECharts [option](https://echarts.apache.org/option.html#), style related options can be set in various place, including [itemStyle](https://echarts.apache.org/option.html#series.itemStyle), [lineStyle](https://echarts.apache.org/option.html#series-line.lineStyle), [areaStyle](https://echarts.apache.org/option.html#series-line.areaStyle), [label](https://echarts.apache.org/option.html#series.label), etc.\n\nGenerally speaking, all of the built-in components and series follow the naming convention like `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, although they may occur in different place according to different series or components.\n\nIn the following code we add shadow, gradient to bubble chart.\n\n```js [live]\nvar data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n```\n\n## Style of Emphasis State\n\nWhen mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by [emphasis](https://echarts.apache.org/option.html#series-bar.emphasis) property. The options in [emphasis](https://echarts.apache.org/option.html#series-bar.emphasis) is the same as the ones for normal state, for example:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\nNotice: Before ECharts4, the emphasis style should be written like this:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\nThe option format is still **compatible**, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the \"normal\" term, which makes the option more simple and neat.\n\n## Visual Encoding by visualMap Component\n\n[visualMap component](https://echarts.apache.org/option.html#visualMap) supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in [Visual Map of Data](~Visual%20Map%20of%20Data).\n","dir":"/en/concepts","path":"/en/concepts/style","extension":".md","createdAt":"2021-07-21T15:14:22.805Z","updatedAt":"2021-07-21T15:32:05.243Z","meta":{"version":0,"revision":0,"created":1627897108595},"$loki":37},{"slug":"edit-guide","toc":[{"id":"adding-a-markdown-file","depth":2,"text":"Adding a Markdown File"},{"id":"using-prettier-to-automatically-format-code","depth":2,"text":"Using Prettier to Automatically Format Code"},{"id":"built-in-variables","depth":2,"text":"Built-in Variables"},{"id":"embedding-code","depth":2,"text":"Embedding Code"},{"id":"basic-usage","depth":3,"text":"Basic Usage"},{"id":"recommended-way-of-writing-code","depth":3,"text":"Recommended Way of Writing Code"},{"id":"live-preview-and-editing","depth":3,"text":"Live Preview and Editing"},{"id":"more-preview-layouts","depth":3,"text":"More Preview Layouts"},{"id":"highlighting-lines-of-code-and-adding-filenames","depth":3,"text":"Highlighting Lines of Code and Adding Filenames"},{"id":"embedding-images","depth":2,"text":"Embedding Images"},{"id":"set-the-image-height-and-width","depth":3,"text":"Set the Image Height and Width"},{"id":"add-example-iframe","depth":2,"text":"Add Example Iframe"},{"id":"add-link-to-option-item","depth":2,"text":"Add Link to Option Item"},{"id":"more-component-usage","depth":2,"text":"More Component Usage"},{"id":"md-alert","depth":3,"text":"md-alert"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"document-editing-guidelines"},"children":[{"type":"element","tag":"a","props":{"href":"#document-editing-guidelines","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Document Editing Guidelines"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"adding-a-markdown-file"},"children":[{"type":"element","tag":"a","props":{"href":"#adding-a-markdown-file","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Adding a Markdown File"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add a markdown file to the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/zh/"}]},{"type":"text","value":" (Chinese posts) or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/en/"}]},{"type":"text","value":" (English posts) directories, up to three levels. Update the path and title information in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/zh/posts.yml"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/en/posts.yml"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Lowercase markdown file names."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"using-prettier-to-automatically-format-code"},"children":[{"type":"element","tag":"a","props":{"href":"#using-prettier-to-automatically-format-code","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Using Prettier to Automatically Format Code"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Before you start, we recommend installing the "},{"type":"element","tag":"a","props":{"href":"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"prettier VSCode plugin"}]},{"type":"text","value":", which will automatically format the code for you when you save it."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":" from formatting the code inside the block"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!-- prettier-ignore-start -->\n<!-- prettier-ignore-end -->\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you find blocks of code that are not formatted, check first for syntax errors in the code."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"built-in-variables"},"children":[{"type":"element","tag":"a","props":{"href":"#built-in-variables","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Built-in Variables"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"optionPath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mainSitePath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"exampleViewPath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"exampleEditorPath"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usage:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"null","line-highlights":"","file-name":""},"children":[{"type":"text","value":"${xxxxx}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"embedding-code"},"children":[{"type":"element","tag":"a","props":{"href":"#embedding-code","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Embedding Code"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"basic-usage"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-usage","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Usage"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"recommended-way-of-writing-code"},"children":[{"type":"element","tag":"a","props":{"href":"#recommended-way-of-writing-code","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Recommended Way of Writing Code"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, the comment "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"..."}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"live-preview-and-editing"},"children":[{"type":"element","tag":"a","props":{"href":"#live-preview-and-editing","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Live Preview and Editing"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Currently only preview of Option code is supported"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```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\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"more-preview-layouts"},"children":[{"type":"element","tag":"a","props":{"href":"#more-preview-layouts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"More Preview Layouts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"left-to-right"},"children":[{"type":"element","tag":"a","props":{"href":"#left-to-right","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Left to Right"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-lr]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"right-to-left"},"children":[{"type":"element","tag":"a","props":{"href":"#right-to-left","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Right to left"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-rl]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"rl"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"down-to-up"},"children":[{"type":"element","tag":"a","props":{"href":"#down-to-up","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Down to Up"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-bt]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"bt"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"highlighting-lines-of-code-and-adding-filenames"},"children":[{"type":"element","tag":"a","props":{"href":"#highlighting-lines-of-code-and-adding-filenames","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Highlighting Lines of Code and Adding Filenames"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use."}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Effects."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"1,3-5","file-name":"option.js"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"embedding-images"},"children":[{"type":"element","tag":"a","props":{"href":"#embedding-images","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Embedding Images"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Source images are stored under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"static/images/"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"![image description](images/demo.png)\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"set-the-image-height-and-width"},"children":[{"type":"element","tag":"a","props":{"href":"#set-the-image-height-and-width","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Set the Image Height and Width"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For the temporary style of the current page, you can just write html."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<img src=\"images/demo.png\" style=\"width: 50px\" />\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"add-example-iframe"},"children":[{"type":"element","tag":"a","props":{"href":"#add-example-iframe","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Add Example Iframe"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":" is the string after "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"?c="}]},{"type":"text","value":" in the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=line-simple","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://echarts.apache.org/examples/en/editor.html?c=line-simple"}]},{"type":"text","value":" address"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Result:\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/getting-started","width":"100%","height":300},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"add-link-to-option-item"},"children":[{"type":"element","tag":"a","props":{"href":"#add-link-to-option-item","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Add Link to Option Item"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Use:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-option link=\"series-bar.itemStyle.color\"></md-option>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Result:\n"},{"type":"element","tag":"md-option","props":{"link":"series-bar.itemStyle.color"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"more-component-usage"},"children":[{"type":"element","tag":"a","props":{"href":"#more-component-usage","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"More Component Usage"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The documentation supports the use of globally registered "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"markdown"}]},{"type":"text","value":" components. In addition to the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"md-example"}]},{"type":"text","value":" component just described, the following components are also available"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"md-alert"},"children":[{"type":"element","tag":"a","props":{"href":"#md-alert","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"md-alert"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Prompt components"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"info"},"children":[{"type":"text","value":"\nThis is an info alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"success"},"children":[{"type":"text","value":"\nThis is a success alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"warning"},"children":[{"type":"text","value":"\nThis is a warning alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"danger"},"children":[{"type":"text","value":"\nThis is a danger alert.\n"}]}]},"text":"# 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, we recommend installing the [prettier VSCode plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), which will automatically format the code for you when you save it.\n\nIf you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent `prettier` from formatting the code inside the block\n\n```markdown\n<!-- prettier-ignore-start -->\n<!-- prettier-ignore-end -->\n```\n\nIf you find blocks of code that are not formatted, check first for syntax errors in the code.\n\n## Built-in Variables\n\n- `optionPath`\n- `mainSitePath`\n- `exampleViewPath`\n- `exampleEditorPath`\n\nUsage:\n\n```\n${xxxxx}\n```\n\n## Embedding Code\n\n### Basic Usage\n\n<!-- prettier-ignore-start -->\n\n```markdown\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n```\n\n<!-- prettier-ignore-end -->\n\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### Recommended Way of Writing Code\n\nIn order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.\n\nFor example, the comment `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### Live Preview and Editing\n\n> Currently only preview of Option code is supported\n\n<!-- prettier-ignore-start -->\n```markdown\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\\```\n```\n\n<!-- prettier-ignore-end -->\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```\n\n### More Preview Layouts\n\n#### Left to Right\n\n<!-- prettier-ignore-start -->\n\n```markdown\n```js [live-lr]\noption = {\n ...\n};\n\\```\n```\n\n<!-- prettier-ignore-end -->\n\n```js [live-lr]\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```\n\n#### Right to left\n\n<!-- prettier-ignore-start -->\n\n```markdown\n```js [live-rl]\noption = {\n ...\n};\n\\```\n```\n\n<!-- prettier-ignore-end -->\n\n```js [live-rl]\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```\n\n#### Down to Up\n\n<!-- prettier-ignore-start -->\n\n```markdown\n```js [live-bt]\noption = {\n ...\n};\n\\```\n```\n\n<!-- prettier-ignore-end -->\n\n```js [live-bt]\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```\n\n### Highlighting Lines of Code and Adding Filenames\n\nUse.\n\n<!-- prettier-ignore-start -->\n\n```markdown\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n```\n\n<!-- prettier-ignore-end -->\n\nEffects.\n\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## Embedding Images\n\nSource images are stored under `static/images/`.\n\n```markdown\n![image description](images/demo.png)\n```\n\n### Set the Image Height and Width\n\nFor the temporary style of the current page, you can just write html.\n\n```markdown\n<img src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## Add Example Iframe\n\n`src` is the string after `?c=` in the https://echarts.apache.org/examples/en/editor.html?c=line-simple address\n\nUse:\n\n```markdown\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n```\n\nResult:\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n\n## Add Link to Option Item\n\nUse:\n\n```markdown\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n```\n\nResult:\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n\n## More Component Usage\n\nThe documentation supports the use of globally registered `markdown` components. In addition to the `md-example` component just described, the following components are also available\n\n### md-alert\n\nPrompt components\n\n```markdown\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n","dir":"/en/meta","path":"/en/meta/edit-guide","extension":".md","createdAt":"2021-07-21T08:44:02.349Z","updatedAt":"2021-07-21T09:51:51.604Z","meta":{"version":0,"revision":0,"created":1627897108618},"$loki":38},{"slug":"visual-map","toc":[{"id":"data-and-dimension","depth":2,"text":"Data and Dimension"},{"id":"the-visualmap-component","depth":2,"text":"The visualMap Component"},{"id":"continuous-and-piecewise-visual-mapping-components","depth":2,"text":"Continuous and Piecewise Visual Mapping Components"},{"id":"continuous-visual-mapping","depth":3,"text":"Continuous Visual Mapping"},{"id":"piecewise-visual-mapping","depth":3,"text":"Piecewise Visual Mapping"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"visual-map-of-data"},"children":[{"type":"element","tag":"a","props":{"href":"#visual-map-of-data","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Visual Map of Data"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every type of charts in Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" has this built-in mapping procedure. For example, line chart map data into "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"lines"}]},{"type":"text","value":", bar chart map data into "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":". Some more complicated charts, like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graph"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"themeRiver"}]},{"type":"text","value":", and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"treemap"}]},{"type":"text","value":" have their own built-in mapping."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Besides, ECharts provides "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":" for general visual mapping. Visual elements allowed in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" component are:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbolSize"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opacity"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"colorAlpha"}]},{"type":"text","value":","}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"colorLightness"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"colorSaturation"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"colorHue"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Next, we are going to introduce how to use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" component."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"data-and-dimension"},"children":[{"type":"element","tag":"a","props":{"href":"#data-and-dimension","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Data and Dimension"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Data are usually stored in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions)."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" is the most common form, which is a "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"list"}]},{"type":"text","value":", a common array:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n data: [\n {\n // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ];\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n data: [\n {\n // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ];\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" is what you need. Most likely, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"scatter charts"}]},{"type":"text","value":" use radius to represent the third dimension."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"the-visualmap-component"},"children":[{"type":"element","tag":"a","props":{"href":"#the-visualmap-component","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"The visualMap Component"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"visualMap component defines the mapping from "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"which dimension of data"}]},{"type":"text","value":" to "},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"what visual elements"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following two types of visualMap components are supported, identified with "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.type","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.type"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Its structure is defined as:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n visualMap: [\n // can define multiple visualMap components at the same time\n {\n // the first visualMap component\n type: 'continuous' // defined as continuous visualMap\n // ...\n },\n {\n // the second visualMap component\n type: 'piecewise' // defined as discrete visualMap\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"continuous-and-piecewise-visual-mapping-components"},"children":[{"type":"element","tag":"a","props":{"href":"#continuous-and-piecewise-visual-mapping-components","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Continuous and Piecewise Visual Mapping Components"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The visual mapping component of ECharts is divided into continuous ("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-continuous","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMapContinuous"}]},{"type":"text","value":") and piecewise ("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMapPiecewise"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"continuous-visual-mapping"},"children":[{"type":"element","tag":"a","props":{"href":"#continuous-visual-mapping","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Continuous Visual Mapping"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped\n seriesIndex: 4, // The fourth series is mapped.\n inRange: {\n // The visual configuration in the selected range\n color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping\n // the minimum value of the data is mapped to 'blue', and\n // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.\n // The rest is automatically calculated linearly.\n symbolSize: [30, 100] // Defines the mapping range for the graphic size.\n // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.\n // The maximum value is mapped to 100.\n // The rest is calculated linearly automatically.\n },\n outOfRange: {\n // Check the out of range visual configuration\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"where "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.inRange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.inRange"}]},{"type":"text","value":" indicates the style used for data within the data mapping range; while "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.outOfRange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.outOfRange"}]},{"type":"text","value":" specifies the style for data outside the mapping range."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"~visualMap.dimension"},"children":[{"type":"text","value":"visualMap.dimension"}]},{"type":"text","value":" specifies which dimension of the data will be visually mapped."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"piecewise-visual-mapping"},"children":[{"type":"element","tag":"a","props":{"href":"#piecewise-visual-mapping","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Piecewise Visual Mapping"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The piecewise visual mapping component has three modes."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Continuous data average segmentation: based on "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.splitNumber"}]},{"type":"text","value":" to automatically split the data into pieces equally."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Continuous data custom segmentation: define the range of each piece based on "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.pieces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.pieces"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Discrete data (categorical data): categories are defined in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.categories","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.categories"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To use segmented visual map, you need to set "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'piecewise'"}]},{"type":"text","value":" and choose one of the above three configuration items."}]}]},"text":"# 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 complicated charts, like `graph`, `themeRiver`, and `treemap` have their own built-in mapping.\n\nBesides, ECharts provides [visualMap component](https://echarts.apache.org/option.html#visualMap) for general visual mapping. Visual elements allowed in `visualMap` component are:\n\n- `symbol`, `symbolSize`\n- `color`, `opacity`, `colorAlpha`,\n- `colorLightness`, `colorSaturation`, `colorHue`\n\nNext, we are going to introduce how to use `visualMap` component.\n\n## Data and Dimension\n\nData are usually stored in [series.data](https://echarts.apache.org/option.html#series.data) in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).\n\nFor example, [series.data](https://echarts.apache.org/option.html#series.data) is the most common form, which is a `list`, a common array:\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ];\n}\n```\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ];\n}\n```\n\nUsually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, `visualMap` is what you need. Most likely, [scatter charts](https://echarts.apache.org/option.html#series-scatter) use radius to represent the third dimension.\n\n## The visualMap Component\n\nvisualMap component defines the mapping from _which dimension of data_ to _what visual elements_.\n\nThe following two types of visualMap components are supported, identified with [visualMap.type](https://echarts.apache.org/option.html#visualMap.type).\n\nIts structure is defined as:\n\n```js\noption = {\n visualMap: [\n // can define multiple visualMap components at the same time\n {\n // the first visualMap component\n type: 'continuous' // defined as continuous visualMap\n // ...\n },\n {\n // the second visualMap component\n type: 'piecewise' // defined as discrete visualMap\n // ...\n }\n ]\n // ...\n};\n```\n\n## Continuous and Piecewise Visual Mapping Components\n\nThe visual mapping component of ECharts is divided into continuous ([visualMapContinuous](https://echarts.apache.org/option.html#visualMap-continuous)) and piecewise ([visualMapPiecewise](https://echarts.apache.org/option.html#visualMap-piecewise)).\n\nContinuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.\n\n### Continuous Visual Mapping\n\nContinuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.\n\n```js\noption = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped\n seriesIndex: 4, // The fourth series is mapped.\n inRange: {\n // The visual configuration in the selected range\n color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping\n // the minimum value of the data is mapped to 'blue', and\n // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.\n // The rest is automatically calculated linearly.\n symbolSize: [30, 100] // Defines the mapping range for the graphic size.\n // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.\n // The maximum value is mapped to 100.\n // The rest is calculated linearly automatically.\n },\n outOfRange: {\n // Check the out of range visual configuration\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n```\n\nwhere [visualMap.inRange](https://echarts.apache.org/option.html#visualMap.inRange) indicates the style used for data within the data mapping range; while [visualMap.outOfRange](https://echarts.apache.org/option.html#visualMap.outOfRange) specifies the style for data outside the mapping range.\n\n[visualMap.dimension](~visualMap.dimension) specifies which dimension of the data will be visually mapped.\n\n### Piecewise Visual Mapping\n\nThe piecewise visual mapping component has three modes.\n\n- Continuous data average segmentation: based on [visualMap-piecewise.splitNumber](https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber) to automatically split the data into pieces equally.\n- Continuous data custom segmentation: define the range of each piece based on [visualMap-piecewise.pieces](https://echarts.apache.org/option.html#visualMap-piecewise.pieces).\n- Discrete data (categorical data): categories are defined in [visualMap-piecewise.categories](https://echarts.apache.org/option.html#visualMap-piecewise.categories).\n\nTo use segmented visual map, you need to set `type` to `'piecewise'` and choose one of the above three configuration items.\n","dir":"/en/concepts","path":"/en/concepts/visual-map","extension":".md","createdAt":"2021-07-21T13:08:18.970Z","updatedAt":"2021-07-21T13:31:05.709Z","meta":{"version":0,"revision":0,"created":1627897108640},"$loki":39},{"slug":"drilldown","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/application/data","path":"/en/application/data/drilldown","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-06-04T12:26:37.914Z","meta":{"version":0,"revision":0,"created":1627897108643},"$loki":40},{"slug":"help","toc":[{"id":"技术问题","depth":2,"text":"技术问题"},{"id":"确保现有文档等资料无法解决你的问题","depth":3,"text":"确保现有文档等资料无法解决你的问题"},{"id":"创建一个最简单可复现的例子","depth":3,"text":"创建一个最简单可复现的例子"},{"id":"判断是否是-bug","depth":3,"text":"判断是否是 bug"},{"id":"非技术类问题","depth":2,"text":"非技术类问题"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"寻求帮助"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"寻求帮助"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"技术问题"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"技术问题"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"确保现有文档等资料无法解决你的问题"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"确保现有文档等资料无法解决你的问题"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"API"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//option.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"配置项手册"}]},{"type":"text","value":":可以尝试使用搜索功能"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本手册的文章"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//faq.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"常见问题"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"GitHub issue"}]},{"type":"text","value":" 中搜索关键字"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"使用搜索引擎搜索关键字"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"创建一个最简单可复现的例子"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"创建一个最简单可复现的例子"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 "},{"type":"element","tag":"a","props":{"href":"https://codepen.io/Ovilia/pen/dyYWXWM","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Codepen"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://codesandbox.io/s/mystifying-bash-2uthz","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Codesandbox"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"a","props":{"href":"https://www.makeapie.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"makeapie.com"}]},{"type":"text","value":" 创建一个例子,这将使得他人更方便地复现你的问题。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 "},{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com/help/minimal-reproducible-example","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"How to create a Minimal, Reproducible Example"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"判断是否是-bug"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"判断是否是 bug"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"报告-bug-或请求新功能"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"报告 bug 或请求新功能"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 "},{"type":"element","tag":"a","props":{"href":"https://ecomfe.github.io/echarts-issue-helper/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"issue 模板"}]},{"type":"text","value":" 中新建一个 issue 并按照提示详细描述。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"咨询类问题"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"咨询类问题"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果不是 bug,而是不知道如何实现某种效果,可以尝试在 "},{"type":"element","tag":"a","props":{"href":"https://stackoverflow.com"},"children":[{"type":"text","value":"stackoverflow.com"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://www.oschina.net/question/tag/echarts"},"children":[{"type":"text","value":"开源中国"}]},{"type":"text","value":" 或 "},{"type":"element","tag":"a","props":{"href":"https://segmentfault.com/t/echarts"},"children":[{"type":"text","value":"segmentfault.com"}]},{"type":"text","value":" 等问答平台上提问。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果没能得到答复,也可以发送邮件至邮件组 "},{"type":"element","tag":"a","props":{"href":"mailto:dev@echarts.apache.org"},"children":[{"type":"text","value":"dev@echarts.apache.org"}]},{"type":"text","value":"。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"非技术类问题"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"非技术类问题"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其他问题可以发送英文邮件至邮件组 "},{"type":"element","tag":"a","props":{"href":"mailto:dev@echarts.apache.org"},"children":[{"type":"text","value":"dev@echarts.apache.org"}]},{"type":"text","value":"。"}]}]},"text":"# 寻求帮助\n\n## 技术问题\n\n### 确保现有文档等资料无法解决你的问题\n\nECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。\n\n因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:\n\n- [API](https://echarts.apache.org//api.html)\n- [配置项手册](https://echarts.apache.org//option.html):可以尝试使用搜索功能\n- 本手册的文章\n- [常见问题](https://echarts.apache.org//faq.html)\n- 在 [GitHub issue](https://github.com/apache/echarts/issues) 中搜索关键字\n- 使用搜索引擎搜索关键字\n\n### 创建一个最简单可复现的例子\n\n使用 [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM)、[Codesandbox](https://codesandbox.io/s/mystifying-bash-2uthz) 或者 [makeapie.com](https://www.makeapie.com/) 创建一个例子,这将使得他人更方便地复现你的问题。\n\n例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)。\n\n### 判断是否是 bug\n\n#### 报告 bug 或请求新功能\n\n如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 [issue 模板](https://ecomfe.github.io/echarts-issue-helper/) 中新建一个 issue 并按照提示详细描述。\n\n#### 咨询类问题\n\n如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href=\"https://stackoverflow.com\">stackoverflow.com</a>、<a href=\"https://www.oschina.net/question/tag/echarts\">开源中国</a> 或 <a href=\"https://segmentfault.com/t/echarts\">segmentfault.com</a> 等问答平台上提问。\n\n如果没能得到答复,也可以发送邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。\n\n## 非技术类问题\n\n其他问题可以发送英文邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。\n","dir":"/zh/basics","path":"/zh/basics/help","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-06-04T12:26:37.923Z","meta":{"version":0,"revision":0,"created":1627897108656},"$loki":41},{"slug":"inspiration","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"获取灵感"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"获取灵感"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts 官方实例"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"本手册的“应用篇 - 常用图表类型”"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.makeapie.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"makeapie.com"}]},{"type":"text","value":" 社区用户的作品集"}]},{"type":"text","value":"\n"}]}]},"text":"# 获取灵感\n\n当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。\n\n- [ECharts 官方实例](https://echarts.apache.org//examples)\n- 本手册的“应用篇 - 常用图表类型”\n- [makeapie.com](https://www.makeapie.com/) 社区用户的作品集\n","dir":"/zh/basics","path":"/zh/basics/inspiration","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-07-21T06:20:18.869Z","meta":{"version":0,"revision":0,"created":1627897108661},"$loki":42},{"slug":"import","toc":[{"id":"npm-安装-echarts","depth":2,"text":"NPM 安装 ECharts"},{"id":"引入-echarts","depth":2,"text":"引入 ECharts"},{"id":"按需引入-echarts-图表和组件","depth":2,"text":"按需引入 ECharts 图表和组件"},{"id":"在-typescript-中按需引入","depth":2,"text":"在 TypeScript 中按需引入"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"在项目中引入-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在项目中引入 Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"假如你的开发环境使用了"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":"或者"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yarn"}]},{"type":"text","value":"等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 并通过 treeshaking 特性只打包需要的模块。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"npm-安装-echarts"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#npm-%E5%AE%89%E8%A3%85-echarts","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"NPM 安装 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"你可以使用如下命令通过 npm 安装 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"shell","line-highlights":"","file-name":""},"children":[{"type":"text","value":"npm install echarts --save\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"引入-echarts"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%BC%95%E5%85%A5-echarts","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"引入 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n\n// 基于准备好的dom,初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"按需引入-echarts-图表和组件"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"按需引入 ECharts 图表和组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts/core';\n// 引入柱状图图表,图表后缀都为 Chart\nimport { BarChart } from 'echarts/charts';\n// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// 接下来的使用就跟之前一样,初始化图表,设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":"或者"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVGRenderer"}]},{"type":"text","value":"作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":"模块。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"在-typescript-中按需引入"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在 TypeScript 中按需引入"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"EChartsOption"}]},{"type":"text","value":"类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\nimport {\n BarChart,\n // 系列类型的定义后缀都为 SeriesOption\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // 组件类型的定义后缀都为 ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n"}]}]}]},"text":"# 在项目中引入 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.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n```\n\n## 按需引入 ECharts 图表和组件\n\n上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。\n\n```js\n// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts/core';\n// 引入柱状图图表,图表后缀都为 Chart\nimport { BarChart } from 'echarts/charts';\n// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// 接下来的使用就跟之前一样,初始化图表,设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n```\n\n> 需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入`CanvasRenderer`或者`SVGRenderer`作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的`CanvasRenderer`模块。\n\n我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。\n\n## 在 TypeScript 中按需引入\n\n对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的`EChartsOption`类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。\n\n```ts\nimport * as echarts from 'echarts/core';\nimport {\n BarChart,\n // 系列类型的定义后缀都为 SeriesOption\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // 组件类型的定义后缀都为 ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n```\n","dir":"/zh/basics","path":"/zh/basics/import","extension":".md","createdAt":"2021-07-19T10:55:20.136Z","updatedAt":"2021-07-24T08:52:17.344Z","meta":{"version":0,"revision":0,"created":1627897108667},"$loki":43},{"slug":"download","toc":[{"id":"安装方式","depth":2,"text":"安装方式"},{"id":"从-github-获取","depth":3,"text":"从 GitHub 获取"},{"id":"从-npm-获取","depth":3,"text":"从 npm 获取"},{"id":"从-cdn-获取","depth":3,"text":"从 CDN 获取"},{"id":"在线定制","depth":3,"text":"在线定制"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"获取-apache-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%8E%B7%E5%8F%96-apache-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"获取 Apache ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"从 GitHub 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"从 npm 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"从 CDN 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在线定制"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"接下来我们将分别介绍这些安装方式,以及下载后的目录结构。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"安装方式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"安装方式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"从-github-获取"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"从 GitHub 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"apache/echarts"}]},{"type":"text","value":" 项目的 "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/releases","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"release"}]},{"type":"text","value":" 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dist"}]},{"type":"text","value":" 目录下的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" 即为包含完整 ECharts 功能的文件。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"从-npm-获取"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"从 npm 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"sh","line-highlights":"","file-name":""},"children":[{"type":"text","value":"npm install echarts --save\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"详见"},{"type":"element","tag":"a","props":{"href":"zh/basics/import"},"children":[{"type":"text","value":"在项目中引入 Apache ECharts"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"从-cdn-获取"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"从 CDN 获取"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"推荐从 jsDelivr 引用 "},{"type":"element","tag":"a","props":{"href":"https://www.jsdelivr.com/package/npm/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"在线定制"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在线定制"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果只想引入部分模块以减少包体积,可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//builder.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts 在线定制"}]},{"type":"text","value":"功能。"}]}]},"text":"# 获取 Apache ECharts\n\nApache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。\n\n- 从 GitHub 获取\n- 从 npm 获取\n- 从 CDN 获取\n- 在线定制\n\n接下来我们将分别介绍这些安装方式,以及下载后的目录结构。\n\n## 安装方式\n\n### 从 GitHub 获取\n\n[apache/echarts](https://github.com/apache/echarts) 项目的 [release](https://github.com/apache/echarts/releases) 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 `dist` 目录下的 `echarts.js` 即为包含完整 ECharts 功能的文件。\n\n### 从 npm 获取\n\n```sh\nnpm install echarts --save\n```\n\n详见[在项目中引入 Apache ECharts](zh/basics/import)。\n\n### 从 CDN 获取\n\n推荐从 jsDelivr 引用 [echarts](https://www.jsdelivr.com/package/npm/echarts)。\n\n### 在线定制\n\n如果只想引入部分模块以减少包体积,可以使用 [ECharts 在线定制](https://echarts.apache.org//builder.html)功能。\n","dir":"/zh/basics","path":"/zh/basics/download","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-07-21T05:35:15.214Z","meta":{"version":0,"revision":0,"created":1627897108674},"$loki":44},{"slug":"resource","toc":[{"id":"官方","depth":2,"text":"官方"},{"id":"社区","depth":2,"text":"社区"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"资源列表"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%B5%84%E6%BA%90%E5%88%97%E8%A1%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"资源列表"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"官方"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%98%E6%96%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"官方"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"API"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"配置项手册"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/index.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方实例"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/cheat-sheet.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"术语速查手册"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"社区"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%A4%BE%E5%8C%BA","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"社区"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://www.makeapie.com","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"MakeAPie"}]},{"type":"text","value":":社区用户的作品集"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/awesome-echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"awesome-echarts"}]},{"type":"text","value":":各种 ECharts 相关的资源,包括 AngularJS、Vue 等框架的支持,Java、Python、R 等语言的 ECharts 版本,ECharts VSCode 插件等工具"}]},{"type":"text","value":"\n"}]}]},"text":"# 资源列表\n\n## 官方\n\n- [API](https://echarts.apache.org/api.html)\n- [配置项手册](https://echarts.apache.org/option.html)\n- [官方实例](https://echarts.apache.org/examples/zh/index.html)\n- [术语速查手册](https://echarts.apache.org/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 版本,ECharts VSCode 插件等工具\n","dir":"/zh/basics","path":"/zh/basics/resource","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-07-19T11:11:00.451Z","meta":{"version":0,"revision":0,"created":1627897108677},"$loki":45},{"slug":"canvas-vs-svg","toc":[{"id":"选择哪种渲染器","depth":2,"text":"选择哪种渲染器"},{"id":"如何使用渲染器","depth":2,"text":"如何使用渲染器"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"使用-canvas-或者-svg-渲染"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用 Canvas 或者 SVG 渲染"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 从初始一直使用 Canvas 绘制图表。而 "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/releases","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts v4.0"}]},{"type":"text","value":" 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"renderer 参数"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'canvas'"}]},{"type":"text","value":" 或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'svg'"}]},{"type":"text","value":" 即可指定渲染器,比较方便。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/zrender","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ZRender"}]},{"type":"text","value":" 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"选择哪种渲染器"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"选择哪种渲染器"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"特效"}]},{"type":"text","value":"。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 "},{"type":"element","tag":"a","props":{"href":"https://ecomfe.github.io/echarts-liquidfill/example/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"水球图"}]},{"type":"text","value":" 等,SVG 渲染器可能效果更好。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们强烈欢迎开发者们"},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/new","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"反馈"}]},{"type":"text","value":"给我们使用的体验和场景,帮助我们更好的做优化。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注:当前某些特殊的渲染依然需要依赖 Canvas:如"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-lines.effect","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"炫光尾迹特效"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples/editor.html?c=heatmap-bmap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"带有混合效果的热力图"}]},{"type":"text","value":"等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"如何使用渲染器"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"如何使用渲染器"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果是用如下的方式完整引入"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts"}]},{"type":"text","value":",代码中已经包含了 SVG 渲染器和 Canvas 渲染器"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果你是按照 "},{"type":"element","tag":"a","props":{"href":"zh/basics/import"},"children":[{"type":"text","value":"在项目中引入 Apache ECharts"}]},{"type":"text","value":" 一文中的介绍使用按需引入,则需要手动引入需要的渲染器"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\n// 可以根据需要选用只用到的渲染器\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"然后,我们就可以在代码中,初始化图表实例时,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html/api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"传入参数"}]},{"type":"text","value":" 选择渲染器类型:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 使用 Canvas 渲染器(默认)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// 等价于:\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n"}]}]}]},"text":"# 使用 Canvas 或者 SVG 渲染\n\n浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。\n\nECharts 从初始一直使用 Canvas 绘制图表。而 [ECharts v4.0](https://github.com/apache/echarts/releases) 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 [renderer 参数](https://echarts.apache.org//api.html#echarts.init) 为 `'canvas'` 或 `'svg'` 即可指定渲染器,比较方便。\n\n> SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 [ZRender](https://github.com/ecomfe/zrender) 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。\n\n## 选择哪种渲染器\n\n一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 [特效](https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect)。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。\n\n选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。\n\n- 在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。\n- 在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n - 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 [水球图](https://ecomfe.github.io/echarts-liquidfill/example/) 等,SVG 渲染器可能效果更好。\n - 数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。\n\n我们强烈欢迎开发者们[反馈](https://github.com/apache/echarts/issues/new)给我们使用的体验和场景,帮助我们更好的做优化。\n\n注:当前某些特殊的渲染依然需要依赖 Canvas:如[炫光尾迹特效](https://echarts.apache.org/option.html#series-lines.effect)、[带有混合效果的热力图](https://echarts.apache.org//examples/editor.html?c=heatmap-bmap)等。\n\n## 如何使用渲染器\n\n如果是用如下的方式完整引入`echarts`,代码中已经包含了 SVG 渲染器和 Canvas 渲染器\n\n```js\nimport * as echarts from 'echarts';\n```\n\n如果你是按照 [在项目中引入 Apache ECharts](zh/basics/import) 一文中的介绍使用按需引入,则需要手动引入需要的渲染器\n\n```js\nimport * as echarts from 'echarts/core';\n// 可以根据需要选用只用到的渲染器\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n```\n\n然后,我们就可以在代码中,初始化图表实例时,[传入参数](https://echarts.apache.org//api.html/api.html#echarts.init) 选择渲染器类型:\n\n```js\n// 使用 Canvas 渲染器(默认)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// 等价于:\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n```\n","dir":"/zh/best-practice","path":"/zh/best-practice/canvas-vs-svg","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-07-21T10:01:22.869Z","meta":{"version":0,"revision":0,"created":1627897108687},"$loki":46},{"slug":"aria","toc":[{"id":"整体修改描述","depth":2,"text":"整体修改描述"},{"id":"定制模板描述","depth":2,"text":"定制模板描述"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"无障碍访问"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"无障碍访问"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"W3C 制定了无障碍富互联网应用规范集("},{"type":"element","tag":"a","props":{"href":"https://www.w3.org/WAI/intro/aria","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"WAI-ARIA"}]},{"type":"text","value":",the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"默认关闭,需要通过将 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.show"}]},{"type":"text","value":" 设置为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于配置项:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-pie"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"生成的图表 DOM 上,会有一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria-label"}]},{"type":"text","value":" 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"null","line-highlights":"","file-name":""},"children":[{"type":"text","value":"这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"整体修改描述"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"整体修改描述"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这时候,用户可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.description","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":" 配置项指定图表的整体描述。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"定制模板描述"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"定制模板描述"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"生成描述的基本流程为,如果 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.show"}]},{"type":"text","value":" 设置为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":",则生成无障碍访问描述,否则不生成。如果定义了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.description","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":",则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.description"}]},{"type":"text","value":" 完全覆盖。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用模板拼接时,先根据是否存在标题 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#title.text","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"title.text"}]},{"type":"text","value":" 决定使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.general.withTitle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" 还是 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.general.withoutTitle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.general.withoutTitle"}]},{"type":"text","value":" 作为整体性描述。其中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" 配置项包括模板变量 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'{title}'"}]},{"type":"text","value":",将会被替换成图表标题。也就是说,如果 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria.general.withTitle"}]},{"type":"text","value":" 被设置为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'图表的标题是:{title}。'"}]},{"type":"text","value":",则如果包含标题 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'价格分布图'"}]},{"type":"text","value":",这部分的描述为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'图表的标题是:价格分布图。'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"拼接完标题之后,会依次拼接系列的描述("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.series","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.series"}]},{"type":"text","value":"),和每个系列的数据的描述("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aria.data"}]},{"type":"text","value":")。同样,每个模板都有可能包括模板变量,用以替换实际的值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"完整的描述生成流程请参见 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#aria","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ARIA 文档"}]},{"type":"text","value":"。"}]}]},"text":"# 无障碍访问\n\nW3C 制定了无障碍富互联网应用规范集([WAI-ARIA](https://www.w3.org/WAI/intro/aria),the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。\n\n默认关闭,需要通过将 [aria.show](https://echarts.apache.org/option.html#aria.show) 设置为 `true` 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。\n\n对于配置项:\n\n```js\noption = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n```\n\n<md-example src=\"doc-example/aria-pie\"></md-example>\n\n生成的图表 DOM 上,会有一个 `aria-label` 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:\n\n```\n这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n```\n\n## 整体修改描述\n\n对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。\n\n这时候,用户可以通过 [aria.description](https://echarts.apache.org/option.html#aria.description) 配置项指定图表的整体描述。\n\n## 定制模板描述\n\n除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。\n\n生成描述的基本流程为,如果 [aria.show](https://echarts.apache.org/option.html#aria.show) 设置为 `true`,则生成无障碍访问描述,否则不生成。如果定义了 [aria.description](https://echarts.apache.org/option.html#aria.description),则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 `aria.description` 完全覆盖。\n\n使用模板拼接时,先根据是否存在标题 [title.text](https://echarts.apache.org/option.html#title.text) 决定使用 [aria.general.withTitle](https://echarts.apache.org/option.html#aria.general.withTitle) 还是 [aria.general.withoutTitle](https://echarts.apache.org/option.html#aria.general.withoutTitle) 作为整体性描述。其中,`aria.general.withTitle` 配置项包括模板变量 `'{title}'`,将会被替换成图表标题。也就是说,如果 `aria.general.withTitle` 被设置为 `'图表的标题是:{title}。'`,则如果包含标题 `'价格分布图'`,这部分的描述为 `'图表的标题是:价格分布图。'`。\n\n拼接完标题之后,会依次拼接系列的描述([aria.series](https://echarts.apache.org/option.html#aria.series)),和每个系列的数据的描述([aria.data](https://echarts.apache.org/option.html#aria.data))。同样,每个模板都有可能包括模板变量,用以替换实际的值。\n\n完整的描述生成流程请参见 [ARIA 文档](https://echarts.apache.org/option.html#aria)。\n","dir":"/zh/best-practice","path":"/zh/best-practice/aria","extension":".md","createdAt":"2021-06-04T12:26:37.923Z","updatedAt":"2021-07-21T09:55:24.870Z","meta":{"version":0,"revision":0,"created":1627897108692},"$loki":47},{"slug":"edit-guide","toc":[{"id":"新增一个-markdown-文件","depth":2,"text":"新增一个 markdown 文件"},{"id":"使用-prettier-来自动格式化代码","depth":2,"text":"使用 prettier 来自动格式化代码"},{"id":"内置变量","depth":2,"text":"内置变量"},{"id":"引用代码","depth":2,"text":"引用代码"},{"id":"基础使用","depth":3,"text":"基础使用"},{"id":"代码推荐写法","depth":3,"text":"代码推荐写法"},{"id":"实时预览和编辑","depth":3,"text":"实时预览和编辑"},{"id":"更多预览布局","depth":3,"text":"更多预览布局"},{"id":"高亮代码行以及添加文件名","depth":3,"text":"高亮代码行以及添加文件名"},{"id":"引用图片","depth":2,"text":"引用图片"},{"id":"设置图片高宽","depth":3,"text":"设置图片高宽"},{"id":"添加示例-iframe","depth":2,"text":"添加示例 iframe"},{"id":"添加配置项链接","depth":2,"text":"添加配置项链接"},{"id":"更多组件使用","depth":2,"text":"更多组件使用"},{"id":"md-alert","depth":3,"text":"md-alert"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"文档编辑指南"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"文档编辑指南"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"新增一个-markdown-文件"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"新增一个 markdown 文件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/zh/"}]},{"type":"text","value":"(中文文章)或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/en/"}]},{"type":"text","value":"(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/zh/posts.yml"}]},{"type":"text","value":" 或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"contents/en/posts.yml"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"markdown 文件名称小写。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"使用-prettier-来自动格式化代码"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用 prettier 来自动格式化代码"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在开始之前,我们推荐安装"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":"的 "},{"type":"element","tag":"a","props":{"href":"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"VSCode 插件"}]},{"type":"text","value":",该插件可以在你保存的时候自动帮你格式化代码。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"prettier"}]},{"type":"text","value":"格式化该部分代码"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<!-- prettier-ignore-start -->\n<!-- prettier-ignore-end -->\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"内置变量"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"内置变量"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"optionPath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mainSitePath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"exampleViewPath"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"exampleEditorPath"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用方式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"null","line-highlights":"","file-name":""},"children":[{"type":"text","value":"${xxxxx}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"引用代码"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"引用代码"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"基础使用"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础使用"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"代码推荐写法"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"代码推荐写法"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如注释 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"..."}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"实时预览和编辑"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"实时预览和编辑"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"目前只支持对 Option 代码的预览"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```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\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"更多预览布局"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"更多预览布局"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"左右"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%B7%A6%E5%8F%B3","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"左右"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-lr]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"右左"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8F%B3%E5%B7%A6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"右左"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-rl]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"rl"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"下上"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%8B%E4%B8%8A","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"下上"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js [live-bt]\noption = {\n ...\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"bt"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"高亮代码行以及添加文件名"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"高亮代码行以及添加文件名"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用:"}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n"}]}]},{"type":"text","value":"\n"},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"效果:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"1,3-5","file-name":"option.js"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"引用图片"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"引用图片"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图片实际存放地址在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"static/images/"}]},{"type":"text","value":" 下。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"![图片说明](images/demo.png)\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"设置图片高宽"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"设置图片高宽"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于当前页面的临时样式,可以直接写 html:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<img src=\"images/demo.png\" style=\"width: 50px\" />\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"添加示例-iframe"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"添加示例 iframe"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"src"}]},{"type":"text","value":"为 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=line-simple","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://echarts.apache.org/examples/zh/editor.html?c=line-simple"}]},{"type":"text","value":" 地址中"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"?c="}]},{"type":"text","value":"后面这一串"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"效果:\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/getting-started","width":"100%","height":300},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"添加配置项链接"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"添加配置项链接"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-option link=\"series-bar.itemStyle.color\"></md-option>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"效果:\n"},{"type":"element","tag":"md-option","props":{"link":"series-bar.itemStyle.color"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"更多组件使用"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"更多组件使用"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"文档支持使用全局注册的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"markdown"}]},{"type":"text","value":"组件,除了刚才介绍的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"md-example"}]},{"type":"text","value":"组件,还有下面几种组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"md-alert"},"children":[{"type":"element","tag":"a","props":{"href":"#md-alert","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"md-alert"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"提示组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"info"},"children":[{"type":"text","value":"\nThis is an info alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"success"},"children":[{"type":"text","value":"\nThis is a success alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"warning"},"children":[{"type":"text","value":"\nThis is a warning alert.\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"markdown","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-alert","props":{"type":"danger"},"children":[{"type":"text","value":"\nThis is a danger alert.\n"}]}]},"text":"# 文档编辑指南\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如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止`prettier`格式化该部分代码\n\n```markdown\n<!-- prettier-ignore-start -->\n<!-- prettier-ignore-end -->\n```\n\n如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。\n\n## 内置变量\n\n- `optionPath`\n- `mainSitePath`\n- `exampleViewPath`\n- `exampleEditorPath`\n\n使用方式:\n\n```\n${xxxxx}\n```\n\n## 引用代码\n\n### 基础使用\n\n<!-- prettier-ignore-start -->\n```markdown\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n```\n<!-- prettier-ignore-end -->\n\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### 代码推荐写法\n\n为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。\n\n比如注释 `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### 实时预览和编辑\n\n> 目前只支持对 Option 代码的预览\n\n<!-- prettier-ignore-start -->\n```markdown\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\\```\n```\n<!-- prettier-ignore-end -->\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```\n\n### 更多预览布局\n\n#### 左右\n\n<!-- prettier-ignore-start -->\n```markdown\n```js [live-lr]\noption = {\n ...\n};\n\\```\n```\n<!-- prettier-ignore-end -->\n\n```js [live-lr]\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```\n\n#### 右左\n\n<!-- prettier-ignore-start -->\n```markdown\n```js [live-rl]\noption = {\n ...\n};\n\\```\n```\n<!-- prettier-ignore-end -->\n\n```js [live-rl]\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```\n\n#### 下上\n\n<!-- prettier-ignore-start -->\n```markdown\n```js [live-bt]\noption = {\n ...\n};\n\\```\n```\n<!-- prettier-ignore-end -->\n\n```js [live-bt]\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```\n\n### 高亮代码行以及添加文件名\n\n使用:\n\n<!-- prettier-ignore-start -->\n```markdown\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n```\n<!-- prettier-ignore-end -->\n\n效果:\n\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## 引用图片\n\n图片实际存放地址在 `static/images/` 下。\n\n```markdown\n![图片说明](images/demo.png)\n```\n\n### 设置图片高宽\n\n对于当前页面的临时样式,可以直接写 html:\n\n```markdown\n<img src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## 添加示例 iframe\n\n`src`为 https://echarts.apache.org/examples/zh/editor.html?c=line-simple 地址中`?c=`后面这一串\n\n使用:\n\n```markdown\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n```\n\n效果:\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n\n## 添加配置项链接\n\n使用:\n\n```markdown\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n```\n\n效果:\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n\n## 更多组件使用\n\n文档支持使用全局注册的`markdown`组件,除了刚才介绍的`md-example`组件,还有下面几种组件\n\n### md-alert\n\n提示组件\n\n```markdown\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n","dir":"/zh/meta","path":"/zh/meta/edit-guide","extension":".md","createdAt":"2021-06-04T12:26:37.935Z","updatedAt":"2021-07-21T09:50:31.746Z","meta":{"version":0,"revision":0,"created":1627897108711},"$loki":48},{"slug":"chart-size","toc":[{"id":"初始化","depth":2,"text":"初始化"},{"id":"在-html-中定义有宽度和高度的父容器(推荐)","depth":3,"text":"在 HTML 中定义有宽度和高度的父容器(推荐)"},{"id":"指定图表的大小","depth":3,"text":"指定图表的大小"},{"id":"响应容器大小的变化","depth":2,"text":"响应容器大小的变化"},{"id":"监听图表容器的大小并改变图表大小","depth":3,"text":"监听图表容器的大小并改变图表大小"},{"id":"为图表设置特定的大小","depth":3,"text":"为图表设置特定的大小"},{"id":"容器节点被销毁以及被重建时","depth":3,"text":"容器节点被销毁以及被重建时"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"图表容器及大小"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图表容器及大小"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在"},{"type":"element","tag":"a","props":{"href":"zh/get-started"},"children":[{"type":"text","value":"快速上手"}]},{"type":"text","value":"中,我们介绍了初始化 ECharts 的接口 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.init"}]}]},{"type":"text","value":"。"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"API 文档"}]},{"type":"text","value":"中详细介绍了参数的具体含义,建议理解后再阅读本文。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"初始化"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%9D%E5%A7%8B%E5%8C%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"初始化"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"在-html-中定义有宽度和高度的父容器(推荐)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在 HTML 中定义有宽度和高度的父容器(推荐)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"通常来说,需要在 HTML 中先定义一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<div>"}]},{"type":"text","value":" 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opts.width"}]},{"type":"text","value":" 或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opts.height"}]},{"type":"text","value":" 将其覆盖。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"需要注意的是,使用这种方法在调用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":" 时需保证容器已经有宽度和高度了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"指定图表的大小"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"指定图表的大小"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'), null, {\n width: 600,\n height: 400\n });\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"响应容器大小的变化"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"响应容器大小的变化"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"监听图表容器的大小并改变图表大小"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"监听图表容器的大小并改变图表大小"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这种情况下,可以监听页面的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"window.onresize"}]},{"type":"text","value":" 事件获取浏览器大小改变的事件,然后调用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.resize","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.resize"}]}]},{"type":"text","value":" 改变图表的大小。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"html","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n window.onresize = function() {\n myChart.resize();\n };\n</script>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"为图表设置特定的大小"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"为图表设置特定的大小"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了直接调用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"resize()"}]},{"type":"text","value":" 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.resize({\n width: 800,\n height: 400\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"小贴士:"}]},{"type":"text","value":" 阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"容器节点被销毁以及被重建时"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"容器节点被销毁以及被重建时"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"正确的做法是,在图表容器被销毁之后,调用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.dispose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.dispose"}]}]},{"type":"text","value":" 销毁实例,在图表容器重新被添加后再次调用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echarts.init","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts.init"}]},{"type":"text","value":" 初始化。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"小贴士:"}]},{"type":"text","value":" 在容器节点被销毁时,总是应调用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.dispose","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echartsInstance.dispose"}]}]},{"type":"text","value":" 以销毁实例释放资源,避免内存泄漏。"}]},{"type":"text","value":"\n"}]}]},"text":"# 图表容器及大小\n\n在[快速上手](zh/get-started)中,我们介绍了初始化 ECharts 的接口 [`echarts.init`](https://echarts.apache.org//api.html#echarts.init)。[API 文档](https://echarts.apache.org//api.html#echarts.init)中详细介绍了参数的具体含义,建议理解后再阅读本文。\n\n下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。\n\n## 初始化\n\n### 在 HTML 中定义有宽度和高度的父容器(推荐)\n\n通常来说,需要在 HTML 中先定义一个 `<div>` 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 `opts.width` 或 `opts.height` 将其覆盖。\n\n```html\n<div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n</script>\n```\n\n需要注意的是,使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。\n\n### 指定图表的大小\n\n如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。\n\n```html\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'), null, {\n width: 600,\n height: 400\n });\n</script>\n```\n\n## 响应容器大小的变化\n\n### 监听图表容器的大小并改变图表大小\n\n在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。\n\n比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。\n\n这种情况下,可以监听页面的 `window.onresize` 事件获取浏览器大小改变的事件,然后调用 [`echartsInstance.resize`](https://echarts.apache.org/api.html#echartsInstance.resize) 改变图表的大小。\n\n```html\n<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id=\"main\"></div>\n<script type=\"text/javascript\">\n var myChart = echarts.init(document.getElementById('main'));\n window.onresize = function() {\n myChart.resize();\n };\n</script>\n```\n\n### 为图表设置特定的大小\n\n除了直接调用 `resize()` 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。\n\n```js\nmyChart.resize({\n width: 800,\n height: 400\n});\n```\n\n> **小贴士:** 阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。\n\n### 容器节点被销毁以及被重建时\n\n假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。\n\n本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。\n\n正确的做法是,在图表容器被销毁之后,调用 [`echartsInstance.dispose`](https://echarts.apache.org/api.html#echartsInstance.dispose) 销毁实例,在图表容器重新被添加后再次调用 [echarts.init](https://echarts.apache.org//api.html#echarts.init) 初始化。\n\n> **小贴士:** 在容器节点被销毁时,总是应调用 [`echartsInstance.dispose`](https://echarts.apache.org/api.html#echartsInstance.dispose) 以销毁实例释放资源,避免内存泄漏。\n","dir":"/zh/concepts","path":"/zh/concepts/chart-size","extension":".md","createdAt":"2021-06-04T12:26:37.933Z","updatedAt":"2021-07-24T08:31:59.778Z","meta":{"version":0,"revision":0,"created":1627897108730},"$loki":49},{"slug":"axis","toc":[{"id":"x-轴、y-轴","depth":2,"text":"x 轴、y 轴"},{"id":"轴线","depth":2,"text":"轴线"},{"id":"刻度","depth":2,"text":"刻度"},{"id":"刻度标签","depth":2,"text":"刻度标签"},{"id":"示例","depth":2,"text":"示例"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"坐标轴"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9D%90%E6%A0%87%E8%BD%B4","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"坐标轴"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"直角坐标系中的 x/y 轴。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"x-轴、y-轴"},"children":[{"type":"element","tag":"a","props":{"href":"#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"x 轴、y 轴"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/axis/charts_axis_img02.jpg"},"children":[]},{"type":"text","value":"\n\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n },\n dataZoom: [\n // ...\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.offset","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"offset"}]},{"type":"text","value":" 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: '销售数量'\n // ...\n },\n {\n type: 'value',\n name: '销售金额'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"轴线"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%BD%B4%E7%BA%BF","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"轴线"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 提供了轴线 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisLine","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisLine"}]},{"type":"text","value":" 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"刻度"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%BB%E5%BA%A6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"刻度"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 提供了轴线 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisTick","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisTick"}]},{"type":"text","value":" 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"刻度标签"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"刻度标签"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 提供了轴线 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis.axisLabel","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axisLabel"}]},{"type":"text","value":" 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} 元',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"示例"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%A4%BA%E4%BE%8B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"示例"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n data: [\n '1月',\n '2月',\n '3月',\n '4月',\n '5月',\n '6月',\n '7月',\n '8月',\n '9月',\n '10月',\n '11月',\n '12月'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: '降水量',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: '温度',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: '降水量',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: '温度',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#xAxis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官网"}]},{"type":"text","value":"。"}]}]},"text":"# 坐标轴\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 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n }\n // ...\n};\n```\n\n当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n },\n dataZoom: [\n // ...\n ]\n // ...\n};\n```\n\n在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 [offset](https://echarts.apache.org/option.html#xAxis.offset) 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: '销售数量'\n // ...\n },\n {\n type: 'value',\n name: '销售金额'\n // ...\n }\n ]\n // ...\n};\n```\n\n## 轴线\n\nECharts 提供了轴线 [axisLine](https://echarts.apache.org/option.html#xAxis.axisLine) 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。\n\n```js\noption = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## 刻度\n\nECharts 提供了轴线 [axisTick](https://echarts.apache.org/option.html#xAxis.axisTick) 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。\n\n```js\noption = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## 刻度标签\n\nECharts 提供了轴线 [axisLabel](https://echarts.apache.org/option.html#xAxis.axisLabel) 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。\n\n```js\noption = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} 元',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n```\n\n## 示例\n\n图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。\n\n```js [live]\noption = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n data: [\n '1月',\n '2月',\n '3月',\n '4月',\n '5月',\n '6月',\n '7月',\n '8月',\n '9月',\n '10月',\n '11月',\n '12月'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: '降水量',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: '温度',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: '降水量',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: '温度',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n```\n\n这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步[官网](https://echarts.apache.org/option.html#xAxis)。\n","dir":"/zh/concepts","path":"/zh/concepts/axis","extension":".md","createdAt":"2021-06-04T12:26:37.933Z","updatedAt":"2021-07-19T11:24:02.724Z","meta":{"version":0,"revision":0,"created":1627897108750},"$loki":50},{"slug":"writing","toc":[{"id":"重点","depth":2,"text":"重点"},{"id":"其他注意事项","depth":2,"text":"其他注意事项"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"写作风格规范"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%86%99%E4%BD%9C%E9%A3%8E%E6%A0%BC%E8%A7%84%E8%8C%83","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"写作风格规范"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本文的主要目的是为了统一该项目的写作风格。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"语法主要参照"},{"type":"element","tag":"a","props":{"href":"https://github.com/ruanyf/document-style-guide","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"中文技术文档的写作规范"}]},{"type":"text","value":"。请在写作前先阅读一遍该语法。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"重点"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%87%8D%E7%82%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"重点"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"段落的句子语气要使用陈述和肯定语气,避免使用感叹语气。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"句子内部的并列词,应该用全角顿号(、) 分隔,而不用逗号,即使并列词是英语也是如此。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"错误:我最欣赏的科技公司有 Google, Facebook, 腾讯, 阿里和百度等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"正确:我最欣赏的科技公司有 Google、Facebook、腾讯、阿里和百度等。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"其他注意事项"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%85%B6%E4%BB%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"其他注意事项"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了上述规范之外,还需要注意:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"写作时,应尽可能使用正式的书面语言,避免较为随意的个人博客风格。"}]},{"type":"text","value":"\n"}]}]},"text":"# 写作风格规范\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","dir":"/zh/meta","path":"/zh/meta/writing","extension":".md","createdAt":"2021-06-04T12:26:37.935Z","updatedAt":"2021-06-04T12:26:37.935Z","meta":{"version":0,"revision":0,"created":1627897108757},"$loki":51},{"slug":"event","toc":[{"id":"鼠标事件的处理","depth":2,"text":"鼠标事件的处理"},{"id":"组件交互的行为事件","depth":2,"text":"组件交互的行为事件"},{"id":"代码触发-echarts-中组件的行为","depth":2,"text":"代码触发 ECharts 中组件的行为"},{"id":"监听空白处的事件","depth":2,"text":"监听“空白处”的事件"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"事件与行为"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"事件与行为"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#events.legendselectchanged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'legendselectchanged'"}]},{"type":"text","value":" 事件(这里需要注意切换图例开关是不会触发 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'legendselected'"}]},{"type":"text","value":" 事件的),数据区域缩放时触发的 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#events.legendselectchanged","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'datazoom'"}]},{"type":"text","value":" 事件等等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"鼠标事件的处理"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"鼠标事件的处理"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 支持常规的鼠标事件类型,包括 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'click'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'dblclick'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mousedown'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mousemove'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseup'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseover'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'mouseout'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'globalout'"}]},{"type":"text","value":"、 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'contextmenu'"}]},{"type":"text","value":" 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"// 基于准备好的dom,初始化ECharts实例\n// var myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function(params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"所有的鼠标事件包含参数 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"params"}]},{"type":"text","value":",这是一个包含点击图形的数据信息的对象,如下格式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type EventParams = {\n // 当前点击的图形元素所属的组件名称,\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string;\n // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string;\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number;\n // 系列名称。当 componentType 为 'series' 时有意义。\n seriesName: string;\n // 数据名,类目名\n name: string;\n // 数据在传入的 data 数组中的 index\n dataIndex: number;\n // 传入的原始数据项\n data: Object;\n // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data,dataType 无意义。\n dataType: string;\n // 传入的数据值\n value: number | Array;\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string;\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如何区分鼠标点击到了哪里:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge(边)上。\n } else {\n // 点击到了 graph 的 node(节点)上。\n }\n }\n }\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"query"}]},{"type":"text","value":" 只对指定的组件的图形元素的触发回调:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.on(eventName, query, handler);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"query"}]},{"type":"text","value":" 可为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Object"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"string"}]},{"type":"text","value":" 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.on('click', 'series', function() {});\nchart.on('click', 'series.line', function() {});\nchart.on('click', 'dataZoom', function() {});\nchart.on('click', 'xAxis.category', function() {});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Object"}]},{"type":"text","value":",可以包含以下一个或多个属性,每个属性都是可选的:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"{\n ${mainType}Index: number // 组件 index\n ${mainType}Name: string // 组件 name\n ${mainType}Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type,如关系图中的 'node', 'edge'\n element: string // 自定义系列中的 el 的 name\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // 关系图的边被点击时此方法被回调。\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }\n ]\n });\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"组件交互的行为事件"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"组件交互的行为事件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#events","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"events"}]},{"type":"text","value":" 文档中有列出。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是监听一个图例开关的示例:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function(params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"代码触发-echarts-中组件的行为"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"代码触发 ECharts 中组件的行为"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"上面提到诸如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'legendselectchanged'"}]},{"type":"text","value":" 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 通过调用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.dispatchAction({ type: '' })"}]},{"type":"text","value":" 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常用的动作和动作对应参数在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#action","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"action"}]},{"type":"text","value":" 文档中有列出。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面示例演示了如何通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dispatchAction"}]},{"type":"text","value":" 去轮流高亮饼图的每个扇形。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n title: {\n text: '饼图程序调用高亮示例',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n // 取消之前高亮的图形\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n // 高亮当前图形\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n // 显示 tooltip\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"监听空白处的事件"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%9B%91%E5%90%AC%E7%A9%BA%E7%99%BD%E5%A4%84%E7%9A%84%E4%BA%8B%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"监听“空白处”的事件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.getZr().on('click', function(event) {\n // 该监听器正在监听一个`zrender 事件`。\n});\nmyChart.on('click', function(event) {\n // 该监听器正在监听一个`echarts 事件`。\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.getZr().on('click', function(event) {\n // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。\n if (!event.target) {\n // 点击在了空白处,做些什么。\n }\n});\n"}]}]}]},"text":"# 事件与行为\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'](https://echarts.apache.org/api.html#events.legendselectchanged) 事件(这里需要注意切换图例开关是不会触发 `'legendselected'` 事件的),数据区域缩放时触发的 ['datazoom'](https://echarts.apache.org/api.html#events.legendselectchanged) 事件等等。\n\n## 鼠标事件的处理\n\nECharts 支持常规的鼠标事件类型,包括 `'click'`、 `'dblclick'`、 `'mousedown'`、 `'mousemove'`、 `'mouseup'`、 `'mouseover'`、 `'mouseout'`、 `'globalout'`、 `'contextmenu'` 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。\n\n```js [live]\n// 基于准备好的dom,初始化ECharts实例\n// var myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function(params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n```\n\n所有的鼠标事件包含参数 `params`,这是一个包含点击图形的数据信息的对象,如下格式:\n\n```ts\ntype EventParams = {\n // 当前点击的图形元素所属的组件名称,\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string;\n // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string;\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number;\n // 系列名称。当 componentType 为 'series' 时有意义。\n seriesName: string;\n // 数据名,类目名\n name: string;\n // 数据在传入的 data 数组中的 index\n dataIndex: number;\n // 传入的原始数据项\n data: Object;\n // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data,dataType 无意义。\n dataType: string;\n // 传入的数据值\n value: number | Array;\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string;\n};\n```\n\n如何区分鼠标点击到了哪里:\n\n```js\nmyChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge(边)上。\n } else {\n // 点击到了 graph 的 node(节点)上。\n }\n }\n }\n});\n```\n\n使用 `query` 只对指定的组件的图形元素的触发回调:\n\n```js\nchart.on(eventName, query, handler);\n```\n\n`query` 可为 `string` 或者 `Object`。\n\n如果为 `string` 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:\n\n```js\nchart.on('click', 'series', function() {});\nchart.on('click', 'series.line', function() {});\nchart.on('click', 'dataZoom', function() {});\nchart.on('click', 'xAxis.category', function() {});\n```\n\n如果为 `Object`,可以包含以下一个或多个属性,每个属性都是可选的:\n\n```ts\n{\n ${mainType}Index: number // 组件 index\n ${mainType}Name: string // 组件 name\n ${mainType}Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type,如关系图中的 'node', 'edge'\n element: string // 自定义系列中的 el 的 name\n}\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // 关系图的边被点击时此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。\n});\n```\n\n你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:\n\n```js\nmyChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }\n ]\n });\n });\n});\n```\n\n## 组件交互的行为事件\n\n在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 [events](https://echarts.apache.org//api.html#events) 文档中有列出。\n\n下面是监听一个图例开关的示例:\n\n```js\n// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function(params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n```\n\n## 代码触发 ECharts 中组件的行为\n\n上面提到诸如 `'legendselectchanged'` 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。\n\n在 ECharts 通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。\n\n常用的动作和动作对应参数在 [action](https://echarts.apache.org//api.html#action) 文档中有列出。\n\n下面示例演示了如何通过 `dispatchAction` 去轮流高亮饼图的每个扇形。\n\n```js [live]\noption = {\n title: {\n text: '饼图程序调用高亮示例',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n // 取消之前高亮的图形\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n // 高亮当前图形\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n // 显示 tooltip\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n```\n\n## 监听“空白处”的事件\n\n有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。\n\n在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。\n\n```js\nmyChart.getZr().on('click', function(event) {\n // 该监听器正在监听一个`zrender 事件`。\n});\nmyChart.on('click', function(event) {\n // 该监听器正在监听一个`echarts 事件`。\n});\n```\n\nzrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。\n\n有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:\n\n```js\nmyChart.getZr().on('click', function(event) {\n // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。\n if (!event.target) {\n // 点击在了空白处,做些什么。\n }\n});\n```\n","dir":"/zh/concepts","path":"/zh/concepts/event","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-07-21T11:12:44.166Z","meta":{"version":0,"revision":0,"created":1627897108787},"$loki":52},{"slug":"legend","toc":[{"id":"布局","depth":2,"text":"布局"},{"id":"样式","depth":2,"text":"样式"},{"id":"交互","depth":2,"text":"交互"},{"id":"图例注意事项","depth":2,"text":"图例注意事项"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"图例"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9B%BE%E4%BE%8B","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图例"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"布局"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%B8%83%E5%B1%80","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"布局"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于图例较多时,可以使用可滚动翻页的图例"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"样式"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%A0%B7%E5%BC%8F","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"样式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"80%","height":"80%","src":"images/design/legend/charts_sign_img04.png"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"交互"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E4%BA%A4%E4%BA%92","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"交互"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"图例注意事项"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图例注意事项"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。"}]}]},"text":"# 图例\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 source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n对于图例较多时,可以使用可滚动翻页的图例\n\n```js\noption = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n```\n\n## 样式\n\n在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\n图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## 交互\n\n根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n```\n\n## 图例注意事项\n\n图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。\n\n```js\noption = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n```\n\n当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。\n","dir":"/zh/concepts","path":"/zh/concepts/legend","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-07-21T13:04:56.122Z","meta":{"version":0,"revision":0,"created":1627897108799},"$loki":53},{"slug":"style","toc":[{"id":"颜色主题(theme)","depth":2,"text":"颜色主题(Theme)"},{"id":"调色盘","depth":2,"text":"调色盘"},{"id":"直接的样式设置-itemstyle-linestyle-areastyle-label-","depth":2,"text":"直接的样式设置 itemStyle, lineStyle, areaStyle, label, ..."},{"id":"高亮的样式:emphasis","depth":2,"text":"高亮的样式:emphasis"},{"id":"通过-visualmap-组件设定样式","depth":2,"text":"通过 visualMap 组件设定样式"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"echarts-中的样式简介"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts 中的样式简介"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本文主要是大略概述,用哪些方法,可以在 Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"之所以用“样式”这种可能不很符合数据可视化思维的词,是因为,比较通俗易懂。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"颜色主题(Theme)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"调色盘"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"直接样式设置(itemStyle、lineStyle、areaStyle、label、...)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"视觉映射(visualMap)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"颜色主题(theme)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"颜色主题(Theme)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 "},{"type":"element","tag":"a","props":{"href":"$%7BwebsitePath%7D/examples"},"children":[{"type":"text","value":"示例集合"}]},{"type":"text","value":" 中,可以通过切换深色模式,直接看到采用主题的效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts5 除了一贯的默认主题外,还内置了"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'dark'"}]},{"type":"text","value":"主题。可以如下切换成深色模式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var chart = echarts.init(dom, 'dark');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/theme-builder.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"主题编辑器"}]},{"type":"text","value":" 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 假设主题名称是 \"vintage\"\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// HTML 引入 vintage.js 文件后(假设主题名称是 \"vintage\")\nvar chart = echarts.init(dom, 'vintage');\n// ...\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"调色盘"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%B0%83%E8%89%B2%E7%9B%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"调色盘"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n // 全局调色盘。\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // 此系列自己的调色盘。\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // 此系列自己的调色盘。\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"直接的样式设置-itemstyle-linestyle-areastyle-label-"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"直接的样式设置 itemStyle, lineStyle, areaStyle, label, ..."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"直接的样式设置是比较常用设置方式。纵观 ECharts 的 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"option"}]},{"type":"text","value":" 中,很多地方可以设置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.label","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" 等可能出现在不同的地方。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"高亮的样式:emphasis"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"高亮的样式:emphasis"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.emphasis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" 属性来定制。"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.emphasis","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"emphsis"}]},{"type":"text","value":" 中的结构,和普通样式的结构相同,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这种写法 "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"仍然被兼容"}]},{"type":"text","value":",但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"normal"}]},{"type":"text","value":" 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"通过-visualmap-组件设定样式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"通过 visualMap 组件设定样式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":" 能指定数据到颜色、图形尺寸的映射规则,详见 "},{"type":"element","tag":"a","props":{"href":"zh/concepts/visual-map"},"children":[{"type":"text","value":"数据的视觉映射"}]},{"type":"text","value":"。"}]}]},"text":"# 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}/examples) 中,可以通过切换深色模式,直接看到采用主题的效果。\n\nECharts5 除了一贯的默认主题外,还内置了`'dark'`主题。可以如下切换成深色模式:\n\n```js\nvar chart = echarts.init(dom, 'dark');\n```\n\n其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 [主题编辑器](https://echarts.apache.org/theme-builder.html) 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:\n\n如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:\n\n```js\n// 假设主题名称是 \"vintage\"\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n```\n\n如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:\n\n```js\n// HTML 引入 vintage.js 文件后(假设主题名称是 \"vintage\")\nvar chart = echarts.init(dom, 'vintage');\n// ...\n```\n\n## 调色盘\n\n调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。\n\n```js\noption = {\n // 全局调色盘。\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // 此系列自己的调色盘。\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // 此系列自己的调色盘。\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n```\n\n## 直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...\n\n直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option](https://echarts.apache.org/option.html#) 中,很多地方可以设置 [itemStyle](https://echarts.apache.org/option.html#series-bar.itemStyle)、[lineStyle](https://echarts.apache.org/option.html#series-line.lineStyle)、[areaStyle](https://echarts.apache.org/option.html#series-line.areaStyle)、[label](https://echarts.apache.org/option.html#series-bar.label) 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。\n\n一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,`itemStyle`、`label` 等可能出现在不同的地方。\n\n在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:\n\n```js [live]\nvar data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n```\n\n## 高亮的样式:emphasis\n\n在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 [emphasis](https://echarts.apache.org/option.html#series-bar.emphasis) 属性来定制。[emphsis](https://echarts.apache.org/option.html#series-bar.emphasis) 中的结构,和普通样式的结构相同,例如:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\n注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\n这种写法 **仍然被兼容**,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 `normal` 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。\n\n## 通过 visualMap 组件设定样式\n\n[visualMap 组件](https://echarts.apache.org/option.html#visualMap) 能指定数据到颜色、图形尺寸的映射规则,详见 [数据的视觉映射](zh/concepts/visual-map)。\n","dir":"/zh/concepts","path":"/zh/concepts/style","extension":".md","createdAt":"2021-07-21T05:40:02.101Z","updatedAt":"2021-07-21T15:26:59.863Z","meta":{"version":0,"revision":0,"created":1627897108820},"$loki":54},{"slug":"visual-map","toc":[{"id":"数据和维度","depth":2,"text":"数据和维度"},{"id":"visualmap-组件","depth":2,"text":"visualMap 组件"},{"id":"连续型与分段型视觉映射组件","depth":2,"text":"连续型与分段型视觉映射组件"},{"id":"连续型视觉映射","depth":3,"text":"连续型视觉映射"},{"id":"分段型视觉映射","depth":3,"text":"分段型视觉映射"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"数据的视觉映射"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据的视觉映射"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"此外,ECharts 还提供了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":" 来提供通用的视觉映射。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 组件中可以使用的视觉元素有:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"图形类别(symbol)、图形大小(symbolSize)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面对 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 组件的使用方式进行简要的介绍。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据和维度"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据和维度"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 中的数据,一般存放于 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.data"}]}]},{"type":"text","value":" 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" 最常见的形式,是“线性表“,即一个普通数组:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: 2323, // 这是数据项的数据值(value)\n itemStyle: {}\n },\n 1212, // 也可以直接是 dataItem 的 value,这更常见。\n 2323, // 每个 value 都是“一维“的。\n 4343,\n 3434\n ];\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value)\n itemStyle: {}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的,每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是“气泡图“,常见第一维度映射到x轴,\n // 第二维度映射到y轴,\n // 第三维度映射到气泡半径(symbolSize)\n ];\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":"。最常见的情况,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"散点图(scatter)"}]},{"type":"text","value":" 使用半径展现了第三个维度。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"visualmap-组件"},"children":[{"type":"element","tag":"a","props":{"href":"#visualmap-%E7%BB%84%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"visualMap 组件定义了把数据的"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"哪个维度"}]},{"type":"text","value":"映射到"},{"type":"element","tag":"em","props":{},"children":[{"type":"text","value":"什么视觉元素上"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"现在提供如下两种类型的 visualMap 组件,通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.type","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.type"}]},{"type":"text","value":" 来区分。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其定义结构例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n visualMap: [\n // 可以同时定义多个 visualMap 组件。\n {\n // 第一个 visualMap 组件\n type: 'continuous' // 定义为连续型 visualMap\n // ...\n },\n {\n // 第二个 visualMap 组件\n type: 'piecewise' // 定义为分段型 visualMap\n // ...\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"连续型与分段型视觉映射组件"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"连续型与分段型视觉映射组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 的视觉映射组件分为连续型("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-continuous","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMapContinuous"}]},{"type":"text","value":")与分段型("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMapPiecewise"}]},{"type":"text","value":")。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"连续型视觉映射"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"连续型视觉映射"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度(即 value[3])被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: {\n // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,\n // 数据最小值映射到'blue'上,\n // 最大值映射到'red'上,\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围,\n // 数据最小值映射到30上,\n // 最大值映射到100上,\n // 其余自动线性计算。\n },\n outOfRange: {\n // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其中,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.inRange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.inRange"}]},{"type":"text","value":" 表示在数据映射范围内的数据采用的样式;而 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap.outOfRange","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap.outOfRange"}]},{"type":"text","value":" 则指定了超出映射范围外的数据的样式。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"~visualMap.dimension"},"children":[{"type":"text","value":"visualMap.dimension"}]},{"type":"text","value":" 则指定了将数据的哪个维度做视觉映射。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"分段型视觉映射"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"分段型视觉映射"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"分段型视觉映射组件有三种模式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"连续型数据平均分段:依据 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.splitNumber"}]},{"type":"text","value":" 来自动平均分割成若干块。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"连续型数据自定义分段:依据 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.pieces","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.pieces"}]},{"type":"text","value":" 来定义每块范围。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"离散数据(类别性数据):类别定义在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap-piecewise.categories","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap-piecewise.categories"}]},{"type":"text","value":" 中。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用分段型视觉映射时,需要将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" 设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'piecewise'"}]},{"type":"text","value":",并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。"}]}]},"text":"# 数据的视觉映射\n\n数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。\n\nECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。\n\n此外,ECharts 还提供了 [visualMap 组件](https://echarts.apache.org/option.html#visualMap) 来提供通用的视觉映射。`visualMap` 组件中可以使用的视觉元素有:\n\n- 图形类别(symbol)、图形大小(symbolSize)\n- 颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、\n- 颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)\n\n下面对 `visualMap` 组件的使用方式进行简要的介绍。\n\n## 数据和维度\n\nECharts 中的数据,一般存放于 [`series.data`](https://echarts.apache.org/option.html#series.data) 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。\n\n例如,[series.data](https://echarts.apache.org/option.html#series.data) 最常见的形式,是“线性表“,即一个普通数组:\n\n```js\nseries: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: 2323, // 这是数据项的数据值(value)\n itemStyle: {}\n },\n 1212, // 也可以直接是 dataItem 的 value,这更常见。\n 2323, // 每个 value 都是“一维“的。\n 4343,\n 3434\n ];\n}\n```\n\n```js\nseries: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value)\n itemStyle: {}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的,每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是“气泡图“,常见第一维度映射到x轴,\n // 第二维度映射到y轴,\n // 第三维度映射到气泡半径(symbolSize)\n ];\n}\n```\n\n在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 `visualMap`。最常见的情况,[散点图(scatter)](https://echarts.apache.org/option.html#series-scatter) 使用半径展现了第三个维度。\n\n## visualMap 组件\n\nvisualMap 组件定义了把数据的*哪个维度*映射到*什么视觉元素上*。\n\n现在提供如下两种类型的 visualMap 组件,通过 [visualMap.type](https://echarts.apache.org/option.html#visualMap.type) 来区分。\n\n其定义结构例如:\n\n```js\noption = {\n visualMap: [\n // 可以同时定义多个 visualMap 组件。\n {\n // 第一个 visualMap 组件\n type: 'continuous' // 定义为连续型 visualMap\n // ...\n },\n {\n // 第二个 visualMap 组件\n type: 'piecewise' // 定义为分段型 visualMap\n // ...\n }\n ]\n // ...\n};\n```\n\n## 连续型与分段型视觉映射组件\n\nECharts 的视觉映射组件分为连续型([visualMapContinuous](https://echarts.apache.org/option.html#visualMap-continuous))与分段型([visualMapPiecewise](https://echarts.apache.org/option.html#visualMap-piecewise))。\n\n连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。\n\n### 连续型视觉映射\n\n连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。\n\n```js\noption = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度(即 value[3])被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: {\n // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,\n // 数据最小值映射到'blue'上,\n // 最大值映射到'red'上,\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围,\n // 数据最小值映射到30上,\n // 最大值映射到100上,\n // 其余自动线性计算。\n },\n outOfRange: {\n // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n```\n\n其中,[visualMap.inRange](https://echarts.apache.org/option.html#visualMap.inRange) 表示在数据映射范围内的数据采用的样式;而 [visualMap.outOfRange](https://echarts.apache.org/option.html#visualMap.outOfRange) 则指定了超出映射范围外的数据的样式。\n\n[visualMap.dimension](~visualMap.dimension) 则指定了将数据的哪个维度做视觉映射。\n\n### 分段型视觉映射\n\n分段型视觉映射组件有三种模式:\n\n- 连续型数据平均分段:依据 [visualMap-piecewise.splitNumber](https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber) 来自动平均分割成若干块。\n- 连续型数据自定义分段:依据 [visualMap-piecewise.pieces](https://echarts.apache.org/option.html#visualMap-piecewise.pieces) 来定义每块范围。\n- 离散数据(类别性数据):类别定义在 [visualMap-piecewise.categories](https://echarts.apache.org/option.html#visualMap-piecewise.categories) 中。\n\n使用分段型视觉映射时,需要将 `type` 设为 `'piecewise'`,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。\n","dir":"/zh/concepts","path":"/zh/concepts/visual-map","extension":".md","createdAt":"2021-06-04T12:26:37.934Z","updatedAt":"2021-06-04T12:26:37.934Z","meta":{"version":0,"revision":0,"created":1627897108838},"$loki":55},{"slug":"data-transform","toc":[{"id":"get-started-to-data-transform","depth":2,"text":"Get Started to Data Transform"},{"id":"advanced-usage","depth":2,"text":"Advanced Usage"},{"id":"filter-transform","depth":2,"text":"Filter Transform"},{"id":"the-transform-sort","depth":2,"text":"The transform \"sort\""},{"id":"use-external-transforms","depth":2,"text":"Use External Transforms"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"data-transform"},"children":[{"type":"element","tag":"a","props":{"href":"#data-transform","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Data Transform"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Data transform"}]},{"type":"text","value":" has been supported since Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 5. In echarts, the term "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data transform"}]},{"type":"text","value":" means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common \"transform functions\" to make that kind of tasks \"out-of-the-box\". (For consistency in the context, the noun form of the word we keep using the \"transform\" rather than \"transformation\")."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The abstract formula of data transform is: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"outData = f(inputData)"}]},{"type":"text","value":", where the transform function "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" can be like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"filter"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sort"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"regression"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"boxplot"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"cluster"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aggregate"}]},{"type":"text","value":"(todo) ...\nWith the help of those transform methods, users can be implements the features like:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Partition data into multiple series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Make some statistics and visualize the result."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Adapt some visualization algorithms to data and display the result."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Sort data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Remove or choose some kind of empty or special datums."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"get-started-to-data-transform"},"children":[{"type":"element","tag":"a","props":{"href":"#get-started-to-data-transform","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Get Started to Data Transform"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In echarts, data transform is implemented based on the concept of "},{"type":"element","tag":"a","props":{"href":"~https://echarts.apache.org/option.html##dataset"},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":". A "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.transform","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.transform"}]},{"type":"text","value":" can be configured in a dataset instance to indicate that this dataset is to be generated from this "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":". For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: [\n {\n // This dataset is on `datasetIndex: 0`.\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // This dataset is on `datasetIndex: 1`.\n // A `transform` is configured to indicate that the\n // final data of this dataset is transformed via this\n // transform function.\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // There can be optional properties `fromDatasetIndex` or `fromDatasetId`\n // to indicate that where is the input data of the transform from.\n // For example, `fromDatasetIndex: 0` specify the input data is from\n // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the\n // input data is from the dataset having `id: 'a'`.\n // [DEFAULT_RULE]\n // If both `fromDatasetIndex` and `fromDatasetId` are omitted,\n // `fromDatasetIndex: 0` are used by default.\n },\n {\n // This dataset is on `datasetIndex: 2`.\n // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is\n // specified, `fromDatasetIndex: 0` is used by default\n transform: {\n // The \"filter\" transform filters and gets data items only match\n // the given condition in property `config`.\n type: 'filter',\n // Transforms has a property `config`. In this \"filter\" transform,\n // the `config` specify the condition that each result data item\n // should be satisfied. In this case, this transform get all of\n // the data items that the value on dimension \"Year\" equals to 2012.\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // This dataset is on `datasetIndex: 3`\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // In this case, each \"pie\" series reference to a dataset that has\n // the result of its \"filter\" transform.\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's summarize the key points of using data transform:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Generate new data from existing declared data via the declaration of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromDatasetIndex"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromDatasetId"}]},{"type":"text","value":" in some blank dataset."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Series references these datasets to show the result."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"advanced-usage"},"children":[{"type":"element","tag":"a","props":{"href":"#advanced-usage","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Advanced Usage"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"piped-transform"},"children":[{"type":"element","tag":"a","props":{"href":"#piped-transform","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Piped Transform"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is a syntactic sugar that pipe transforms like:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [] // The original data\n },\n {\n // Declare transforms in an array to pipe multiple transforms,\n // which makes them execute one by one and take the output of\n // the previous transform as the input of the next transform.\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // Display the result of the piped transform.\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"output-multiple-data"},"children":[{"type":"element","tag":"a","props":{"href":"#output-multiple-data","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Output Multiple Data"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We use prop "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.fromTransformResult","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.fromTransformResult"}]},{"type":"text","value":" to satisfy this requirement. For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n // Original source data.\n source: []\n },\n {\n transform: {\n type: 'boxplot'\n }\n // After this \"boxplot transform\" two result data generated:\n // result[0]: The boxplot data\n // result[1]: The outlier data\n // By default, when series or other dataset reference this dataset,\n // only result[0] can be visited.\n // If we need to visit result[1], we have to use another dataset\n // as follows:\n },\n {\n // This extra dataset references the dataset above, and retrieves\n // the result[1] as its own data. Thus series or other dataset can\n // reference this dataset to get the data from result[1].\n fromDatasetIndex: 1,\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // Reference the data from result[1].\n datasetIndex: 2\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"What more, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.fromTransformResult","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.fromTransformResult"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.transform","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.transform"}]},{"type":"text","value":" can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromTransformResult"}]},{"type":"text","value":". For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"debug-in-develop-environment"},"children":[{"type":"element","tag":"a","props":{"href":"#debug-in-develop-environment","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Debug in Develop Environment"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform.print"}]},{"type":"text","value":" might help in such case. ("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform.print"}]},{"type":"text","value":" is only available in dev environment)."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // The result of this transform will be printed\n // in dev tool via `console.log`.\n print: true\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"filter-transform"},"children":[{"type":"element","tag":"a","props":{"href":"#filter-transform","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Filter Transform"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Transform type \"filter\" is a built-in transform that provide data filter according to specified conditions. The basic option is like:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // The config is the \"condition\" of this filter.\n // This transform traverse the source data and\n // and retrieve all the items that the \"Year\"\n // is `2011`.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is another example of filter transform:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"data-transform-filter"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"About dimension:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config.dimension"}]},{"type":"text","value":" can be:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Dimension name declared in dataset, like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 'Year', '=': 2011 }"}]},{"type":"text","value":". Dimension name declaration is not mandatory."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Dimension index (start from 0), like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 3, '=': 2011 }"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"About relational operator:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The relational operator can be:\n"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gt"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gte"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lt"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lte"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"eq"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"!="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ne"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<>"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"reg"}]},{"type":"text","value":". (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Multiple operators are able to appear in one {} item like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{ dimension: 'Price', '>=': 20, '<': 30 }"}]},{"type":"text","value":", which means logical \"and\" (Price >= 20 and Price < 30)."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If we need to compare \"JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" instance\" or date string (like '2012-05-12'), we need to specify "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":" manually, like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 3, lt: '2012-05-12', parser: 'time' }"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Pure string comparison is supported but can only be used in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"!="}]},{"type":"text","value":". "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">="}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<="}]},{"type":"text","value":" do not support pure string comparison (the \"right value\" of the four operators can not be a \"string\")."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The operator "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"reg"}]},{"type":"text","value":" can be used to make regular expression test. Like using "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }"}]},{"type":"text","value":" to select all data items that the \"Name\" dimension contains family name Müller."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"About logical relationship:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes we also need to express logical relationship ( "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" / "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"or"}]},{"type":"text","value":" / "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" ):"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // Use operator \"and\".\n // Similarly, we can also use \"or\", \"not\" in the same place.\n // But \"not\" should be followed with a {...} rather than `[...]`.\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // The condition is \"Year\" is 2011 and \"Price\" is greater\n // or equal to 20 but less than 30.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"and"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"or"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" can be nested like:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"transform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"About parser:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some \"parser\" can be specified when make value comparison. At present only supported:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":": Parse the value to date time before comparing. The parser rule is the same as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.parse"}]},{"type":"text","value":", where JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" instance, timestamp number (in millisecond) and time string (like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'2012-05-12 03:11:22'"}]},{"type":"text","value":") are supported to be parse to timestamp number, while other value will be parsed to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"NaN"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'trim'"}]},{"type":"text","value":": Trim the string before making comparison. For non-string, return the original value."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":": Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"NaN"}]},{"type":"text","value":". In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'33%'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"12px"}]},{"type":"text","value":"), we should use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":" to convert them to number before making comparison."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is an example to show the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Formally definition:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, we give the formally definition of the filter transform config here:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"the-transform-sort"},"children":[{"type":"element","tag":"a","props":{"href":"#the-transform-sort","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"The transform \"sort\""}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Another built-in transform is \"sort\"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // Sort by score.\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"data-transform-sort-bar"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some extra features about \"sort transform\":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Order by multiple dimensions is supported. See examples below."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The sort rule:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"By default \"numeric\" (that is, number and numeric-string like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"' 123 '"}]},{"type":"text","value":") are able to sorted by numeric order."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"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)."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When \"numeric\" is compared with \"non-numeric-string\", or either of them is compared with other types of value, they are not comparable. So we call the latter one as \"incomparable\" and treat it as \"min value\" or \"max value\" according to the prop "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"incomparable: 'min' | 'max'"}]},{"type":"text","value":". This feature usually helps to decide whether to put the empty values (like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"NaN"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"''"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'-'"}]},{"type":"text","value":") or other illegal values to the head or tail."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"filter: 'time' | 'trim' | 'number'"}]},{"type":"text","value":" can be used, the same as \"filter transform\".\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If intending to sort time values (JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" instance or time string like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'2012-03-12 11:13:54'"}]},{"type":"text","value":"), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":" should be specified. Like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 'date', order: 'desc', parser: 'time' }"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If intending to sort values with unit suffix (like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'33%'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'16px'"}]},{"type":"text","value":"), need to use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See an example of multiple order:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // Sort by the two dimensions.\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/data-transform-multiple-sort-bar"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, we give the formally definition of the sort transform config here:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"use-external-transforms"},"children":[{"type":"element","tag":"a","props":{"href":"#use-external-transforms","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Use External Transforms"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-stat","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ecStat"}]},{"type":"text","value":" as an example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This case show how to make a regression line via ecStat:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Register the external transform at first.\necharts.registerTransform(ecStatTransform(ecStat).regression);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // Reference the registered external transform.\n // Note that external transform has a namespace (like 'ecStat:xxx'\n // has namespace 'ecStat').\n // built-in transform (like 'filter', 'sort') does not have a namespace.\n type: 'ecStat:regression',\n config: {\n // Parameters needed by the external transform.\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Examples with echarts-stat:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Aggregate"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Bar histogram"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Scatter clustering"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Scatter linear regression"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Scatter exponential regression"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Scatter logarithmic regression"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Scatter polynomial regression"}]}]},{"type":"text","value":"\n"}]}]},"text":"# 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-box\". (For consistency in the context, the noun form of the word we keep using the \"transform\" rather than \"transformation\").\n\nThe abstract formula of data transform is: `outData = f(inputData)`, where the transform function `f` can be like `filter`, `sort`, `regression`, `boxplot`, `cluster`, `aggregate`(todo) ...\nWith the help of those transform methods, users can be implements the features like:\n\n- Partition data into multiple series.\n- Make some statistics and visualize the result.\n- Adapt some visualization algorithms to data and display the result.\n- Sort data.\n- Remove or choose some kind of empty or special datums.\n- ...\n\n## Get Started to Data Transform\n\nIn echarts, data transform is implemented based on the concept of [dataset](~https://echarts.apache.org/option.html##dataset). A [dataset.transform](https://echarts.apache.org/option.html##dataset.transform) can be configured in a dataset instance to indicate that this dataset is to be generated from this `transform`. For example:\n\n```js [live]\nvar option = {\n dataset: [\n {\n // This dataset is on `datasetIndex: 0`.\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // This dataset is on `datasetIndex: 1`.\n // A `transform` is configured to indicate that the\n // final data of this dataset is transformed via this\n // transform function.\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // There can be optional properties `fromDatasetIndex` or `fromDatasetId`\n // to indicate that where is the input data of the transform from.\n // For example, `fromDatasetIndex: 0` specify the input data is from\n // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the\n // input data is from the dataset having `id: 'a'`.\n // [DEFAULT_RULE]\n // If both `fromDatasetIndex` and `fromDatasetId` are omitted,\n // `fromDatasetIndex: 0` are used by default.\n },\n {\n // This dataset is on `datasetIndex: 2`.\n // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is\n // specified, `fromDatasetIndex: 0` is used by default\n transform: {\n // The \"filter\" transform filters and gets data items only match\n // the given condition in property `config`.\n type: 'filter',\n // Transforms has a property `config`. In this \"filter\" transform,\n // the `config` specify the condition that each result data item\n // should be satisfied. In this case, this transform get all of\n // the data items that the value on dimension \"Year\" equals to 2012.\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // This dataset is on `datasetIndex: 3`\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // In this case, each \"pie\" series reference to a dataset that has\n // the result of its \"filter\" transform.\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n```\n\nLet's summarize the key points of using data transform:\n\n- Generate new data from existing declared data via the declaration of `transform`, `fromDatasetIndex`/`fromDatasetId` in some blank dataset.\n- Series references these datasets to show the result.\n\n## Advanced Usage\n\n#### Piped Transform\n\nThere is a syntactic sugar that pipe transforms like:\n\n```js\noption = {\n dataset: [\n {\n source: [] // The original data\n },\n {\n // Declare transforms in an array to pipe multiple transforms,\n // which makes them execute one by one and take the output of\n // the previous transform as the input of the next transform.\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // Display the result of the piped transform.\n datasetIndex: 1\n }\n};\n```\n\n> Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).\n\n#### Output Multiple Data\n\nIn most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.\n\nFor example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the [example](https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity).\n\nWe use prop [dataset.fromTransformResult](https://echarts.apache.org/option.html##dataset.fromTransformResult) to satisfy this requirement. For example:\n\n```js\noption = {\n dataset: [\n {\n // Original source data.\n source: []\n },\n {\n transform: {\n type: 'boxplot'\n }\n // After this \"boxplot transform\" two result data generated:\n // result[0]: The boxplot data\n // result[1]: The outlier data\n // By default, when series or other dataset reference this dataset,\n // only result[0] can be visited.\n // If we need to visit result[1], we have to use another dataset\n // as follows:\n },\n {\n // This extra dataset references the dataset above, and retrieves\n // the result[1] as its own data. Thus series or other dataset can\n // reference this dataset to get the data from result[1].\n fromDatasetIndex: 1,\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // Reference the data from result[1].\n datasetIndex: 2\n }\n ]\n};\n```\n\nWhat more, [dataset.fromTransformResult](https://echarts.apache.org/option.html##dataset.fromTransformResult) and [dataset.transform](https://echarts.apache.org/option.html##dataset.transform) can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by `fromTransformResult`. For example:\n\n```js\n{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n```\n\n#### Debug in Develop Environment\n\nWhen using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property `transform.print` might help in such case. (`transform.print` is only available in dev environment).\n\n```js\noption = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // The result of this transform will be printed\n // in dev tool via `console.log`.\n print: true\n }\n }\n ]\n};\n```\n\n## Filter Transform\n\nTransform type \"filter\" is a built-in transform that provide data filter according to specified conditions. The basic option is like:\n\n```js [live]\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // The config is the \"condition\" of this filter.\n // This transform traverse the source data and\n // and retrieve all the items that the \"Year\"\n // is `2011`.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\nThis is another example of filter transform:\n\n<md-example src=\"data-transform-filter\"></md-example>\n\n**About dimension:**\n\nThe `config.dimension` can be:\n\n- Dimension name declared in dataset, like `config: { dimension: 'Year', '=': 2011 }`. Dimension name declaration is not mandatory.\n- Dimension index (start from 0), like `config: { dimension: 3, '=': 2011 }`.\n\n**About relational operator:**\n\nThe relational operator can be:\n`>`(`gt`), `>=`(`gte`), `<`(`lt`), `<=`(`lte`), `=`(`eq`), `!=`(`ne`, `<>`), `reg`. (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:\n\n- Multiple operators are able to appear in one {} item like `{ dimension: 'Price', '>=': 20, '<': 30 }`, which means logical \"and\" (Price >= 20 and Price < 30).\n- 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.\n- If we need to compare \"JS `Date` instance\" or date string (like '2012-05-12'), we need to specify `parser: 'time'` manually, like `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`.\n- Pure string comparison is supported but can only be used in `=`, `!=`. `>`, `>=`, `<`, `<=` do not support pure string comparison (the \"right value\" of the four operators can not be a \"string\").\n- The operator `reg` can be used to make regular expression test. Like using `{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }` to select all data items that the \"Name\" dimension contains family name Müller.\n\n**About logical relationship:**\n\nSometimes we also need to express logical relationship ( `and` / `or` / `not` ):\n\n```js\noption = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // Use operator \"and\".\n // Similarly, we can also use \"or\", \"not\" in the same place.\n // But \"not\" should be followed with a {...} rather than `[...]`.\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // The condition is \"Year\" is 2011 and \"Price\" is greater\n // or equal to 20 but less than 30.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n`and`/`or`/`not` can be nested like:\n\n```js\ntransform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n```\n\n**About parser:**\n\nSome \"parser\" can be specified when make value comparison. At present only supported:\n\n- `parser: 'time'`: Parse the value to date time before comparing. The parser rule is the same as `echarts.time.parse`, where JS `Date` instance, timestamp number (in millisecond) and time string (like `'2012-05-12 03:11:22'`) are supported to be parse to timestamp number, while other value will be parsed to `NaN`.\n- `parser: 'trim'`: Trim the string before making comparison. For non-string, return the original value.\n- `parser: 'number'`: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to `NaN`. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like `'33%'`, `12px`), we should use `parser: 'number'` to convert them to number before making comparison.\n\nThis is an example to show the `parser: 'time'`:\n\n```js\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n```\n\n**Formally definition:**\n\nFinally, we give the formally definition of the filter transform config here:\n\n```ts\ntype FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## The transform \"sort\"\n\nAnother built-in transform is \"sort\".\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // Sort by score.\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"data-transform-sort-bar\"></md-example>\n\nSome extra features about \"sort transform\":\n\n- Order by multiple dimensions is supported. See examples below.\n- The sort rule:\n - By default \"numeric\" (that is, number and numeric-string like `' 123 '`) are able to sorted by numeric order.\n - 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).\n - When \"numeric\" is compared with \"non-numeric-string\", or either of them is compared with other types of value, they are not comparable. So we call the latter one as \"incomparable\" and treat it as \"min value\" or \"max value\" according to the prop `incomparable: 'min' | 'max'`. This feature usually helps to decide whether to put the empty values (like `null`, `undefined`, `NaN`, `''`, `'-'`) or other illegal values to the head or tail.\n- `filter: 'time' | 'trim' | 'number'` can be used, the same as \"filter transform\".\n - If intending to sort time values (JS `Date` instance or time string like `'2012-03-12 11:13:54'`), `parser: 'time'` should be specified. Like `config: { dimension: 'date', order: 'desc', parser: 'time' }`\n - If intending to sort values with unit suffix (like `'33%'`, `'16px'`), need to use `parser: 'number'`.\n\nSee an example of multiple order:\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // Sort by the two dimensions.\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"doc-example/data-transform-multiple-sort-bar\"></md-example>\n\nFinally, we give the formally definition of the sort transform config here:\n\n```ts\ntype SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## Use External Transforms\n\nBesides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library [ecStat](https://github.com/ecomfe/echarts-stat) as an example:\n\nThis case show how to make a regression line via ecStat:\n\n```js\n// Register the external transform at first.\necharts.registerTransform(ecStatTransform(ecStat).regression);\n```\n\n```js\noption = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // Reference the registered external transform.\n // Note that external transform has a namespace (like 'ecStat:xxx'\n // has namespace 'ecStat').\n // built-in transform (like 'filter', 'sort') does not have a namespace.\n type: 'ecStat:regression',\n config: {\n // Parameters needed by the external transform.\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n```\n\nExamples with echarts-stat:\n\n- [Aggregate](https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1)\n- [Bar histogram](https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1)\n- [Scatter clustering](https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1)\n- [Scatter linear regression](https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1)\n- [Scatter exponential regression](https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1)\n- [Scatter logarithmic regression](https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1)\n- [Scatter polynomial regression](https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1)\n","dir":"/en/concepts","path":"/en/concepts/data-transform","extension":".md","createdAt":"2021-06-04T12:26:37.918Z","updatedAt":"2021-07-29T06:27:28.876Z","meta":{"version":0,"revision":0,"created":1627897108899},"$loki":56},{"slug":"dataset","toc":[{"id":"define-data-under-series","depth":2,"text":"Define data under series"},{"id":"define-data-in-dataset","depth":2,"text":"Define data in dataset"},{"id":"map-from-data-to-chart","depth":2,"text":"Map from Data to Chart"},{"id":"map-row-or-column-of-dataset-to-series","depth":2,"text":"Map Row or Column of dataset to series"},{"id":"dimension","depth":2,"text":"Dimension"},{"id":"map-from-data-to-charts-seriesencode","depth":2,"text":"Map from Data to Charts (series.encode)"},{"id":"default-seriesencode","depth":2,"text":"Default series.encode"},{"id":"some-normal-settings-of-seriesencode","depth":2,"text":"Some Normal Settings of series.encode"},{"id":"visual-channel-mapping","depth":2,"text":"Visual Channel Mapping"},{"id":"formats-of-charts","depth":2,"text":"Formats of Charts"},{"id":"how-to-reference-several-datasets","depth":2,"text":"How to Reference Several Datasets"},{"id":"seriesdata-in-echarts-3","depth":2,"text":"series.data in ECharts 3"},{"id":"others","depth":2,"text":"Others"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"dataset"},"children":[{"type":"element","tag":"a","props":{"href":"#dataset","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dataset"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" is a component dedicated to manage data. Although you can set the data in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" for every series, we recommend you use the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of \"data and configs\". After all, data is the most common part to be changed while other configurations will mostly not change at runtime."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"define-data-under-series"},"children":[{"type":"element","tag":"a","props":{"href":"#define-data-under-series","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Define "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If data is defined under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":", for example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Define "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" is suitable for customization for some special data structures such as \"tree\", \"graph\" and large data.\nHowever, 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"define-data-in-dataset"},"children":[{"type":"element","tag":"a","props":{"href":"#define-data-in-dataset","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Define "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here are the advantages if you define "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"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."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is a simple "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide a set of data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare an x-axis (category axis).\n // The category map the first row in the dataset by default.\n xAxis: { type: 'category' },\n // Declare a y-axis (value axis).\n yAxis: {},\n // Declare several 'bar' series,\n // every series will auto-map to each rows by default.\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or try to use the \"array of classes\" format:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Define the dimension of array. In cartesian coordinate system,\n // if the type of x-axis is category, map the first dimension to\n // x-axis by default, the second dimension to y-axis.\n // You can also specify 'series.encode' to complete the map\n // without specify dimensions. Please see below.\n\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"map-from-data-to-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#map-from-data-to-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Map from Data to Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In short, you can set these configs of mapping:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Specify 'column' or 'row' of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" to map the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":". You can use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.seriesLayoutBy","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.seriesLayoutBy"}]},{"type":"text","value":" to configure it. The default is to map according to the column."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"axis"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"tooltip"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":". To configure the mapping, please use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.encode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":". The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":"; three-column chart mapping with each row in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" one by one."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The details of the configuration are shown below:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"map-row-or-column-of-dataset-to-series"},"children":[{"type":"element","tag":"a","props":{"href":"#map-row-or-column-of-dataset-to-series","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Map Row or Column of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After having the dataset, you can configure flexibly: how the data map to the axis and graph series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" to change the understanding of row and column of the chart. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" can be:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'column': Default, the series are placed above the column of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'row': The series is placed above the row of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check this case:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // These series will show in the first coordinate, each series map a row in dataset.\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // These series will show in the second coordinate, each series map a column in dataset.\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The effect of configuration is shown in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"this case"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"dimension"},"children":[{"type":"element","tag":"a","props":{"href":"#dimension","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dimension"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the data described in commonly used charts is a \"two-dimensional table\" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a \"dimension\" and each row was called \"item\", vice versa."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'score'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'amount'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'product'"}]},{"type":"text","value":" are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":". You can also use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.sourceHeader: true"}]},{"type":"text","value":" to declare that the first column (row) represents the dimension name."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to use single "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.dimensions"}]},{"type":"text","value":" or some "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.dimensions"}]},{"type":"text","value":" to define the dimensions, therefore you can specify the name and type together."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // can be abbreviated as 'string', to indicate dimension name 。\n 'amount',\n // Specify dimensions in 'type'.\n { name: 'product', type: 'ordinal' }\n ],\n source: []\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: []\n },\n series: {\n type: 'line',\n // series.dimensions will cover the config in dataset.dimension\n dimensions: [\n null, // use null if you do not want dimension name.\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dimension type can be the following values:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'number'"}]},{"type":"text","value":": Default, normal data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'ordinal'"}]},{"type":"text","value":": String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":": To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":". For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":". If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) ="}]},{"type":"text","value":"'time'"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"), the dimension type will also be"}]},{"type":"text","value":"'time'`. See "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" for more time type support."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'float'"}]},{"type":"text","value":": Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"TypedArray"}]},{"type":"text","value":" to optimize the performance in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'float'"}]},{"type":"text","value":" dimension."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'int'"}]},{"type":"text","value":": Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"TypedArray"}]},{"type":"text","value":" to optimize the performance in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'int'"}]},{"type":"text","value":" dimension."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"map-from-data-to-charts-seriesencode"},"children":[{"type":"element","tag":"a","props":{"href":"#map-from-data-to-charts-seriesencode","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Map from Data to Charts (series.encode)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"After understand the concept of dimension, you can use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.encode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" to make a mapping:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // Map \"amount\" column to x-axis.\n x: 'amount',\n // Map \"product\" row to y-axis.\n y: 'product'\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The basic structure of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" declaration:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To the left of the colon: Specific name of axis or label."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Generally, the following info is not necessary to be defined. Fill in as needed."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Attribute suggested by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Supported in every coordinate and series:\nencode: {\n // Display the value of dimension named \"product\" and \"score\" in tooltip.\n tooltip: ['product', 'score']\n // Connect dimension name of \"Dimension 1\" and \"Dimension 3\" as the series name. (Avoid to repeat longer names in series.name)\n seriesName: [1, 3],\n // Means to use the value in \"Dimension 2\" as the id. It makes the new and old data correspond by id\n // when using setOption to update data, so that it can show animation properly.\n itemId: 2,\n // The itemName will show in the legend of Pie Charts.\n itemName: 3\n}\n\n// Grid/cartesian coordinate unique configs:\nencode: {\n // Map \"Dimension 1\", \"Dimension 5\" and \"dimension named 'score'\" to x-axis:\n x: [1, 5, 'score'],\n // Map \"Dimension 0\" to y-axis:\n y: 0\n}\n\n// singleAxis unique configs:\nencode: {\n single: 3\n}\n\n// Polar coordinate unique configs:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// Geo-coordinate unique configs:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some charts without coordinate like pie chart, funnel chart:\nencode: {\n value: 3\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a richer "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"default-seriesencode"},"children":[{"type":"element","tag":"a","props":{"href":"#default-seriesencode","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Default series.encode"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" is not specified. The default rule is:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While the default rule cannot fulfill the requirements, you can configure "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"encode"}]},{"type":"text","value":" by yourself, which is not complicate. Here is an "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=dataset-default","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"some-normal-settings-of-seriesencode"},"children":[{"type":"element","tag":"a","props":{"href":"#some-normal-settings-of-seriesencode","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Some Normal Settings of series.encode"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to set the 3rd column as x-axis, 5th column as y-axis?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n // dimensionIndex count from 0, so the 3rd line is dimensions[2].\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to set the 3rd row as x-axis, 5th row as y-axis?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to set the 2nd column as a label?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:\nWe now support to trace value from specific dimension for "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.label.formatter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"label.formatter"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n label: {\n // `'{@score}'` means the value in the dimension named \"score\".\n // `'{@[4]}'` means the value in dimension 4.\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to show the 2nd and 3rd column in the tooltip?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to define the dimension name if is not included in the dataset?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: How to map the 3rd column to the size of the scatter chart?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // means the 3rd column\n min: 2, // lower bound\n max: 15, // higher bound\n inRange: {\n // Size of the bubble.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Q: I specified a mapping in encode, why it is not worked?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A: Check your spelling, such as misspell the dimension name "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Life Expectancy'"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Life Expectency'"}]},{"type":"text","value":" in encode."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"visual-channel-mapping"},"children":[{"type":"element","tag":"a","props":{"href":"#visual-channel-mapping","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Visual Channel Mapping"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can map visual channel by using "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":". Check details in the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" document. Here is an "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"formats-of-charts"},"children":[{"type":"element","tag":"a","props":{"href":"#formats-of-charts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Formats of Charts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" and avoid some steps of data processing."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can switch .csv file to JSON using tools like "},{"type":"element","tag":"a","props":{"href":"https://github.com/d3/d3-dsv","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dsv"}]},{"type":"text","value":" or "},{"type":"element","tag":"a","props":{"href":"https://github.com/mholt/PapaParse","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PapaParse"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.seriesLayoutBy","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" in this format right now."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"dataset: [\n {\n // column by column key-value array is a normal format\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // row by row key-value\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"how-to-reference-several-datasets"},"children":[{"type":"element","tag":"a","props":{"href":"#how-to-reference-several-datasets","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"How to Reference Several Datasets"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts support to define several datasets at the same moment. Series can assign the one to reference by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.datasetIndex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.datasetIndex"}]},{"type":"text","value":". For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option = {\n dataset: [\n {\n // 1st Dataset\n source: []\n },\n {\n // 2nd Dataset\n source: []\n },\n {\n // 3rd Dataset。\n source: []\n }\n ],\n series: [\n {\n // Use 2nd dataset\n datasetIndex: 2\n },\n {\n // Use 1st dataset\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"seriesdata-in-echarts-3"},"children":[{"type":"element","tag":"a","props":{"href":"#seriesdata-in-echarts-3","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"series.data in ECharts 3"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":", then use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" but not "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In fact, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" is an important setting method which will always exist. Some special non-table format chart like "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-treemap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"treemap"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-graph","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"graph"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-lines","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lines"}]},{"type":"text","value":" still cannot be edit in dataset, you still need to use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":". In another way, for render huge amount of data (over a million), you need to use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/api.html#echartsInstance.appendData","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"appendData"}]},{"type":"text","value":" which is not supported by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"others"},"children":[{"type":"element","tag":"a","props":{"href":"#others","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Others"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following charts now support dataset:\n"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pie"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scatter"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"effectScatter"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parallel"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"candlestick"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"map"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"funnel"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom"}]},{"type":"text","value":".\nECharts will support more charts in the future."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the end, here is an "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=dataset-link","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":" of several charts shared one "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" with linkage interaction."}]}]},"text":"# 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 configurations will mostly not change at runtime.\n\n## Define `data` under `series`\n\nIf data is defined under `series`, for example:\n\n```js [live]\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\nDefine `data` under `series` is suitable for customization for some special data structures such as \"tree\", \"graph\" and large data.\nHowever, 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.\n\n## Define `data` in `dataset`\n\nHere are the advantages if you define `data` in `dataset`:\n\n- Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.\n- Divide data from other configurations. The data often change but others not. It is\n Easy to manage separately.\n- 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.\n- 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.\n\nHere is a simple `dataset` example:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide a set of data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare an x-axis (category axis).\n // The category map the first row in the dataset by default.\n xAxis: { type: 'category' },\n // Declare a y-axis (value axis).\n yAxis: {},\n // Declare several 'bar' series,\n // every series will auto-map to each rows by default.\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\nOr try to use the \"array of classes\" format:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // Define the dimension of array. In cartesian coordinate system,\n // if the type of x-axis is category, map the first dimension to\n // x-axis by default, the second dimension to y-axis.\n // You can also specify 'series.encode' to complete the map\n // without specify dimensions. Please see below.\n\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n## Map from Data to Chart\n\nThe ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.\n\nIn short, you can set these configs of mapping:\n\n- Specify 'column' or 'row' of `dataset` to map the `series`. You can use [series.seriesLayoutBy](https://echarts.apache.org/option.html##series.seriesLayoutBy) to configure it. The default is to map according to the column.\n- Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to `axis`, `tooltip`, `label` and `visualMap`. To configure the mapping, please use [series.encode](https://echarts.apache.org/option.html##series.encode) and [visualMap](https://echarts.apache.org/option.html##visualMap). The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in `dataset.source`; three-column chart mapping with each row in `dataset.source` one by one.\n\nThe details of the configuration are shown below:\n\n## Map Row or Column of `dataset` to `series`\n\nAfter having the dataset, you can configure flexibly: how the data map to the axis and graph series.\n\nYou can use `seriesLayoutBy` to change the understanding of row and column of the chart. `seriesLayoutBy` can be:\n\n- 'column': Default, the series are placed above the column of `dataset`.\n- 'row': The series is placed above the row of `dataset`.\n\nCheck this case:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // These series will show in the first coordinate, each series map a row in dataset.\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // These series will show in the second coordinate, each series map a column in dataset.\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n```\n\nThe effect of configuration is shown in [this case](https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by).\n\n## Dimension\n\nMost of the data described in commonly used charts is a \"two-dimensional table\" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a \"dimension\" and each row was called \"item\", vice versa.\n\nThe dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, `'score'`, `'amount'`, `'product'` are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in `dataset.source`. You can also use `dataset.sourceHeader: true` to declare that the first column (row) represents the dimension name.\n\nTry to use single `dataset.dimensions` or some `series.dimensions` to define the dimensions, therefore you can specify the name and type together.\n\n```js\nvar option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // can be abbreviated as 'string', to indicate dimension name 。\n 'amount',\n // Specify dimensions in 'type'.\n { name: 'product', type: 'ordinal' }\n ],\n source: []\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: []\n },\n series: {\n type: 'line',\n // series.dimensions will cover the config in dataset.dimension\n dimensions: [\n null, // use null if you do not want dimension name.\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n```\n\nIn most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.\n\nDimension type can be the following values:\n\n- `'number'`: Default, normal data.\n- `'ordinal'`: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.\n- `'time'`: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as `'time'`. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'`. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =`'time'`), the dimension type will also be`'time'`. See [data](https://echarts.apache.org/option.html##series.data) for more time type support.\n- `'float'`: Use `TypedArray` to optimize the performance in `'float'` dimension.\n- `'int'`: Use `TypedArray` to optimize the performance in `'int'` dimension.\n\n## Map from Data to Charts (series.encode)\n\nAfter understand the concept of dimension, you can use [series.encode](https://echarts.apache.org/option.html##series.encode) to make a mapping:\n\n```js [live]\nvar option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // Map \"amount\" column to x-axis.\n x: 'amount',\n // Map \"product\" row to y-axis.\n y: 'product'\n }\n }\n ]\n};\n```\n\nThe basic structure of `series.encode` declaration:\n\n- To the left of the colon: Specific name of axis or label.\n- To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).\n\nGenerally, the following info is not necessary to be defined. Fill in as needed.\n\nAttribute suggested by `series.encode`\n\n```js\n// Supported in every coordinate and series:\nencode: {\n // Display the value of dimension named \"product\" and \"score\" in tooltip.\n tooltip: ['product', 'score']\n // Connect dimension name of \"Dimension 1\" and \"Dimension 3\" as the series name. (Avoid to repeat longer names in series.name)\n seriesName: [1, 3],\n // Means to use the value in \"Dimension 2\" as the id. It makes the new and old data correspond by id\n\t// when using setOption to update data, so that it can show animation properly.\n itemId: 2,\n // The itemName will show in the legend of Pie Charts.\n itemName: 3\n}\n\n// Grid/cartesian coordinate unique configs:\nencode: {\n // Map \"Dimension 1\", \"Dimension 5\" and \"dimension named 'score'\" to x-axis:\n x: [1, 5, 'score'],\n // Map \"Dimension 0\" to y-axis:\n y: 0\n}\n\n// singleAxis unique configs:\nencode: {\n single: 3\n}\n\n// Polar coordinate unique configs:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// Geo-coordinate unique configs:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some charts without coordinate like pie chart, funnel chart:\nencode: {\n value: 3\n}\n```\n\nThis is a richer [example](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1) of `series.encode`.\n\n## Default series.encode\n\nIt is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if `series.encode` is not specified. The default rule is:\n\n- In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.\n- Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).\n\nWhile the default rule cannot fulfill the requirements, you can configure `encode` by yourself, which is not complicate. Here is an [example](https://echarts.apache.org/examples/en/editor.html?c=dataset-default).\n\n## Some Normal Settings of series.encode\n\nQ: How to set the 3rd column as x-axis, 5th column as y-axis?\n\nA:\n\n```js\noption = {\n series: {\n // dimensionIndex count from 0, so the 3rd line is dimensions[2].\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n```\n\nQ: How to set the 3rd row as x-axis, 5th row as y-axis?\n\nA:\n\n```js\noption = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n```\n\nQ: How to set the 2nd column as a label?\n\nA:\nWe now support to trace value from specific dimension for [label.formatter](https://echarts.apache.org/option.html##series.label.formatter):\n\n```js\nseries: {\n label: {\n // `'{@score}'` means the value in the dimension named \"score\".\n // `'{@[4]}'` means the value in dimension 4.\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n```\n\nQ: How to show the 2nd and 3rd column in the tooltip?\n\nA:\n\n```js\noption = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n```\n\nQ: How to define the dimension name if is not included in the dataset?\n\nA:\n\n```js\nvar option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n```\n\nQ: How to map the 3rd column to the size of the scatter chart?\n\nA:\n\n```js [live]\nvar option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // means the 3rd column\n min: 2, // lower bound\n max: 15, // higher bound\n inRange: {\n // Size of the bubble.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n```\n\nQ: I specified a mapping in encode, why it is not worked?\n\nA: Check your spelling, such as misspell the dimension name `'Life Expectancy'` to `'Life Expectency'` in encode.\n\n## Visual Channel Mapping\n\nWe can map visual channel by using [visualMap](https://echarts.apache.org/option.html##visualMap). Check details in the [visualMap](https://echarts.apache.org/option.html##visualMap) document. Here is an [example](https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0).\n\n## Formats of Charts\n\nIn most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to `dataset.source` and avoid some steps of data processing.\n\n> You can switch .csv file to JSON using tools like [dsv](https://github.com/d3/d3-dsv) or [PapaParse](https://github.com/mholt/PapaParse).\n\nAs the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.\n\nExpect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support [seriesLayoutBy](https://echarts.apache.org/option.html##series.seriesLayoutBy) in this format right now.\n\n```js\ndataset: [\n {\n // column by column key-value array is a normal format\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // row by row key-value\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n```\n\n## How to Reference Several Datasets\n\nECharts support to define several datasets at the same moment. Series can assign the one to reference by [series.datasetIndex](https://echarts.apache.org/option.html##series.datasetIndex). For example:\n\n```js\nvar option = {\n dataset: [\n {\n // 1st Dataset\n source: []\n },\n {\n // 2nd Dataset\n source: []\n },\n {\n // 3rd Dataset。\n source: []\n }\n ],\n series: [\n {\n // Use 2nd dataset\n datasetIndex: 2\n },\n {\n // Use 1st dataset\n datasetIndex: 1\n }\n ]\n};\n```\n\n## series.data in ECharts 3\n\nECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the [series.data](https://echarts.apache.org/option.html##series.data), then use [series.data](https://echarts.apache.org/option.html##series.data) but not `dataset`.\n\n```js\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\nIn fact, [series.data](https://echarts.apache.org/option.html##series.data) is an important setting method which will always exist. Some special non-table format chart like [treemap](https://echarts.apache.org/option.html##series-treemap), [graph](https://echarts.apache.org/option.html##series-graph) and [lines](https://echarts.apache.org/option.html##series-lines) still cannot be edit in dataset, you still need to use [series.data](https://echarts.apache.org/option.html##series.data). In another way, for render huge amount of data (over a million), you need to use [appendData](https://echarts.apache.org/api.html#echartsInstance.appendData) which is not supported by `dataset`.\n\n## Others\n\nThe following charts now support dataset:\n`line`, `bar`, `pie`, `scatter`, `effectScatter`, `parallel`, `candlestick`, `map`, `funnel`, `custom`.\nECharts will support more charts in the future.\n\nIn the end, here is an [example](https://echarts.apache.org/examples/en/editor.html?c=dataset-link) of several charts shared one `dataset` with linkage interaction.\n","dir":"/en/concepts","path":"/en/concepts/dataset","extension":".md","createdAt":"2021-06-04T12:26:37.918Z","updatedAt":"2021-07-21T15:13:37.999Z","meta":{"version":0,"revision":0,"created":1627897108956},"$loki":57},{"slug":"server","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"server-side-rendering"},"children":[{"type":"element","tag":"a","props":{"href":"#server-side-rendering","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Server Side Rendering"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" can be rendered at server-side. For example, the thumbnails in the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/index.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"official examples page"}]},{"type":"text","value":" are generated at a server."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Commonly used headless tool is required, for example, "},{"type":"element","tag":"a","props":{"href":"https://github.com/GoogleChrome/puppeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"headless chrome"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://github.com/Automattic/node-canvas","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-canvas"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://github.com/jsdom/jsdom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jsdom"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"http://phantomjs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PhantomJS"}]},{"type":"text","value":", etc."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some solutions contributed by the community are list as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/hellosean1025/node-echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/hellosean1025/node-echarts"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/chfw/echarts-scrappeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/chfw/echarts-scrappeteer"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Notice: if server-side rendering result is different from browser-side rendering, please set "},{"type":"element","tag":"a","props":{"href":"option.html#animation"},"children":[{"type":"text","value":"animation"}]},{"type":"text","value":" as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" and try again."}]}]},"text":"# 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.googlesource.com/chromium/src/+/lkgr/headless/README.md), [node-canvas](https://github.com/Automattic/node-canvas), [jsdom](https://github.com/jsdom/jsdom), [PhantomJS](http://phantomjs.org/), etc.\n\nSome solutions contributed by the community are list as follows:\n\n- https://github.com/hellosean1025/node-echarts\n- https://github.com/chfw/echarts-scrappeteer\n- https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\n- https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73\n\nNotice: if server-side rendering result is different from browser-side rendering, please set [animation](option.html#animation) as `false` and try again.\n","dir":"/en/application/cross-platform","path":"/en/application/cross-platform/server","extension":".md","createdAt":"2021-07-21T12:10:11.752Z","updatedAt":"2021-07-21T12:14:25.610Z","meta":{"version":0,"revision":0,"created":1627897108969},"$loki":58},{"slug":"dynamic-data","toc":[{"id":"asynchronous-loading","depth":2,"text":"Asynchronous Loading"},{"id":"loading-animation","depth":2,"text":"loading Animation"},{"id":"dynamic-update","depth":2,"text":"Dynamic Update"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"asynchronous-data-loading-and-dynamic-update"},"children":[{"type":"element","tag":"a","props":{"href":"#asynchronous-data-loading-and-dynamic-update","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Asynchronous Data Loading and Dynamic Update"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"asynchronous-loading"},"children":[{"type":"element","tag":"a","props":{"href":"#asynchronous-loading","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Asynchronous Loading"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Data in "},{"type":"element","tag":"a","props":{"href":"en/get-started"},"children":[{"type":"text","value":"Getting Started Example"}]},{"type":"text","value":" is directly updated by using "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":". But in many cases, data need to be filled by asynchronous loading frequently. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ECharts"}]},{"type":"text","value":" can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":" to fill in data and configs after the chart initialized."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function(data) {\n // Structure of data:\n // {\n // categories: [\"Shirt\",\"Wool sweater\",\"Chiffon shirt\",\"Pants\",\"High-heeled shoes\",\"socks\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or display empty axes with all styles defined before fill in the data:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var myChart = echarts.init(document.getElementById('main'));\n// Show title, legends and empty axes\nmyChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {\n data: ['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// Asynchronous Data Loading\n$.get('data.json').done(function(data) {\n // Fill in the data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // Find series by name\n name: 'Sales',\n data: data.data\n }\n ]\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-async"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You need to use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" to \"navigate\" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" data while updating data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"loading-animation"},"children":[{"type":"element","tag":"a","props":{"href":"#loading-animation","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"loading Animation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts have a simple loading animation by default. You can call "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.showLoading"},"children":[{"type":"text","value":"showLoading"}]},{"type":"text","value":" to display. When the data loading was completed, call "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.hideLoading"},"children":[{"type":"text","value":"hideLoading"}]},{"type":"text","value":" to hide the animation."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is the effect:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-loading"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"dynamic-update"},"children":[{"type":"element","tag":"a","props":{"href":"#dynamic-update","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dynamic Update"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"All data's update was implemented by "},{"type":"element","tag":"a","props":{"href":"~api.html#echartsInstance.setOption"},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":". You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check the following example."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-dynamic-data"},"children":[{"type":"text","value":"\n"}]}]},"text":"# Asynchronous Data Loading and Dynamic Update\n\n## Asynchronous Loading\n\nData in [Getting Started Example](en/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 use `setOption` to fill in data and configs after the chart initialized.\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function(data) {\n // Structure of data:\n // {\n // categories: [\"Shirt\",\"Wool sweater\",\"Chiffon shirt\",\"Pants\",\"High-heeled shoes\",\"socks\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n```\n\nOr display empty axes with all styles defined before fill in the data:\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n// Show title, legends and empty axes\nmyChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {\n data: ['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// Asynchronous Data Loading\n$.get('data.json').done(function(data) {\n // Fill in the data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // Find series by name\n name: 'Sales',\n data: data.data\n }\n ]\n });\n});\n```\n\nFor example:\n\n<md-example src=\"doc-example/tutorial-async\"></md-example>\n\nYou need to use `name` to \"navigate\" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the `name` data while updating data.\n\n## loading Animation\n\nWhen it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.\n\nECharts have a simple loading animation by default. You can call [showLoading](api.html#echartsInstance.showLoading) to display. When the data loading was completed, call [hideLoading](api.html#echartsInstance.hideLoading) to hide the animation.\n\n```js\nmyChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n```\n\nHere is the effect:\n\n<md-example src=\"doc-example/tutorial-loading\"></md-example>\n\n## Dynamic Update\n\nECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.\n\nAll data's update was implemented by [setOption](~api.html#echartsInstance.setOption). You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.\n\nCheck the following example.\n\n<md-example src=\"doc-example/tutorial-dynamic-data\"></md-example>\n","dir":"/en/application/data","path":"/en/application/data/dynamic-data","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T10:41:22.980Z","meta":{"version":0,"revision":0,"created":1627897108977},"$loki":59},{"slug":"rich-text","toc":[{"id":"options-about-text","depth":2,"text":"Options about Text"},{"id":"basic-styles-of-text-text-block-and-text-fragment","depth":2,"text":"Basic Styles of Text, Text Block and Text Fragment"},{"id":"label-position","depth":2,"text":"Label Position"},{"id":"label-rotation","depth":2,"text":"Label Rotation"},{"id":"layout-and-alignment-of-text-fragment","depth":2,"text":"Layout and Alignment of Text fragment"},{"id":"effects-icon-horizontal-rule-title-block-simple-table","depth":2,"text":"Effects: Icon, Horizontal Rule, Title Block, Simple Table"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"rich-text"},"children":[{"type":"element","tag":"a","props":{"href":"#rich-text","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Rich Text"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rich text can be used in Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" labels of series, axis or other components since v3.7. Which supports:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Image can be used in text as icon or background."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr)."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"At the beginning, the meanings of two terms that will be used below should be clarified:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Text Block: The whole block of label text."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Text fragment: Some piece of text in a text block."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/text-block-fragment","width":400,"height":300},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"options-about-text"},"children":[{"type":"element","tag":"a","props":{"href":"#options-about-text","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Options about Text"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"echarts provides plenty of text options, including:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Basic font style: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontWeight"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Fill of text: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stroke of text: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderWidth"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Shadow of text: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowBlur"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowOffsetX"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowOffsetY"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Box size of text block or text fragment: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alignment of text block or text fragment: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Border, background (color or image) of text block or text fragment: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderRadius"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Shadow of text block or text fragment: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowBlur"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetX"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetY"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Position and rotation of text block: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"User can defined styles for text fragment in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" property. For example, "},{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.rich"},"children":[{"type":"text","value":"series-bar.label.rich"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"labelOption = {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this fragment}',\n '{b|Style \"b\" is applied to this fragment}This fragment use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fragments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Notice: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" only work when "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" specified."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"basic-styles-of-text-text-block-and-text-fragment"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-styles-of-text-text-block-and-text-fragment","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Styles of Text, Text Block and Text Fragment"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Basic font style can be set to text: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontWeight"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Fill color and stroke color can be set to text: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderWidth"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border style and background style can be set to text block: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Border style and background style can be set to text fragment too: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"label-position"},"children":[{"type":"element","tag":"a","props":{"href":"#label-position","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Label Position"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" option can be use in charts like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scatter"}]},{"type":"text","value":", etc. The position of a label, can be specified by "},{"type":"element","tag":"a","props":{"href":"option.html#series-scatter.label.position"},"children":[{"type":"text","value":"label.position"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"option.html#series-scatter.label.distance"},"children":[{"type":"text","value":"label.distance"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to modify the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":" option in the following example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Notice, there are different optional values of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":" by different chart types. And "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":" is not supported in every chart. More detailed info can be checked in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"option doc"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"label-rotation"},"children":[{"type":"element","tag":"a","props":{"href":"#label-rotation","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Label Rotation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes label is needed to be rotated. For example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"const labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.align"},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" and"},{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.verticalAlign"},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" can be used to adjust location of label in this scenario."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Notice, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" are applied firstly, then rotate."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"layout-and-alignment-of-text-fragment"},"children":[{"type":"element","tag":"a","props":{"href":"#layout-and-alignment-of-text-fragment","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Layout and Alignment of Text fragment"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To understand the layout rule, every text fragment can be imagined as a "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"inline-block"}]},{"type":"text","value":" dom element in CSS."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"content box size"}]},{"type":"text","value":" of a text fragment is determined by its font size by default. It can also be specified directly by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":", although they are rarely set. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"border box size"}]},{"type":"text","value":" of a text fragment is calculated by adding the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"border box size"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Only "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'\\n'"}]},{"type":"text","value":" is the newline character, which breaks a line."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Multiple text fragment exist in a single line. The height of a line is determined by the biggest "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" of text fragments. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" of a text fragment can be specified in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":", or in the parent level of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":", otherwise using "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"box size"}]},{"type":"text","value":" of the text fragment."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Having "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" determined, the vertical position of text fragments can be determined by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" (there is a little different from the rule in CSS):"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'bottom'"}]},{"type":"text","value":": The bottom edge of the text fragment sticks to the bottom edge of the line."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'top'"}]},{"type":"text","value":": The top edge of the text fragment sticks to the top edge of the line."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'middle'"}]},{"type":"text","value":": In the middle of the line."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The width of a text block can be specified by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":", otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Firstly, place text fragments whose "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":" from left to right continuously."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Secondly, place text fragments whose "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":" from right to left continuously."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Finally, the text fragments remained will be sticked and placed in the center of the rest of space."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The position of text in a text fragment:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'center'"}]},{"type":"text","value":", text aligns at the center of the text fragment box."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":", text aligns at the left of the text fragment box."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"If "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":", text aligns at the right of the text fragment box."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"effects-icon-horizontal-rule-title-block-simple-table"},"children":[{"type":"element","tag":"a","props":{"href":"#effects-icon-horizontal-rule-title-block-simple-table","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Effects: Icon, Horizontal Rule, Title Block, Simple Table"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"See example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Icon is implemented by using image in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"rich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Horizontal rule (like HTML <hr> tag) can be implemented by border:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"rich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Title block can be implemented by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"."}]}]},"text":"# 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 in text as icon or background.\n- Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).\n\nAt the beginning, the meanings of two terms that will be used below should be clarified:\n\n- Text Block: The whole block of label text.\n- Text fragment: Some piece of text in a text block.\n\nFor example:\n\n<md-example src=\"doc-example/text-block-fragment\" width=\"400\" height=\"300\"></md-example>\n\n## Options about Text\n\necharts provides plenty of text options, including:\n\n- Basic font style: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n- Fill of text: `color`.\n- Stroke of text: `textBorderColor`, `textBorderWidth`.\n- Shadow of text: `textShadowColor`, `textShadowBlur`, `textShadowOffsetX`, `textShadowOffsetY`.\n- Box size of text block or text fragment: `lineHeight`, `width`, `height`, `padding`.\n- Alignment of text block or text fragment: `align`, `verticalAlign`.\n- Border, background (color or image) of text block or text fragment: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`.\n- Shadow of text block or text fragment: `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`.\n- Position and rotation of text block: `position`, `distance`, `rotate`.\n\nUser can defined styles for text fragment in `rich` property. For example, [series-bar.label.rich](option.html#series-bar.label.rich)\n\nFor example:\n\n```js\nlabelOption = {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this fragment}',\n '{b|Style \"b\" is applied to this fragment}This fragment use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fragments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n // ...\n }\n};\n```\n\n> Notice: `width` 和 `height` only work when `rich` specified.\n\n## Basic Styles of Text, Text Block and Text Fragment\n\nBasic font style can be set to text: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n\nFill color and stroke color can be set to text: `color`, `textBorderColor`, `textBorderWidth`.\n\nBorder style and background style can be set to text block: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nBorder style and background style can be set to text fragment too: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nFor example:\n\n```js [live]\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n```\n\n## Label Position\n\n`label` option can be use in charts like `bar`, `line`, `scatter`, etc. The position of a label, can be specified by [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance).\n\nTry to modify the `position` and `distance` option in the following example:\n\n```js [live]\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n```\n\n> Notice, there are different optional values of `position` by different chart types. And `distance` is not supported in every chart. More detailed info can be checked in [option doc](https://echarts.apache.org/option.html).\n\n## Label Rotation\n\nSometimes label is needed to be rotated. For example:\n\n```js [live-lr]\nconst labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n```\n\n[align](option.html#series-bar.label.align) and[verticalAlign](option.html#series-bar.label.verticalAlign) can be used to adjust location of label in this scenario.\n\nNotice, `align` and `verticalAlign` are applied firstly, then rotate.\n\n## Layout and Alignment of Text fragment\n\nTo understand the layout rule, every text fragment can be imagined as a `inline-block` dom element in CSS.\n\n`content box size` of a text fragment is determined by its font size by default. It can also be specified directly by `width` and `height`, although they are rarely set. `border box size` of a text fragment is calculated by adding the `border box size` and `padding`.\n\nOnly `'\\n'` is the newline character, which breaks a line.\n\nMultiple text fragment exist in a single line. The height of a line is determined by the biggest `lineHeight` of text fragments. `lineHeight` of a text fragment can be specified in `rich`, or in the parent level of `rich`, otherwise using `box size` of the text fragment.\n\nHaving `lineHeight` determined, the vertical position of text fragments can be determined by `verticalAlign` (there is a little different from the rule in CSS):\n\n- `'bottom'`: The bottom edge of the text fragment sticks to the bottom edge of the line.\n- `'top'`: The top edge of the text fragment sticks to the top edge of the line.\n- `'middle'`: In the middle of the line.\n\nThe width of a text block can be specified by `width`, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its `align`.\n\n- Firstly, place text fragments whose `align` is `'left'` from left to right continuously.\n- Secondly, place text fragments whose `align` is `'right'` from right to left continuously.\n- Finally, the text fragments remained will be sticked and placed in the center of the rest of space.\n\nThe position of text in a text fragment:\n\n- If `align` is `'center'`, text aligns at the center of the text fragment box.\n- If `align` is `'left'`, text aligns at the left of the text fragment box.\n- If `align` is `'right'`, text aligns at the right of the text fragment box.\n\n## Effects: Icon, Horizontal Rule, Title Block, Simple Table\n\nSee example:\n\n```js [live-lr]\noption = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n```\n\nIcon is implemented by using image in `backgroundColor`.\n\n```js\nrich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n```\n\nHorizontal rule (like HTML <hr> tag) can be implemented by border:\n\n```js\nrich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n```\n\nTitle block can be implemented by `backgroundColor`:\n\n```js\n// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n```\n\nSimple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the [example](https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text).\n","dir":"/en/application/label","path":"/en/application/label/rich-text","extension":".md","createdAt":"2021-07-21T10:09:14.563Z","updatedAt":"2021-07-21T10:38:54.302Z","meta":{"version":0,"revision":0,"created":1627897109010},"$loki":60},{"slug":"drilldown","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/application/data","path":"/zh/application/data/drilldown","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-06-04T12:26:37.922Z","meta":{"version":0,"revision":0,"created":1627897109011},"$loki":61},{"slug":"drag","toc":[{"id":"implement-basic-dragging","depth":2,"text":"Implement basic dragging"},{"id":"add-tooltip-component","depth":2,"text":"Add tooltip component"},{"id":"full-code","depth":2,"text":"Full code"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"an-example-implement-dragging"},"children":[{"type":"element","tag":"a","props":{"href":"#an-example-implement-dragging","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"An Example: Implement Dragging"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is a tiny example, introducing how to implement dragging of graphic elements in Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":". From this example, we will see how to make an application with rich intractivity based on echarts API."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"line-draggable","height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"implement-basic-dragging"},"children":[{"type":"element","tag":"a","props":{"href":"#implement-basic-dragging","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Implement basic dragging"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First of all, we create a basic "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"line chart (line series)"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since the symbols in line is not draggable, we make them draggable by using "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#graphic","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"graphic component"}]},{"type":"text","value":" to add draggable circular elements to symbols respectively."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the code above, API "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.convertToPixel"},"children":[{"type":"text","value":"convertToPixel"}]},{"type":"text","value":" is used to convert data to its \"pixel coodinate\", based on which each graphic elements can be rendered on canvas. The term \"pixel coodinate\" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.convertToPixel('grid', dataItem)"}]},{"type":"text","value":", the first parameter "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'grid'"}]},{"type":"text","value":" indicates that "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataItem"}]},{"type":"text","value":" should be converted in the first "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#grid","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"grid component (cartesian)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Notice:"}]},{"type":"text","value":" "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"convertToPixel"}]},{"type":"text","value":" should not be called before the first time that "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":" called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now points have been made draggable. Then we will bind event listeners on dragging to those points."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the code above, API "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.convertFromPixel"},"children":[{"type":"text","value":"convertFromPixel"}]},{"type":"text","value":" is used, which is the reversed process of "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.convertToPixel"},"children":[{"type":"text","value":"convertToPixel"}]},{"type":"text","value":". "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.convertFromPixel('grid', this.position)"}]},{"type":"text","value":" converts a pixel coordinate to data item in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#grid","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"grid (cartesian)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Finally, add those code to make graphic elements responsive to change of canvas size."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"window.addEventListener('resize', function() {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"add-tooltip-component"},"children":[{"type":"element","tag":"a","props":{"href":"#add-tooltip-component","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Add tooltip component"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#tooltip","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"tooltip component"}]},{"type":"text","value":" to do that. Nevertheless, tooltip component has its default \"show/hide rule\", which is not applicable in this case. So we need to customize the \"show/hide rule\" for our case."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Add these snippets to the code block above:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n // ...,\n tooltip: {\n // Means disable default \"show/hide rule\".\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // Customize \"show/hide rule\", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The API "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echartsInstance.dispatchAction","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dispatchAction"}]},{"type":"text","value":" is used to show/hide tooltip content, where actions "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#action.tooltip.showTip","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"showTip"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"api.html#action.tooltip.hideTip"},"children":[{"type":"text","value":"hideTip"}]},{"type":"text","value":" is dispatched."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"full-code"},"children":[{"type":"element","tag":"a","props":{"href":"#full-code","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Full code"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Full code is shown as follow:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With knowledge introduced above, more feature can be implemented. For example, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#dataZoom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataZoom component"}]},{"type":"text","value":" can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~"}]}]},"text":"# 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 curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.\n\n## Implement basic dragging\n\nFirst of all, we create a basic [line chart (line series)](https://echarts.apache.org/option.html#series-line):\n\n```js\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n```\n\nSince the symbols in line is not draggable, we make them draggable by using [graphic component](https://echarts.apache.org/option.html#graphic) to add draggable circular elements to symbols respectively.\n\n```js\nmyChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n```\n\nIn the code above, API [convertToPixel](api.html#echartsInstance.convertToPixel) is used to convert data to its \"pixel coodinate\", based on which each graphic elements can be rendered on canvas. The term \"pixel coodinate\" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence `myChart.convertToPixel('grid', dataItem)`, the first parameter `'grid'` indicates that `dataItem` should be converted in the first [grid component (cartesian)](https://echarts.apache.org/option.html#grid).\n\n**Notice:** `convertToPixel` should not be called before the first time that `setOption` called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.\n\nNow points have been made draggable. Then we will bind event listeners on dragging to those points.\n\n```js\n// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\nIn the code above, API [convertFromPixel](api.html#echartsInstance.convertFromPixel) is used, which is the reversed process of [convertToPixel](api.html#echartsInstance.convertToPixel). `myChart.convertFromPixel('grid', this.position)` converts a pixel coordinate to data item in [grid (cartesian)](https://echarts.apache.org/option.html#grid).\n\nFinally, add those code to make graphic elements responsive to change of canvas size.\n\n```js\nwindow.addEventListener('resize', function() {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n```\n\n## Add tooltip component\n\nNow basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use [tooltip component](https://echarts.apache.org/option.html#tooltip) to do that. Nevertheless, tooltip component has its default \"show/hide rule\", which is not applicable in this case. So we need to customize the \"show/hide rule\" for our case.\n\nAdd these snippets to the code block above:\n\n```js\nmyChart.setOption({\n // ...,\n tooltip: {\n // Means disable default \"show/hide rule\".\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n```\n\n```js\nmyChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // Customize \"show/hide rule\", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n```\n\nThe API [dispatchAction](https://echarts.apache.org//api.html#echartsInstance.dispatchAction) is used to show/hide tooltip content, where actions [showTip](https://echarts.apache.org//api.html#action.tooltip.showTip) and [hideTip](api.html#action.tooltip.hideTip) is dispatched.\n\n## Full code\n\nFull code is shown as follow:\n\n```js\nimport echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\nWith knowledge introduced above, more feature can be implemented. For example, [dataZoom component](https://echarts.apache.org/option.html#dataZoom) can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~\n","dir":"/en/application/interaction","path":"/en/application/interaction/drag","extension":".md","createdAt":"2021-07-21T10:04:29.730Z","updatedAt":"2021-07-21T10:08:45.879Z","meta":{"version":0,"revision":0,"created":1627897109025},"$loki":62},{"slug":"data-transform","toc":[{"id":"数据转换基础使用","depth":2,"text":"数据转换基础使用"},{"id":"数据转换的进阶使用","depth":2,"text":"数据转换的进阶使用"},{"id":"数据转换器-filter","depth":2,"text":"数据转换器 \"filter\""},{"id":"数据转换器-sort","depth":2,"text":"数据转换器 \"sort\""},{"id":"使用外部的数据转换器","depth":2,"text":"使用外部的数据转换器"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"使用-transform-进行数据转换"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用 transform 进行数据转换"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":")和一个“转换方法”("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.transform","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":"),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"抽象地来说,数据转换是这样一种公式:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"outData = f(inputData)"}]},{"type":"text","value":"。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"f"}]},{"type":"text","value":" 是转换方法,例如:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"filter"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sort"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"regression"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"boxplot"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"cluster"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aggregate"}]},{"type":"text","value":"(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"把数据分成多份用不同的饼图展现。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"进行一些数据统计运算,并展示结果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"用某些数据可视化算法处理数据,并展示结果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"数据排序。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"去除或直选择数据项。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据转换基础使用"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据转换基础使用"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 echarts 中,数据转换是依托于数据集("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":")来实现的. 我们可以设置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.transform","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.transform"}]},{"type":"text","value":" 来表示,此 dataset 的数据,来自于此 transform 的结果。例如。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: [\n {\n // 这个 dataset 的 index 是 `0`。\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // 这个 dataset 的 index 是 `1`。\n // 这个 `transform` 配置,表示,此 dataset 的数据,来自于此 transform 的结果。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // 我们还可以设置这些可选的属性: `fromDatasetIndex` 或 `fromDatasetId`。\n // 这些属性,指定了,transform 的输入,来自于哪个 dataset。例如,\n // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如,\n // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。\n // 当这些属性都不指定时,默认认为,输入来自于 index 为 `0` 的 dataset 。\n },\n {\n // 这个 dataset 的 index 是 `2`。\n // 同样,这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定,\n // 那么输入默认来自于 index 为 `0` 的 dataset 。\n transform: {\n // 这个类型为 \"filter\" 的 transform 能够遍历并筛选出满足条件的数据项。\n type: 'filter',\n // 每个 transform 如果需要有配置参数的话,都须配置在 `config` 里。\n // 在这个 \"filter\" transform 中,`config` 用于指定筛选条件。\n // 下面这个筛选条件是:选出维度( dimension )'Year' 中值为 2012 的所有\n // 数据项。\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // 这个 dataset 的 index 是 `3`。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述\n // 2011 年那个 \"filter\" transform 的结果。\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"现在我们简单总结下,使用 transform 时的几个要点:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在一个空的 dataset 中声明 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromDatasetIndex"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromDatasetId"}]},{"type":"text","value":" 来表示我们要生成新的数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"系列引用这个 dataset 。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据转换的进阶使用"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据转换的进阶使用"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"链式声明-transform"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"链式声明 transform"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" 可以被链式声明,这是一个语法糖。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n // 原始数据\n ]\n },\n {\n // 几个 transform 被声明成 array ,他们构成了一个链,\n // 前一个 transform 的输出是后一个 transform 的输入。\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // 这个系列引用上述 transform 的结果。\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"一个-transform-输出多个-data"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"一个 transform 输出多个 data"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如,在内置的 \"boxplot\" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"example"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们提供配置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.fromTransformResult","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.fromTransformResult"}]},{"type":"text","value":" 来满足这种情况,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n // 这个 dataset 的 index 为 `0`。\n source: [\n // 原始数据\n ]\n },\n {\n // 这个 dataset 的 index 为 `1`。\n transform: {\n type: 'boxplot'\n }\n // 这个 \"boxplot\" transform 生成了两个数据:\n // result[0]: boxplot series 所需的数据。\n // result[1]: 离群点数据。\n // 当其他 series 或者 dataset 引用这个 dataset 时,他们默认只能得到\n // result[0] 。\n // 如果想要他们得到 result[1] ,需要额外声明如下这样一个 dataset :\n },\n {\n // 这个 dataset 的 index 为 `2`。\n // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。\n fromDatasetIndex: 1,\n // 并且指定了获取 transform result[1] 。\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n // 这个 series 引用 index 为 `1` 的 dataset 。\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // 这个 series 引用 index 为 `2` 的 dataset 。\n // 从而也就得到了上述的 transform result[1] (即离群点数据)\n datasetIndex: 2\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"另外,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.fromTransformResult","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.fromTransformResult"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##dataset.transform","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataset.transform"}]},{"type":"text","value":" 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fromTransformResult"}]},{"type":"text","value":" 获取的结果。例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"在开发环境中-debug"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在开发环境中 debug"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform.print"}]},{"type":"text","value":" 方便 debug 。这个配置项只在开发环境中生效。如下例:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }\n ]\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据转换器-filter"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-filter","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据转换器 \"filter\""}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"transform.type: \"filter\""}]},{"type":"text","value":",以及给出数据筛选条件。如下例:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // 这个筛选条件表示,遍历数据,筛选出维度( dimension )\n // 'Year' 上值为 2011 的所有数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这是 filter 的另一个例子的效果:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"data-transform-filter"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 \"filter\" transform 中,有这些要素:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"关于维度( dimension ):"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config.dimension"}]},{"type":"text","value":" 指定了维度,能设成这样的值:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"设定成声明在 dataset 中的维度名,例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 'Year', '=': 2011 }"}]},{"type":"text","value":"。不过, dataset 中维度名的声明并非强制,所以我们也可以"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"设定成 dataset 中的维度 index (index 值从 0 开始)例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 3, '=': 2011 }"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"关于关系比较操作符:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"关系操作符,可以设定这些:\n"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gt"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gte"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lt"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lte"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"eq"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"!="}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ne"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<>"}]},{"type":"text","value":")、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"reg"}]},{"type":"text","value":"。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"多个关系操作符能声明在一个 {} 中,例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{ dimension: 'Price', '>=': 20, '<': 30 }"}]},{"type":"text","value":"。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"' 123 '"}]},{"type":"text","value":"。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果我们需要对日期对象(JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":")或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":",例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"config: { dimension: 3, lt: '2012-05-12', parser: 'time' }"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"纯字符串比较也被支持,但是只能用在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"="}]},{"type":"text","value":" 或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"!="}]},{"type":"text","value":" 上。而 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":">="}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<="}]},{"type":"text","value":" 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"reg"}]},{"type":"text","value":" 操作符能提供正则表达式比较。例如, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }"}]},{"type":"text","value":" 能在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Name'"}]},{"type":"text","value":" 维度上选出姓 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Müller'"}]},{"type":"text","value":" 的数据项。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"关于逻辑比较:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们也支持了逻辑比较操作符 "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"与或非"}]},{"type":"text","value":"( "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"and"}]},{"type":"text","value":" | "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"or"}]},{"type":"text","value":" | "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" ):"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // 使用 and 操作符。\n // 类似地,同样的位置也可以使用 “or” 或 “not”。\n // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // 这个表达的是,选出 2011 年价格大于等于 20 但小于 30 的数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"and"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"or"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" 自然可以被嵌套,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"transform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"关于解析器( parser ):"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":":把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.parse"}]},{"type":"text","value":" 相同,即,当原始值为时间对象( JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" 实例),或者是时间戳,或者是描述时间的字符串(例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'2012-05-12 03:11:22'"}]},{"type":"text","value":" ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'trim'"}]},{"type":"text","value":":如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":":强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"NaN"}]},{"type":"text","value":"。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'33%'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"12px"}]},{"type":"text","value":"),我们需要手动指定 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":",从而去掉尾缀转为数值才能比较。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这个例子显示了如何使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"形式化定义:"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最后,我们给出,数据转换器 \"filter\" 的 config 的形式化定义:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据转换器-sort"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-sort","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据转换器 \"sort\""}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"\"sort\" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"axis.type: 'category'"}]},{"type":"text","value":" )中显示排过序的数据。例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // 按分数排序\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"data-transform-sort-bar"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"数据转换器 \"sort\" 还有一些额外的功能:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"可以多重排序,多个维度一起排序。见下面的例子。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"排序规则是这样的:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"incomparable: 'min' | 'max'"}]},{"type":"text","value":" 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"NaN"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"''"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'-'"}]},{"type":"text","value":")在排序的头还是尾。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"过滤器 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"filter: 'time' | 'trim' | 'number'"}]},{"type":"text","value":" 可以被使用,和数据转换器 \"filter\" 中的情况一样。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果要对时间进行排序(例如,值为 JS "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Date"}]},{"type":"text","value":" 实例或者时间字符串如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'2012-03-12 11:13:54'"}]},{"type":"text","value":"),我们需要声明 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'time'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果需要对有后缀的数值进行排序(如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'33%'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'16px'"}]},{"type":"text","value":")我们需要声明 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parser: 'number'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这是一个“多维度排序”的例子。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // 对两个维度按声明的优先级分别排序。\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n //...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/data-transform-multiple-sort-bar"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最后,我们给出数据转换器 \"sort\" 的 config 的形式化定义。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"type SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"使用外部的数据转换器"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用外部的数据转换器"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-stat","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ecStat"}]},{"type":"text","value":" 提供的数据转换器。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"生成数据的回归线:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 首先要注册外部数据转换器。\necharts.registerTransform(ecStatTransform(ecStat).regression);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // 引用注册的数据转换器。\n // 注意,每个外部的数据转换器,都有名空间(如 'ecStat:xxx','ecStat' 是名空间)。\n // 而内置数据转换器(如 'filter', 'sort')没有名空间。\n type: 'ecStat:regression',\n config: {\n // 这里是此外部数据转换器所需的参数。\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"一些使用 echarts-stat 的例子:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"聚集 (Aggregate)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"直方图 (Histogram)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"简单聚类 (Clustering)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"线性回归线 (Linear Regression)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"指数回归线 (Exponential Regression)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"对数回归线 (Logarithmic Regression)"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"多项式回归线 (Polynomial Regression)"}]}]},{"type":"text","value":"\n"}]}]},"text":"# 使用 transform 进行数据转换\n\nApache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”([dataset](https://echarts.apache.org/option.html##dataset))和一个“转换方法”([transform](https://echarts.apache.org/option.html##dataset.transform)),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。\n\n抽象地来说,数据转换是这样一种公式:`outData = f(inputData)`。`f` 是转换方法,例如:`filter`、`sort`、`regression`、`boxplot`、`cluster`、`aggregate`(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:\n\n- 把数据分成多份用不同的饼图展现。\n- 进行一些数据统计运算,并展示结果。\n- 用某些数据可视化算法处理数据,并展示结果。\n- 数据排序。\n- 去除或直选择数据项。\n- ...\n\n## 数据转换基础使用\n\n在 echarts 中,数据转换是依托于数据集([dataset](https://echarts.apache.org/option.html##dataset))来实现的. 我们可以设置 [dataset.transform](https://echarts.apache.org/option.html##dataset.transform) 来表示,此 dataset 的数据,来自于此 transform 的结果。例如。\n\n下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。\n\n```js [live]\nvar option = {\n dataset: [\n {\n // 这个 dataset 的 index 是 `0`。\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // 这个 dataset 的 index 是 `1`。\n // 这个 `transform` 配置,表示,此 dataset 的数据,来自于此 transform 的结果。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // 我们还可以设置这些可选的属性: `fromDatasetIndex` 或 `fromDatasetId`。\n // 这些属性,指定了,transform 的输入,来自于哪个 dataset。例如,\n // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如,\n // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。\n // 当这些属性都不指定时,默认认为,输入来自于 index 为 `0` 的 dataset 。\n },\n {\n // 这个 dataset 的 index 是 `2`。\n // 同样,这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定,\n // 那么输入默认来自于 index 为 `0` 的 dataset 。\n transform: {\n // 这个类型为 \"filter\" 的 transform 能够遍历并筛选出满足条件的数据项。\n type: 'filter',\n // 每个 transform 如果需要有配置参数的话,都须配置在 `config` 里。\n // 在这个 \"filter\" transform 中,`config` 用于指定筛选条件。\n // 下面这个筛选条件是:选出维度( dimension )'Year' 中值为 2012 的所有\n // 数据项。\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // 这个 dataset 的 index 是 `3`。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述\n // 2011 年那个 \"filter\" transform 的结果。\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n```\n\n现在我们简单总结下,使用 transform 时的几个要点:\n\n- 在一个空的 dataset 中声明 `transform`, `fromDatasetIndex`/`fromDatasetId` 来表示我们要生成新的数据。\n- 系列引用这个 dataset 。\n\n## 数据转换的进阶使用\n\n#### 链式声明 transform\n\n`transform` 可以被链式声明,这是一个语法糖。\n\n```js\noption = {\n dataset: [\n {\n source: [\n // 原始数据\n ]\n },\n {\n // 几个 transform 被声明成 array ,他们构成了一个链,\n // 前一个 transform 的输出是后一个 transform 的输入。\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // 这个系列引用上述 transform 的结果。\n datasetIndex: 1\n }\n};\n```\n\n> 注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。\n\n#### 一个 transform 输出多个 data\n\n在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。\n\n例如,在内置的 \"boxplot\" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,[example](https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity)。\n\n我们提供配置 [dataset.fromTransformResult](https://echarts.apache.org/option.html##dataset.fromTransformResult) 来满足这种情况,例如:\n\n```js\noption = {\n dataset: [\n {\n // 这个 dataset 的 index 为 `0`。\n source: [\n // 原始数据\n ]\n },\n {\n // 这个 dataset 的 index 为 `1`。\n transform: {\n type: 'boxplot'\n }\n // 这个 \"boxplot\" transform 生成了两个数据:\n // result[0]: boxplot series 所需的数据。\n // result[1]: 离群点数据。\n // 当其他 series 或者 dataset 引用这个 dataset 时,他们默认只能得到\n // result[0] 。\n // 如果想要他们得到 result[1] ,需要额外声明如下这样一个 dataset :\n },\n {\n // 这个 dataset 的 index 为 `2`。\n // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。\n fromDatasetIndex: 1,\n // 并且指定了获取 transform result[1] 。\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n // 这个 series 引用 index 为 `1` 的 dataset 。\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // 这个 series 引用 index 为 `2` 的 dataset 。\n // 从而也就得到了上述的 transform result[1] (即离群点数据)\n datasetIndex: 2\n }\n ]\n};\n```\n\n另外,[dataset.fromTransformResult](https://echarts.apache.org/option.html##dataset.fromTransformResult) 和 [dataset.transform](https://echarts.apache.org/option.html##dataset.transform) 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 `fromTransformResult` 获取的结果。例如:\n\n```js\n{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n```\n\n#### 在开发环境中 debug\n\n使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 `transform.print` 方便 debug 。这个配置项只在开发环境中生效。如下例:\n\n```js\noption = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }\n ]\n // ...\n};\n```\n\n## 数据转换器 \"filter\"\n\necharts 内置提供了能起过滤作用的数据转换器。我们只需声明 `transform.type: \"filter\"`,以及给出数据筛选条件。如下例:\n\n```js [live]\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // 这个筛选条件表示,遍历数据,筛选出维度( dimension )\n // 'Year' 上值为 2011 的所有数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n这是 filter 的另一个例子的效果:\n\n<md-example src=\"data-transform-filter\"></md-example>\n\n在 \"filter\" transform 中,有这些要素:\n\n**关于维度( dimension ):**\n\n`config.dimension` 指定了维度,能设成这样的值:\n\n- 设定成声明在 dataset 中的维度名,例如 `config: { dimension: 'Year', '=': 2011 }`。不过, dataset 中维度名的声明并非强制,所以我们也可以\n- 设定成 dataset 中的维度 index (index 值从 0 开始)例如 `config: { dimension: 3, '=': 2011 }`。\n\n**关于关系比较操作符:**\n\n关系操作符,可以设定这些:\n`>`(`gt`)、`>=`(`gte`)、`<`(`lt`)、`<=`(`lte`)、`=`(`eq`)、`!=`(`ne`、`<>`)、`reg`。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:\n\n- 多个关系操作符能声明在一个 {} 中,例如 `{ dimension: 'Price', '>=': 20, '<': 30 }`。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。\n- data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 `' 123 '`。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。\n- 如果我们需要对日期对象(JS `Date`)或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 `parser: 'time'`,例如 `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`。\n- 纯字符串比较也被支持,但是只能用在 `=` 或 `!=` 上。而 `>`, `>=`, `<`, `<=` 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。\n- `reg` 操作符能提供正则表达式比较。例如, `{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }` 能在 `'Name'` 维度上选出姓 `'Müller'` 的数据项。\n\n**关于逻辑比较:**\n\n我们也支持了逻辑比较操作符 **与或非**( `and` | `or` | `not` ):\n\n```js\noption = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // 使用 and 操作符。\n // 类似地,同样的位置也可以使用 “or” 或 “not”。\n // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // 这个表达的是,选出 2011 年价格大于等于 20 但小于 30 的数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n`and`/`or`/`not` 自然可以被嵌套,例如:\n\n```js\ntransform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n```\n\n**关于解析器( parser ):**\n\n还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:\n\n- `parser: 'time'`:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 `echarts.time.parse` 相同,即,当原始值为时间对象( JS `Date` 实例),或者是时间戳,或者是描述时间的字符串(例如 `'2012-05-12 03:11:22'` ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。\n- `parser: 'trim'`:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。\n- `parser: 'number'`:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 `NaN`。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 `'33%'`, `12px`),我们需要手动指定 `parser: 'number'`,从而去掉尾缀转为数值才能比较。\n\n这个例子显示了如何使用 `parser: 'time'`:\n\n```js\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n```\n\n**形式化定义:**\n\n最后,我们给出,数据转换器 \"filter\" 的 config 的形式化定义:\n\n```ts\ntype FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## 数据转换器 \"sort\"\n\n\"sort\" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( `axis.type: 'category'` )中显示排过序的数据。例如:\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // 按分数排序\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"data-transform-sort-bar\"></md-example>\n\n数据转换器 \"sort\" 还有一些额外的功能:\n\n- 可以多重排序,多个维度一起排序。见下面的例子。\n- 排序规则是这样的:\n - 默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。\n - 对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。\n - 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 `incomparable: 'min' | 'max'` 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 `null`, `undefined`, `NaN`, `''`, `'-'`)在排序的头还是尾。\n- 过滤器 `filter: 'time' | 'trim' | 'number'` 可以被使用,和数据转换器 \"filter\" 中的情况一样。\n - 如果要对时间进行排序(例如,值为 JS `Date` 实例或者时间字符串如 `'2012-03-12 11:13:54'`),我们需要声明 `parser: 'time'`。\n - 如果需要对有后缀的数值进行排序(如 `'33%'`, `'16px'`)我们需要声明 `parser: 'number'`。\n\n这是一个“多维度排序”的例子。\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // 对两个维度按声明的优先级分别排序。\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n //...\n};\n```\n\n<md-example src=\"doc-example/data-transform-multiple-sort-bar\"></md-example>\n\n最后,我们给出数据转换器 \"sort\" 的 config 的形式化定义。\n\n```ts\ntype SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## 使用外部的数据转换器\n\n除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 [ecStat](https://github.com/ecomfe/echarts-stat) 提供的数据转换器。\n\n生成数据的回归线:\n\n```js\n// 首先要注册外部数据转换器。\necharts.registerTransform(ecStatTransform(ecStat).regression);\n```\n\n```js\noption = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // 引用注册的数据转换器。\n // 注意,每个外部的数据转换器,都有名空间(如 'ecStat:xxx','ecStat' 是名空间)。\n // 而内置数据转换器(如 'filter', 'sort')没有名空间。\n type: 'ecStat:regression',\n config: {\n // 这里是此外部数据转换器所需的参数。\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n```\n\n一些使用 echarts-stat 的例子:\n\n- [聚集 (Aggregate)](https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1)\n- [直方图 (Histogram)](https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1)\n- [简单聚类 (Clustering)](https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1)\n- [线性回归线 (Linear Regression)](https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1)\n- [指数回归线 (Exponential Regression)](https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1)\n- [对数回归线 (Logarithmic Regression)](https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1)\n- [多项式回归线 (Polynomial Regression)](https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1)\n","dir":"/zh/concepts","path":"/zh/concepts/data-transform","extension":".md","createdAt":"2021-06-04T12:26:37.933Z","updatedAt":"2021-07-21T14:58:00.297Z","meta":{"version":0,"revision":0,"created":1627897109077},"$loki":63},{"slug":"v5-feature","toc":[{"id":"storytelling","depth":2,"text":"Storytelling"},{"id":"visual-design","depth":2,"text":"Visual Design"},{"id":"interactivity","depth":2,"text":"Interactivity"},{"id":"development-experience","depth":2,"text":"Development Experience"},{"id":"accessibility","depth":2,"text":"Accessibility"},{"id":"summary","depth":2,"text":"Summary"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"new-features-in-echarts-5"},"children":[{"type":"element","tag":"a","props":{"href":"#new-features-in-echarts-5","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"New features in ECharts 5"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Data 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/echarts-5-en.png","width":"800px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"\"The core of Apache ECharts 5 is \"Show, do not tell\", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"storytelling"},"children":[{"type":"element","tag":"a","props":{"href":"#storytelling","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Storytelling"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"barline-racing"},"children":[{"type":"element","tag":"a","props":{"href":"#barline-racing","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Bar/Line Racing"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"bar-race-country","width":700,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n\n\n"},{"type":"element","tag":"md-example","props":{"src":"line-race","width":700,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"custom-series-animation"},"children":[{"type":"element","tag":"a","props":{"href":"#custom-series-animation","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Custom Series Animation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Imagine what amazing visualizations you can create with these dynamic effects!"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"visual-design"},"children":[{"type":"element","tag":"a","props":{"href":"#visual-design","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Visual Design"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"overall-design"},"children":[{"type":"element","tag":"a","props":{"href":"#overall-design","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Overall Design"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/theme-color.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-theme-light.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-theme-dark.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/dataZoom.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/timeline.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"label"},"children":[{"type":"element","tag":"a","props":{"href":"#label","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Label"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The new label feature allows you to have very clear label presentation even in a confined space mobile:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/pie-label.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"time-axis"},"children":[{"type":"element","tag":"a","props":{"href":"#time-axis","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Time Axis"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" of labels supports templates for time (e.g. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{yyyy}-{MM}-{dd}"}]},{"type":"text","value":"), and different "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The display of the time scale at different dataZoom granularities."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/time-axis.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/time-axis-2.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"tooltip"},"children":[{"type":"element","tag":"a","props":{"href":"#tooltip","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Tooltip"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-tooltip.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-tooltip-2.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"gauge"},"children":[{"type":"element","tag":"a","props":{"href":"#gauge","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Gauge"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Different styles of gauge pointers."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/gauge-pointer.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"gauge-clock","width":600,"height":600},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"round-corner"},"children":[{"type":"element","tag":"a","props":{"href":"#round-corner","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Round Corner"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"sunburst-borderRadius","width":400,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"interactivity"},"children":[{"type":"element","tag":"a","props":{"href":"#interactivity","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Interactivity"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"multi-state"},"children":[{"type":"element","tag":"a","props":{"href":"#multi-state","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Multi-State"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts 4, there were two interactive states, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"normal"}]},{"type":"text","value":", graph will enter the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" state when the mouse hovered to distinguish the data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This time in Apache ECharts 5, we have added a new effect of "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"blur"}]},{"type":"text","value":" other non-related elements to the original mouse hover highlighting, so that the target data can be focused."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For example, in this "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"bar chart"}]},{"type":"text","value":" example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" can now be set in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"blur"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition, we've added "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"click to select"}]},{"type":"text","value":" to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]},{"type":"text","value":" event to get all the selected shapes for further processing. As with "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"emphasis"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"blur"}]},{"type":"text","value":", the selection style can also be configured in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"performance-improvements"},"children":[{"type":"element","tag":"a","props":{"href":"#performance-improvements","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Performance improvements"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"dirty-rectangle-rendering"},"children":[{"type":"element","tag":"a","props":{"href":"#dirty-rectangle-rendering","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dirty Rectangle Rendering"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame."}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/dirty-rect.gif","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can see the effect by enable dirty rectangle optimization on the new example page."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"line-chart-performance-optimization-for-real-time-time-series-data"},"children":[{"type":"element","tag":"a","props":{"href":"#line-chart-performance-optimization-for-real-time-time-series-data","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Line Chart Performance Optimization for Real-Time Time-Series Data"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"development-experience"},"children":[{"type":"element","tag":"a","props":{"href":"#development-experience","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Development Experience"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"datasets"},"children":[{"type":"element","tag":"a","props":{"href":"#datasets","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Datasets"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"internationalization"},"children":[{"type":"element","tag":"a","props":{"href":"#internationalization","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Internationalization"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"registerLocale"}]},{"type":"text","value":" function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// import the lang object and set when init\necharts.registerLocale('DE', lang);\necharts.init(DomElement, null, {\n locale: 'DE'\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"typescript-refactoring"},"children":[{"type":"element","tag":"a","props":{"href":"#typescript-refactoring","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"TypeScript Refactoring"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For developers, we can also generate better and more code-compliant "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"DTS"}]},{"type":"text","value":" type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to "},{"type":"element","tag":"a","props":{"href":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"DefinityTyped"}]},{"type":"text","value":", which is a lot of work, so thanks for your contribution."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition, if a developer's component is introduced on-demand, we provide a "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ComposeOption"}]},{"type":"text","value":" type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"accessibility"},"children":[{"type":"element","tag":"a","props":{"href":"#accessibility","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Accessibility"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"theme-colors"},"children":[{"type":"element","tag":"a","props":{"href":"#theme-colors","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Theme Colors"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"decal-patterns"},"children":[{"type":"element","tag":"a","props":{"href":"#decal-patterns","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Decal Patterns"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-decal-simple","width":600,"height":350},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user."}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-decal-newspaper","width":600,"height":350},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"summary"},"children":[{"type":"element","tag":"a","props":{"href":"#summary","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Summary"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!"}]}]},"text":"# 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 visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.\n\n<img src=\"images/feature-v5/echarts-5-en.png\" width=\"800px\" />\n\n\"The core of Apache ECharts 5 is \"Show, do not tell\", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.\n\n## Storytelling\n\nThe importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.\n\n#### Bar/Line Racing\n\nApache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.\n\n<md-example src=\"bar-race-country\" width=\"700\" height=\"400\"></md-example>\n<md-example src=\"line-race\" width=\"700\" height=\"400\"></md-example>\n\nThe dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.\n\n#### Custom Series Animation\n\nIn addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.\n\nImagine what amazing visualizations you can create with these dynamic effects!\n\n## Visual Design\n\nThe role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.\n\n#### Overall Design\n\nWe have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.\n\n<img src=\"images/feature-v5/theme-color.png\" width=\"400px\" />\n\nLet's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.\n\n<img src=\"images/feature-v5/new-theme-light.png\" width=\"500px\" />\n<img src=\"images/feature-v5/new-theme-dark.png\" width=\"500px\" />\n\nFor the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:\n\n<img src=\"images/feature-v5/dataZoom.png\" width=\"500px\" />\n\n<img src=\"images/feature-v5/timeline.png\" width=\"500px\" />\n\n#### Label\n\nLabels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.\n\nApache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.\n\nThese features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.\n\nWe also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.\n\nThe new label feature allows you to have very clear label presentation even in a confined space mobile:\n\n<img src=\"images/feature-v5/pie-label.png\" width=\"400px\" />\n\n#### Time Axis\n\nApache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.\n\nFirst of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The `formatter` of labels supports templates for time (e.g. `{yyyy}-{MM}-{dd}`), and different `formatter` can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.\n\nThe display of the time scale at different dataZoom granularities.\n\n<img src=\"images/feature-v5/time-axis.png\" width=\"600px\" />\n\n<img src=\"images/feature-v5/time-axis-2.png\" width=\"600px\" />\n\n#### Tooltip\n\nTooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.\n\n<img src=\"images/feature-v5/new-tooltip.png\" width=\"400px\" />\n<img src=\"images/feature-v5/new-tooltip-2.png\" width=\"400px\" />\n\nIn addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.\n\n#### Gauge\n\nWe have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.\n\nDifferent styles of gauge pointers.\n\n<img src=\"images/feature-v5/gauge-pointer.png\" width=\"600px\" />\n\nThese upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.\n\n<md-example src=\"gauge-clock\" width=\"600\" height=\"600\"></md-example>\n\n#### Round Corner\n\nApache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.\n\n<md-example src=\"sunburst-borderRadius\" width=\"400\" height=\"400\"></md-example>\n\n## Interactivity\n\nThe interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.\n\n#### Multi-State\n\nIn ECharts 4, there were two interactive states, `emphasis` and `normal`, graph will enter the `emphasis` state when the mouse hovered to distinguish the data.\n\nThis time in Apache ECharts 5, we have added a new effect of **blur** other non-related elements to the original mouse hover highlighting, so that the target data can be focused.\n\nFor example, in this [bar chart](https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack) example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in `emphasis` can now be set in `blur`.\n\nIn addition, we've added **click to select** to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the `selectchanged` event to get all the selected shapes for further processing. As with `emphasis` and `blur`, the selection style can also be configured in `select`.\n\n#### Performance improvements\n\n##### Dirty Rectangle Rendering\n\nApache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.\n\nA visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.\n\n<img src=\"images/feature-v5/dirty-rect.gif\" width=\"500px\" />\n\nYou can see the effect by enable dirty rectangle optimization on the new example page.\n\n##### Line Chart Performance Optimization for Real-Time Time-Series Data\n\nIn addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.\n\nApache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.\n\n## Development Experience\n\nWe want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.\n\n#### Datasets\n\nECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.\n\n#### Internationalization\n\nThe original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.\n\nTherefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the `registerLocale` function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.\n\n```js\n// import the lang object and set when init\necharts.registerLocale('DE', lang);\necharts.init(DomElement, null, {\n locale: 'DE'\n});\n```\n\n#### TypeScript Refactoring\n\nIn order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.\n\nFor developers, we can also generate better and more code-compliant `DTS` type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to [DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts), which is a lot of work, so thanks for your contribution.\n\nIn addition, if a developer's component is introduced on-demand, we provide a `ComposeOption` type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.\n\n## Accessibility\n\nApache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.\n\nIn the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.\n\n#### Theme Colors\n\nWe took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.\n\nMoreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.\n\n#### Decal Patterns\n\nECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.\n\n<md-example src=\"doc-example/aria-decal-simple\" width=\"600\" height=\"350\"></md-example>\n\nIn addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.\n\n<md-example src=\"doc-example/aria-decal-newspaper\" width=\"600\" height=\"350\"></md-example>\n\n## Summary\n\nIn addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.\n\nThank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!\n","dir":"/en/basics/release-note","path":"/en/basics/release-note/v5-feature","extension":".md","createdAt":"2021-07-24T08:32:48.728Z","updatedAt":"2021-07-24T08:35:47.705Z","meta":{"version":0,"revision":0,"created":1627897109120},"$loki":64},{"slug":"dataset","toc":[{"id":"在系列中设置数据","depth":2,"text":"在系列中设置数据"},{"id":"在数据集中设置数据","depth":2,"text":"在数据集中设置数据"},{"id":"数据到图形的映射","depth":2,"text":"数据到图形的映射"},{"id":"把数据集(-dataset-)的行或列映射为系列(series)","depth":2,"text":"把数据集( dataset )的行或列映射为系列(series)"},{"id":"维度(-dimension-)","depth":2,"text":"维度( dimension )"},{"id":"数据到图形的映射(-seriesencode-)","depth":2,"text":"数据到图形的映射( series.encode )"},{"id":"默认的-seriesencode","depth":2,"text":"默认的 series.encode"},{"id":"几个常见的-seriesencode-设置方式举例","depth":2,"text":"几个常见的 series.encode 设置方式举例"},{"id":"视觉通道(颜色、尺寸等)的映射","depth":2,"text":"视觉通道(颜色、尺寸等)的映射"},{"id":"数据的各种格式","depth":2,"text":"数据的各种格式"},{"id":"多个-dataset-以及如何引用他们","depth":2,"text":"多个 dataset 以及如何引用他们"},{"id":"echarts-3-的数据设置方式(seriesdata)仍正常使用","depth":2,"text":"ECharts 3 的数据设置方式(series.data)仍正常使用"},{"id":"其他","depth":2,"text":"其他"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"数据集"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E9%9B%86","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据集"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"数据集"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":")是专门用来管理数据的组件。虽然每个系列都可以在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" 中设置数据,但是从 ECharts4 支持 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"数据集"}]},{"type":"text","value":" 开始,更推荐使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"数据集"}]},{"type":"text","value":" 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"在系列中设置数据"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在系列中设置数据"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果数据设置在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"系列"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":")中,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"在数据集中设置数据"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在数据集中设置数据"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"而数据设置在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"数据集"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":")中,会有这些好处:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是一个最简单的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" 的例子:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。\n xAxis: { type: 'category' },\n // 声明一个 Y 轴,数值轴。\n yAxis: {},\n // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"或者也可以使用常见的“对象数组”的格式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,\n // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。\n // 如果不指定 dimensions,也可以通过指定 series.encode\n // 完成映射,参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据到图形的映射"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据到图形的映射"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"简而言之,可以进行这些映射的设定:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"指定 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"数据集"}]},{"type":"text","value":" 的列(column)还是行(row)映射为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"系列"}]},{"type":"text","value":"("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":")。这件事可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.seriesLayoutBy","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.seriesLayoutBy"}]},{"type":"text","value":" 属性来配置。默认是按照列(column)来映射。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.encode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 属性,以及 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" 中的第一列;三个柱图系列,一一对应到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" 中后面每一列。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面详细解释这些映射的设定。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"把数据集(-dataset-)的行或列映射为系列(series)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"把数据集( dataset )的行或列映射为系列(series)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"用户可以使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" 配置项,改变图表对于行列的理解。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" 可取值:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'column': 默认值。系列被安放到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" 的列上面。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"'row': 系列被安放到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":" 的行上面。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"看这个例子:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 dataset 的每一列。\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"维度(-dimension-)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"维度( dimension )"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'score'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'amount'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'product'"}]},{"type":"text","value":" 就是维度名。从第二行开始,才是正式的数据。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.sourceHeader: true"}]},{"type":"text","value":" 显示声明第一行(列)就是维度,或者 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.sourceHeader: false"}]},{"type":"text","value":" 表明第一行(列)开始就直接是数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"维度的定义,也可以使用单独的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.dimensions"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.dimensions"}]},{"type":"text","value":" 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // 可以简写为 string ,表示 dimension name 。\n 'amount',\n // 可以在 type 中指定维度类型。\n { name: 'product', type: 'ordinal' }\n ],\n source: [\n //...\n ]\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: [\n // ...\n ]\n },\n series: {\n type: 'line',\n // series.dimensions 会更优先于 dataset.dimension 采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"维度类型( dimension type )可以取这些值:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'number'"}]},{"type":"text","value":": 默认,表示普通数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'ordinal'"}]},{"type":"text","value":": 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":": 表示时间数据。设置成 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":" 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##xAxis.type","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"axis.type"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":")上,那么会被自动设置为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'time'"}]},{"type":"text","value":" 类型。时间类型的支持参见 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"data"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'float'"}]},{"type":"text","value":": 如果设置成 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'float'"}]},{"type":"text","value":",在存储时候会使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"TypedArray"}]},{"type":"text","value":",对性能优化有好处。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'int'"}]},{"type":"text","value":": 如果设置成 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'int'"}]},{"type":"text","value":",在存储时候会使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"TypedArray"}]},{"type":"text","value":",对性能优化有好处。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据到图形的映射(-seriesencode-)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据到图形的映射( series.encode )"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"了解了维度的概念后,我们就可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.encode","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 来做映射。总体是这样的感觉:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // 将 \"amount\" 列映射到 X 轴。\n x: 'amount',\n // 将 \"product\" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'x'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'y'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'tooltip'"}]},{"type":"text","value":" 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 支持的属性:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 在任何坐标系和系列中,都支持:\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n value: 3\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这是个更丰富的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 的 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"示例"}]},{"type":"text","value":" 。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"默认的-seriesencode"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"默认的 series.encode"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"值得一提的是,当 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.encode"}]},{"type":"text","value":" 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在坐标系中(如直角坐标系、极坐标系等)\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果没有坐标系(如饼图)\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"默认的规则不能满足要求时,就可以自己来配置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"encode"}]},{"type":"text","value":",也并不复杂。这是一个 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"例子"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"几个常见的-seriesencode-设置方式举例"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"几个常见的 series.encode 设置方式举例"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n // 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 dimensions[2]。\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:如何把第二列设置为标签?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:\n关于标签的显示 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.label.formatter","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"label.formatter"}]},{"type":"text","value":",现在支持引用特定维度的值,例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"option = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:数据里没有维度名,那么怎么给出维度名?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:如何把第三列映射为气泡图的点的大小?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列(列序号从 0 开始记,所以设置为 2)。\n min: 2, // 需要给出数值范围,最小数值。\n max: 15, // 需要给出数值范围,最大数值。\n inRange: {\n // 气泡尺寸:5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"问:encode 里指定了映射,但是不管用?"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"答:可以查查有没有拼错,比如,维度名是:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Life Expectancy'"}]},{"type":"text","value":",encode 中拼成了 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'Life Expectency'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"视觉通道(颜色、尺寸等)的映射"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"视觉通道(颜色、尺寸等)的映射"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 组件进行视觉通道的映射。详见 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 文档的介绍。这是一个 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"示例"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据的各种格式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据的各种格式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset.source"}]},{"type":"text","value":" 中,在不少情况下可以免去一些数据处理的步骤。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 "},{"type":"element","tag":"a","props":{"href":"https://github.com/d3/d3-dsv","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dsv"}]},{"type":"text","value":" 或者 "},{"type":"element","tag":"a","props":{"href":"https://github.com/mholt/PapaParse","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PapaParse"}]},{"type":"text","value":" 将 csv 转成 JSON。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.seriesLayoutBy","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"seriesLayoutBy"}]},{"type":"text","value":" 参数。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"dataset: [\n {\n // 按行的 key-value 形式(对象数组),这是个比较常见的格式。\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // 按列的 key-value 形式。\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"多个-dataset-以及如何引用他们"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"多个 dataset 以及如何引用他们"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"可以同时定义多个 dataset。系列可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.datasetIndex","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.datasetIndex"}]},{"type":"text","value":" 来指定引用哪个 dataset。例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var option = {\n dataset: [\n {\n // 序号为 0 的 dataset。\n source: []\n },\n {\n // 序号为 1 的 dataset。\n source: []\n },\n {\n // 序号为 2 的 dataset。\n source: []\n }\n ],\n series: [\n {\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n },\n {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"echarts-3-的数据设置方式(seriesdata)仍正常使用"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts 3 的数据设置方式(series.data)仍正常使用"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":", 那么就会使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" 而非 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其实,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":" 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-treemap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"treemap"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-graph","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"graph"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-lines","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lines"}]},{"type":"text","value":" 等,现在仍不支持在 dataset 中设置,仍然需要使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series.data","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"series.data"}]},{"type":"text","value":"。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.appendData"},"children":[{"type":"text","value":"appendData"}]},{"type":"text","value":" 进行增量加载,这种情况不支持使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"其他"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%85%B6%E4%BB%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"其他"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"bar"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pie"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scatter"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"effectScatter"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"parallel"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"candlestick"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"map"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"funnel"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom"}]},{"type":"text","value":"。\n后续会有更多的图表进行支持。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最后,给出这个 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"示例"}]},{"type":"text","value":",多个图表共享一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataset"}]},{"type":"text","value":",并带有联动交互。"}]}]},"text":"# 数据集\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: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\n这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。\n\n## 在数据集中设置数据\n\n而数据设置在 `数据集`(`dataset`)中,会有这些好处:\n\n- 能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。\n- 数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。\n- 数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。\n- 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。\n\n下面是一个最简单的 `dataset` 的例子:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。\n xAxis: { type: 'category' },\n // 声明一个 Y 轴,数值轴。\n yAxis: {},\n // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n或者也可以使用常见的“对象数组”的格式:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,\n // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。\n // 如果不指定 dimensions,也可以通过指定 series.encode\n // 完成映射,参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n## 数据到图形的映射\n\n如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。\n\n简而言之,可以进行这些映射的设定:\n\n- 指定 `数据集` 的列(column)还是行(row)映射为 `系列`(`series`)。这件事可以使用 [series.seriesLayoutBy](https://echarts.apache.org/option.html##series.seriesLayoutBy) 属性来配置。默认是按照列(column)来映射。\n- 指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 [series.encode](https://echarts.apache.org/option.html##series.encode) 属性,以及 [visualMap](https://echarts.apache.org/option.html##visualMap) 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 `dataset.source` 中的第一列;三个柱图系列,一一对应到 `dataset.source` 中后面每一列。\n\n下面详细解释这些映射的设定。\n\n## 把数据集( dataset )的行或列映射为系列(series)\n\n有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。\n\n用户可以使用 `seriesLayoutBy` 配置项,改变图表对于行列的理解。`seriesLayoutBy` 可取值:\n\n- 'column': 默认值。系列被安放到 `dataset` 的列上面。\n- 'row': 系列被安放到 `dataset` 的行上面。\n\n看这个例子:\n\n```js [live]\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 dataset 的每一列。\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n```\n\n## 维度( dimension )\n\n常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。\n\n维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,`'score'`、`'amount'`、`'product'` 就是维度名。从第二行开始,才是正式的数据。`dataset.source` 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 `dataset.sourceHeader: true` 显示声明第一行(列)就是维度,或者 `dataset.sourceHeader: false` 表明第一行(列)开始就直接是数据。\n\n维度的定义,也可以使用单独的 `dataset.dimensions` 或者 `series.dimensions` 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):\n\n```js\nvar option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // 可以简写为 string ,表示 dimension name 。\n 'amount',\n // 可以在 type 中指定维度类型。\n { name: 'product', type: 'ordinal' }\n ],\n source: [\n //...\n ]\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: [\n // ...\n ]\n },\n series: {\n type: 'line',\n // series.dimensions 会更优先于 dataset.dimension 采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n```\n\n大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。\n\n维度类型( dimension type )可以取这些值:\n\n- `'number'`: 默认,表示普通数据。\n- `'ordinal'`: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。\n- `'time'`: 表示时间数据。设置成 `'time'` 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴([axis.type](https://echarts.apache.org/option.html##xAxis.type) 为 `'time'`)上,那么会被自动设置为 `'time'` 类型。时间类型的支持参见 [data](https://echarts.apache.org/option.html##series.data)。\n- `'float'`: 如果设置成 `'float'`,在存储时候会使用 `TypedArray`,对性能优化有好处。\n- `'int'`: 如果设置成 `'int'`,在存储时候会使用 `TypedArray`,对性能优化有好处。\n\n## 数据到图形的映射( series.encode )\n\n了解了维度的概念后,我们就可以使用 [series.encode](https://echarts.apache.org/option.html##series.encode) 来做映射。总体是这样的感觉:\n\n```js [live]\nvar option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // 将 \"amount\" 列映射到 X 轴。\n x: 'amount',\n // 将 \"product\" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n```\n\n`series.encode` 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 `'x'`, `'y'`, `'tooltip'` 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。\n\n下面是 `series.encode` 支持的属性:\n\n```js\n// 在任何坐标系和系列中,都支持:\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n value: 3\n}\n```\n\n这是个更丰富的 `series.encode` 的 [示例](https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1) 。\n\n## 默认的 series.encode\n\n值得一提的是,当 `series.encode` 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:\n\n- 在坐标系中(如直角坐标系、极坐标系等)\n - 如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。\n - 如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。\n- 如果没有坐标系(如饼图)\n - 取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。\n\n默认的规则不能满足要求时,就可以自己来配置 `encode`,也并不复杂。这是一个 [例子](https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1)。\n\n## 几个常见的 series.encode 设置方式举例\n\n问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?\n\n答:\n\n```js\noption = {\n series: {\n // 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 dimensions[2]。\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n```\n\n问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?\n\n答:\n\n```js\noption = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n```\n\n问:如何把第二列设置为标签?\n\n答:\n关于标签的显示 [label.formatter](https://echarts.apache.org/option.html##series.label.formatter),现在支持引用特定维度的值,例如:\n\n```js\nseries: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n```\n\n问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?\n\n答:\n\n```js\noption = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n```\n\n问:数据里没有维度名,那么怎么给出维度名?\n\n答:\n\n```js\nvar option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n```\n\n问:如何把第三列映射为气泡图的点的大小?\n\n答:\n\n```js [live]\nvar option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列(列序号从 0 开始记,所以设置为 2)。\n min: 2, // 需要给出数值范围,最小数值。\n max: 15, // 需要给出数值范围,最大数值。\n inRange: {\n // 气泡尺寸:5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n```\n\n问:encode 里指定了映射,但是不管用?\n\n答:可以查查有没有拼错,比如,维度名是:`'Life Expectancy'`,encode 中拼成了 `'Life Expectency'`。\n\n## 视觉通道(颜色、尺寸等)的映射\n\n我们可以使用 [visualMap](https://echarts.apache.org/option.html##visualMap) 组件进行视觉通道的映射。详见 [visualMap](https://echarts.apache.org/option.html##visualMap) 文档的介绍。这是一个 [示例](https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1)。\n\n## 数据的各种格式\n\n多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 `dataset.source` 中,在不少情况下可以免去一些数据处理的步骤。\n\n> 假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 [dsv](https://github.com/d3/d3-dsv) 或者 [PapaParse](https://github.com/mholt/PapaParse) 将 csv 转成 JSON。\n\n在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。\n\n除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 [seriesLayoutBy](https://echarts.apache.org/option.html##series.seriesLayoutBy) 参数。\n\n```js\ndataset: [\n {\n // 按行的 key-value 形式(对象数组),这是个比较常见的格式。\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // 按列的 key-value 形式。\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n```\n\n## 多个 dataset 以及如何引用他们\n\n可以同时定义多个 dataset。系列可以通过 [series.datasetIndex](https://echarts.apache.org/option.html##series.datasetIndex) 来指定引用哪个 dataset。例如:\n\n```js\nvar option = {\n dataset: [\n {\n // 序号为 0 的 dataset。\n source: []\n },\n {\n // 序号为 1 的 dataset。\n source: []\n },\n {\n // 序号为 2 的 dataset。\n source: []\n }\n ],\n series: [\n {\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n },\n {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }\n ]\n};\n```\n\n## ECharts 3 的数据设置方式(series.data)仍正常使用\n\nECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 [series.data](https://echarts.apache.org/option.html##series.data), 那么就会使用 [series.data](https://echarts.apache.org/option.html##series.data) 而非 `dataset`。\n\n```js [live]\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\n其实,[series.data](https://echarts.apache.org/option.html##series.data) 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 [treemap](https://echarts.apache.org/option.html##series-treemap)、[graph](https://echarts.apache.org/option.html##series-graph)、[lines](https://echarts.apache.org/option.html##series-lines) 等,现在仍不支持在 dataset 中设置,仍然需要使用 [series.data](https://echarts.apache.org/option.html##series.data)。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 [appendData](api.html#echartsInstance.appendData) 进行增量加载,这种情况不支持使用 `dataset`。\n\n## 其他\n\n目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n`line`、`bar`、`pie`、`scatter`、`effectScatter`、`parallel`、`candlestick`、`map`、`funnel`、`custom`。\n后续会有更多的图表进行支持。\n\n最后,给出这个 [示例](https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1),多个图表共享一个 `dataset`,并带有联动交互。\n","dir":"/zh/concepts","path":"/zh/concepts/dataset","extension":".md","createdAt":"2021-06-04T12:26:37.933Z","updatedAt":"2021-07-21T15:12:02.141Z","meta":{"version":0,"revision":0,"created":1627897109159},"$loki":65},{"slug":"v5-upgrade-guide","toc":[{"id":"breaking-changes","depth":2,"text":"Breaking Changes"},{"id":"echarts-related-extensions","depth":2,"text":"ECharts Related Extensions"},{"id":"deprecated-api","depth":2,"text":"Deprecated API"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"apache-echarts-5-upgrade-guide"},"children":[{"type":"element","tag":"a","props":{"href":"#apache-echarts-5-upgrade-guide","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Apache ECharts 5 Upgrade Guide"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This guide is for those who want to upgrade from echarts 4.x (hereafter "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":") to echarts 5.x (hereafter "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":"). You can find out what new features "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" brings that are worth upgrading in "},{"type":"element","tag":"a","props":{"href":"en/basics/release-note/v5-feature"},"children":[{"type":"text","value":"New Features in ECharts 5"}]},{"type":"text","value":". In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" still brings some breaking changes that require special attention. In addition, in some cases, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"breaking-changes"},"children":[{"type":"element","tag":"a","props":{"href":"#breaking-changes","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Breaking Changes"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"default-theme"},"children":[{"type":"element","tag":"a","props":{"href":"#default-theme","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Default theme"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"First of all, the default theme has been changed. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or, to make a simple "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" theme."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"importing-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#importing-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Importing ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"removing-support-for-default-exports"},"children":[{"type":"element","tag":"a","props":{"href":"#removing-support-for-default-exports","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Removing Support for Default Exports"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":", echarts only provides "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"named exports"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"So if you are importing "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts"}]},{"type":"text","value":" like this:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import echarts from 'echarts';\n// Or import core module\nimport echarts from 'echarts/lib/echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will throw error in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":". You need to change the code as follows to import the entire module."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n// Or\nimport * as echarts from 'echarts/lib/echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"tree-shaking-api"},"children":[{"type":"element","tag":"a","props":{"href":"#tree-shaking-api","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"tree-shaking API"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In 5.0.1, we introduced the new "},{"type":"element","tag":"a","props":{"href":"en/basics/import"},"children":[{"type":"text","value":"tree-shaking API"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 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\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Full Code"}]},{"type":"text","value":" tab on the example page to see the modules you need to introduce and the related code."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"const echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Second, because our source code has been rewritten using TypeScript, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" will no longer support importing files from "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/src"}]},{"type":"text","value":". You need to change it to import from "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/lib"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"dependency-adjustment"},"children":[{"type":"element","tag":"a","props":{"href":"#dependency-adjustment","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dependency Adjustment"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":" is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"const echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Need to introduce the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"grid"}]},{"type":"text","value":" component separately again"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"require('echarts/lib/component/grid');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Reference issues: "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/14080","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"#14080"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/13764","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"#13764"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria"}]},{"type":"text","value":" components are no longer imported by default. You need import it manually if necessary."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Or"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"require('echarts/lib/component/aria');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"removes-built-in-geojson"},"children":[{"type":"element","tag":"a","props":{"href":"#removes-built-in-geojson","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Removes Built-in GeoJSON"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" removes the built-in geoJSON (previously in the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/map"}]},{"type":"text","value":" folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"browser-compatibility"},"children":[{"type":"element","tag":"a","props":{"href":"#browser-compatibility","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Browser Compatibility"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"IE8 is no longer supported by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":". We no longer maintain and upgrade the previous "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/zrender/tree/4.3.2/src/vml","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"VML renderer"}]},{"type":"text","value":" for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5.0.1"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"echarts-configuration-item-adjustment"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-configuration-item-adjustment","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts configuration item adjustment"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"visual-style-settings-priority-change"},"children":[{"type":"element","tag":"a","props":{"href":"#visual-style-settings-priority-change","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Visual style settings priority change"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The priority of the visuals between "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" are reversed since "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"That is, previously in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":", the visuals (i.e., color, symbol, symbolSize, ...) that generated by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":" has the highest priority, which will overwrite the same visuals settings in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":". That brought troubles when needing to specify specific style to some certain data items while using "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":". Since "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":", the visuals specified in "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" has the highest priority."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In most cases, users will probably not notice this change when migrating from "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":". But users can still check that if "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap component"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" are both specified."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"padding-for-rich-text"},"children":[{"type":"element","tag":"a","props":{"href":"#padding-for-rich-text","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":" for Rich Text"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" adjusts the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"rich.?.padding"}]},{"type":"text","value":" to make it more compliant with CSS specifications. In "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":", for example "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich. .padding: [11, 22, 33, 44]"}]},{"type":"text","value":" means that "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-top"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"33"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-bottom"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"11"}]},{"type":"text","value":". The position of the top and bottom is adjusted in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich. .padding: [11, 22, 33, 44]"}]},{"type":"text","value":" means that "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-top"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"11"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-bottom"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"33"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the user is using "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"rich.?.padding"}]},{"type":"text","value":", this order needs to be adjusted."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"echarts-related-extensions"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-related-extensions","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts Related Extensions"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These extensions need to be upgraded to new version to support echarts "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-gl","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-gl"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-wordcloud","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-wordcloud"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-liquidfill","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-liquidfill"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"deprecated-api"},"children":[{"type":"element","tag":"a","props":{"href":"#deprecated-api","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Deprecated API"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Some of the API and echarts options are deprecated since "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":", but are still backward compatible. Users can "},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"keep using these deprecated API"}]},{"type":"text","value":", with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The deprecated API and their corresponding new API are listed as follows:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transform related props of a graphic element are changed:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Changes:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position: [number, number]"}]},{"type":"text","value":" are changed to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"x: number"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"y: number"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scale: [number, number]"}]},{"type":"text","value":" are changed to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scaleX: number"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scaleY: number"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"origin: [number, number]"}]},{"type":"text","value":" are changed to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"originX: number"}]},{"type":"text","value":"/"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"originY: number"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scale"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"origin"}]},{"type":"text","value":" are still supported but deprecated."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It effects these places:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graphic"}]},{"type":"text","value":" components: the declarations of each element."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":": the declarations of each element in the return of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Directly use zrender graphic elements."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Text related props on graphic elements are changed:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Changes:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The declaration of attached text (or say, rect text) are changed.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Prop "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style.text"}]},{"type":"text","value":" are deprecated in elements except "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Text"}]},{"type":"text","value":". Instead, Prop set "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textContent"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textConfig"}]},{"type":"text","value":" are provided to support more powerful capabilities."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"These related props at the left part below are deprecated. Use the right part below instead.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textPosition => textConfig.position"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textOffset => textConfig.offset"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textRotation => textConfig.rotation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textDistance => textConfig.distance"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The props at the left part below are deprecated in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style.rich.?"}]},{"type":"text","value":". Use the props at the right part below instead.\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textFill => fill"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textStroke => stroke"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textFont => font"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textStrokeWidth => lineWidth"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textAlign => align"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textVerticalAlign => verticalAlign);"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textLineHeight =>"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textWidth => width"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textHeight => hight"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBackgroundColor => backgroundColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textPadding => padding"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderColor => borderColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderWidth => borderWidth"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderRadius => borderRadius"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowColor => shadowColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowBlur => shadowBlur"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowOffsetX => shadowOffsetX"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowOffsetY => shadowOffsetY"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Note: these props are not changed:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowBlur"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowOffsetX"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowOffsetY"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It effects these places:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graphic"}]},{"type":"text","value":" components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":": the declarations of each element in the return of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":". [compat, but not accurately the same in some complicated cases]."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Directly use zrender API to create graphic elements. [No compat, breaking change]."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"API on chart instance:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"chart.one(...)"}]},{"type":"text","value":" is deprecated."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In props "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":", the value "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'auto'"}]},{"type":"text","value":" is deprecated. Use the value "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'inherit'"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"hoverAnimation"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverAnimation"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scale"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clipOverflow"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clip"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":", the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.style(...)"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.styleEmphasis(...)"}]},{"type":"text","value":" are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.visual(...)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburst series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Action type "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburstHighlight"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Action type "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"downplay"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburstUnhighlight"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.downplay"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.blur"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.highlightPolicy"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.focus"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pie series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The action type at the left part below are deprecated. Use the right part instead:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieToggleSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"toggleSelect"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieUnSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselect"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The event type at the left part below are deprecated. Use the right part instead:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieselectchanged"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selected"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieunselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselected"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.margin"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.edgeDistance"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockWise"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockwise"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverOffset"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scaleSize"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"map series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The action type at the left part below are deprecated. Use the right part instead:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapToggleSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"toggleSelect"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapUnSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselect"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The event type at the left part below are deprecated. Use the right part instead:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapselectchanged"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selected"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapunselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselected"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.mapType"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.map"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.mapLocation"}]},{"type":"text","value":" is deprecated."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graph series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.focusNodeAdjacency"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis: { focus: 'adjacency'}"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gauge series"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockWise"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockwise"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverOffset"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scaleSize"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataZoom component"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataZoom.handleIcon"}]},{"type":"text","value":" need prefix "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"path://"}]},{"type":"text","value":" if using SVGPath."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.name"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.axisName"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"option "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.nameGap"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.axisNameGap"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parse and format:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.format.formatTime"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.format"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.number.parseDate"}]},{"type":"text","value":" is deprecated. Use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.parse"}]},{"type":"text","value":" instead."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.format.getTextRect"}]},{"type":"text","value":" is deprecated."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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](en/basics/release-note/v5-feature). In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, `v5` still brings some breaking changes that require special attention. In addition, in some cases, `v5` provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.\n\n## Breaking Changes\n\n#### Default theme\n\nFirst of all, the default theme has been changed. `v5` has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.\n\n```js\nchart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n```\n\nOr, to make a simple `v4` theme.\n\n```js\nvar themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n```\n\n#### Importing ECharts\n\n##### Removing Support for Default Exports\n\nSince `v5`, echarts only provides `named exports`.\n\nSo if you are importing `echarts` like this:\n\n```js\nimport echarts from 'echarts';\n// Or import core module\nimport echarts from 'echarts/lib/echarts';\n```\n\nIt will throw error in `v5`. You need to change the code as follows to import the entire module.\n\n```js\nimport * as echarts from 'echarts';\n// Or\nimport * as echarts from 'echarts/lib/echarts';\n```\n\n##### tree-shaking API\n\nIn 5.0.1, we introduced the new [tree-shaking API](en/basics/import)\n\n```js\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 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\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n```\n\nTo make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the `Full Code` tab on the example page to see the modules you need to introduce and the related code.\n\nIn most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n```\n\nSecond, because our source code has been rewritten using TypeScript, `v5` will no longer support importing files from `echarts/src`. You need to change it to import from `echarts/lib`.\n\n##### Dependency Adjustment\n\n> Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.\n\nIn order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, `CanvasRenderer` is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.\n\n- The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n```\n\nNeed to introduce the `grid` component separately again\n\n```js\nrequire('echarts/lib/component/grid');\n```\n\nReference issues: [#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764)\n\n- `aria` components are no longer imported by default. You need import it manually if necessary.\n\n```js\nimport { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n```\n\nOr\n\n```js\nrequire('echarts/lib/component/aria');\n```\n\n#### Removes Built-in GeoJSON\n\n`v5` removes the built-in geoJSON (previously in the `echarts/map` folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.\n\n#### Browser Compatibility\n\nIE8 is no longer supported by `v5`. We no longer maintain and upgrade the previous [VML renderer](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with `v5.0.1`.\n\n#### ECharts configuration item adjustment\n\n##### Visual style settings priority change\n\nThe priority of the visuals between [visualMap component](https://echarts.apache.org/option.html#visualMap) and [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) are reversed since `v5`.\n\nThat is, previously in `v4`, the visuals (i.e., color, symbol, symbolSize, ...) that generated by [visualMap component](https://echarts.apache.org/option.html#visualMap) has the highest priority, which will overwrite the same visuals settings in [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle). That brought troubles when needing to specify specific style to some certain data items while using [visualMap component](https://echarts.apache.org/option.html#visualMap). Since `v5`, the visuals specified in [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) has the highest priority.\n\nIn most cases, users will probably not notice this change when migrating from `v4` to `v5`. But users can still check that if [visualMap component](https://echarts.apache.org/option.html#visualMap) and [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) are both specified.\n\n##### `padding` for Rich Text\n\n`v5` adjusts the [rich.?.padding](https://echarts.apache.org/option.html#series-scatter.label.rich.<style_name>.padding) to make it more compliant with CSS specifications. In `v4`, for example `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `33` and `padding-bottom` is `11`. The position of the top and bottom is adjusted in `v5`, `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `11` and `padding-bottom` is `33`.\n\nIf the user is using [rich.?.padding](https://echarts.apache.org/option.html#series-scatter.label.rich.<style_name>.padding), this order needs to be adjusted.\n\n## ECharts Related Extensions\n\nThese extensions need to be upgraded to new version to support echarts `v5`:\n\n- [echarts-gl](https://github.com/ecomfe/echarts-gl)\n- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)\n- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)\n\n## Deprecated API\n\nSome of the API and echarts options are deprecated since `v5`, but are still backward compatible. Users can **keep using these deprecated API**, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.\n\nThe deprecated API and their corresponding new API are listed as follows:\n\n- Transform related props of a graphic element are changed:\n - Changes:\n - `position: [number, number]` are changed to `x: number`/`y: number`.\n - `scale: [number, number]` are changed to `scaleX: number`/`scaleY: number`.\n - `origin: [number, number]` are changed to `originX: number`/`originY: number`.\n - The `position`, `scale` and `origin` are still supported but deprecated.\n - It effects these places:\n - In the `graphic` components: the declarations of each element.\n - In `custom series`: the declarations of each element in the return of `renderItem`.\n - Directly use zrender graphic elements.\n- Text related props on graphic elements are changed:\n - Changes:\n - The declaration of attached text (or say, rect text) are changed.\n - Prop `style.text` are deprecated in elements except `Text`. Instead, Prop set `textContent` and `textConfig` are provided to support more powerful capabilities.\n - These related props at the left part below are deprecated. Use the right part below instead.\n - textPosition => textConfig.position\n - textOffset => textConfig.offset\n - textRotation => textConfig.rotation\n - textDistance => textConfig.distance\n - The props at the left part below are deprecated in `style` and `style.rich.?`. Use the props at the right part below instead.\n - textFill => fill\n - textStroke => stroke\n - textFont => font\n - textStrokeWidth => lineWidth\n - textAlign => align\n - textVerticalAlign => verticalAlign);\n - textLineHeight =>\n - textWidth => width\n - textHeight => hight\n - textBackgroundColor => backgroundColor\n - textPadding => padding\n - textBorderColor => borderColor\n - textBorderWidth => borderWidth\n - textBorderRadius => borderRadius\n - textBoxShadowColor => shadowColor\n - textBoxShadowBlur => shadowBlur\n - textBoxShadowOffsetX => shadowOffsetX\n - textBoxShadowOffsetY => shadowOffsetY\n - Note: these props are not changed:\n - textShadowColor\n - textShadowBlur\n - textShadowOffsetX\n - textShadowOffsetY\n - It effects these places:\n - In the `graphic` components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]\n - In `custom series`: the declarations of each element in the return of `renderItem`. [compat, but not accurately the same in some complicated cases].\n - Directly use zrender API to create graphic elements. [No compat, breaking change].\n- API on chart instance:\n - `chart.one(...)` is deprecated.\n- `label`:\n - In props `color`, `textBorderColor`, `backgroundColor` and `borderColor`, the value `'auto'` is deprecated. Use the value `'inherit'` instead.\n- `hoverAnimation`:\n - option `series.hoverAnimation` is deprecated. Use `series.emphasis.scale` instead.\n- `line series`:\n - option `series.clipOverflow` is deprecated. Use `series.clip` instead.\n- `custom series`:\n - In `renderItem`, the `api.style(...)` and `api.styleEmphasis(...)` are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by `api.visual(...)`.\n- `sunburst series`:\n - Action type `highlight` is deprecated. Use `sunburstHighlight` instead.\n - Action type `downplay` is deprecated. Use `sunburstUnhighlight` instead.\n - option `series.downplay` is deprecated. Use `series.blur` instead.\n - option `series.highlightPolicy` is deprecated. Use `series.emphasis.focus` instead.\n- `pie series`:\n - The action type at the left part below are deprecated. Use the right part instead:\n - `pieToggleSelect` => `toggleSelect`\n - `pieSelect` => `select`\n - `pieUnSelect` => `unselect`\n - The event type at the left part below are deprecated. Use the right part instead:\n - `pieselectchanged` => `selectchanged`\n - `pieselected` => `selected`\n - `pieunselected` => `unselected`\n - option `series.label.margin` is deprecated. Use `series.label.edgeDistance` instead.\n - option `series.clockWise` is deprecated. Use `series.clockwise` instead.\n - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.\n- `map series`:\n - The action type at the left part below are deprecated. Use the right part instead:\n - `mapToggleSelect` => `toggleSelect`\n - `mapSelect` => `select`\n - `mapUnSelect` => `unselect`\n - The event type at the left part below are deprecated. Use the right part instead:\n - `mapselectchanged` => `selectchanged`\n - `mapselected` => `selected`\n - `mapunselected` => `unselected`\n - option `series.mapType` is deprecated. Use `series.map` instead.\n - option `series.mapLocation` is deprecated.\n- `graph series`:\n - option `series.focusNodeAdjacency` is deprecated. Use `series.emphasis: { focus: 'adjacency'}` instead.\n- `gauge series`:\n - option `series.clockWise` is deprecated. Use `series.clockwise` instead.\n - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.\n- `dataZoom component`:\n - option `dataZoom.handleIcon` need prefix `path://` if using SVGPath.\n- `radar`:\n - option `radar.name` is deprecated. Use `radar.axisName` instead.\n - option `radar.nameGap` is deprecated. Use `radar.axisNameGap` instead.\n- Parse and format:\n - `echarts.format.formatTime` is deprecated. Use `echarts.time.format` instead.\n - `echarts.number.parseDate` is deprecated. Use `echarts.time.parse` instead.\n - `echarts.format.getTextRect` is deprecated.\n","dir":"/en/basics/release-note","path":"/en/basics/release-note/v5-upgrade-guide","extension":".md","createdAt":"2021-07-24T08:32:58.931Z","updatedAt":"2021-07-24T08:38:34.018Z","meta":{"version":0,"revision":0,"created":1627897109208},"$loki":66},{"slug":"radar","toc":[{"id":"suggestion-for-using-radar-chart","depth":2,"text":"Suggestion for Using Radar Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"radar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#radar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Radar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Radar 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Every variable in the radar chart match one axis that starting from the center. Axes have the same scale index and included angle. Connect the scale between axis, and connect the item in each axis together to become a polygon."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xH1-fnLcVG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The radar chart is useful for indicating similar values and checking outliers in variables. The radar chart can also be used to reflect what variables have a higher or lower score in the dataset, which makes it a better way to display the performance (see below). Similarly, the radar chart is often used in displaying data such as rankings, evaluations and reviews."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As shown below, the chart shows the comparison of the budgets and expenses in a kindergarten fund flow. The six areas involved are food, toys, picture books, medical care and clothing. Every axis has a range of 0 to 500. The toy is the only part that was overspent while the clothing is far below the budget. It becomes clear at a glance while using a radar chart to show which part is overspend or underspend."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-radar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-radar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Radar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The number of polygons in the radar chart should be limited. If there are more than 5 categories to be evaluated, both the outline and color block will be too confusing to read."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Including too many axes can also make the radar chart difficult to read. Therefore, try to keep the radar chart concisely and limit the number of variables."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because the radial distance is hard to judge, it is still difficult to read the specific value although there are grid lines. We recommend you use a line graph if you need to compare specific values."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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 scale between axis, and connect the item in each axis together to become a polygon.\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\nThe radar chart is useful for indicating similar values and checking outliers in variables. The radar chart can also be used to reflect what variables have a higher or lower score in the dataset, which makes it a better way to display the performance (see below). Similarly, the radar chart is often used in displaying data such as rankings, evaluations and reviews.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1\">\n</iframe>\n\nAs shown below, the chart shows the comparison of the budgets and expenses in a kindergarten fund flow. The six areas involved are food, toys, picture books, medical care and clothing. Every axis has a range of 0 to 500. The toy is the only part that was overspent while the clothing is far below the budget. It becomes clear at a glance while using a radar chart to show which part is overspend or underspend.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf\">\n</iframe>\n\n## Suggestion for Using Radar Chart\n\n1. The number of polygons in the radar chart should be limited. If there are more than 5 categories to be evaluated, both the outline and color block will be too confusing to read.\n\n2. Including too many axes can also make the radar chart difficult to read. Therefore, try to keep the radar chart concisely and limit the number of variables.\n\n3. Because the radial distance is hard to judge, it is still difficult to read the specific value although there are grid lines. We recommend you use a line graph if you need to compare specific values.\n","dir":"/en/best-practice/specification","path":"/en/best-practice/specification/radar","extension":".md","createdAt":"2021-06-04T12:26:37.917Z","updatedAt":"2021-06-04T12:26:37.917Z","meta":{"version":0,"revision":0,"created":1627897109228},"$loki":67},{"slug":"gauge","toc":[{"id":"suggestion-for-using-gauger-chart","depth":2,"text":"Suggestion for Using Gauger Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"gauger-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#gauger-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Gauger Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 represent the value."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-gauger-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-gauger-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Gauger Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The gauger chart is suitable for displaying single progress or measurement standard under quantitative conditions while it is not suitable for carpeting different variables or trends."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can provide info in different dimensions. However, do not include more than 3 pointers in one dashboard. It is recommended to use multiple dashboards if there are indeed multiple data to be displayed."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=gauge-car"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 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 represent the value.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f\">\n</iframe>\n\n## Suggestion for Using Gauger Chart\n\n1. The gauger chart is suitable for displaying single progress or measurement standard under quantitative conditions while it is not suitable for carpeting different variables or trends.\n\n2. You can provide info in different dimensions. However, do not include more than 3 pointers in one dashboard. It is recommended to use multiple dashboards if there are indeed multiple data to be displayed.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=gauge-car\">\n</iframe>\n","dir":"/en/best-practice/specification","path":"/en/best-practice/specification/gauge","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-07-29T06:28:24.108Z","meta":{"version":0,"revision":0,"created":1627897109236},"$loki":68},{"slug":"funnel","toc":[{"id":"suggestion-for-using-funnel-chart","depth":2,"text":"Suggestion for Using Funnel Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"funnel-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#funnel-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Funnel Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Funnel 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The funnel chart usually used to provide the simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrJIQEN5NM"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-funnel-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-funnel-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Funnel Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As shown below, the first three steps(\"show\", \"click\", \"visit\") have only a little drain. The significant decrease happened from \"visit\" to \"consult\". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don't add too many layers or colors to increase reading difficulty."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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 simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business.\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## Suggestion for Using Funnel Chart\n\n1. Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps.\n\nAs shown below, the first three steps(\"show\", \"click\", \"visit\") have only a little drain. The significant decrease happened from \"visit\" to \"consult\". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf\">\n</iframe>\n\n2. Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f\">\n</iframe>\n\n3. Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1\">\n</iframe>\n\n4. The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart.\n\n5. Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don't add too many layers or colors to increase reading difficulty. \n","dir":"/en/best-practice/specification","path":"/en/best-practice/specification/funnel","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-06-04T12:26:37.916Z","meta":{"version":0,"revision":0,"created":1627897109241},"$loki":69},{"slug":"color-enhance","toc":[{"id":"sympathetic-response-of-color","depth":2,"text":"Sympathetic Response of Color"},{"id":"common-sense-consistency-of-color","depth":2,"text":"Common Sense Consistency of Color"},{"id":"divide-data-by-colors","depth":2,"text":"Divide Data by Colors"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"leveraging-color-to-enhance-data-visualization"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#leveraging-color-to-enhance-data-visualization","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Leveraging Color to Enhance Data Visualization"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"sympathetic-response-of-color"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#sympathetic-response-of-color","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Sympathetic Response of Color"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Color perception is a complicated result of the interaction between physiological and psychological effects. To prove that humans can perceive colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an experiment to paint the wall of two workplaces in gray-cyan and red-orange. With the same objective ambient temperature and labor intensity, staffs in the gray-cyan workplace are easier to feel cool. Further research found that except for the feeling of warm and cool by observing colors, there are also light and dark, far and near, lively and melancholic. Colors will cause emotional fluctuations that affect human behavior based on human instinct."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the field of visualization, if we choose the color that coincides with the characteristic of data and the sympathetic response of emotions."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of the selling percentage of a certain dessert shop."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"50%","height":"100%","src":"images/design/color/color01.png"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We provided two charts with the same style but different color schemes. The right side one obviously performs better for the dessert data displaying."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/color/color02.png"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Compared with blue and purple, color likes orange, yellow, pink and green are preferred choices to inspire the appetite, happiness and warmness which matched the motion of eating sweets. In the other hand, most of the customer group for desserts is woman and children. Lively and cute chart colors in the left chart might be the better choice compared with the calm and rational colors of the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"##Semantic Response of Color"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Different colors can help us to identify and classify different ideas because we are familiar with combining things and concepts with colors. We subconsciously think of white when we referring to \"clouds\", pink when we referring to \"love\". Those colors that are naturally consistent with semantics are called \"semantic-resonant color\"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The researchers noticed that matching the semantic-resonant color for words contained specific color can increase the speed of the cognitive process and vice versa. This funny phenomenon is called the \"Stroop Effect\". In a comparative test (as shown below), the text \"YELLOW\" in the first line is easier to be positioned compared with the text \"YELLOW\" in the second line. In the second line, the text \"PURPLE\" have the font color of yellow, which makes it being noticed earlier sometimes. The font color here interfered with our speed of finding the right answer."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/color/color03.png"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Using semantic-resonant color effectively, we use the same color as the meaning of the data to improve the cognition efficiency of the visualization. For instance, you might use blue to display the data of \"OCEAN\", yellow to display the data of \"DESERT\"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The visual effects should be explained as easily as possible. Try to find out the color scheme that matches the preconceived and cultural association of the user. The following chart shows the sales info of kiwifruit, banana, orange and strawberry and chose the same color as the fruit itself. Therefore, we can easily identify and remember the fruit corresponding to each column."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"common-sense-consistency-of-color"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#common-sense-consistency-of-color","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Common Sense Consistency of Color"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In terms of visualization, the color used is directly related to factors such as data type, display environment, target client, and social background. You cannot separate color as an individual factor to design. Please restrain your free creative passion before selecting the color scheme and check if it is a special type of data. For example, colors like green and red in a stock chart have their customary meaning. Therefore, the consistency between the choice of color and common knowledge makes the user understand and distinguish the chart efficiently."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is another example of the outdoor temperature, the red and blue bars make the chart easy to distinguish without explanation."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"divide-data-by-colors"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#divide-data-by-colors","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Divide Data by Colors"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We usually use the line chart to analyze the trend. We can actively configure an interval when sometimes we need to clearly know whether a specific data is in some domain. If you set 25%-75% as our planned sales, try to set different colors for each interval in this domain to efficiently identify the interval for each value: whether it is not reaching the goal, reaching the goal, or exceeding the goal."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Therefore, color can be used as an effective tool to improve the readability of the chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"80%","height":"100%","src":"images/design/color/color04.png"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"# 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 Response of Color\n\nColor perception is a complicated result of the interaction between physiological and psychological effects. To prove that humans can perceive colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an experiment to paint the wall of two workplaces in gray-cyan and red-orange. With the same objective ambient temperature and labor intensity, staffs in the gray-cyan workplace are easier to feel cool. Further research found that except for the feeling of warm and cool by observing colors, there are also light and dark, far and near, lively and melancholic. Colors will cause emotional fluctuations that affect human behavior based on human instinct.\n\nIn the field of visualization, if we choose the color that coincides with the characteristic of data and the sympathetic response of emotions.\n\nHere is an example of the selling percentage of a certain dessert shop.\n\n<img max-width=\"830\" width=\"50%\" height=\"100%\"\nsrc=\"images/design/color/color01.png\">\n</img>\n\nWe provided two charts with the same style but different color schemes. The right side one obviously performs better for the dessert data displaying.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/color/color02.png\">\n</img>\n\nCompared with blue and purple, color likes orange, yellow, pink and green are preferred choices to inspire the appetite, happiness and warmness which matched the motion of eating sweets. In the other hand, most of the customer group for desserts is woman and children. Lively and cute chart colors in the left chart might be the better choice compared with the calm and rational colors of the chart.\n\n##Semantic Response of Color\n\nDifferent colors can help us to identify and classify different ideas because we are familiar with combining things and concepts with colors. We subconsciously think of white when we referring to \"clouds\", pink when we referring to \"love\". Those colors that are naturally consistent with semantics are called \"semantic-resonant color\".\n\nThe researchers noticed that matching the semantic-resonant color for words contained specific color can increase the speed of the cognitive process and vice versa. This funny phenomenon is called the \"Stroop Effect\". In a comparative test (as shown below), the text \"YELLOW\" in the first line is easier to be positioned compared with the text \"YELLOW\" in the second line. In the second line, the text \"PURPLE\" have the font color of yellow, which makes it being noticed earlier sometimes. The font color here interfered with our speed of finding the right answer.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/color/color03.png\">\n</img>\n\nUsing semantic-resonant color effectively, we use the same color as the meaning of the data to improve the cognition efficiency of the visualization. For instance, you might use blue to display the data of \"OCEAN\", yellow to display the data of \"DESERT\".\n\nThe visual effects should be explained as easily as possible. Try to find out the color scheme that matches the preconceived and cultural association of the user. The following chart shows the sales info of kiwifruit, banana, orange and strawberry and chose the same color as the fruit itself. Therefore, we can easily identify and remember the fruit corresponding to each column.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW\">\n</iframe>\n\n## Common Sense Consistency of Color\n\nIn terms of visualization, the color used is directly related to factors such as data type, display environment, target client, and social background. You cannot separate color as an individual factor to design. Please restrain your free creative passion before selecting the color scheme and check if it is a special type of data. For example, colors like green and red in a stock chart have their customary meaning. Therefore, the consistency between the choice of color and common knowledge makes the user understand and distinguish the chart efficiently.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG\">\n</iframe>\n\nHere is another example of the outdoor temperature, the red and blue bars make the chart easy to distinguish without explanation.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1\">\n</iframe>\n\n## Divide Data by Colors\n\nWe usually use the line chart to analyze the trend. We can actively configure an interval when sometimes we need to clearly know whether a specific data is in some domain. If you set 25%-75% as our planned sales, try to set different colors for each interval in this domain to efficiently identify the interval for each value: whether it is not reaching the goal, reaching the goal, or exceeding the goal.\n\nTherefore, color can be used as an effective tool to improve the readability of the chart.\n\n<img max-width=\"830\" width=\"80%\" height=\"100%\"\nsrc=\"images/design/color/color04.png\">\n</img>\n","dir":"/en/best-practice/design","path":"/en/best-practice/design/color-enhance","extension":".md","createdAt":"2021-06-04T12:26:37.917Z","updatedAt":"2021-07-29T06:23:03.304Z","meta":{"version":0,"revision":0,"created":1627897109250},"$loki":70},{"slug":"waterfall","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/en/application/chart-types/bar","path":"/en/application/chart-types/bar/waterfall","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-06-04T12:26:37.914Z","meta":{"version":0,"revision":0,"created":1627897109252},"$loki":71},{"slug":"dynamic-data","toc":[{"id":"异步加载","depth":2,"text":"异步加载"},{"id":"loading-动画","depth":2,"text":"loading 动画"},{"id":"数据的动态更新","depth":2,"text":"数据的动态更新"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"异步数据的加载与动态更新"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"异步数据的加载与动态更新"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"异步加载"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"异步加载"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"zh/get-started"},"children":[{"type":"text","value":"入门示例"}]},{"type":"text","value":"中的数据是在初始化后"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":"中直接填入的,但是很多时候可能数据需要异步加载后再填入。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ECharts"}]},{"type":"text","value":" 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":" 填入数据和配置项就行。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function(data) {\n // data 的结构:\n // {\n // categories: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var myChart = echarts.init(document.getElementById('main'));\n// 显示标题,图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// 异步加载数据\n$.get('data.json').done(function(data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }\n ]\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-async"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 中在更新数据的时候需要通过"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"属性对应到相应的系列,上面示例中如果"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"loading-动画"},"children":[{"type":"element","tag":"a","props":{"href":"#loading-%E5%8A%A8%E7%94%BB","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"loading 动画"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 默认有提供了一个简单的加载动画。只需要调用 "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.showLoading"},"children":[{"type":"text","value":"showLoading"}]},{"type":"text","value":" 方法显示。数据加载完成后再调用 "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.hideLoading"},"children":[{"type":"text","value":"hideLoading"}]},{"type":"text","value":" 方法隐藏加载动画。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"效果如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-loading"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"数据的动态更新"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据的动态更新"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"所有数据的更新都通过 "},{"type":"element","tag":"a","props":{"href":"~api.html#echartsInstance.setOption"},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":"实现,你只需要定时获取数据,"},{"type":"element","tag":"a","props":{"href":"~api.html#echartsInstance.setOption"},"children":[{"type":"text","value":"setOption"}]},{"type":"text","value":" 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"具体可以看下面示例:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/tutorial-dynamic-data"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 异步数据的加载与动态更新\n\n## 异步加载\n\n[入门示例](zh/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: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n```\n\n或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n// 显示标题,图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// 异步加载数据\n$.get('data.json').done(function(data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }\n ]\n });\n});\n```\n\n如下:\n\n<md-example src=\"doc-example/tutorial-async\"></md-example>\n\nECharts 中在更新数据的时候需要通过`name`属性对应到相应的系列,上面示例中如果`name`不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的`name`数据。\n\n## loading 动画\n\n如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。\n\nECharts 默认有提供了一个简单的加载动画。只需要调用 [showLoading](api.html#echartsInstance.showLoading) 方法显示。数据加载完成后再调用 [hideLoading](api.html#echartsInstance.hideLoading) 方法隐藏加载动画。\n\n```js\nmyChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n```\n\n效果如下:\n\n<md-example src=\"doc-example/tutorial-loading\"></md-example>\n\n## 数据的动态更新\n\nECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。\n\n所有数据的更新都通过 [setOption](~api.html#echartsInstance.setOption)实现,你只需要定时获取数据,[setOption](~api.html#echartsInstance.setOption) 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。\n\n具体可以看下面示例:\n\n<md-example src=\"doc-example/tutorial-dynamic-data\"></md-example>\n","dir":"/zh/application/data","path":"/zh/application/data/dynamic-data","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-07-21T10:41:21.343Z","meta":{"version":0,"revision":0,"created":1627897109265},"$loki":72},{"slug":"baidu-app","toc":[{"id":"使用方式","depth":2,"text":"使用方式"},{"id":"注意事项","depth":2,"text":"注意事项"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"在百度智能小程序中使用-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在百度智能小程序中使用 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"http://smartprogram.baidu.com/docs/develop/framework/echarts/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts 图表-beta"}]},{"type":"text","value":" 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"aidu-smart-app-echarts-demo"}]},{"type":"text","value":" 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如有使用上的问题,可以在 "},{"type":"element","tag":"a","props":{"href":"https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"baidu-smart-app-echarts-demo/issues"}]},{"type":"text","value":" 中咨询。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"使用方式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用方式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参见百度智能小程序文档 "},{"type":"element","tag":"a","props":{"href":"http://smartprogram.baidu.com/docs/develop/framework/echarts/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ECharts 图表-beta"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"注意事项"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"注意事项"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与"},{"type":"element","tag":"a","props":{"href":"./zh/application/cross-platform/wechat-app"},"children":[{"type":"text","value":"在微信小程序中使用 ECharts"}]},{"type":"text","value":" 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"provider"}]},{"type":"text","value":" 指定动态库名称,具体参见"},{"type":"element","tag":"a","props":{"href":"http://smartprogram.baidu.com/docs/develop/framework/echarts/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]},{"type":"text","value":"的「在项目中引用动态库」章节。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"请务必查看"},{"type":"element","tag":"a","props":{"href":"http://smartprogram.baidu.com/docs/develop/framework/echarts/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"文档"}]},{"type":"text","value":"的「兼容性说明」以了解各功能的实现方式。"}]}]},"text":"# 在百度智能小程序中使用 ECharts\n\n[ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。\n\n[aidu-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-app-echarts-demo/issues) 中咨询。\n\n## 使用方式\n\n参见百度智能小程序文档 [ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。\n\n## 注意事项\n\n百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/application/cross-platform/wechat-app) 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 `provider` 指定动态库名称,具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。\n\n请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。\n","dir":"/zh/application/cross-platform","path":"/zh/application/cross-platform/baidu-app","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-07-21T06:20:00.860Z","meta":{"version":0,"revision":0,"created":1627897109267},"$loki":73},{"slug":"wechat-app","toc":[{"id":"使用方式","depth":2,"text":"使用方式"},{"id":"注意事项","depth":2,"text":"注意事项"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"在微信小程序中使用-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在微信小程序中使用 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-for-weixin","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-for-weixin"}]},{"type":"text","value":" 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"使用方式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"使用方式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下载该项目"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如有必要,将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ec-canvas"}]},{"type":"text","value":" 目录下的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]},{"type":"text","value":" 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//build.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"自定义构建"}]},{"type":"text","value":"生成并替换 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pages"}]},{"type":"text","value":" 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"更详细的说明请参见 "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-for-weixin","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-for-weixin"}]},{"type":"text","value":" 项目。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"注意事项"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"注意事项"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"force-use-old-canvas=\"true\""}]},{"type":"text","value":" 的情况下,使用新的 Canvas 2d(默认)。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"更详细的说明请参见 "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Canvas 2d 版本要求"}]},{"type":"text","value":"。"}]}]},"text":"# 在微信小程序中使用 ECharts\n\n[echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。\n\n## 使用方式\n\n1. 下载该项目\n2. 如有必要,将 `ec-canvas` 目录下的 `echarts.js` 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用[自定义构建](https://echarts.apache.org//build.html)生成并替换 `echarts.js`\n3. `pages` 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。\n\n更详细的说明请参见 [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) 项目。\n\n## 注意事项\n\n最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas=\"true\"` 的情况下,使用新的 Canvas 2d(默认)。\n\n使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。\n\n更详细的说明请参见 [Canvas 2d 版本要求](https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)。\n","dir":"/zh/application/cross-platform","path":"/zh/application/cross-platform/wechat-app","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-06-04T12:26:37.922Z","meta":{"version":0,"revision":0,"created":1627897109274},"$loki":74},{"slug":"server","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"echarts-服务端渲染"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts 服务端渲染"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 可以在服务端进行渲染。例如"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//examples","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"官方示例"}]},{"type":"text","value":"里的一个个小截图,就是在服务端预生成出来的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"服务端渲染可以使用流行的 headless 环境,例如 "},{"type":"element","tag":"a","props":{"href":"https://github.com/GoogleChrome/puppeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"puppeteer"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"headless chrome"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://github.com/Automattic/node-canvas","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"node-canvas"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"https://github.com/jsdom/jsdom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"jsdom"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"http://phantomjs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"PhantomJS"}]},{"type":"text","value":" 等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这是一些社区贡献的 ECharts 服务端渲染方案:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/hellosean1025/node-echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/hellosean1025/node-echarts"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/chfw/echarts-scrappeteer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/chfw/echarts-scrappeteer"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73"}]}]},{"type":"text","value":"\n"}]}]},"text":"# ECharts 服务端渲染\n\nECharts 可以在服务端进行渲染。例如[官方示例](https://echarts.apache.org//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](http://phantomjs.org/) 等。\n\n这是一些社区贡献的 ECharts 服务端渲染方案:\n\n- [https://github.com/hellosean1025/node-echarts](https://github.com/hellosean1025/node-echarts)\n- [https://github.com/chfw/echarts-scrappeteer](https://github.com/chfw/echarts-scrappeteer)\n- [https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js](https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js)\n- [https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73](https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73)\n","dir":"/zh/application/cross-platform","path":"/zh/application/cross-platform/server","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-07-21T06:20:12.071Z","meta":{"version":0,"revision":0,"created":1627897109277},"$loki":75},{"slug":"rich-text","toc":[{"id":"文本样式相关的配置项","depth":2,"text":"文本样式相关的配置项"},{"id":"文本、文本框、文本片段的基本样式和装饰","depth":2,"text":"文本、文本框、文本片段的基本样式和装饰"},{"id":"标签的位置","depth":2,"text":"标签的位置"},{"id":"标签的旋转","depth":2,"text":"标签的旋转"},{"id":"文本片段的排版和对齐","depth":2,"text":"文本片段的排版和对齐"},{"id":"特殊效果:图标、分割线、标题块、简单表格","depth":2,"text":"特殊效果:图标、分割线、标题块、简单表格"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"富文本标签"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"富文本标签"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 中的文本标签从 v3.7 开始支持富文本模式,能够:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在文本中使用图片做小图标或者背景。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"特定组合以上的规则,可以做出简单表格、分割线等效果。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块(Text Block):文本标签块整体。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本片段(Text fragment):文本标签块中的部分文本。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如下图示例:\n~"},{"type":"element","tag":"a","props":{"href":"$%7BgalleryViewPath%7Ddoc-example/text-block-fragment&edit=1&reset=1"},"children":[{"type":"text","value":"340x240"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"文本样式相关的配置项"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"文本样式相关的配置项"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"echarts 提供了丰富的文本标签配置项,包括:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"字体基本样式设置:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontWeight"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文字颜色:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文字描边:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderWidth"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文字阴影:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowBlur"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowOffsetX"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textShadowOffsetY"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块或文本片段大小:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块或文本片段的对齐:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块或文本片段的边框、背景(颜色或图片):"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderRadius"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块或文本片段的阴影:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowBlur"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetX"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetY"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"文本块的位置和旋转:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rotate"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"可以在各处的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" 属性中定义文本片段样式。例如 "},{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.rich"},"children":[{"type":"text","value":"series-bar.label.rich"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"labelOption = {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意:如果不定义 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":",不能指定文字块的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"文本、文本框、文本片段的基本样式和装饰"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"文本、文本框、文本片段的基本样式和装饰"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"每个文本可以设置基本的字体样式:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontStyle"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontWeight"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontSize"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"fontFamily"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"可以设置文字的颜色 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":" 和边框的颜色 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderWidth"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"文本框可以设置边框和背景的样式:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"文本片段也可以设置边框和背景的样式:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"标签的位置"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"标签的位置"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于折线图、柱状图、散点图等,均可以使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" 来设置标签。标签的相对于图形元素的位置,一般使用 "},{"type":"element","tag":"a","props":{"href":"option.html#series-scatter.label.position"},"children":[{"type":"text","value":"label.position"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"option.html#series-scatter.label.distance"},"children":[{"type":"text","value":"label.distance"}]},{"type":"text","value":" 来配置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"试试在下面例子中修改"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":"和"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":" 属性:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // 修改 position 和 distance 的值试试\n // 支持:'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":" 在不同的图中可取值有所不同。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"distance"}]},{"type":"text","value":" 并不是在每个图中都支持。详情请参见 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"option 文档"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"标签的旋转"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"标签的旋转"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"const labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这种场景下,可以结合 "},{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.align"},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"a","props":{"href":"option.html#series-bar.label.verticalAlign"},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" 来调整标签位置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意,逻辑是,先使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" 定位,再旋转。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"文本片段的排版和对齐"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"文本片段的排版和对齐"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"关于排版方式,每个文本片段,可以想象成 CSS 中的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"inline-block"}]},{"type":"text","value":",在文档流中按行放置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"每个文本片段的内容盒尺寸("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"content box size"}]},{"type":"text","value":"),默认是根据文字大小决定的。但是,也可以设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"height"}]},{"type":"text","value":" 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"border box size"}]},{"type":"text","value":"),由上述本身尺寸,加上文本片段的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]},{"type":"text","value":" 来得到。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"只有 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'\\n'"}]},{"type":"text","value":" 是换行符,能导致换行。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"一行内,会有多个文本片段。每行的实际高度,由 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" 最大的文本片段决定。文本片段的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" 可直接在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" 中指定,也可以在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" 的父层级中统一指定而采用到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich"}]},{"type":"text","value":" 的所有项中,如果都不指定,则取文本片段的边框盒尺寸("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"border box size"}]},{"type":"text","value":")。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在一行的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineHeight"}]},{"type":"text","value":" 被决定后,一行内,文本片段的竖直位置,由文本片段的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"verticalAlign"}]},{"type":"text","value":" 来指定(这里和 CSS 中的规则稍有不同):"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'bottom'"}]},{"type":"text","value":":文本片段的盒的底边贴住行底。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'top'"}]},{"type":"text","value":":文本片段的盒的顶边贴住行顶。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'middle'"}]},{"type":"text","value":":居行中。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"文本块的宽度,可以直接由文本块的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"width"}]},{"type":"text","value":" 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 决定了文本片段在行中的水平位置:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"首先,从左向右连续紧靠放置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":" 的文本片段盒。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"然后,从右向左连续紧靠放置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":" 的文本片段盒。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"关于文字在文本片段盒中的位置:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'center'"}]},{"type":"text","value":",则文字在文本片段盒中是居中的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":",则文字在文本片段盒中是居左的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"如果 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"align"}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":",则文字在文本片段盒中是居右的。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"特殊效果:图标、分割线、标题块、简单表格"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"特殊效果:图标、分割线、标题块、简单表格"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"看下面的例子:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"lr"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"文本片段的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":" 可以指定为图片后,就可以在文本中使用图标了:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"labelOption = {\n rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"分割线实际是用 border 实现的:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"labelOption = {\n rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%',表示分割线的长度充满文本块。\n // 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"标题块是使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":" 实现的:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"labelOption = {\n // 标题文字居左\n formatter: '{titleBg|Left Title}',\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n\n// 标题文字居中。\n// 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。\nlabelOption = {\n formatter: '{tc|Center Title}{titleBg|}',\n rich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"该例子"}]}]}]},"text":"# 富文本标签\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~[340x240](${galleryViewPath}doc-example/text-block-fragment&edit=1&reset=1)\n\n## 文本样式相关的配置项\n\necharts 提供了丰富的文本标签配置项,包括:\n\n- 字体基本样式设置:`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n- 文字颜色:`color`。\n- 文字描边:`textBorderColor`、`textBorderWidth`。\n- 文字阴影:`textShadowColor`、`textShadowBlur`、`textShadowOffsetX`、`textShadowOffsetY`。\n- 文本块或文本片段大小:`lineHeight`、`width`、`height`、`padding`。\n- 文本块或文本片段的对齐:`align`、`verticalAlign`。\n- 文本块或文本片段的边框、背景(颜色或图片):`backgroundColor`、`borderColor`、`borderWidth`、`borderRadius`。\n- 文本块或文本片段的阴影:`shadowColor`、`shadowBlur`、`shadowOffsetX`、`shadowOffsetY`。\n- 文本块的位置和旋转:`position`、`distance`、`rotate`。\n\n可以在各处的 `rich` 属性中定义文本片段样式。例如 [series-bar.label.rich](option.html#series-bar.label.rich)\n\n例如:\n\n```js\nlabelOption = {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n }\n};\n```\n\n> 注意:如果不定义 `rich`,不能指定文字块的 `width` 和 `height`。\n\n## 文本、文本框、文本片段的基本样式和装饰\n\n每个文本可以设置基本的字体样式:`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n\n可以设置文字的颜色 `color` 和边框的颜色 `textBorderColor`、`textBorderWidth`。\n\n文本框可以设置边框和背景的样式:`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n文本片段也可以设置边框和背景的样式:`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n例如:\n\n```js [live]\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n```\n\n## 标签的位置\n\n对于折线图、柱状图、散点图等,均可以使用 `label` 来设置标签。标签的相对于图形元素的位置,一般使用 [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance) 来配置。\n\n试试在下面例子中修改`position`和`distance` 属性:\n\n```js [live]\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // 修改 position 和 distance 的值试试\n // 支持:'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n```\n\n> 注意:`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](https://echarts.apache.org/option.html)。\n\n## 标签的旋转\n\n某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:\n\n```js [live-lr]\nconst labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n```\n\n这种场景下,可以结合 [align](option.html#series-bar.label.align) 和 [verticalAlign](option.html#series-bar.label.verticalAlign) 来调整标签位置。\n\n注意,逻辑是,先使用 `align` 和 `verticalAlign` 定位,再旋转。\n\n## 文本片段的排版和对齐\n\n关于排版方式,每个文本片段,可以想象成 CSS 中的 `inline-block`,在文档流中按行放置。\n\n每个文本片段的内容盒尺寸(`content box size`),默认是根据文字大小决定的。但是,也可以设置 `width`、`height` 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(`border box size`),由上述本身尺寸,加上文本片段的 `padding` 来得到。\n\n只有 `'\\n'` 是换行符,能导致换行。\n\n一行内,会有多个文本片段。每行的实际高度,由 `lineHeight` 最大的文本片段决定。文本片段的 `lineHeight` 可直接在 `rich` 中指定,也可以在 `rich` 的父层级中统一指定而采用到 `rich` 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(`border box size`)。\n\n在一行的 `lineHeight` 被决定后,一行内,文本片段的竖直位置,由文本片段的 `verticalAlign` 来指定(这里和 CSS 中的规则稍有不同):\n\n- `'bottom'`:文本片段的盒的底边贴住行底。\n- `'top'`:文本片段的盒的顶边贴住行顶。\n- `'middle'`:居行中。\n\n文本块的宽度,可以直接由文本块的 `width` 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 `align` 决定了文本片段在行中的水平位置:\n\n- 首先,从左向右连续紧靠放置 `align` 为 `'left'` 的文本片段盒。\n- 然后,从右向左连续紧靠放置 `align` 为 `'right'` 的文本片段盒。\n- 最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。\n\n关于文字在文本片段盒中的位置:\n\n- 如果 `align` 为 `'center'`,则文字在文本片段盒中是居中的。\n- 如果 `align` 为 `'left'`,则文字在文本片段盒中是居左的。\n- 如果 `align` 为 `'right'`,则文字在文本片段盒中是居右的。\n\n## 特殊效果:图标、分割线、标题块、简单表格\n\n看下面的例子:\n\n```js [live-lr]\noption = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n```\n\n文本片段的 `backgroundColor` 可以指定为图片后,就可以在文本中使用图标了:\n\n```js\nlabelOption = {\n rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n }\n};\n```\n\n分割线实际是用 border 实现的:\n\n```js\nlabelOption = {\n rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%',表示分割线的长度充满文本块。\n // 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n }\n};\n```\n\n标题块是使用 `backgroundColor` 实现的:\n\n```js\nlabelOption = {\n // 标题文字居左\n formatter: '{titleBg|Left Title}',\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n\n// 标题文字居中。\n// 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。\nlabelOption = {\n formatter: '{tc|Center Title}{titleBg|}',\n rich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n```\n\n简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 [该例子](https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text)\n","dir":"/zh/application/label","path":"/zh/application/label/rich-text","extension":".md","createdAt":"2021-07-21T04:28:36.251Z","updatedAt":"2021-07-21T10:38:59.338Z","meta":{"version":0,"revision":0,"created":1627897109298},"$loki":76},{"slug":"5-2-0","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"apache-echarts-520"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#apache-echarts-520","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Apache ECharts 5.2.0"}]}]},"text":"# Apache ECharts 5.2.0\n","dir":"/zh/basics/release-note","path":"/zh/basics/release-note/5-2-0","extension":".md","createdAt":"2021-07-19T10:42:40.738Z","updatedAt":"2021-07-19T10:42:51.829Z","meta":{"version":0,"revision":0,"created":1627897109302},"$loki":77},{"slug":"v5-feature","toc":[{"id":"动态叙事","depth":2,"text":"动态叙事"},{"id":"视觉设计","depth":2,"text":"视觉设计"},{"id":"交互能力","depth":2,"text":"交互能力"},{"id":"开发体验","depth":2,"text":"开发体验"},{"id":"可访问性","depth":2,"text":"可访问性"},{"id":"小结","depth":2,"text":"小结"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"apache-echarts-5-新特性"},"children":[{"type":"element","tag":"a","props":{"href":"#apache-echarts-5-%E6%96%B0%E7%89%B9%E6%80%A7","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Apache ECharts 5 新特性"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/echarts-5.png","width":"800px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"动态叙事"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8A%A8%E6%80%81%E5%8F%99%E4%BA%8B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"动态叙事"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"动态排序图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"动态排序图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"bar-race-country","width":700,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n\n\n"},{"type":"element","tag":"md-example","props":{"src":"line-race","width":700,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"自定义系列动画"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E5%8A%A8%E7%94%BB","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"自定义系列动画"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"视觉设计"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"视觉设计"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"默认设计"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%BB%98%E8%AE%A4%E8%AE%BE%E8%AE%A1","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"默认设计"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/theme-color.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-theme-light.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-theme-dark.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/dataZoom.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/timeline.png","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"标签"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%A0%87%E7%AD%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"标签"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/pie-label.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"时间轴"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%97%B6%E9%97%B4%E8%BD%B4","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"时间轴"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":" 支持了时间模版(例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{yyyy}-{MM}-{dd}"}]},{"type":"text","value":"),并且可以为不同时间粒度的标签指定不同的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"formatter"}]},{"type":"text","value":",结合已有的富文本标签,可以定制出醒目而多样的时间效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"不同的 dataZoom 粒度下时间刻度的显示:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/time-axis.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/time-axis-2.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"提示框"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8F%90%E7%A4%BA%E6%A1%86","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"提示框"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-tooltip.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/new-tooltip-2.png","width":"400px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"仪表盘"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BB%AA%E8%A1%A8%E7%9B%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"仪表盘"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"不同样式的仪表盘指针:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/gauge-pointer.png","width":"600px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"gauge-clock","width":600,"height":600},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"扇形圆角"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%89%87%E5%BD%A2%E5%9C%86%E8%A7%92","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"扇形圆角"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"sunburst-borderRadius","width":400,"height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"交互能力"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"交互能力"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"状态管理"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"状态管理"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"淡出"}]},{"type":"text","value":"其它非相关元素的效果,从而可以达到聚焦目标数据的目的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如在这个"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"柱状图"}]},{"type":"text","value":"的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,我们为所有系列还添加了"},{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"点击选中"}]},{"type":"text","value":"这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]},{"type":"text","value":" 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" 中配置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"性能提升"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"性能提升"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"脏矩形渲染"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%84%8F%E7%9F%A9%E5%BD%A2%E6%B8%B2%E6%9F%93","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"脏矩形渲染"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"脏矩形的可视化演示,红色框选部分为该帧重绘区域:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"src":"images/feature-v5/dirty-rect.gif","width":"500px"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"大家在新的示例页面选择开启脏矩形优化就可以看到该效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"实时时序数据的折线图性能优化"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%9E%E6%97%B6%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"实时时序数据的折线图性能优化"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"开发体验"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"开发体验"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"数据集"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E9%9B%86","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据集"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"国际化"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9B%BD%E9%99%85%E5%8C%96","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"国际化"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。 这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包 ,通过类似挂载主题的方式,使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"registerLocale"}]},{"type":"text","value":" 函数挂载语言包对象 ,重新初始化后就完成了语言的切换 。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// import the lang object and set when init\necharts.registerLocale('DE', lang);\necharts.init(DomElement, null, {\n locale: 'DE'\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"typescript-重构"},"children":[{"type":"element","tag":"a","props":{"href":"#typescript-%E9%87%8D%E6%9E%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"TypeScript 重构"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"DTS"}]},{"type":"text","value":"类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到"},{"type":"element","tag":"a","props":{"href":"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"DefinityTyped"}]},{"type":"text","value":",这个有着不小的工作量,非常感谢大家的贡献。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,如果开发者的组件是按需引入的,我们还提供了一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ComposeOption"}]},{"type":"text","value":" 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"可访问性"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"可访问性"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Apache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"主题配色"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"主题配色"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"贴花图案"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"贴花图案"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-decal-simple","width":600,"height":350},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"doc-example/aria-decal-newspaper","width":600,"height":350},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"小结"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%B0%8F%E7%BB%93","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"小结"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"感谢所有使用过 ECharts,甚至参与过社区贡献的开发者,正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中,Apache ECharts 也会以更大的诚意和大家在 6 相见!"}]}]},"text":"# Apache ECharts 5 新特性\n\n数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。\n\nApache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。\n\n<img src=\"images/feature-v5/echarts-5.png\" width=\"800px\" />\n\n“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。\n\n## 动态叙事\n\n动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。\n\n#### 动态排序图\n\nApache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。\n\n<md-example src=\"bar-race-country\" width=\"700\" height=\"400\"></md-example>\n<md-example src=\"line-race\" width=\"700\" height=\"400\"></md-example>\n\n动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。\n\n#### 自定义系列动画\n\n除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。\n\n想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!\n\n## 视觉设计\n\n视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。\n\n#### 默认设计\n\n我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。\n\n<img src=\"images/feature-v5/theme-color.png\" width=\"400px\" />\n\n我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:\n\n<img src=\"images/feature-v5/new-theme-light.png\" width=\"500px\" />\n<img src=\"images/feature-v5/new-theme-dark.png\" width=\"500px\" />\n\n对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:\n\n<img src=\"images/feature-v5/dataZoom.png\" width=\"500px\" />\n\n<img src=\"images/feature-v5/timeline.png\" width=\"500px\" />\n\n#### 标签\n\n标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。\n\nApache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。\n\n这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。\n\n我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。\n\n新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:\n\n<img src=\"images/feature-v5/pie-label.png\" width=\"400px\" />\n\n#### 时间轴\n\nApache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。\n\n首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 `formatter` 支持了时间模版(例如 `{yyyy}-{MM}-{dd}`),并且可以为不同时间粒度的标签指定不同的 `formatter`,结合已有的富文本标签,可以定制出醒目而多样的时间效果。\n\n不同的 dataZoom 粒度下时间刻度的显示:\n\n<img src=\"images/feature-v5/time-axis.png\" width=\"600px\" />\n\n<img src=\"images/feature-v5/time-axis-2.png\" width=\"600px\" />\n\n#### 提示框\n\n提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。\n\n<img src=\"images/feature-v5/new-tooltip.png\" width=\"400px\" />\n<img src=\"images/feature-v5/new-tooltip-2.png\" width=\"400px\" />\n\n除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。\n\n#### 仪表盘\n\n我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。\n\n不同样式的仪表盘指针:\n\n<img src=\"images/feature-v5/gauge-pointer.png\" width=\"600px\" />\n\n这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。\n\n<md-example src=\"gauge-clock\" width=\"600\" height=\"600\"></md-example>\n\n#### 扇形圆角\n\n圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。\n\n<md-example src=\"sunburst-borderRadius\" width=\"400\" height=\"400\"></md-example>\n\n## 交互能力\n\n可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。\n\n#### 状态管理\n\n在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。\n\n这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了**淡出**其它非相关元素的效果,从而可以达到聚焦目标数据的目的。\n\n比如在这个[柱状图](https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack)的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。\n\n除此之外,我们为所有系列还添加了**点击选中**这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 `selectchanged` 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 `select` 中配置。\n\n#### 性能提升\n\n##### 脏矩形渲染\n\nApache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。\n\n脏矩形的可视化演示,红色框选部分为该帧重绘区域:\n\n<img src=\"images/feature-v5/dirty-rect.gif\" width=\"500px\" />\n\n大家在新的示例页面选择开启脏矩形优化就可以看到该效果。\n\n##### 实时时序数据的折线图性能优化\n\n除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。\n\nApache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。\n\n## 开发体验\n\n我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。\n\n#### 数据集\n\nECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。\n\n#### 国际化\n\nECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。 这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。\n\n因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包 ,通过类似挂载主题的方式,使用 `registerLocale` 函数挂载语言包对象 ,重新初始化后就完成了语言的切换 。\n\n```js\n// import the lang object and set when init\necharts.registerLocale('DE', lang);\necharts.init(DomElement, null, {\n locale: 'DE'\n});\n```\n\n#### TypeScript 重构\n\n在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。\n\n对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的`DTS`类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到[DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts),这个有着不小的工作量,非常感谢大家的贡献。\n\n除此之外,如果开发者的组件是按需引入的,我们还提供了一个 `ComposeOption` 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。\n\n## 可访问性\n\nApache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。\n\n在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。\n\n#### 主题配色\n\n我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。\n\n并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。\n\n#### 贴花图案\n\nECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。\n\n<md-example src=\"doc-example/aria-decal-simple\" width=\"600\" height=\"350\"></md-example>\n\n此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。\n\n<md-example src=\"doc-example/aria-decal-newspaper\" width=\"600\" height=\"350\"></md-example>\n\n## 小结\n\n除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。\n\n感谢所有使用过 ECharts,甚至参与过社区贡献的开发者,正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中,Apache ECharts 也会以更大的诚意和大家在 6 相见!\n","dir":"/zh/basics/release-note","path":"/zh/basics/release-note/v5-feature","extension":".md","createdAt":"2021-07-21T06:01:33.136Z","updatedAt":"2021-07-21T06:12:10.011Z","meta":{"version":0,"revision":0,"created":1627897109310},"$loki":78},{"slug":"drag","toc":[{"id":"实现基本的拖拽功能","depth":2,"text":"实现基本的拖拽功能"},{"id":"添加-tooltip-组件","depth":2,"text":"添加 tooltip 组件"},{"id":"全部代码","depth":2,"text":"全部代码"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"拖拽的实现"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"拖拽的实现"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts"},{"type":"element","tag":"sup","props":{},"children":[{"type":"text","value":"TM"}]},{"type":"text","value":" 中实现复杂的交互。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"md-example","props":{"src":"line-draggable","height":400},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"实现基本的拖拽功能"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"实现基本的拖拽功能"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,基础的图表是一个 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"折线图 (series-line)"}]},{"type":"text","value":"。参见如下配置:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明,在后面也会用到。\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽,把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#graphic","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"graphic"}]},{"type":"text","value":" 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n // 声明一个 graphic component,里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法,其行为和 Array.prototype.map 一样,但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项,为每项生成一个圆点。\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置,下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见(但是不影响他响应鼠标事件)。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件,在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法,意思是生成一个与 onPointDragging\n // 功能一样的新的函数,只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"上面的代码中,使用 "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.convertToPixel"},"children":[{"type":"text","value":"convertToPixel"}]},{"type":"text","value":" 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.convertToPixel('grid', dataItem)"}]},{"type":"text","value":" 这句话中,第一个参数 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'grid'"}]},{"type":"text","value":" 表示 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataItem"}]},{"type":"text","value":" 在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#grid","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"grid"}]},{"type":"text","value":" 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系("},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#grid","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"grid"}]},{"type":"text","value":")初始化后才能调用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.convertToPixel('grid', dataItem)"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data,重绘折线图。\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"上面的代码中,使用了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echartsInstance.convertFromPixel","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"convertFromPixel"}]},{"type":"text","value":" 这个 API。它是 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org//api.html#echartsInstance.convertToPixel","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"convertToPixel"}]},{"type":"text","value":" 的逆向过程。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"myChart.convertFromPixel('grid', this.position)"}]},{"type":"text","value":" 表示把当前像素坐标转换成 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#grid","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"grid"}]},{"type":"text","value":" 组件中直角坐标系的 dataItem 值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"window.addEventListener('resize', function() {\n // 对每个拖拽圆点重新计算位置,并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"添加-tooltip-组件"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"添加 tooltip 组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#tooltip","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"tooltip"}]},{"type":"text","value":" 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在上述代码中分别添加如下定义:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n // ...,\n tooltip: {\n // 表示不使用默认的“显示”“隐藏”触发规则。\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"myChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // 在 mouseover 的时候显示,在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里使用了 "},{"type":"element","tag":"a","props":{"href":"api.html#echartsInstance.dispatchAction"},"children":[{"type":"text","value":"dispatchAction"}]},{"type":"text","value":" 来显示隐藏 tooltip。用到了 "},{"type":"element","tag":"a","props":{"href":"api.html#action.tooltip.showTip"},"children":[{"type":"text","value":"showTip"}]},{"type":"text","value":"、"},{"type":"element","tag":"a","props":{"href":"api.html#action.tooltip.hideTip"},"children":[{"type":"text","value":"hideTip"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"全部代码"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"全部代码"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"总结一下,全部的代码如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有了这些基础,就可以定制更多的功能了。可以加 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#dataZoom","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"dataZoom"}]},{"type":"text","value":" 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。"}]}]},"text":"# 拖拽的实现\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)](https://echarts.apache.org/option.html#series-line)。参见如下配置:\n\n```js\nvar symbolSize = 20;\n\n// 这个 data 变量在这里单独声明,在后面也会用到。\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽,把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n```\n\n既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 [graphic](https://echarts.apache.org/option.html#graphic) 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。\n\n```js\nmyChart.setOption({\n // 声明一个 graphic component,里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法,其行为和 Array.prototype.map 一样,但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项,为每项生成一个圆点。\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置,下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见(但是不影响他响应鼠标事件)。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件,在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法,意思是生成一个与 onPointDragging\n // 功能一样的新的函数,只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n```\n\n上面的代码中,使用 [convertToPixel](api.html#echartsInstance.convertToPixel) 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。`myChart.convertToPixel('grid', dataItem)` 这句话中,第一个参数 `'grid'` 表示 `dataItem` 在 [grid](https://echarts.apache.org/option.html#grid) 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。\n\n注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系([grid](https://echarts.apache.org/option.html#grid))初始化后才能调用 `myChart.convertToPixel('grid', dataItem)`。\n\n有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:\n\n```js\n// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data,重绘折线图。\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\n上面的代码中,使用了 [convertFromPixel](https://echarts.apache.org//api.html#echartsInstance.convertFromPixel) 这个 API。它是 [convertToPixel](https://echarts.apache.org//api.html#echartsInstance.convertToPixel) 的逆向过程。`myChart.convertFromPixel('grid', this.position)` 表示把当前像素坐标转换成 [grid](https://echarts.apache.org/option.html#grid) 组件中直角坐标系的 dataItem 值。\n\n最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:\n\n```js\nwindow.addEventListener('resize', function() {\n // 对每个拖拽圆点重新计算位置,并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n```\n\n## 添加 tooltip 组件\n\n到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 [tooltip](https://echarts.apache.org/option.html#tooltip) 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。\n\n在上述代码中分别添加如下定义:\n\n```js\nmyChart.setOption({\n // ...,\n tooltip: {\n // 表示不使用默认的“显示”“隐藏”触发规则。\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n```\n\n```js\nmyChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // 在 mouseover 的时候显示,在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n```\n\n这里使用了 [dispatchAction](api.html#echartsInstance.dispatchAction) 来显示隐藏 tooltip。用到了 [showTip](api.html#action.tooltip.showTip)、[hideTip](api.html#action.tooltip.hideTip)。\n\n## 全部代码\n\n总结一下,全部的代码如下:\n\n```js\nimport echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\n有了这些基础,就可以定制更多的功能了。可以加 [dataZoom](https://echarts.apache.org/option.html#dataZoom) 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。\n","dir":"/zh/application/interaction","path":"/zh/application/interaction/drag","extension":".md","createdAt":"2021-07-19T11:39:59.256Z","updatedAt":"2021-07-21T10:08:40.769Z","meta":{"version":0,"revision":0,"created":1627897109319},"$loki":79},{"slug":"gauge","toc":[{"id":"仪表盘的使用建议","depth":2,"text":"仪表盘的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"仪表盘"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E4%BB%AA%E8%A1%A8%E7%9B%98","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"仪表盘"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"仪表盘也被称为拨号图表或速度表图。其显示类似于拨号/速度计上的读数的数据,是一种拟物化的展示形式。仪表盘的颜色可以用来划分指示值的类别,使用刻度标示数据,指针指示维度,指针角度表示数值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"仪表盘的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E4%BB%AA%E8%A1%A8%E7%9B%98%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"仪表盘的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、仪表盘非常适合在量化的情况下显示单一的价值和衡量标准,不适合用于比较不同变量或者趋势的分析。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、仪表盘上可以同时展示不同纬度的数据,但是为了避免指针的重叠影响数据的查看,并且基于常识,仪表盘的指针数量建议最多不要超过 3 根。如果确实有多个数据需要展示,建议可使用多个仪表盘。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=gauge-car"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 仪表盘\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 根。如果确实有多个数据需要展示,建议可使用多个仪表盘。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=gauge-car\">\n</iframe>\n","dir":"/zh/best-practice/specification","path":"/zh/best-practice/specification/gauge","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-07-29T06:28:53.624Z","meta":{"version":0,"revision":0,"created":1627897109323},"$loki":80},{"slug":"funnel","toc":[{"id":"漏斗图的使用建议","depth":2,"text":"漏斗图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"漏斗图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%BC%8F%E6%96%97%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"漏斗图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"漏斗图又叫倒三角图,漏斗图将数据呈现为几个阶段,每个阶段的数据都是整体的一部分,从一个阶段到另一个阶段数据自上而下逐渐下降,所有阶段的占比总计 100%。与饼图一样,漏斗图呈现的也不是具体的数据,而是该数据相对于总数的占比、漏斗图不需要使用任何数据轴。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"漏斗图多用于显示简化的数据,可以用来单向分析业务各环节丢失或增加变化,也可用来直接表示某个环节与上一环节的差异。漏斗图对于确定组织的销售过程中可能存在的问题和瓶颈也很有用。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrJIQEN5NM"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"漏斗图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%BC%8F%E6%96%97%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"漏斗图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、以电商网站数据为代表,漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率,还可以展示每个步骤的转化率,能够直观地展示和说明问题所在,进而能针对性地通过各阶段的转化分析去改善设计。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如下图,「展现」「点击」「访问」三个环节基本并没有太大的流失,但是从「访问」到「咨询」环节数据明显减少,所以就可以重点分析为什么咨询量明显减少,例如是不是咨询的入口不够明显造成的。\b"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、可以对两个基于统一事情前后的两份数据使用叠加两个漏斗图进行对比,例如下图通过预期值和实现值的对比,可以分析每一项实现情况和预期指标的偏差。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、还可以用左右对比的漏斗图同时分析两个项目的转化情况。如下图可见项目 B 从「访问」到「咨询」环节的流失率明显大于项目 A。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、漏斗图不是表示各个分类的占比情况,而是展示数据变化的一个逻辑流程,如果数据是无逻辑顺序的占比比较,建议使用饼图更合适。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"5、可以根据数据选择使用对比色或同一种颜色的色调渐变,从最暗到最浅来依照漏斗的尺寸排列。切记,不要添加许多图层和颜色造成漏斗图难以阅读。"}]}]},"text":"# 漏斗图\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、以电商网站数据为代表,漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率,还可以展示每个步骤的转化率,能够直观地展示和说明问题所在,进而能针对性地通过各阶段的转化分析去改善设计。\n\n如下图,「展现」「点击」「访问」三个环节基本并没有太大的流失,但是从「访问」到「咨询」环节数据明显减少,所以就可以重点分析为什么咨询量明显减少,例如是不是咨询的入口不够明显造成的。\b\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf\">\n</iframe>\n\n2、可以对两个基于统一事情前后的两份数据使用叠加两个漏斗图进行对比,例如下图通过预期值和实现值的对比,可以分析每一项实现情况和预期指标的偏差。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f\">\n</iframe>\n\n3、还可以用左右对比的漏斗图同时分析两个项目的转化情况。如下图可见项目 B 从「访问」到「咨询」环节的流失率明显大于项目 A。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1\">\n</iframe>\n\n4、漏斗图不是表示各个分类的占比情况,而是展示数据变化的一个逻辑流程,如果数据是无逻辑顺序的占比比较,建议使用饼图更合适。\n\n5、可以根据数据选择使用对比色或同一种颜色的色调渐变,从最暗到最浅来依照漏斗的尺寸排列。切记,不要添加许多图层和颜色造成漏斗图难以阅读。\n","dir":"/zh/best-practice/specification","path":"/zh/best-practice/specification/funnel","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-06-04T12:26:37.924Z","meta":{"version":0,"revision":0,"created":1627897109324},"$loki":81},{"slug":"v5-upgrade-guide","toc":[{"id":"非兼容性改变","depth":2,"text":"非兼容性改变"},{"id":"echarts-的相关扩展","depth":2,"text":"ECharts 的相关扩展"},{"id":"不再推荐使用的-api","depth":2,"text":"不再推荐使用的 API"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"apache-echarts-5-升级指南"},"children":[{"type":"element","tag":"a","props":{"href":"#apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Apache ECharts 5 升级指南"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"本指南面向那些希望将 echarts 4.x(以下简称 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":")升级到 echarts 5.x(以下简称 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":")的用户。大家可以在 "},{"type":"element","tag":"a","props":{"href":"zh/basics/release-note/v5-feature"},"children":[{"type":"text","value":"ECharts 5 新特性"}]},{"type":"text","value":" 中了解这次"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":"带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"非兼容性改变"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"非兼容性改变"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"默认主题(theme)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"默认主题(theme)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"首先是默认主题的改动,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"chart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"或者,做一个简单的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" 主题:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"var themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"引用-echarts"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%BC%95%E7%94%A8-echarts","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"引用 ECharts"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"去除-default-exports-的支持"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"去除 default exports 的支持"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果使用者在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" 中这样引用了 echarts:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import echarts from 'echarts';\n// 或者按需引入\nimport echarts from 'echarts/lib/echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这两种方式,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 中不再支持了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用者需要如下更改代码解决这个问题:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts';\n// 按需引入\nimport * as echarts from 'echarts/lib/echarts';\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"按需引入"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"按需引入"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 5.0.1 中,我们引入了新的"},{"type":"element","tag":"a","props":{"href":"zh/basics/import"},"children":[{"type":"text","value":"按需引入接口"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果之前是使用"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"import 'echarts/lib/chart/bar'"}]},{"type":"text","value":"引入,新的接口对应的是"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"import {BarChart} from 'echarts/charts'"}]},{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"完整代码"}]},{"type":"text","value":"标签下选中按需引入后查看需要引入的模块以及相关代码。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"const echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其次,因为我们的源代码已使用 TypeScript 重写,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 将不再支持从 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/src"}]},{"type":"text","value":" 引用文件,需要改为从"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/lib"}]},{"type":"text","value":"引入。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"依赖调整"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"依赖调整"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"CanvasRenderer"}]},{"type":"text","value":"将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"const echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"需要再单独引入"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"grid"}]},{"type":"text","value":"组件"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"require('echarts/lib/component/grid');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"参考 issue:"},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/14080","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"#14080"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"https://github.com/apache/echarts/issues/13764","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"#13764"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"默认不再引入"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"aria"}]},{"type":"text","value":"组件,如果需要的话可以手动引入。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"import { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"或者:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"js","line-highlights":"","file-name":""},"children":[{"type":"text","value":"require('echarts/lib/component/aria');\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"去除内置的-geojson"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"去除内置的 geoJSON"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 移除了内置的 geoJSON(原先在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts/map"}]},{"type":"text","value":" 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"浏览器兼容性"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"浏览器兼容性"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 "},{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/zrender/tree/4.3.2/src/vml","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"VML 渲染器"}]},{"type":"text","value":" 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5.0.1"}]},{"type":"text","value":" 开始支持注册独立的渲染器了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h4","props":{"id":"echarts-配置项调整"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts 配置项调整"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"视觉样式设置的优先级改变"},"children":[{"type":"element","tag":"a","props":{"href":"#%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"视觉样式设置的优先级改变"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 对调了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" 的视觉样式优先级。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"具体来说,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" 中,"},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":" 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap 组件"}]},{"type":"text","value":" 时,又想针对某个数据项对应的图形,设置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" 样式,则做不到。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 中于是提高了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" 的优先级,使他们能生效。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" 到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 时,还是可以检查下,是否有同时使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#visualMap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"visualMap"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" | "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" 的情况。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h5","props":{"id":"富文本的-padding"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"富文本的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 调整了 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"rich.?.padding"}]},{"type":"text","value":" 的格式使其更符合 CSS 的规范。"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v4"}]},{"type":"text","value":" 里,例如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich.?.padding: [11, 22, 33, 44]"}]},{"type":"text","value":" 表示 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-top"}]},{"type":"text","value":" 是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"33"}]},{"type":"text","value":" 且 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-bottom"}]},{"type":"text","value":" 是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"11"}]},{"type":"text","value":"。在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 中调整了上下的位置,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"rich.?.padding: [11, 22, 33, 44]"}]},{"type":"text","value":" 表示 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-top"}]},{"type":"text","value":" 是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"11"}]},{"type":"text","value":" 且 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"padding-bottom"}]},{"type":"text","value":" 是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"33"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果使用者有在使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"rich.?.padding"}]},{"type":"text","value":",需要注意调整下这个顺序。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"echarts-的相关扩展"},"children":[{"type":"element","tag":"a","props":{"href":"#echarts-%E7%9A%84%E7%9B%B8%E5%85%B3%E6%89%A9%E5%B1%95","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"ECharts 的相关扩展"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果想要升级到 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" ,下面这些扩展需要升级到最新的版本实现兼容。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-gl","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-gl"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-wordcloud","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-wordcloud"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://github.com/ecomfe/echarts-liquidfill","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"echarts-liquidfill"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"不再推荐使用的-api"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"不再推荐使用的 API"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"一些 API(包括接口调用,事件监听和配置项)在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"v5"}]},{"type":"text","value":" 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是不再推荐使用的 API 以及推荐的新 API:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"图形元素 transform 相关的属性被改变了:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"变更点:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position: [number, number]"}]},{"type":"text","value":" 改为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"x: number"}]},{"type":"text","value":" / "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"y: number"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scale: [number, number]"}]},{"type":"text","value":" 改为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scaleX: number"}]},{"type":"text","value":" / "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scaleY: number"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"origin: [number, number]"}]},{"type":"text","value":" 改为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"originX: number"}]},{"type":"text","value":" / "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"originY: number"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"position"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"scale"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"origin"}]},{"type":"text","value":" 仍然支持,但已不推荐使用。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"它影响到这些地方:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graphic"}]},{"type":"text","value":"组件中:每个元素的声明。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":" 中:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":" 返回的每个元素的声明。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"直接使用 zrender 图形元素时。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Text 相关的属性被改变:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"变更点:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"图形元素附带的文本的声明方式被改变:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"除了 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"Text"}]},{"type":"text","value":" 元素之外,其他元素中的属性 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style.text"}]},{"type":"text","value":" 都不推荐使用了。取而代之的是新属性 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textContent"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textConfig"}]},{"type":"text","value":",他们能带来更丰富的功能。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textPosition => textConfig.position"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textOffset => textConfig.offset"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textRotation => textConfig.rotation"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textDistance => textConfig.distance"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下面左边部分的属性在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"style.rich.?"}]},{"type":"text","value":" 中已不推荐使用或废弃。请使用下面右边的属性:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textFill => fill"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textStroke => stroke"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textFont => font"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textStrokeWidth => lineWidth"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textAlign => align"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textVerticalAlign => verticalAlign"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textLineHeight =>"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textWidth => width"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textHeight => hight"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBackgroundColor => backgroundColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textPadding => padding"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderColor => borderColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderWidth => borderWidth"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBorderRadius => borderRadius"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowColor => shadowColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowBlur => shadowBlur"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowOffsetX => shadowOffsetX"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textBoxShadowOffsetY => shadowOffsetY"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"注:这些属性并没有变化:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowColor"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowBlur"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowOffsetX"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"textShadowOffsetY"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"它影响到这些地方:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graphic"}]},{"type":"text","value":" 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在自定义系列("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":")中:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":" 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"图表实例上的 API:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"chart.one(...)"}]},{"type":"text","value":" 已不推荐使用。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":"。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"属性 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"textBorderColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":" 中,值 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"auto"}]},{"type":"text","value":" 已不推荐使用,而推荐使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'inherit'"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"hoverAnimation"}]},{"type":"text","value":":\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverAnimation"}]},{"type":"text","value":" 已不推荐使用,使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scale"}]},{"type":"text","value":" 代替之。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"折线图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line series"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clipOverflow"}]},{"type":"text","value":" 已不推荐使用,使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clip"}]},{"type":"text","value":" 代替之。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"自定义系列("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"custom series"}]},{"type":"text","value":")。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"renderItem"}]},{"type":"text","value":" 中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.style(...)"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.styleEmphasis(...)"}]},{"type":"text","value":" 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"api.visual(...)"}]},{"type":"text","value":" 获取系统自动分配的视觉信息。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"旭日图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburst"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"动作类型 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"highlight"}]},{"type":"text","value":" 已被弃用,请使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburstHighlight"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"动作类型 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"downplay"}]},{"type":"text","value":" 已被弃用,请使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"sunburstUnhighlight"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.downplay"}]},{"type":"text","value":" 已被弃用,请使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.blur"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.highlightPolicy"}]},{"type":"text","value":" 已不适用,请使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.focus"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"饼图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pie"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieToggleSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"toggleSelect"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieUnSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselect"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieselectchanged"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selected"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"pieunselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselected"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.margin"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.edgeDistance"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockWise"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockwise"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverOffset"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scaleSize"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"地图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"map series"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapToggleSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"toggleSelect"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapUnSelect"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselect"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapselectchanged"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selectchanged"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"selected"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"mapunselected"}]},{"type":"text","value":" => "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"unselected"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.mapType"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.map"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.mapLocation"}]},{"type":"text","value":" 已经不推荐使用。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"关系图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"graph series"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.focusNodeAdjacency"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis: { focus: 'adjacency'}"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"仪表盘("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"gauge series"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockWise"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.clockwise"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.hoverOffset"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.scaleSize"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataZoom"}]},{"type":"text","value":" 组件:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"dataZoom.handleIcon"}]},{"type":"text","value":" 如果使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVGPath"}]},{"type":"text","value":",需要前缀 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"path://"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"雷达图("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar"}]},{"type":"text","value":"):\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.name"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.axisName"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"选项 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.nameGap"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"radar.axisNameGap"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Parse and format:\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.format.formatTime"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.format"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.number.parseDate"}]},{"type":"text","value":" 已经不推荐使用。使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.time.parse"}]},{"type":"text","value":" 代替。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"echarts.format.getTextRect"}]},{"type":"text","value":" 已经不推荐使用。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# Apache ECharts 5 升级指南\n\n本指南面向那些希望将 echarts 4.x(以下简称 `v4`)升级到 echarts 5.x(以下简称 `v5`)的用户。大家可以在 [ECharts 5 新特性](zh/basics/release-note/v5-feature) 中了解这次`v5`带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,`v5` 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,`v5` 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。\n\n## 非兼容性改变\n\n#### 默认主题(theme)\n\n首先是默认主题的改动,`v5` 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:\n\n```js\nchart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n```\n\n或者,做一个简单的 `v4` 主题:\n\n```js\nvar themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n```\n\n#### 引用 ECharts\n\n##### 去除 default exports 的支持\n\n如果使用者在 `v4` 中这样引用了 echarts:\n\n```js\nimport echarts from 'echarts';\n// 或者按需引入\nimport echarts from 'echarts/lib/echarts';\n```\n\n这两种方式,`v5` 中不再支持了。\n\n使用者需要如下更改代码解决这个问题:\n\n```js\nimport * as echarts from 'echarts';\n// 按需引入\nimport * as echarts from 'echarts/lib/echarts';\n```\n\n##### 按需引入\n\n在 5.0.1 中,我们引入了新的[按需引入接口](zh/basics/import)\n\n```js\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n```\n\n如果之前是使用`import 'echarts/lib/chart/bar'`引入,新的接口对应的是`import {BarChart} from 'echarts/charts'`;\n\n为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的`完整代码`标签下选中按需引入后查看需要引入的模块以及相关代码。\n\n在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n```\n\n其次,因为我们的源代码已使用 TypeScript 重写,`v5` 将不再支持从 `echarts/src` 引用文件,需要改为从`echarts/lib`引入。\n\n##### 依赖调整\n\n> 注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注\n\n为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,`CanvasRenderer`将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:\n\n- 在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n```\n\n需要再单独引入`grid`组件\n\n```js\nrequire('echarts/lib/component/grid');\n```\n\n参考 issue:[#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764)\n\n- 默认不再引入`aria`组件,如果需要的话可以手动引入。\n\n```js\nimport { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n```\n\n或者:\n\n```js\nrequire('echarts/lib/component/aria');\n```\n\n#### 去除内置的 geoJSON\n\n`v5` 移除了内置的 geoJSON(原先在 `echarts/map` 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。\n\n#### 浏览器兼容性\n\n`v5` 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 [VML 渲染器](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 `v5.0.1` 开始支持注册独立的渲染器了。\n\n#### ECharts 配置项调整\n\n##### 视觉样式设置的优先级改变\n\n`v5` 对调了 [visualMap 组件](https://echarts.apache.org/option.html#visualMap) 和 [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) 的视觉样式优先级。\n\n具体来说,`v4` 中,[visualMap 组件](https://echarts.apache.org/option.html#visualMap) 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 [visualMap 组件](https://echarts.apache.org/option.html#visualMap) 时,又想针对某个数据项对应的图形,设置 [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) 样式,则做不到。`v5` 中于是提高了 [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) 的优先级,使他们能生效。\n\n在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 `v4` 到 `v5` 时,还是可以检查下,是否有同时使用 [visualMap](https://echarts.apache.org/option.html#visualMap) 和 [itemStyle](https://echarts.apache.org/option.html#series-scatter.itemStyle) | [lineStyle](https://echarts.apache.org/option.html#series-scatter.lineStyle) | [areaStyle](https://echarts.apache.org/option.html#series-scatter.areaStyle) 的情况。\n\n##### 富文本的 `padding`\n\n`v5` 调整了 [rich.?.padding](https://echarts.apache.org/option.html#series-scatter.label.rich.<style_name>.padding) 的格式使其更符合 CSS 的规范。`v4` 里,例如 `rich.?.padding: [11, 22, 33, 44]` 表示 `padding-top` 是 `33` 且 `padding-bottom` 是 `11`。在 `v5` 中调整了上下的位置,`rich.?.padding: [11, 22, 33, 44]` 表示 `padding-top` 是 `11` 且 `padding-bottom` 是 `33`。\n\n如果使用者有在使用 [rich.?.padding](https://echarts.apache.org/option.html#series-scatter.label.rich.<style_name>.padding),需要注意调整下这个顺序。\n\n## ECharts 的相关扩展\n\n如果想要升级到 `v5` ,下面这些扩展需要升级到最新的版本实现兼容。\n\n- [echarts-gl](https://github.com/ecomfe/echarts-gl)\n- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)\n- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)\n\n## 不再推荐使用的 API\n\n一些 API(包括接口调用,事件监听和配置项)在 `v5` 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。\n\n下面是不再推荐使用的 API 以及推荐的新 API:\n\n- 图形元素 transform 相关的属性被改变了:\n - 变更点:\n - `position: [number, number]` 改为 `x: number` / `y: number`。\n - `scale: [number, number]` 改为 `scaleX: number` / `scaleY: number`。\n - `origin: [number, number]` 改为 `originX: number` / `originY: number`。\n - `position`、`scale` 和 `origin` 仍然支持,但已不推荐使用。\n - 它影响到这些地方:\n - 在`graphic`组件中:每个元素的声明。\n - 在 `custom series` 中:`renderItem` 返回的每个元素的声明。\n - 直接使用 zrender 图形元素时。\n- Text 相关的属性被改变:\n - 变更点:\n - 图形元素附带的文本的声明方式被改变:\n - 除了 `Text` 元素之外,其他元素中的属性 `style.text` 都不推荐使用了。取而代之的是新属性 `textContent` 和 `textConfig`,他们能带来更丰富的功能。\n - 其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n - textPosition => textConfig.position\n - textOffset => textConfig.offset\n - textRotation => textConfig.rotation\n - textDistance => textConfig.distance\n - 下面左边部分的属性在 `style` 和 `style.rich.?` 中已不推荐使用或废弃。请使用下面右边的属性:\n - textFill => fill\n - textStroke => stroke\n - textFont => font\n - textStrokeWidth => lineWidth\n - textAlign => align\n - textVerticalAlign => verticalAlign\n - textLineHeight =>\n - textWidth => width\n - textHeight => hight\n - textBackgroundColor => backgroundColor\n - textPadding => padding\n - textBorderColor => borderColor\n - textBorderWidth => borderWidth\n - textBorderRadius => borderRadius\n - textBoxShadowColor => shadowColor\n - textBoxShadowBlur => shadowBlur\n - textBoxShadowOffsetX => shadowOffsetX\n - textBoxShadowOffsetY => shadowOffsetY\n - 注:这些属性并没有变化:\n - textShadowColor\n - textShadowBlur\n - textShadowOffsetX\n - textShadowOffsetY\n - 它影响到这些地方:\n - 在 `graphic` 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)\n - 在自定义系列(`custom series`)中:`renderItem` 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)\n - 直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)\n- 图表实例上的 API:\n - `chart.one(...)` 已不推荐使用。\n- `label`。\n - 属性 `color`、`textBorderColor`、`backgroundColor`、`borderColor` 中,值 `auto` 已不推荐使用,而推荐使用 `'inherit'` 代替。\n- `hoverAnimation`:\n - 选项 `series.hoverAnimation` 已不推荐使用,使用 `series.emphasis.scale` 代替之。\n- 折线图(`line series`):\n - 选项 `series.clipOverflow` 已不推荐使用,使用 `series.clip` 代替之。\n- 自定义系列(`custom series`)。\n - 在 `renderItem` 中,`api.style(...)` 和 `api.styleEmphasis(...)` 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 `api.visual(...)` 获取系统自动分配的视觉信息。\n- 旭日图(`sunburst`):\n - 动作类型 `highlight` 已被弃用,请使用 `sunburstHighlight` 代替。\n - 动作类型 `downplay` 已被弃用,请使用 `sunburstUnhighlight` 代替。\n - 选项 `series.downplay` 已被弃用,请使用 `series.blur` 代替。\n - 选项 `series.highlightPolicy` 已不适用,请使用 `series.emphasis.focus` 代替。\n- 饼图(`pie`):\n - 下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n - `pieToggleSelect` => `toggleSelect`。\n - `pieSelect` => `select`。\n - `pieUnSelect` => `unselect`。\n - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n - `pieselectchanged` => `selectchanged`。\n - `pieselected` => `selected`。\n - `pieunselected` => `unselected`。\n - 选项 `series.label.margin` 已经不推荐使用。使用 `series.label.edgeDistance` 代替。\n - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。\n - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。\n- 地图(`map series`):\n - 下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n - `mapToggleSelect` => `toggleSelect`。\n - `mapSelect` => `select`。\n - `mapUnSelect` => `unselect`。\n - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n - `mapselectchanged` => `selectchanged`。\n - `mapselected` => `selected`。\n - `mapunselected` => `unselected`。\n - 选项 `series.mapType` 已经不推荐使用。使用 `series.map` 代替。\n - 选项 `series.mapLocation` 已经不推荐使用。\n- 关系图(`graph series`):\n - 选项 `series.focusNodeAdjacency` 已经不推荐使用。使用 `series.emphasis: { focus: 'adjacency'}` 代替。\n- 仪表盘(`gauge series`):\n - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。\n - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。\n- `dataZoom` 组件:\n - 选项 `dataZoom.handleIcon` 如果使用 `SVGPath`,需要前缀 `path://`。\n- 雷达图(`radar`):\n - 选项 `radar.name` 已经不推荐使用。使用 `radar.axisName` 代替。\n - 选项 `radar.nameGap` 已经不推荐使用。使用 `radar.axisNameGap` 代替。\n- Parse and format:\n - `echarts.format.formatTime` 已经不推荐使用。使用 `echarts.time.format` 代替。\n - `echarts.number.parseDate` 已经不推荐使用。使用 `echarts.time.parse` 代替。\n - `echarts.format.getTextRect` 已经不推荐使用。\n","dir":"/zh/basics/release-note","path":"/zh/basics/release-note/v5-upgrade-guide","extension":".md","createdAt":"2021-07-21T06:10:00.028Z","updatedAt":"2021-07-24T08:37:09.399Z","meta":{"version":0,"revision":0,"created":1627897109359},"$loki":82},{"slug":"radar","toc":[{"id":"雷达图的使用建议","depth":2,"text":"雷达图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"雷达图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%9B%B7%E8%BE%BE%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"雷达图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"雷达图(Radar Chart)又被叫做蜘蛛网图,适用于显示三个或更多的维度的变量。雷达图是以在同一点开始的轴上显示的三个或更多个变量的二维图表的形式来显示多元数据的方法,其中轴的相对位置和角度通常是无意义的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"雷达图的每个变量都有一个从中心向外发射的轴线,所有的轴之间的夹角相等,同时每个轴有相同的刻度,将轴到轴的刻度用网格线链接作为辅助元素,连接每个变量在其各自的轴线的数据点成一条多边形。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xH1-fnLcVG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低,因此非常适合显示性能(见下图)。同样,雷达图也常用于排名、评估、评论等数据的展示。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如下图,某幼儿园上周资金流统计的示例中比较了预算和开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过 0 到 500 之间的金额来比较的。只有玩具一项的支出超出了预算,而服饰花费远低于预算,使用雷达图,哪些方面超出或不足变得一目了然了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"雷达图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%9B%B7%E8%BE%BE%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"雷达图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、一个雷达图包含的多边形数量是有限的,如果有五个以上要评估的事物,无论是轮廓还是填充区域,都会产生覆盖和混乱,使得数据难以阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、变量太多会产生太多的轴,也会使图表变得混乱,因此,要保持雷达图的简单并限制其变量数量。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、由于径向距离很难判断,所以虽然有网格线的参考,但是还是很难直观的比较图表内变量具体的值,如果需要的比较具体值话,建议使用线图。"}]}]},"text":"# 雷达图\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雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低,因此非常适合显示性能(见下图)。同样,雷达图也常用于排名、评估、评论等数据的展示。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1\">\n</iframe>\n\n如下图,某幼儿园上周资金流统计的示例中比较了预算和开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过 0 到 500 之间的金额来比较的。只有玩具一项的支出超出了预算,而服饰花费远低于预算,使用雷达图,哪些方面超出或不足变得一目了然了。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf\">\n</iframe>\n\n\n## 雷达图的使用建议\n\n1、一个雷达图包含的多边形数量是有限的,如果有五个以上要评估的事物,无论是轮廓还是填充区域,都会产生覆盖和混乱,使得数据难以阅读。\n\n2、变量太多会产生太多的轴,也会使图表变得混乱,因此,要保持雷达图的简单并限制其变量数量。\n\n3、由于径向距离很难判断,所以虽然有网格线的参考,但是还是很难直观的比较图表内变量具体的值,如果需要的比较具体值话,建议使用线图。\n\n","dir":"/zh/best-practice/specification","path":"/zh/best-practice/specification/radar","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897109363},"$loki":83},{"slug":"color-enhance","toc":[{"id":"颜色的情感共鸣","depth":2,"text":"颜色的情感共鸣"},{"id":"颜色的语义共鸣","depth":2,"text":"颜色的语义共鸣"},{"id":"图表颜色要吻合常识","depth":2,"text":"图表颜色要吻合常识"},{"id":"用颜色来区分数据","depth":2,"text":"用颜色来区分数据"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"用颜色增强可视化效果"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E7%94%A8%E9%A2%9C%E8%89%B2%E5%A2%9E%E5%BC%BA%E5%8F%AF%E8%A7%86%E5%8C%96%E6%95%88%E6%9E%9C","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"用颜色增强可视化效果"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在数据可视化所有的视觉通道中,色彩作为视觉的第一感知因素,对数据进行的视觉编码和传达是很有效的。如果使用得当,颜色可以非常有效地增强可视化效果。接下来,我们来看看具体有哪些使用颜色来增强可视化效果的的技巧和方法。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"颜色的情感共鸣"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%A2%9C%E8%89%B2%E7%9A%84%E6%83%85%E6%84%9F%E5%85%B1%E9%B8%A3","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"颜色的情感共鸣"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分,日本色彩学家大智浩曾做过一个实验,将一个工作场地涂灰青色,另一个工作场地涂红橙色,两个工作场地的客观温度劳动强度相同,在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现,除了冷与暖的不同感受,色彩还有轻与重、远与近、活泼与忧郁等区分。所以,色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受,从而引起情感反应和影响人们的情绪。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在可视化的颜色选择上,如果我们选用的颜色与我们数据本身的特点以及想要传达的情绪吻合的话,就可以伴随着颜色的视觉传达而引起情感上的共鸣。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"例如某个甜品店各类甜品的销售占比,数据如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"50%","height":"100%","src":"images/design/color/color01.png"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"针对这份数据,下面两个相同样式的图表,我们采用了两种不同配色方案,对比来看很明显,右图的配色更适合用来展示甜品数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/color/color02.png"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"因为相较于蓝色、紫色而言,橙色、黄色、粉色、绿色都是有利于提升食欲的颜色,而且更容易使人们产生温暖、幸福的情感,而这种情感与吃甜品时人们产生的感觉是一致的。另一方面,甜品本身的面向用户大多数是儿童和女性,针对这部分用户,比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据,因为左图的配色更容易使人产生理性和冷静的情感。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"颜色的语义共鸣"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%A2%9C%E8%89%B2%E7%9A%84%E8%AF%AD%E4%B9%89%E5%85%B1%E9%B8%A3","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"颜色的语义共鸣"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色,例如提到“云朵”会想到白色,“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为\"语义共鸣色\"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"研究表明,对于有固定颜色的词,匹配其具有语义共鸣的颜色,能有效的加速认知过程,反之则会阻碍认知,这种有趣的现象称为\"斯特鲁普效应\"。我们可以做个的对比试验,分别在上图两行文字中找到“黄”字。这个过程中,第一行的“黄”可以被快速定位到,因为对应使用了黄色。而在第二行寻找的时候,可能有人最早定位到的会是“紫”字,因为此处“紫”字使用了黄色,这就阻碍了我们寻找的速度和准确性。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/color/color03.png"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有效地利用语义共鸣色,即采用与数据本身意义一致的颜色,也可以提高可视化的认知效率。例如可以使用蓝色的来显示\"海洋\"的数据、使用黄色来显示“沙漠”的数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"视觉效果应该尽可能容易地解释,因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据,分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样,我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n color: ['#6E9D4E', '#EDDB4F', '#F7923A', '#F14747'],\n title: {\n text: '7月水果销量',\n x: '2%',\n y: '1%',\n textStyle: {\n color: '#fff',\n fontSize: '26'\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['猕猴桃', '香蕉', '橙子', '草莓'],\n align: 'right'\n },\n grid: {\n left: '3%',\n right: '3%',\n top: '15%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n data: ['第一周', '第二周', '第三周', '第四周']\n }\n ],\n yAxis: [\n {\n type: 'value',\n axisLabel: {\n formatter: '{value}'\n }\n }\n ],\n series: [\n {\n name: '猕猴桃',\n type: 'bar',\n data: [60, 110, 180, 100]\n },\n {\n name: '香蕉',\n type: 'bar',\n data: [90, 130, 170, 130]\n },\n {\n name: '橙子',\n type: 'bar',\n data: [120, 160, 140, 160]\n },\n {\n name: '草莓',\n type: 'bar',\n data: [110, 190, 90, 100]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"图表颜色要吻合常识"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9B%BE%E8%A1%A8%E9%A2%9C%E8%89%B2%E8%A6%81%E5%90%BB%E5%90%88%E5%B8%B8%E8%AF%86","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图表颜色要吻合常识"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在数据可视化的过程中,颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关,我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时,请先克制住自由创作的热情,查看一下这是否是一份特殊的数据,再去选择对的颜色。例如一个股票数据的图表中,红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识,可以帮助我们更好地理解和区分数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"再例如查看天气温度。蓝色和红色易于理解,无需任何解释,并且易于区分。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"用颜色来区分数据"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E7%94%A8%E9%A2%9C%E8%89%B2%E6%9D%A5%E5%8C%BA%E5%88%86%E6%95%B0%E6%8D%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"用颜色来区分数据"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们通常会使用折线图来分析趋势,但是有的时候有需要明确的知道某个数据是否在某个区间范围内,因此我们可以主动地去配置定义区域。例如我们设定 25%-75% 这个范围内为我们计划完成的销售额,那我们可以在这个定义区域的范围内,给每个区域设置成一个底色,这样就可以高效的识别出每个数据处于哪个区间范围内,未达到、达到、超额完成的值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"所以,颜色可以被用来作为提高图表的可阅读性和有效工具。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"80%","height":"100%","src":"images/design/color/color04.png"},"children":[]}]},"text":"# 用颜色增强可视化效果\n\n在数据可视化所有的视觉通道中,色彩作为视觉的第一感知因素,对数据进行的视觉编码和传达是很有效的。如果使用得当,颜色可以非常有效地增强可视化效果。接下来,我们来看看具体有哪些使用颜色来增强可视化效果的的技巧和方法。\n\n## 颜色的情感共鸣\n\n颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分,日本色彩学家大智浩曾做过一个实验,将一个工作场地涂灰青色,另一个工作场地涂红橙色,两个工作场地的客观温度劳动强度相同,在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现,除了冷与暖的不同感受,色彩还有轻与重、远与近、活泼与忧郁等区分。所以,色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受,从而引起情感反应和影响人们的情绪。\n\n在可视化的颜色选择上,如果我们选用的颜色与我们数据本身的特点以及想要传达的情绪吻合的话,就可以伴随着颜色的视觉传达而引起情感上的共鸣。\n\n例如某个甜品店各类甜品的销售占比,数据如下:\n\n<img max-width=\"830\" width=\"50%\" height=\"100%\" src=\"images/design/color/color01.png\" />\n\n针对这份数据,下面两个相同样式的图表,我们采用了两种不同配色方案,对比来看很明显,右图的配色更适合用来展示甜品数据。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/color/color02.png\" />\n\n因为相较于蓝色、紫色而言,橙色、黄色、粉色、绿色都是有利于提升食欲的颜色,而且更容易使人们产生温暖、幸福的情感,而这种情感与吃甜品时人们产生的感觉是一致的。另一方面,甜品本身的面向用户大多数是儿童和女性,针对这部分用户,比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据,因为左图的配色更容易使人产生理性和冷静的情感。\n\n## 颜色的语义共鸣\n\n不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色,例如提到“云朵”会想到白色,“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为\"语义共鸣色\"。\n\n研究表明,对于有固定颜色的词,匹配其具有语义共鸣的颜色,能有效的加速认知过程,反之则会阻碍认知,这种有趣的现象称为\"斯特鲁普效应\"。我们可以做个的对比试验,分别在上图两行文字中找到“黄”字。这个过程中,第一行的“黄”可以被快速定位到,因为对应使用了黄色。而在第二行寻找的时候,可能有人最早定位到的会是“紫”字,因为此处“紫”字使用了黄色,这就阻碍了我们寻找的速度和准确性。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/color/color03.png\" />\n\n有效地利用语义共鸣色,即采用与数据本身意义一致的颜色,也可以提高可视化的认知效率。例如可以使用蓝色的来显示\"海洋\"的数据、使用黄色来显示“沙漠”的数据。\n\n视觉效果应该尽可能容易地解释,因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据,分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样,我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。\n\n```js [live]\noption = {\n color: ['#6E9D4E', '#EDDB4F', '#F7923A', '#F14747'],\n title: {\n text: '7月水果销量',\n x: '2%',\n y: '1%',\n textStyle: {\n color: '#fff',\n fontSize: '26'\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['猕猴桃', '香蕉', '橙子', '草莓'],\n align: 'right'\n },\n grid: {\n left: '3%',\n right: '3%',\n top: '15%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n data: ['第一周', '第二周', '第三周', '第四周']\n }\n ],\n yAxis: [\n {\n type: 'value',\n axisLabel: {\n formatter: '{value}'\n }\n }\n ],\n series: [\n {\n name: '猕猴桃',\n type: 'bar',\n data: [60, 110, 180, 100]\n },\n {\n name: '香蕉',\n type: 'bar',\n data: [90, 130, 170, 130]\n },\n {\n name: '橙子',\n type: 'bar',\n data: [120, 160, 140, 160]\n },\n {\n name: '草莓',\n type: 'bar',\n data: [110, 190, 90, 100]\n }\n ]\n};\n```\n\n## 图表颜色要吻合常识\n\n在数据可视化的过程中,颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关,我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时,请先克制住自由创作的热情,查看一下这是否是一份特殊的数据,再去选择对的颜色。例如一个股票数据的图表中,红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识,可以帮助我们更好地理解和区分数据。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG\">\n</iframe>\n\n再例如查看天气温度。蓝色和红色易于理解,无需任何解释,并且易于区分。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1\">\n</iframe>\n\n## 用颜色来区分数据\n\n我们通常会使用折线图来分析趋势,但是有的时候有需要明确的知道某个数据是否在某个区间范围内,因此我们可以主动地去配置定义区域。例如我们设定 25%-75% 这个范围内为我们计划完成的销售额,那我们可以在这个定义区域的范围内,给每个区域设置成一个底色,这样就可以高效的识别出每个数据处于哪个区间范围内,未达到、达到、超额完成的值。\n\n所以,颜色可以被用来作为提高图表的可阅读性和有效工具。\n\n<img max-width=\"830\" width=\"80%\" height=\"100%\" src=\"images/design/color/color04.png\" />\n","dir":"/zh/best-practice/design","path":"/zh/best-practice/design/color-enhance","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897109367},"$loki":84},{"slug":"stacked-bar","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"stacked-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#stacked-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Stacked Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Sometimes, 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":". The series with the same "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" value will be in the same category."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The value of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"For instance, here is a chart with 4 series that counted the amount of male and female. \"adult male\" and \"boy\" need to be stacked while \"adult female\" and \"girl\" need to be stacked. In this case, the suggestive value of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'male'"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'female'"}]},{"type":"text","value":". Although meaningless strings like "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'a'"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'b'"}]},{"type":"text","value":" can achieve the same effect but the code will have worse readability."}]},{"type":"text","value":"\n"}]}]},"text":"# 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 a stacked bar chart by ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category.\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.\n\n> The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.\n>\n> For instance, here is a chart with 4 series that counted the amount of male and female. \"adult male\" and \"boy\" need to be stacked while \"adult female\" and \"girl\" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless strings like `'a'` and `'b'` can achieve the same effect but the code will have worse readability.\n","dir":"/en/application/chart-types/bar","path":"/en/application/chart-types/bar/stacked-bar","extension":".md","createdAt":"2021-06-04T12:26:37.913Z","updatedAt":"2021-07-21T12:35:25.376Z","meta":{"version":0,"revision":0,"created":1627897109370},"$loki":85},{"slug":"basic-bar","toc":[{"id":"simple-example","depth":2,"text":"Simple Example"},{"id":"multi-series-bar-chart","depth":2,"text":"Multi-series Bar Chart"},{"id":"customized-bar-chart","depth":2,"text":"Customized Bar Chart"},{"id":"styles","depth":3,"text":"Styles"},{"id":"width-and-height-of-column","depth":3,"text":"Width and Height of Column"},{"id":"column-spacing","depth":3,"text":"Column Spacing"},{"id":"add-background-color-for-bars","depth":3,"text":"Add Background Color for Bars"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-bar-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-bar-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To set the bar chart, you need to set the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'bar'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"[Option]"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"simple-example"},"children":[{"type":"element","tag":"a","props":{"href":"#simple-example","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Simple Example"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's begin with a basic bar chart:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'xAxis'"}]},{"type":"text","value":". Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'series'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"multi-series-bar-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#multi-series-bar-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Multi-series Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customized-bar-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#customized-bar-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customized Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"styles"},"children":[{"type":"element","tag":"a","props":{"href":"#styles","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Styles"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is a good idea to install the style of Bar Chart by using "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'series.itemStyle'"}]},{"type":"text","value":". Description of the SCI:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Color of column("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'color'"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Outline color("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'borderColor'"}]},{"type":"text","value":"), width("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'borderWidth'"}]},{"type":"text","value":"), type("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'borderType'"}]},{"type":"text","value":") of column;"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Border radius of column("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'barBorderRadius'"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transparency("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'opacity'"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Shadow type("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'shadowBlur'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'shadowColor'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'shadowOffsetX'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'shadowOffsetY'"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is a example:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, we defined the style of the bar chart by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'itemStyle'"}]},{"type":"text","value":" of corresponding "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":". For complete configuration items and their usage, please check the configuration item manual: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.itemStyle"}]}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"width-and-height-of-column"},"children":[{"type":"element","tag":"a","props":{"href":"#width-and-height-of-column","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Width and Height of Column"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-bar.barWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]}]},{"type":"text","value":" to change the width of the bar. For instance, the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'barWidth'"}]},{"type":"text","value":" in the following case was set to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'20%'"}]},{"type":"text","value":". It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'barWidth'"}]},{"type":"text","value":" means 4% for the entire x-axis."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In addition, "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barMaxWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMaxWidth"}]}]},{"type":"text","value":" has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barMinHeight","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMinHeight"}]}]},{"type":"text","value":". When the corresponding height of data is smaller than the limit, ECharts will take 'barMinHeight' as the replaced height."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"column-spacing"},"children":[{"type":"element","tag":"a","props":{"href":"#column-spacing","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Column Spacing"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are two kinds of column spacing. One is the spacing between different series under the same category: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]}]},{"type":"text","value":". The other is the spacing between categories: "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barCategoryGap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barGap"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'20%'"}]},{"type":"text","value":". That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'40%'"}]},{"type":"text","value":", the gap on each side of the bar will take 40% place in categories (compared with the width of the column)."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Usually, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]},{"type":"text","value":" is not necessary to be clarified if "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'barGap'"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]},{"type":"text","value":" was set. If you need to make sure the bar is not too wide while the graph is large, try to use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMaxWidth"}]},{"type":"text","value":" to limit the maximum width of bars."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"add-background-color-for-bars"},"children":[{"type":"element","tag":"a","props":{"href":"#add-background-color-for-bars","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Add Background Color for Bars"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.showBackground","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'showBackground'"}]},{"type":"text","value":" and configured by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.backgroundStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"'backgroundStyle'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n"}]}]}]},"text":"# 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]](https://echarts.apache.org/option.html#series-bar)\n\n## Simple Example\n\nLet's begin with a basic bar chart:\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```\n\nIn this case, the x-axis is under the category type. Therefore, you should define some corresponding values for `'xAxis'`. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the `data` in `'series'`.\n\n## Multi-series Bar Chart\n\nYou may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the `series`.\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n```\n\n## Customized Bar Chart\n\n### Styles\n\nIt is a good idea to install the style of Bar Chart by using ['series.itemStyle'](https://echarts.apache.org/option.html#series-bar.itemStyle). Description of the SCI:\n\n- Color of column(`'color'`);\n- Outline color(`'borderColor'`), width(`'borderWidth'`), type(`'borderType'`) of column;\n- Border radius of column(`'barBorderRadius'`);\n- Transparency(`'opacity'`);\n- Shadow type(`'shadowBlur'`, `'shadowColor'`, `'shadowOffsetX'`, `'shadowOffsetY'`)\n\nHere is a example:\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn this case, we defined the style of the bar chart by `'itemStyle'` of corresponding `series`. For complete configuration items and their usage, please check the configuration item manual: [`series.itemStyle`](https://echarts.apache.org/option.html#series-bar.itemStyle)。\n\n### Width and Height of Column\n\nYou can use [`barWidth`](https://echarts.apache.org/option.html##series-bar.barWidth) to change the width of the bar. For instance, the `'barWidth'` in the following case was set to `'20%'`. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% `'barWidth'` means 4% for the entire x-axis.\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn addition, [`barMaxWidth`](https://echarts.apache.org/option.html#series-bar.barMaxWidth) has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: [`barMinHeight`](https://echarts.apache.org/option.html#series-bar.barMinHeight). When the corresponding height of data is smaller than the limit, ECharts will take 'barMinHeight' as the replaced height.\n\n### Column Spacing\n\nThere are two kinds of column spacing. One is the spacing between different series under the same category: [`barWidth`](https://echarts.apache.org/option.html#series-bar.barWidth). The other is the spacing between categories: [`barCategoryGap`](https://echarts.apache.org/option.html#series-bar.barCategoryGap).\n\n```js [live]\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n```\n\nIn this case, the `barGap` is `'20%'`. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the `barCategoryGap` to `'40%'`, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).\n\nUsually, `barWidth` is not necessary to be clarified if `'barGap'` and `barCategoryGap` was set. If you need to make sure the bar is not too wide while the graph is large, try to use `barMaxWidth` to limit the maximum width of bars.\n\n> In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.\n\n### Add Background Color for Bars\n\nYou might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by ['showBackground'](https://echarts.apache.org/option.html#series-bar.showBackground) and configured by ['backgroundStyle'](https://echarts.apache.org/option.html#series-bar.backgroundStyle).\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n```\n","dir":"/en/application/chart-types/bar","path":"/en/application/chart-types/bar/basic-bar","extension":".md","createdAt":"2021-06-04T12:26:37.913Z","updatedAt":"2021-07-21T12:34:32.672Z","meta":{"version":0,"revision":0,"created":1627897109394},"$loki":86},{"slug":"bar-race","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"dynamic-sorting-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#dynamic-sorting-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Dynamic Sorting Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Dynamic Sorting Bar Chart is a new function that recently added in ECharts 5.0."}]}]},"text":"# Dynamic Sorting Bar Chart\n\nDynamic Sorting Bar Chart is a new function that recently added in ECharts 5.0.\n\n","dir":"/en/application/chart-types/bar","path":"/en/application/chart-types/bar/bar-race","extension":".md","createdAt":"2021-06-04T12:26:37.913Z","updatedAt":"2021-06-04T12:26:37.913Z","meta":{"version":0,"revision":0,"created":1627897109398},"$loki":87},{"slug":"polar-bar","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"bar-chart-in-polar-coordinate-system"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#bar-chart-in-polar-coordinate-system","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Bar Chart in Polar Coordinate System"}]}]},"text":"# Bar Chart in Polar Coordinate System\n\n","dir":"/en/application/chart-types/bar","path":"/en/application/chart-types/bar/polar-bar","extension":".md","createdAt":"2021-06-04T12:26:37.913Z","updatedAt":"2021-06-04T12:26:37.913Z","meta":{"version":0,"revision":0,"created":1627897109399},"$loki":88},{"slug":"basic-line","toc":[{"id":"simple-example","depth":2,"text":"Simple Example"},{"id":"line-chart-in-cartesian-coordinate-system","depth":2,"text":"Line Chart in Cartesian Coordinate System"},{"id":"customized-line-chart","depth":2,"text":"Customized Line Chart"},{"id":"line-style","depth":3,"text":"Line Style"},{"id":"item-style","depth":3,"text":"Item Style"},{"id":"display-value-on-items","depth":2,"text":"Display Value on Items."},{"id":"empty-data","depth":2,"text":"Empty Data"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-line-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-line-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"simple-example"},"children":[{"type":"element","tag":"a","props":{"href":"#simple-example","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Simple Example"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We can use the following code to build a line chart which has x-axis as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"category"}]},{"type":"text","value":", y-axis as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, we set the type of axis to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"category"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yAxis"}]},{"type":"text","value":". We also clarified the content on the x-axis through "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":". In "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":", we set the type to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line"}]},{"type":"text","value":", and specify the values of three points through "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":". In this way, we got a simple line chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" here can be omitted because the defaults of the axis are "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" while "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" has specified the category's "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":". In this case, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ECharts"}]},{"type":"text","value":" can recognize that this is a category axis."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"line-chart-in-cartesian-coordinate-system"},"children":[{"type":"element","tag":"a","props":{"href":"#line-chart-in-cartesian-coordinate-system","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Line Chart in Cartesian Coordinate System"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" of the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" is represented by an array containing two elements."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customized-line-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#customized-line-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customized Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"line-style"},"children":[{"type":"element","tag":"a","props":{"href":"#line-style","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Line Style"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Line style can be changed by "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.lineStyle"}]}]},{"type":"text","value":" to figure out."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here is an example of setting color, line width and type."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When we set the line width here, the line width of items will not change. The line style of items needs to be set separately."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"item-style"},"children":[{"type":"element","tag":"a","props":{"href":"#item-style","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Item Style"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Item style can be change by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.itemStyle"}]}]},{"type":"text","value":". It included "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderStyle"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderType"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowColor"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opacity"}]},{"type":"text","value":" and so on. It works the same as the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineType"}]},{"type":"text","value":", so we will not do further discuss."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"display-value-on-items"},"children":[{"type":"element","tag":"a","props":{"href":"#display-value-on-items","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Display Value on Items."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the series, the label of the item was specified by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.label","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label"}]}]},{"type":"text","value":". If we change the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"show"}]},{"type":"text","value":" under "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the value will be displayed by default. Otherwise, if "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.emphasis.label.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.label.show"}]}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the label will show only if the mouse moved across the item."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"empty-data"},"children":[{"type":"element","tag":"a","props":{"href":"#empty-data","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Empty Data"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In a "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":", there are empty data. It has some difference with "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"0"}]},{"type":"text","value":". While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts, we use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'-'"}]},{"type":"text","value":" to represent null data, It is applicable for data in other series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please note the difference between the empty data and 0."}]},{"type":"text","value":"\n"}]}]},"text":"# 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, we set the type of axis to `category` and `value` under `xAxis` and `yAxis`. We also clarified the content on the x-axis through `data`. In `series`, we set the type to `line`, and specify the values of three points through `data`. In this way, we got a simple line chart.\n\n> The `type` here can be omitted because the defaults of the axis are `value` while `xAxis` has specified the category's `data`. In this case, `ECharts` can recognize that this is a category axis.\n\n## Line Chart in Cartesian Coordinate System\n\nHow to implement if we want the line chart to be continuous? The answer is simple, as long as every value in `data` of the `series` is represented by an array containing two elements.\n\n```js [live]\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n```\n\n## Customized Line Chart\n\n### Line Style\n\nLine style can be changed by `lineStyle` setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook [`series.lineStyle`](https://echarts.apache.org/option.html#series-line.lineStyle) to figure out.\n\nHere is an example of setting color, line width and type.\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n```\n\nWhen we set the line width here, the line width of items will not change. The line style of items needs to be set separately.\n\n### Item Style\n\nItem style can be change by [`series.itemStyle`](https://echarts.apache.org/option.html#series-line.itemStyle). It included `color`, `borderColor`, `borderStyle`, `borderWidth`, `borderType`, `shadowColor`, `opacity` and so on. It works the same as the `lineType`, so we will not do further discuss.\n\n## Display Value on Items.\n\nIn the series, the label of the item was specified by [`series.label`](https://echarts.apache.org/option.html#series-line.label). If we change the `show` under `label` to `true`, the value will be displayed by default. Otherwise, if [`series.emphasis.label.show`](https://echarts.apache.org/option.html#series-line.emphasis.label.show) is `true`, the label will show only if the mouse moved across the item.\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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n```\n\n## Empty Data\n\nIn a `series`, there are empty data. It has some difference with `0`. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.\n\nIn ECharts, we use `'-'` to represent null data, It is applicable for data in other series.\n\n```js [live]\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n```\n\n> Please note the difference between the empty data and 0.\n","dir":"/en/application/chart-types/line","path":"/en/application/chart-types/line/basic-line","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:29:15.878Z","meta":{"version":0,"revision":0,"created":1627897109407},"$loki":89},{"slug":"smooth-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"smooth-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#smooth-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Smooth Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"smooth"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" to achieve this effect."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]}]},"text":"# 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: [10, 22, 28, 23, 19],\n type: 'line',\n smooth: true\n }\n ]\n};\n```\n","dir":"/en/application/chart-types/line","path":"/en/application/chart-types/line/smooth-line","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:30:49.855Z","meta":{"version":0,"revision":0,"created":1627897109409},"$loki":90},{"slug":"area-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"area-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#area-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Area Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to change the area style of the line chart, try to use "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"areaStyle"}]}]},{"type":"text","value":". Set "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'areaStyle'"}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{}"}]},{"type":"text","value":" to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'areaStyle'"}]},{"type":"text","value":". For example, the color of the second series was changed to yellow with 50% opacity."}]}]},"text":"# 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: {},\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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n```\n\nIf you want to change the area style of the line chart, try to use [`areaStyle`](https://echarts.apache.org/option.html#series-line.areaStyle). Set `'areaStyle'` to `{}` to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in `'areaStyle'`. For example, the color of the second series was changed to yellow with 50% opacity.\n","dir":"/en/application/chart-types/line","path":"/en/application/chart-types/line/area-line","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:27:53.524Z","meta":{"version":0,"revision":0,"created":1627897109410},"$loki":91},{"slug":"waterfall","toc":[],"body":{"type":"root","children":[]},"text":"","dir":"/zh/application/chart-types/bar","path":"/zh/application/chart-types/bar/waterfall","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-06-04T12:26:37.920Z","meta":{"version":0,"revision":0,"created":1627897109411},"$loki":92},{"slug":"step-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"step-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#step-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Step Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":" is used to characterize the connection type of the step line chart. It has three available values: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'start'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'end'"}]},{"type":"text","value":", and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'middle'"}]},{"type":"text","value":". For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {},\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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Please focus on the difference of line between three separate types."}]},{"type":"text","value":"\n"}]}]},"text":"# 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 characterize the connection type of the step line chart. It has three available values: `'start'`, `'end'`, and `'middle'`. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.\n\n```js [live]\noption = {\n legend: {},\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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n```\n\n> Please focus on the difference of line between three separate types.\n","dir":"/en/application/chart-types/line","path":"/en/application/chart-types/line/step-line","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:31:50.910Z","meta":{"version":0,"revision":0,"created":1627897109413},"$loki":93},{"slug":"stacked-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"stacked-line-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#stacked-line-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Stacked Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Similar to the "},{"type":"element","tag":"a","props":{"href":"en/application/chart-types/bar/stacked-bar"},"children":[{"type":"text","value":"Stacked Bar Chart"}]},{"type":"text","value":", Stacked Line Chart use the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'stack'"}]},{"type":"text","value":" in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" to decide which series should be stacked together."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n"}]}]}]},"text":"# Stacked Line Chart\n\nSimilar to the [Stacked Bar Chart](en/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 stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x'\n }\n ]\n};\n```\n\nHowever, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.\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 areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n```\n","dir":"/en/application/chart-types/line","path":"/en/application/chart-types/line/stacked-line","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:31:21.466Z","meta":{"version":0,"revision":0,"created":1627897109414},"$loki":94},{"slug":"basic-scatter","toc":[{"id":"simple-example","depth":2,"text":"Simple Example"},{"id":"scatter-chart-in-cartesian-coordinate-system","depth":2,"text":"Scatter Chart in Cartesian Coordinate System"},{"id":"customized-scatter-chart","depth":2,"text":"Customized Scatter Chart"},{"id":"symbol-style","depth":3,"text":"Symbol Style"},{"id":"symbol-size","depth":3,"text":"Symbol Size"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-scatter-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-scatter-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Scatter Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Scatter 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"simple-example"},"children":[{"type":"element","tag":"a","props":{"href":"#simple-example","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Simple Example"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"scatter-chart-in-cartesian-coordinate-system"},"children":[{"type":"element","tag":"a","props":{"href":"#scatter-chart-in-cartesian-coordinate-system","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Scatter Chart in Cartesian Coordinate System"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":", but not in "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yAxis"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customized-scatter-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#customized-scatter-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customized Scatter Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"symbol-style"},"children":[{"type":"element","tag":"a","props":{"href":"#symbol-style","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Symbol Style"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Symbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The built-in shape in ECharts included: "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'circle'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'rect'"}]},{"type":"text","value":"(rectangle), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'roundRect'"}]},{"type":"text","value":"(rounded rectangle), "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'triangle'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'diamond'"}]},{"type":"text","value":", "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'pin'"}]},{"type":"text","value":" and "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'arrow'"}]},{"type":"text","value":". To use built-in shapes, you need to state the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" to the corresponding string."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to define the shape as any image, try to use "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image'"}]},{"type":"text","value":" following by the path, eg. "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image://http://example.com/xxx.png'"}]},{"type":"text","value":" or "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image://./xxx.png'"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" also supports SVG vector graphics. You can define "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" as an SVG file path that starts with "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'path://'"}]},{"type":"text","value":" to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Method to find the SVG path: Open an "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVG"}]},{"type":"text","value":" path; Find the path similar as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<path d=\"M… L…\"></path>"}]},{"type":"text","value":"; Add "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"d"}]},{"type":"text","value":"'s value after "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'path://'"}]},{"type":"text","value":". Let's check how to define an item to vector shape of heart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Firstly, we need an "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVG"}]},{"type":"text","value":" file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"xml","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts, define config "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" as a path of d:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this way, we have a heart vector of the item."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"symbol-size"},"children":[{"type":"element","tag":"a","props":{"href":"#symbol-size","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Symbol Size"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The size of symbol is defined by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.symbolSize","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.symbolSize"}]}]},{"type":"text","value":". It can be s pixel value of the item size, or an array included two numbers, to define the width and height."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Besides, it can be defined as a call back function. Here is an example of the format:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"(value: Array | number, params: Object) => number | Array;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n"}]}]}]},"text":"# 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 following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:\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, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n```\n\n## Scatter Chart in Cartesian Coordinate System\n\nIn the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in `data`, but not in `xAxis` and `yAxis`.\n\n```js [live]\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n```\n\n## Customized Scatter Chart\n\n### Symbol Style\n\nSymbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.\n\nThe built-in shape in ECharts included: `'circle'`, `'rect'`(rectangle), `'roundRect'`(rounded rectangle), `'triangle'`, `'diamond'`, `'pin'` and `'arrow'`. To use built-in shapes, you need to state the `symbol` to the corresponding string.\n\nIf you want to define the shape as any image, try to use `'image'` following by the path, eg. `'image://http://example.com/xxx.png'` or `'image://./xxx.png'`.\n\nECharts `symbol` also supports SVG vector graphics. You can define `symbol` as an SVG file path that starts with `'path://'` to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.\n\nMethod to find the SVG path: Open an `SVG` path; Find the path similar as `<path d=\"M… L…\"></path>`; Add `d`'s value after `'path://'`. Let's check how to define an item to vector shape of heart.\n\nFirstly, we need an `SVG` file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:\n\n```xml\n<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n```\n\nIn ECharts, define config `symbol` as a path of d:\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, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n```\n\nIn this way, we have a heart vector of the item.\n\n### Symbol Size\n\nThe size of symbol is defined by [`series.symbolSize`](https://echarts.apache.org/option.html#series-scatter.symbolSize). It can be s pixel value of the item size, or an array included two numbers, to define the width and height.\n\nBesides, it can be defined as a call back function. Here is an example of the format:\n\n```ts\n(value: Array | number, params: Object) => number | Array;\n```\n\nThe first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.\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, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n```\n","dir":"/en/application/chart-types/scatter","path":"/en/application/chart-types/scatter/basic-scatter","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:18:22.321Z","meta":{"version":0,"revision":0,"created":1627897109420},"$loki":95},{"slug":"basic-pie","toc":[{"id":"simple-example","depth":2,"text":"Simple Example"},{"id":"customized-pie-chart","depth":2,"text":"Customized Pie Chart"},{"id":"radius-of-pie-chart","depth":3,"text":"Radius of Pie Chart"},{"id":"hide-chart-while-data-sum-is-0","depth":2,"text":"Hide Chart While Data Sum is 0"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-pie-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#basic-pie-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Pie Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"simple-example"},"children":[{"type":"element","tag":"a","props":{"href":"#simple-example","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Simple Example"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 series. Let's begin with a basic pie chart:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To be mentioned, the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"customized-pie-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#customized-pie-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Customized Pie Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"radius-of-pie-chart"},"children":[{"type":"element","tag":"a","props":{"href":"#radius-of-pie-chart","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Radius of Pie Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The radius of pie chart can be defined by "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.radius","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.radius"}]}]},{"type":"text","value":". Both percent string("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'60%'"}]},{"type":"text","value":") and absolute pixel string("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'200'"}]},{"type":"text","value":") are available. While it is a percent string, it is proportional related to the shorter container("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'div'"}]},{"type":"text","value":") edge."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ],\n radius: '50%'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"hide-chart-while-data-sum-is-0"},"children":[{"type":"element","tag":"a","props":{"href":"#hide-chart-while-data-sum-is-0","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Hide Chart While Data Sum is 0"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don't want to show any shape while all 4 series have value equals 0, you could define "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.stillShowZeroSum","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.stillShowZeroSum"}]}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: 'Direct Visit'\n },\n {\n value: 0,\n name: 'Union Ad'\n },\n {\n value: 0,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are willing to hide the label as well, define the "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.label.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.show"}]}]},{"type":"text","value":" to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":" as well."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [{\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n }\n data: [{\n value: 0,\n name: 'Direct Visit'\n }, {\n value: 0,\n name: 'Union Ad'\n }, {\n value: 0,\n name: 'Search Engine'\n }]\n }]\n};\n"}]}]}]},"text":"# 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 series. Let's begin with a basic pie chart:\n\n```js [live]\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n```\n\nTo be mentioned, the `value` here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.\n\n## Customized Pie Chart\n\n### Radius of Pie Chart\n\nThe radius of pie chart can be defined by [`series.radius`](https://echarts.apache.org/option.html#series-pie.radius). Both percent string(`'60%'`) and absolute pixel string(`'200'`) are available. While it is a percent string, it is proportional related to the shorter container(`'div'`) edge.\n\n```js [live]\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ],\n radius: '50%'\n }\n ]\n};\n```\n\n## Hide Chart While Data Sum is 0\n\nBy default, if the data sum is 0, the series will divide the shape equally. For instance, if you don't want to show any shape while all 4 series have value equals 0, you could define [`series.stillShowZeroSum`](https://echarts.apache.org/option.html#series-pie.stillShowZeroSum) to `false`.\n\n```js [live]\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: 'Direct Visit'\n },\n {\n value: 0,\n name: 'Union Ad'\n },\n {\n value: 0,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n```\n\nIf you are willing to hide the label as well, define the [`series.label.show`](https://echarts.apache.org/option.html#series-pie.label.show) to `false` as well.\n\n```js [live]\noption = {\n series: [{\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n }\n data: [{\n value: 0,\n name: 'Direct Visit'\n }, {\n value: 0,\n name: 'Union Ad'\n }, {\n value: 0,\n name: 'Search Engine'\n }]\n }]\n};\n```\n","dir":"/en/application/chart-types/pie","path":"/en/application/chart-types/pie/basic-pie","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:19:35.547Z","meta":{"version":0,"revision":0,"created":1627897109424},"$loki":96},{"slug":"doughnut","toc":[{"id":"basic-doughnut-chart","depth":2,"text":"Basic Doughnut Chart"},{"id":"show-text-in-middle-of-doughnut-from-highlighted-sector","depth":2,"text":"Show Text In Middle Of Doughnut From Highlighted Sector"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"doughnut-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#doughnut-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Doughnut Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Doughnut 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"basic-doughnut-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#basic-doughnut-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Doughnut Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n title: {\n text: 'A Case of Doughnut Chart',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"show-text-in-middle-of-doughnut-from-highlighted-sector"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#show-text-in-middle-of-doughnut-from-highlighted-sector","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Show Text In Middle Of Doughnut From Highlighted Sector"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" in the middle of the chart while hiding "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" in default."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In this case, "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"avoidLabelOverlap"}]},{"type":"text","value":" is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"avoidLabelOverlap"}]},{"type":"text","value":" is "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":". We want the label to be fixed in the middle so that we need to define it as "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Therefore, the middle of doughnut chart will show the "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" of the highlighted sector."}]}]},"text":"# 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 element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.\n\nThe bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.\n\n```js [live]\noption = {\n title: {\n text: 'A Case of Doughnut Chart',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n```\n\nIf we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.\n\n## Show Text In Middle Of Doughnut From Highlighted Sector\n\nThe previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix `label` in the middle of the chart while hiding `label` in default.\n\n```js [live]\noption = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n```\n\nIn this case, `avoidLabelOverlap` is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of `avoidLabelOverlap` is `true`. We want the label to be fixed in the middle so that we need to define it as `false`.\n\nTherefore, the middle of doughnut chart will show the `name` of the highlighted sector.\n","dir":"/en/application/chart-types/pie","path":"/en/application/chart-types/pie/doughnut","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:24:20.782Z","meta":{"version":0,"revision":0,"created":1627897109434},"$loki":97},{"slug":"rose","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"rose-chart(nightingale-chart)"},"children":[{"type":"element","tag":"a","props":{"href":"#rose-chart%EF%BC%88nightingale-chart%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Rose Chart(Nightingale Chart)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts can implement Rose Chart by defining "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.roseType","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.roseType"}]}]},{"type":"text","value":" of pie chart to "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'area'"}]},{"type":"text","value":". All other configs are the same as a basic pie chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n"}]}]}]},"text":"# 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`](https://echarts.apache.org/option.html#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 series: [\n {\n type: 'pie',\n data: [\n {\n value: 100,\n name: 'A'\n },\n {\n value: 200,\n name: 'B'\n },\n {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n```\n","dir":"/en/application/chart-types/pie","path":"/en/application/chart-types/pie/rose","extension":".md","createdAt":"2021-06-04T12:26:37.914Z","updatedAt":"2021-07-21T12:20:36.695Z","meta":{"version":0,"revision":0,"created":1627897109436},"$loki":98},{"slug":"stacked-bar","toc":[{"id":"suggestion-for-using-stacked-bar-chart","depth":2,"text":"Suggestion for Using Stacked Bar Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"stacked-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#stacked-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Stacked Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 suitable for dealing with the relationship between part and whole."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Compared with the pie chart, a stacked bar chart can display several groups of \"part and whole\" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the \"part and whole\" relationship of each group."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-stacked-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-stacked-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Stacked Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Follow the basic rule of bar charts. Please avoid using too many colors so that the chart can be easily understood. Don't deliberately display partly data to mislead the user."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A Stacked bar chart is not suitable for comparing data inside the group."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While there are 2 or 3 categories, a stacked bar chart will show the best effect. It is not recommended to include more than 6 categories. Too many data series will also make it very difficult to read and understand."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Try to avoid using a stacked bar chart with categories that included negative values. It will affect understanding or the proportion between part and whole."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Most of the stacked bar charts are vertically generated. However, if you have very long labels, try to use the horizontal stack method."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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 suitable for dealing with the relationship between part and whole.\n\nCompared with the pie chart, a stacked bar chart can display several groups of \"part and whole\" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the \"part and whole\" relationship of each group.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz\">\n</iframe>\n\n## Suggestion for Using Stacked Bar Chart\n\n1. Follow the basic rule of bar charts. Please avoid using too many colors so that the chart can be easily understood. Don't deliberately display partly data to mislead the user.\n\n2. A Stacked bar chart is not suitable for comparing data inside the group.\n\n3. While there are 2 or 3 categories, a stacked bar chart will show the best effect. It is not recommended to include more than 6 categories. Too many data series will also make it very difficult to read and understand.\n\n4. Try to avoid using a stacked bar chart with categories that included negative values. It will affect understanding or the proportion between part and whole.\n\n5. Most of the stacked bar charts are vertically generated. However, if you have very long labels, try to use the horizontal stack method. \n","dir":"/en/best-practice/specification/bar","path":"/en/best-practice/specification/bar/stacked-bar","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-06-04T12:26:37.916Z","meta":{"version":0,"revision":0,"created":1627897109440},"$loki":99},{"slug":"grouped-bar","toc":[{"id":"suggestion-for-using-grouped-bar-chart","depth":2,"text":"Suggestion for Using Grouped Bar Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"grouped-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#grouped-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Grouped Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-grouped-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-grouped-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Grouped Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The difficulty of chart reading will be tremendous if there are many series in one group. Therefore, we suggest you use a stacked bar chart rather than a grouped bar chart in this situation."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The gap between the two groups should be bigger than the gap inside the group, to avoid visually incorrect classification."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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\">\n</iframe>\n\nA grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3\">\n</iframe>\n\n\n## Suggestion for Using Grouped Bar Chart\n\n1. The difficulty of chart reading will be tremendous if there are many series in one group. Therefore, we suggest you use a stacked bar chart rather than a grouped bar chart in this situation.\n\n2. The gap between the two groups should be bigger than the gap inside the group, to avoid visually incorrect classification.","dir":"/en/best-practice/specification/bar","path":"/en/best-practice/specification/bar/grouped-bar","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-06-04T12:26:37.916Z","meta":{"version":0,"revision":0,"created":1627897109455},"$loki":100},{"slug":"area","toc":[{"id":"suggestion-for-using-area-line-chart","depth":2,"text":"Suggestion for Using Area Line Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"area-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#area-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Area Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"\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 mostly used to convey the size of the trend but not single values."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=area-simple"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-area-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-area-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Area Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"},"children":[]}]},"text":"# 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 mostly used to convey the size of the trend but not single values.\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## Suggestion for Using Area Line Chart\n\n1. The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable. \n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M\"></iframe>\n\n2. The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\"></iframe>\n\n3. You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1\"></iframe>\n","dir":"/en/best-practice/specification/line","path":"/en/best-practice/specification/line/area","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-06-04T12:26:37.916Z","meta":{"version":0,"revision":0,"created":1627897109468},"$loki":101},{"slug":"basic-bar","toc":[{"id":"suggestions-for-using-bar-chart","depth":2,"text":"Suggestions for Using Bar Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#basic-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Bar Chart is a chart that presents the comparisons among discrete data. The length of the bars is proportional related to the categorical data."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While the label of the series is long, or there are more than 10 categories in one chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestions-for-using-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestions-for-using-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestions for Using Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Avoid using too many colors. One bar chart represents one set of metrics in general so that we suggest to use the same color or at least different shades of the same color. You can use a contrasting color to highlight meaningful data points."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The gap between bars should be appropriate. When they are too close, the attention of the user may be focused on the gap between bars. A reasonable width should be not less than twice the gap between the bars."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Data on Y-axis should be started from 0, to reflect the value appropriately. If the y-axis is incomplete, it will mislead the user to make wrong judgments. For instance, the chart on the left side shows that the income in 2017 is 4 times higher than in 2014. But the chart on the right side shows the truth that the income in 2017 only increased by 25% compared with 2014."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bar03.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When sorting multiple data, if it is not related to some specific value like date, it is better to comply with a certain logic and guide the user to check the data in an intuitive way. In short, logical sorting can lead the user to read data better to a certain extent."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We don't recommend using a 3D bar chart because the data transmission is not accurate. Users even have to guess which is the top of the bar."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bar04.jpg"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"# 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 chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz\">\n</iframe>\n\n## Suggestions for Using Bar Chart\n\n1. Avoid using too many colors. One bar chart represents one set of metrics in general so that we suggest to use the same color or at least different shades of the same color. You can use a contrasting color to highlight meaningful data points.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef\">\n</iframe>\n\n2. The gap between bars should be appropriate. When they are too close, the attention of the user may be focused on the gap between bars. A reasonable width should be not less than twice the gap between the bars.\n\n3. Data on Y-axis should be started from 0, to reflect the value appropriately. If the y-axis is incomplete, it will mislead the user to make wrong judgments. For instance, the chart on the left side shows that the income in 2017 is 4 times higher than in 2014. But the chart on the right side shows the truth that the income in 2017 only increased by 25% compared with 2014.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bar03.jpg\">\n</img>\n\n4. When sorting multiple data, if it is not related to some specific value like date, it is better to comply with a certain logic and guide the user to check the data in an intuitive way. In short, logical sorting can lead the user to read data better to a certain extent.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M\">\n</iframe>\n\nWe don't recommend using a 3D bar chart because the data transmission is not accurate. Users even have to guess which is the top of the bar.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bar04.jpg\">\n</img>\n","dir":"/en/best-practice/specification/bar","path":"/en/best-practice/specification/bar/basic-bar","extension":".md","createdAt":"2021-06-04T12:26:37.915Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109472},"$loki":102},{"slug":"stacked-area","toc":[{"id":"suggestion-for-using-stacked-area-chart","depth":2,"text":"Suggestion for Using Stacked Area Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"stacked-area-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#stacked-area-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Stacked Area Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If there are several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Here are two different kinds of stacked area chart:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"b","props":{},"children":[{"type":"text","value":"Traditional stacked chart"}]},{"type":"text","value":": Use the original value to stack, show the change in the whole process."}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"b","props":{},"children":[{"type":"text","value":"Percentage stacked chart"}]},{"type":"text","value":": The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-stacked-area-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-stacked-area-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Stacked Area Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The area chart can't display data in many series that are closed to each others. It will make the chart hard to read:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"With the same series, stacked bar chart works better:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["article-look-outside"]},"children":[{"type":"text","value":"\n\t"},{"type":"element","tag":"div","props":{"className":["article-look-inside"],"style":"padding-bottom:50%"},"children":[{"type":"text","value":"\n\t "},{"type":"element","tag":"iframe","props":{"className":["article-look-content"],"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[{"type":"text","value":"\n\t "}]},{"type":"text","value":"\n\t"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We suggest putting larger values on the top side of the chart, you will get a better display effect."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]}]},"text":"# 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 several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z\">\n</iframe>\n\nHere are two different kinds of stacked area chart:\n\n+ <b>Traditional stacked chart</b>: Use the original value to stack, show the change in the whole process.\n+ <b>Percentage stacked chart</b>: The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf\">\n</iframe>\n\n## Suggestion for Using Stacked Area Chart\n\n1. The area chart can't display data in many series that are closed to each others. It will make the chart hard to read: \n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\">\n</iframe>\n\nWith the same series, stacked bar chart works better:\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf\">\n</iframe>\n\n<div class=\"article-look-outside\">\n\t<div class=\"article-look-inside\" style=\"padding-bottom:50%\">\n\t <iframe class=\"article-look-content\"\n\t src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\">\n\t </iframe>\n\t</div>\n</div>\n\n2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart.\n\n3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series.\n\n4. We suggest putting larger values on the top side of the chart, you will get a better display effect.\n","dir":"/en/best-practice/specification/line","path":"/en/best-practice/specification/line/stacked-area","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-06-04T12:26:37.916Z","meta":{"version":0,"revision":0,"created":1627897109485},"$loki":103},{"slug":"bubble","toc":[{"id":"suggestion-for-using-bubble-chart","depth":2,"text":"Suggestion for Using Bubble Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"bubble-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#bubble-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Bubble Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 location and size of bubbles."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHkRpZuY4z&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-bubble-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-bubble-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Bubble Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"It is a good choice to choose a bubble chart while there are three series, features and related values. As shown below, the bubbles' position shows the date and specific time when the code was submitted, the size explained the amount of code submitted."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can also change the color of the bubbles. The chart below uses different colors to classify the air quality of three areas. Red is Beijing, yellow is Shanghai, and blue is Guangzhou. Users can visually compare and analyze the tire quality of the three places."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A bubble chart commonly used to combine with the map. X-axis and y-axis represent the longitude and latitude. The size of bubbles can be the magnitude of the value at that position."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 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 location and size of bubbles. \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## Suggestion for Using Bubble Chart\n\n1. It is a good choice to choose a bubble chart while there are three series, features and related values. As shown below, the bubbles' position shows the date and specific time when the code was submitted, the size explained the amount of code submitted.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard\">\n</iframe>\n\n2. You can also change the color of the bubbles. The chart below uses different colors to classify the air quality of three areas. Red is Beijing, yellow is Shanghai, and blue is Guangzhou. Users can visually compare and analyze the tire quality of the three places. \n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1\">\n</iframe>\n\n3. A bubble chart commonly used to combine with the map. X-axis and y-axis represent the longitude and latitude. The size of bubbles can be the magnitude of the value at that position.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\" \n src=\"https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population\">\n</iframe>\n","dir":"/en/best-practice/specification/scatter","path":"/en/best-practice/specification/scatter/bubble","extension":".md","createdAt":"2021-06-04T12:26:37.917Z","updatedAt":"2021-06-04T12:26:37.917Z","meta":{"version":0,"revision":0,"created":1627897109490},"$loki":104},{"slug":"basic-line","toc":[{"id":"suggestion-for-using-line-chart","depth":2,"text":"Suggestion for Using Line Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"basic-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#basic-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Basic Line Chart."}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Except for displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1"},"children":[{"type":"text","value":">\n "}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"A line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-line-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-line-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Line Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To make sure the data readability, use solid lines in charts if you can separate the data line and axis."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Don't use decorates to separate charts. The legend is helpful, but sometimes distracting users:"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/line/line01.jpg"},"children":[]}]}]},"text":"# 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 displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1\">>\n </iframe>\n\nA line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line.\n\n## Suggestion for Using Line Chart\n\n1. To make sure the data readability, use solid lines in charts if you can separate the data line and axis.\n\n2. Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1\">\n</iframe>\n\n3. Don't use decorates to separate charts. The legend is helpful, but sometimes distracting users:\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1\">\n</iframe>\n\n4. When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/line/line01.jpg\"></img>\n","dir":"/en/best-practice/specification/line","path":"/en/best-practice/specification/line/basic-line","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109499},"$loki":105},{"slug":"bi-directional-bar","toc":[{"id":"suggestion-for-using-bi-directional-bar-chart","depth":2,"text":"Suggestion for Using Bi-directional Bar Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"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 fluctuation of income and outcome in a single series."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-bi-directional-bar-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-bi-directional-bar-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Bi-directional Bar Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The data on both sides in the bi-directional bar chart are comparative."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bi-directional-bar01.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bi-directional-bar02.jpg"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"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 fluctuation of income and outcome in a single series.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f\">\n</iframe>\n\nThe bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z\">\n</iframe>\n\n## Suggestion for Using Bi-directional Bar Chart\n\n1. The data on both sides in the bi-directional bar chart are comparative.\n\n2. Don't define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bi-directional-bar01.jpg\">\n</img>\n\n3. A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bi-directional-bar02.jpg\">\n</img>\n","dir":"/en/best-practice/specification/bar","path":"/en/best-practice/specification/bar/bi-directional-bar","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109507},"$loki":106},{"slug":"basic-pie","toc":[{"id":"suggestion-for-using-pie-chart","depth":2,"text":"Suggestion for Using Pie Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"pie-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#pie-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Pie Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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%."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Even the pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-pie-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-pie-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Pie Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as \"other\". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie02.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The pie chart is not appropriate for the comparison of precise data. The following graph (left below) shows that every sector has almost the same proportion. In this case, you should try a bar chart or rose chart (right below) to achieve a better effect."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie03.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Visual habits of most people are observing from top to bottom in clockwise. Therefore we recommend you put the largest sector in the first place in the clockwise direction to stress the importance."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There are two advices for the rest of the data. Arrange sectors from big to small in clockwise or anti-clockwise follows the largest one:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie01.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Order the sectors according to the size not only consistent with the visual habits but also easier for data's identify and comparison. Base on this principle, you can put the part that needs to emphasize (don't need to be the largest part) at the prominent position."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":5},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"You can add some decorations like color, motion, style, position to stress some data in a chart. Please be moderate or it will distract the user."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":6},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3D pie chart distorted the ratio between each sector, which will cause mistakes and confusion in understanding. Therefore,a 3D pie chart is not recommended."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie04.jpg"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"# 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 pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding.\n\n## Suggestion for Using Pie Chart\n\n1. The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%.\n\n2. It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as \"other\". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/pie/pie02.jpg\">\n</img>\n\n3. The pie chart is not appropriate for the comparison of precise data. The following graph (left below) shows that every sector has almost the same proportion. In this case, you should try a bar chart or rose chart (right below) to achieve a better effect.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/pie/pie03.jpg\">\n</img>\n\n4. Visual habits of most people are observing from top to bottom in clockwise. Therefore we recommend you put the largest sector in the first place in the clockwise direction to stress the importance.\n\nThere are two advices for the rest of the data. Arrange sectors from big to small in clockwise or anti-clockwise follows the largest one:\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/pie/pie01.jpg\">\n</img>\n\nOrder the sectors according to the size not only consistent with the visual habits but also easier for data's identify and comparison. Base on this principle, you can put the part that needs to emphasize (don't need to be the largest part) at the prominent position.\n\n5. You can add some decorations like color, motion, style, position to stress some data in a chart. Please be moderate or it will distract the user.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1\">\n</iframe>\n\n6. 3D pie chart distorted the ratio between each sector, which will cause mistakes and confusion in understanding. Therefore,a 3D pie chart is not recommended.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/pie/pie04.jpg\">\n</img>\n","dir":"/en/best-practice/specification/pie","path":"/en/best-practice/specification/pie/basic-pie","extension":".md","createdAt":"2021-06-04T12:26:37.916Z","updatedAt":"2021-07-29T06:23:03.536Z","meta":{"version":0,"revision":0,"created":1627897109516},"$loki":107},{"slug":"scatter","toc":[{"id":"suggestion-for-using-scatter-chart","depth":2,"text":"Suggestion for Using Scatter Chart"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"scatter-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#scatter-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Scatter Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The 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 distribution. The chart above shows the distribution of the height and weight of students in a class."}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The scatter chart can reflect the correlation(relation between variables) of a different type. It can be positively correlated, negatively correlated and uncorrelated."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Positively Correlated: When one value increases, the other value increases."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Negatively Correlated: When one value increases, the other value decreases."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Uncorrelated: Two values have no obvious relation and have no influence on each other."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/scatter/scatter5.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To be mentioned, the scatter chart can effectively illustrate the correlation between the two variables. However, it cannot strongly prove there exist causality. For example, AD serving and Visits are positively correlated, but we cannot prove that more AD serving must lead to more Visits. However, we have enough reason to increase the AD serving and observe the outcome after we find out the positive correlation between them."}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"suggestion-for-using-scatter-chart"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#suggestion-for-using-scatter-chart","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"Suggestion for Using Scatter Chart"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If no correlation was shown in the scatter chart, then the scatter chart is not the best choice."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If the package included a different series, you can use different colors for each series. As an example, add the legend to mark male as blue, female as red. You can not only distinguish the height and weight of different genders but also add an auxiliary line for the average of each series to improve the understanding of the distribution. In this case, females have more amount higher than the average value than lower."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The trend line is useful when observing the relationship between two variables. The shape of the trend line can explain the relation type of two variables as well as make a prediction. It is better to include only two trend lines to avoid interference with the reading."}]},{"type":"text","value":"\n"},{"type":"element","tag":"ol","props":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"The scatter points can present a good appearance only with adequate and relevant data. It is meaningless to draw a chart with very little and unrelated values."}]},{"type":"text","value":"\n"}]}]},"text":"# 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 distribution. The chart above shows the distribution of the height and weight of students in a class.\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\nThe scatter chart can reflect the correlation(relation between variables) of a different type. It can be positively correlated, negatively correlated and uncorrelated.\n\n- Positively Correlated: When one value increases, the other value increases.\n\n- Negatively Correlated: When one value increases, the other value decreases.\n\n- Uncorrelated: Two values have no obvious relation and have no influence on each other.\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/scatter/scatter5.jpg\">\n</img>\n\nTo be mentioned, the scatter chart can effectively illustrate the correlation between the two variables. However, it cannot strongly prove there exist causality. For example, AD serving and Visits are positively correlated, but we cannot prove that more AD serving must lead to more Visits. However, we have enough reason to increase the AD serving and observe the outcome after we find out the positive correlation between them.\n\n## Suggestion for Using Scatter Chart\n\n1. If no correlation was shown in the scatter chart, then the scatter chart is not the best choice.\n\n2. If the package included a different series, you can use different colors for each series. As an example, add the legend to mark male as blue, female as red. You can not only distinguish the height and weight of different genders but also add an auxiliary line for the average of each series to improve the understanding of the distribution. In this case, females have more amount higher than the average value than lower.\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM\">\n</iframe>\n\nThe trend line is useful when observing the relationship between two variables. The shape of the trend line can explain the relation type of two variables as well as make a prediction. It is better to include only two trend lines to avoid interference with the reading.\n\n3. The scatter points can present a good appearance only with adequate and relevant data. It is meaningless to draw a chart with very little and unrelated values.\n","dir":"/en/best-practice/specification/scatter","path":"/en/best-practice/specification/scatter/scatter","extension":".md","createdAt":"2021-06-04T12:26:37.917Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109520},"$loki":108},{"slug":"polar-bar","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"极坐标系柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%9E%81%E5%9D%90%E6%A0%87%E7%B3%BB%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"极坐标系柱状图"}]}]},"text":"# 极坐标系柱状图\n","dir":"/zh/application/chart-types/bar","path":"/zh/application/chart-types/bar/polar-bar","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-06-04T12:26:37.920Z","meta":{"version":0,"revision":0,"created":1627897109521},"$loki":109},{"slug":"bar-race","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"动态排序柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"动态排序柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"动态排序柱状图是 ECharts 5.0 新增的功能。"}]}]},"text":"# 动态排序柱状图\n\n动态排序柱状图是 ECharts 5.0 新增的功能。\n","dir":"/zh/application/chart-types/bar","path":"/zh/application/chart-types/bar/bar-race","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-06-04T12:26:37.920Z","meta":{"version":0,"revision":0,"created":1627897109521},"$loki":110},{"slug":"basic-bar","toc":[{"id":"最简单的柱状图","depth":2,"text":"最简单的柱状图"},{"id":"多系列的柱状图","depth":2,"text":"多系列的柱状图"},{"id":"柱状图样式设置","depth":2,"text":"柱状图样式设置"},{"id":"柱条样式","depth":3,"text":"柱条样式"},{"id":"柱条宽度和高度","depth":3,"text":"柱条宽度和高度"},{"id":"柱条间距","depth":3,"text":"柱条间距"},{"id":"为柱条添加背景色","depth":3,"text":"为柱条添加背景色"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基本柱状图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基本柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"设置柱状图的方式,是将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" 设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'bar'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"[配置项手册]"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"最简单的柱状图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"最简单的柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"最简单的柱状图可以这样设置:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,横坐标是类目型的,因此需要在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" 中指定对应的值;而纵坐标是数值型的,可以根据 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 中的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":",自动生成对应的坐标范围。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"多系列的柱状图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"多系列的柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 多添加一项就可以了——"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"柱状图样式设置"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"柱状图样式设置"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"柱条样式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"柱条样式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱条的样式可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.itemStyle"}]}]},{"type":"text","value":" 设置,包括:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"柱条的颜色("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"color"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"柱条的描边颜色("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderColor"}]},{"type":"text","value":")、宽度("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderWidth"}]},{"type":"text","value":")、样式("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"borderType"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"柱条圆角的半径("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barBorderRadius"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"柱条透明度("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"opacity"}]},{"type":"text","value":");"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"阴影("},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowBlur"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowColor"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetX"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"shadowOffsetY"}]},{"type":"text","value":")。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,我们通过设置柱状图对应 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 的"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"itemStyle"}]},{"type":"text","value":",设置了柱条的样式。完整的配置项及其用法请参见配置项手册 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.itemStyle"}]}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"柱条宽度和高度"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"柱条宽度和高度"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱条宽度可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html##series-bar.barWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]}]},{"type":"text","value":" 设置。比如在下面的例子中,将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]},{"type":"text","value":" 设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'20%'"}]},{"type":"text","value":",表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"另外,还可以设置 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barMaxWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMaxWidth"}]}]},{"type":"text","value":" 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barMinHeight","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMinHeight"}]}]},{"type":"text","value":",当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"柱条间距"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"柱条间距"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱条间距分为两种,一种是不同系列在同一类目下的距离 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barWidth","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]}]},{"type":"text","value":",另一种是类目与类目的距离 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.barCategoryGap","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barGap"}]},{"type":"text","value":" 被设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'20%'"}]},{"type":"text","value":",这意味着每个类目(比如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"A"}]},{"type":"text","value":")下的两个柱子之间的距离,相对于柱条宽度的百分比。而 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]},{"type":"text","value":" 是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'40%'"}]},{"type":"text","value":",意味着柱条每侧空余的距离,相对于柱条宽度的百分比。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"通常而言,设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barGap"}]},{"type":"text","value":" 及 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barCategoryGap"}]},{"type":"text","value":" 后,就不需要设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barWidth"}]},{"type":"text","value":" 了,这时候的宽度会自动调整。如果有需要的话,可以设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"barMaxWidth"}]},{"type":"text","value":" 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"为柱条添加背景色"},"children":[{"type":"element","tag":"a","props":{"href":"#%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"为柱条添加背景色"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.showBackground","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"showBackground"}]}]},{"type":"text","value":" 开启,并且可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-bar.backgroundStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"backgroundStyle"}]}]},{"type":"text","value":" 配置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n"}]}]}]},"text":"# 基本柱状图\n\n柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。\n\n设置柱状图的方式,是将 `series` 的 `type` 设为 `'bar'`。\n\n[[配置项手册]](https://echarts.apache.org/option.html#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```\n\n在这个例子中,横坐标是类目型的,因此需要在 `xAxis` 中指定对应的值;而纵坐标是数值型的,可以根据 `series` 中的 `data`,自动生成对应的坐标范围。\n\n## 多系列的柱状图\n\n我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 `series` 多添加一项就可以了——\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n```\n\n## 柱状图样式设置\n\n### 柱条样式\n\n柱条的样式可以通过 [`series.itemStyle`](https://echarts.apache.org/option.html#series-bar.itemStyle) 设置,包括:\n\n- 柱条的颜色(`color`);\n- 柱条的描边颜色(`borderColor`)、宽度(`borderWidth`)、样式(`borderType`);\n- 柱条圆角的半径(`barBorderRadius`);\n- 柱条透明度(`opacity`);\n- 阴影(`shadowBlur`、`shadowColor`、`shadowOffsetX`、`shadowOffsetY`)。\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n在这个例子中,我们通过设置柱状图对应 `series` 的`itemStyle`,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 [`series.itemStyle`](https://echarts.apache.org/option.html#series-bar.itemStyle)。\n\n### 柱条宽度和高度\n\n柱条宽度可以通过 [`barWidth`](https://echarts.apache.org/option.html##series-bar.barWidth) 设置。比如在下面的例子中,将 `barWidth` 设为 `'20%'`,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n另外,还可以设置 [`barMaxWidth`](https://echarts.apache.org/option.html#series-bar.barMaxWidth) 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 [`barMinHeight`](https://echarts.apache.org/option.html#series-bar.barMinHeight),当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。\n\n### 柱条间距\n\n柱条间距分为两种,一种是不同系列在同一类目下的距离 [`barWidth`](https://echarts.apache.org/option.html#series-bar.barWidth),另一种是类目与类目的距离 [`barCategoryGap`](https://echarts.apache.org/option.html#series-bar.barCategoryGap)。\n\n```js [live]\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n```\n\n在这个例子中,`barGap` 被设为 `'20%'`,这意味着每个类目(比如 `A`)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 `barCategoryGap` 是 `'40%'`,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。\n\n通常而言,设置 `barGap` 及 `barCategoryGap` 后,就不需要设置 `barWidth` 了,这时候的宽度会自动调整。如果有需要的话,可以设置 `barMaxWidth` 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。\n\n> 在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。\n\n### 为柱条添加背景色\n\n有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 [`showBackground`](https://echarts.apache.org/option.html#series-bar.showBackground) 开启,并且可以通过 [`backgroundStyle`](https://echarts.apache.org/option.html#series-bar.backgroundStyle) 配置。\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n```\n","dir":"/zh/application/chart-types/bar","path":"/zh/application/chart-types/bar/basic-bar","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-07-21T12:33:34.758Z","meta":{"version":0,"revision":0,"created":1627897109528},"$loki":111},{"slug":"stacked-bar","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"堆叠柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" 值的系列将堆积在一组。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [10, 22, 28, 43, 49],\n type: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" 值就建议分别设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'男'"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'女'"}]},{"type":"text","value":"。虽然使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'a'"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'b'"}]},{"type":"text","value":" 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。"}]},{"type":"text","value":"\n"}]}]},"text":"# 堆叠柱状图\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。\n\n> `stack` 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。\n>\n> 比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 `stack` 值就建议分别设为 `'男'` 和 `'女'`。虽然使用 `'a'` 和 `'b'` 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。\n","dir":"/zh/application/chart-types/bar","path":"/zh/application/chart-types/bar/stacked-bar","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-07-21T12:35:06.469Z","meta":{"version":0,"revision":0,"created":1627897109536},"$loki":112},{"slug":"rose","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"南丁格尔图(玫瑰图)"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"南丁格尔图(玫瑰图)"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 可以通过将饼图的 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.roseType","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.roseType"}]}]},{"type":"text","value":" 值设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'area'"}]},{"type":"text","value":" 实现南丁格尔图,其他配置项和饼图是相同的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n"}]}]}]},"text":"# 南丁格尔图(玫瑰图)\n\n南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。\n\nECharts 可以通过将饼图的 [`series.roseType`](https://echarts.apache.org/option.html#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 {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n```\n","dir":"/zh/application/chart-types/pie","path":"/zh/application/chart-types/pie/rose","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-06-04T12:26:37.922Z","meta":{"version":0,"revision":0,"created":1627897109537},"$loki":113},{"slug":"doughnut","toc":[{"id":"基础圆环图","depth":2,"text":"基础圆环图"},{"id":"在圆环图中间显示高亮扇形对应的文字","depth":2,"text":"在圆环图中间显示高亮扇形对应的文字"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"圆环图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9C%86%E7%8E%AF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"圆环图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"基础圆环图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础圆环图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n title: {\n text: '圆环图的例子',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"在圆环图中间显示高亮扇形对应的文字"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9C%A8%E5%9C%86%E7%8E%AF%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在圆环图中间显示高亮扇形对应的文字"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":"(默认用扇形颜色显示数据的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":"),显示在圆环图中间。在默认情况下不显示系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":",在高亮时显示。具体的代码如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其中,"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"avoidLabelOverlap"}]},{"type":"text","value":" 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":",而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这样,圆环图中间会显示高亮数据的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"name"}]},{"type":"text","value":" 值。"}]}]},"text":"# 圆环图\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 type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n```\n\n如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。\n\n## 在圆环图中间显示高亮扇形对应的文字\n\n上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 `label`(默认用扇形颜色显示数据的 `name`),显示在圆环图中间。在默认情况下不显示系列的 `label`,在高亮时显示。具体的代码如下:\n\n```js [live]\noption = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n```\n\n其中,`avoidLabelOverlap` 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 `true`,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 `false`。\n\n这样,圆环图中间会显示高亮数据的 `name` 值。\n","dir":"/zh/application/chart-types/pie","path":"/zh/application/chart-types/pie/doughnut","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-07-21T12:22:31.315Z","meta":{"version":0,"revision":0,"created":1627897109539},"$loki":114},{"slug":"area-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"区域面积图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"区域面积图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.areaStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"areaStyle"}]}]},{"type":"text","value":" 设置折线图的填充区域样式,将其设为为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"{}"}]},{"type":"text","value":" 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"areaStyle"}]},{"type":"text","value":" 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。"}]}]},"text":"# 区域面积图\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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n```\n\n通过 [`areaStyle`](https://echarts.apache.org/option.html#series-line.areaStyle) 设置折线图的填充区域样式,将其设为为 `{}` 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 `areaStyle` 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。\n","dir":"/zh/application/chart-types/line","path":"/zh/application/chart-types/line/area-line","extension":".md","createdAt":"2021-06-04T12:26:37.920Z","updatedAt":"2021-07-21T12:27:04.834Z","meta":{"version":0,"revision":0,"created":1627897109540},"$loki":115},{"slug":"basic-pie","toc":[{"id":"最简单的饼图","depth":2,"text":"最简单的饼图"},{"id":"饼图样式设置","depth":2,"text":"饼图样式设置"},{"id":"饼图的半径","depth":3,"text":"饼图的半径"},{"id":"如果数据和为-0,不显示饼图","depth":2,"text":"如果数据和为 0,不显示饼图"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基础饼图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础饼图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"最简单的饼图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"最简单的饼图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 name: '搜索引擎'\n }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"需要注意的是,这里是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" 不需要是百分比数据,ECharts 会根据所有数据的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"value"}]},{"type":"text","value":" ,按比例分配它们在饼图中对应的弧度。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"饼图样式设置"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"饼图样式设置"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"饼图的半径"},"children":[{"type":"element","tag":"a","props":{"href":"#%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"饼图的半径"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"饼图的半径可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.radius","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.radius"}]}]},{"type":"text","value":" 设置,可以是诸如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'60%'"}]},{"type":"text","value":" 这样相对的百分比字符串,或是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"200"}]},{"type":"text","value":" 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 name: '搜索引擎'\n }\n ],\n radius: '50%'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"如果数据和为-0,不显示饼图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"如果数据和为 0,不显示饼图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.stillShowZeroSum","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.stillShowZeroSum"}]}]},{"type":"text","value":" 设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果希望扇形对应的标签也不显示,可以将 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-pie.label.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label.show"}]}]},{"type":"text","value":" 设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n },\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n"}]}]}]},"text":"# 基础饼图\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 name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n\n需要注意的是,这里是 `value` 不需要是百分比数据,ECharts 会根据所有数据的 `value` ,按比例分配它们在饼图中对应的弧度。\n\n## 饼图样式设置\n\n### 饼图的半径\n\n饼图的半径可以通过 [`series.radius`](https://echarts.apache.org/option.html#series-pie.radius) 设置,可以是诸如 `'60%'` 这样相对的百分比字符串,或是 `200` 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。\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 name: '搜索引擎'\n }\n ],\n radius: '50%'\n }\n ]\n};\n```\n\n## 如果数据和为 0,不显示饼图\n\n在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 [`series.stillShowZeroSum`](https://echarts.apache.org/option.html#series-pie.stillShowZeroSum) 设为 `false`。\n\n```js [live]\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n\n如果希望扇形对应的标签也不显示,可以将 [`series.label.show`](https://echarts.apache.org/option.html#series-pie.label.show) 设为 `false`。\n\n```js [live]\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n },\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n","dir":"/zh/application/chart-types/pie","path":"/zh/application/chart-types/pie/basic-pie","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-06-04T12:26:37.921Z","meta":{"version":0,"revision":0,"created":1627897109544},"$loki":116},{"slug":"basic-line","toc":[{"id":"最简单的折线图","depth":2,"text":"最简单的折线图"},{"id":"笛卡尔坐标系中的折线图","depth":2,"text":"笛卡尔坐标系中的折线图"},{"id":"折线图样式设置","depth":2,"text":"折线图样式设置"},{"id":"折线的样式","depth":3,"text":"折线的样式"},{"id":"数据点的样式","depth":3,"text":"数据点的样式"},{"id":"在数据点处显示数值","depth":2,"text":"在数据点处显示数值"},{"id":"空数据","depth":2,"text":"空数据"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基础折线图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"最简单的折线图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"最简单的折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在这个例子中,我们通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" 将横坐标设为类目型,并指定了对应的值;通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" 将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yAxis"}]},{"type":"text","value":" 的类型设定为数值型。在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 中,我们将系列类型设为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"line"}]},{"type":"text","value":",并且通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"yAxis"}]},{"type":"text","value":" 的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":" 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"xAxis"}]},{"type":"text","value":" 指定了类目型的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":",所以 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"ECharts"}]},{"type":"text","value":" 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"type"}]},{"type":"text","value":"。在实际的应用中,如果是 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'value'"}]},{"type":"text","value":" 类型,也可以省略不写。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"笛卡尔坐标系中的折线图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"笛卡尔坐标系中的折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series"}]},{"type":"text","value":" 的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" 每个数据用一个包含两个元素的数组表示就行了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"折线图样式设置"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"折线图样式设置"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"折线的样式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"折线的样式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"折线图中折线的样式可以通过 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"lineStyle"}]},{"type":"text","value":" 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.lineStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.lineStyle"}]}]},{"type":"text","value":" 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"数据点的样式"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"数据点的样式"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"数据点的样式可以通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.itemStyle","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.itemStyle"}]}]},{"type":"text","value":" 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"在数据点处显示数值"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"在数据点处显示数值"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在系列中,这数据点的标签通过 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.label","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.label"}]}]},{"type":"text","value":" 属性指定。如果将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"label"}]},{"type":"text","value":" 下的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"show"}]},{"type":"text","value":" 指定为"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":",则表示该数值默认时就显示;如果为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":",而 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-line.emphasis.label.show","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.emphasis.label.show"}]}]},{"type":"text","value":" 为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":",则表示只有在鼠标移动到该数据时,才显示数值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"空数据"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%A9%BA%E6%95%B0%E6%8D%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"空数据"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 中,我们使用字符串 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'-'"}]},{"type":"text","value":" 表示空数据,这对其他系列的数据也是适用的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"注意区别这个例子中,“空”数据与取值为 0 的数据。"}]},{"type":"text","value":"\n"}]}]},"text":"# 基础折线图\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` 将横坐标设为类目型,并指定了对应的值;通过 `type` 将 `yAxis` 的类型设定为数值型。在 `series` 中,我们将系列类型设为 `line`,并且通过 `data` 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。\n\n> 这里 `xAxis` 和 `yAxis` 的 `type` 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 `xAxis` 指定了类目型的 `data`,所以 `ECharts` 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 `type`。在实际的应用中,如果是 `'value'` 类型,也可以省略不写。\n\n## 笛卡尔坐标系中的折线图\n\n如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 `series` 的 `data` 每个数据用一个包含两个元素的数组表示就行了。\n\n```js [live]\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n```\n\n## 折线图样式设置\n\n### 折线的样式\n\n折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 [`series.lineStyle`](https://echarts.apache.org/option.html#series-line.lineStyle) 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n```\n\n这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。\n\n### 数据点的样式\n\n数据点的样式可以通过 [`series.itemStyle`](https://echarts.apache.org/option.html#series-line.itemStyle) 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。\n\n## 在数据点处显示数值\n\n在系列中,这数据点的标签通过 [`series.label`](https://echarts.apache.org/option.html#series-line.label) 属性指定。如果将 `label` 下的 `show` 指定为`true`,则表示该数值默认时就显示;如果为 `false`,而 [`series.emphasis.label.show`](https://echarts.apache.org/option.html#series-line.emphasis.label.show) 为 `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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n```\n\n## 空数据\n\n在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。\n\n在 ECharts 中,我们使用字符串 `'-'` 表示空数据,这对其他系列的数据也是适用的。\n\n```js [live]\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n```\n\n> 注意区别这个例子中,“空”数据与取值为 0 的数据。\n","dir":"/zh/application/chart-types/line","path":"/zh/application/chart-types/line/basic-line","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-06-04T12:26:37.921Z","meta":{"version":0,"revision":0,"created":1627897109552},"$loki":117},{"slug":"step-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"阶梯线图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"阶梯线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 中,系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":" 属性用来表征阶梯线图的连接类型,它共有三种取值:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'start'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'middle'"}]},{"type":"text","value":" 和 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'end'"}]},{"type":"text","value":",分别表示在当前点,当前点与下个点的中间点,下个点拐弯。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"请注意这个例子中不同的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":" 取值对应的数据点和连线的区别。"}]},{"type":"text","value":"\n"}]}]},"text":"# 阶梯线图\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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n```\n\n> 请注意这个例子中不同的 `step` 取值对应的数据点和连线的区别。\n","dir":"/zh/application/chart-types/line","path":"/zh/application/chart-types/line/step-line","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-06-04T12:26:37.921Z","meta":{"version":0,"revision":0,"created":1627897109554},"$loki":118},{"slug":"stacked-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"堆叠折线图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"与"},{"type":"element","tag":"a","props":{"href":"./zh/application/chart-types/bar/stacked-bar"},"children":[{"type":"text","value":"堆叠柱状图"}]},{"type":"text","value":"类似,堆叠折线图也是用系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"stack"}]},{"type":"text","value":" 设置哪些系列堆叠在一起。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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 areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n"}]}]}]},"text":"# 堆叠折线图\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 }\n ]\n};\n```\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, 43, 49],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n```\n","dir":"/zh/application/chart-types/line","path":"/zh/application/chart-types/line/stacked-line","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-07-21T06:19:52.717Z","meta":{"version":0,"revision":0,"created":1627897109555},"$loki":119},{"slug":"basic-scatter","toc":[{"id":"最简单的散点图","depth":2,"text":"最简单的散点图"},{"id":"笛卡尔坐标系下的散点图","depth":2,"text":"笛卡尔坐标系下的散点图"},{"id":"散点图样式设置","depth":2,"text":"散点图样式设置"},{"id":"图形的形状","depth":3,"text":"图形的形状"},{"id":"图形的大小","depth":3,"text":"图形的大小"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基础散点图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础散点图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"最简单的散点图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"最简单的散点图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"笛卡尔坐标系下的散点图"},"children":[{"type":"element","tag":"a","props":{"href":"#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"笛卡尔坐标系下的散点图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":" 中,而非坐标轴中。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"散点图样式设置"},"children":[{"type":"element","tag":"a","props":{"href":"#%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"散点图样式设置"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"图形的形状"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图形的形状"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"ECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'circle'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'rect'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'roundRect'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'triangle'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'diamond'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'pin'"}]},{"type":"text","value":"、"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'arrow'"}]},{"type":"text","value":"。使用内置形状时,只要将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" 属性指定为形状名称对应的字符串即可。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果想要将图形指定为任意的图片,以 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image://'"}]},{"type":"text","value":" 开头,后面跟图片的绝对或相对地址。形如:"},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image://http://example.com/xxx.png'"}]},{"type":"text","value":" 或 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'image://./xxx.png'"}]},{"type":"text","value":"。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,还支持 SVG 的路径作为矢量图形,将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" 设置为以 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'path://'"}]},{"type":"text","value":" 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"SVG"}]},{"type":"text","value":" 文件,找到形如 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"<path d=\"M… L…\"></path>"}]},{"type":"text","value":" 的路径,将 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"d"}]},{"type":"text","value":" 的值添加在 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"'path://'"}]},{"type":"text","value":" 后即可。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"下面,我们展示一个将图形设置为矢量爱心形状的方式。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"xml","line-highlights":"","file-name":""},"children":[{"type":"text","value":"<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在 ECharts 的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"symbol"}]},{"type":"text","value":" 配置项中,我们使用 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"d"}]},{"type":"text","value":" 的值作为路径。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"这样,就能得到爱心形状的图形作为点的形状了。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h3","props":{"id":"图形的大小"},"children":[{"type":"element","tag":"a","props":{"href":"#%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F","ariaHidden":"true","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"图形的大小"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"图形大小可以使用 "},{"type":"element","tag":"a","props":{"href":"https://echarts.apache.org/option.html#series-scatter.symbolSize","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"series.symbolSize"}]}]},{"type":"text","value":" 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"除此之外,它还可以是一个回调函数,其参数格式为:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-code-block","props":{"lang":"ts","line-highlights":"","file-name":""},"children":[{"type":"text","value":"(value: Array | number, params: Object) => number | Array;\n"}]}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"第一个参数为数据值,第二个参数是数据项的其他参数。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\n xAxis: {\n data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n },\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [220, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n"}]}]}]},"text":"# 基础散点图\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, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n```\n\n## 笛卡尔坐标系下的散点图\n\n在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 `data` 中,而非坐标轴中。\n\n```js [live]\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n```\n\n## 散点图样式设置\n\n### 图形的形状\n\n图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。\n\nECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应`'circle'`、`'rect'`、`'roundRect'`、`'triangle'`、`'diamond'`、`'pin'`、`'arrow'`。使用内置形状时,只要将 `symbol` 属性指定为形状名称对应的字符串即可。\n\n如果想要将图形指定为任意的图片,以 `'image://'` 开头,后面跟图片的绝对或相对地址。形如:`'image://http://example.com/xxx.png'` 或 `'image://./xxx.png'`。\n\n除此之外,还支持 SVG 的路径作为矢量图形,将 `symbol` 设置为以 `'path://'` 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 `SVG` 文件,找到形如 `<path d=\"M… L…\"></path>` 的路径,将 `d` 的值添加在 `'path://'` 后即可。\n\n下面,我们展示一个将图形设置为矢量爱心形状的方式。\n\n首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:\n\n```xml\n<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n```\n\n在 ECharts 的 `symbol` 配置项中,我们使用 `d` 的值作为路径。\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, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n```\n\n这样,就能得到爱心形状的图形作为点的形状了。\n\n### 图形的大小\n\n图形大小可以使用 [`series.symbolSize`](https://echarts.apache.org/option.html#series-scatter.symbolSize) 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。\n\n除此之外,它还可以是一个回调函数,其参数格式为:\n\n```ts\n(value: Array | number, params: Object) => number | Array;\n```\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, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n```\n","dir":"/zh/application/chart-types/scatter","path":"/zh/application/chart-types/scatter/basic-scatter","extension":".md","createdAt":"2021-06-04T12:26:37.922Z","updatedAt":"2021-06-04T12:26:37.922Z","meta":{"version":0,"revision":0,"created":1627897109561},"$loki":120},{"slug":"smooth-line","toc":[],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"平滑曲线图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"平滑曲线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"smooth"}]},{"type":"text","value":" 属性设置为 "},{"type":"element","tag":"code","props":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" 即可。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["nuxt-content-highlight"]},"children":[{"type":"element","tag":"md-live","props":{"lang":"js","layout":"tb"},"children":[{"type":"text","value":"option = {\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"}]}]}]},"text":"# 平滑曲线图\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","dir":"/zh/application/chart-types/line","path":"/zh/application/chart-types/line/smooth-line","extension":".md","createdAt":"2021-06-04T12:26:37.921Z","updatedAt":"2021-07-21T12:30:39.873Z","meta":{"version":0,"revision":0,"created":1627897109568},"$loki":121},{"slug":"grouped-bar","toc":[{"id":"分组柱状-\b-图的使用建议","depth":2,"text":"分组柱状 \b 图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"分组柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"分组柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"分组柱状图也被称为聚集柱状图。当两个或多个数据序列并排显示并在同一轴上的类别下分组时,将使用分组柱状图。相当于包含带有两个或更多图表的简单的条形图。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xr13FAH54f&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"分组柱状图通常是用于将包含相同变量或类别的几个分组进行比较。像柱状图一样,每个柱的长度用于显示类别的数值,每个数据系列被分配一个单独的颜色或相同色系的不同饱和度,以区分它们,每组数据之间相互间隔并进行对比。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"分组柱状-\b-图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%88%86%E7%BB%84%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"分组柱状 \b 图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、如果每个分组中的系列过多,数据的阅读难度就会越增加。因此,不建议每个分组中包含过多的系列。在系列较多时,可考虑使用堆叠柱状图。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、建议每两个分组之间的间距大于组内不同系列之间的间距,以免造成视觉上错误的归类和区分。"}]}]},"text":"# 分组柱状图\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 src=\"https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3\">\n</iframe>\n\n## 分组柱状 \b 图的使用建议\n\n1、如果每个分组中的系列过多,数据的阅读难度就会越增加。因此,不建议每个分组中包含过多的系列。在系列较多时,可考虑使用堆叠柱状图。\n\n2、建议每两个分组之间的间距大于组内不同系列之间的间距,以免造成视觉上错误的归类和区分。\n","dir":"/zh/best-practice/specification/bar","path":"/zh/best-practice/specification/bar/grouped-bar","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-06-04T12:26:37.924Z","meta":{"version":0,"revision":0,"created":1627897109570},"$loki":122},{"slug":"stacked-bar","toc":[{"id":"堆叠柱状-\b-图的使用建议","depth":2,"text":"堆叠柱状 \b 图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"堆叠柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"堆叠柱状图是柱状图的扩展。但区别在于,柱状图的数据值为并行排列,堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量,以及该分类包含的每个小分类的大小及占比。因此,非常适合处理部分与整体的关系。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"与饼图显示单个部分到整体的关系不同的是,堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计,你可以用柱状图或饼图来展示。但是,当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时,就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图,不仅能显示每个项目的总人数,还能展示出每个项目中的一部分与整体的关系。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"堆叠柱状-\b-图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠柱状 \b 图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、遵循基本的柱状图使用原则。为了使图表易于理解,请避免使用太多颜色,不要刻意展示被截断的数据误导读者。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别,最多不要超过 6 个,因为太多的数据系列会使数据的阅读和分辨变得非常困难。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、由于要分析部分数据在整体中的占比,因此要避免用堆叠柱状图展示包含负数的数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"5、大多数的堆叠柱状图都是垂直绘制的,但是如果你的数据标签特别长时,考虑更好地展示效果,可以选择使用水平堆叠的方式。"}]}]},"text":"# 堆叠柱状图\n\n堆叠柱状图是柱状图的扩展。但区别在于,柱状图的数据值为并行排列,堆叠柱图则是一个个叠加起来的。它可以展示每一个分类的总量,以及该分类包含的每个小分类的大小及占比。因此,非常适合处理部分与整体的关系。\n\n与饼图显示单个部分到整体的关系不同的是,堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计,你可以用柱状图或饼图来展示。但是,当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时,就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图,不仅能显示每个项目的总人数,还能展示出每个项目中的一部分与整体的关系。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz\">\n</iframe>\n\n## 堆叠柱状 \b 图的使用建议\n\n1、遵循基本的柱状图使用原则。为了使图表易于理解,请避免使用太多颜色,不要刻意展示被截断的数据误导读者。\n\n2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。\n\n3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别,最多不要超过 6 个,因为太多的数据系列会使数据的阅读和分辨变得非常困难。\n\n4、由于要分析部分数据在整体中的占比,因此要避免用堆叠柱状图展示包含负数的数据。\n\n5、大多数的堆叠柱状图都是垂直绘制的,但是如果你的数据标签特别长时,考虑更好地展示效果,可以选择使用水平堆叠的方式。\n","dir":"/zh/best-practice/specification/bar","path":"/zh/best-practice/specification/bar/stacked-bar","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-06-04T12:26:37.924Z","meta":{"version":0,"revision":0,"created":1627897109571},"$loki":123},{"slug":"area","toc":[{"id":"面积图的使用建议","depth":2,"text":"面积图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"区域面积折线图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E6%8A%98%E7%BA%BF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"区域面积折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"\b 面积图又叫区域图,与折线图很相近,都可以用来展示随着连续时间的推移数据的变化趋势。区别在于,面积图在折线与类别数据的水平轴(X 轴)之间填充颜色或者纹理,形成一个面表示数据体积。相对于折线而言,被填充的区域可以更好的引起人们对总值趋势的注意,所以面积图主要用于传达趋势的大小,而不是确切的单个数据值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=area-simple"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"面积图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"面积图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、面积图要用填充区域来展示数据,当图表上有多个图层时,要尽量确保数据不要重叠。如果无法避免重叠,可以通过将颜色和透明度设置为适当的值,使重叠的数据图可以变得可读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、面积图适合用来展示二到三组数据,建议最多不要展示超过四组数据系列,否则就如下方错误示例,数据系列过多而导致无法辨识数据,因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、当数据值相距很远时,区域是模糊不清的,此时 \b 不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别,乍一看,很可能会误以为图表上显示三种不同的颜色。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"},"children":[]}]},"text":"# 区域面积折线图\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、面积图要用填充区域来展示数据,当图表上有多个图层时,要尽量确保数据不要重叠。如果无法避免重叠,可以通过将颜色和透明度设置为适当的值,使重叠的数据图可以变得可读。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M\"></iframe>\n\n2、面积图适合用来展示二到三组数据,建议最多不要展示超过四组数据系列,否则就如下方错误示例,数据系列过多而导致无法辨识数据,因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\"></iframe>\n\n3、当数据值相距很远时,区域是模糊不清的,此时 \b 不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别,乍一看,很可能会误以为图表上显示三种不同的颜色。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1\"></iframe>\n","dir":"/zh/best-practice/specification/line","path":"/zh/best-practice/specification/line/area","extension":".md","createdAt":"2021-06-04T12:26:37.925Z","updatedAt":"2021-06-04T12:26:37.925Z","meta":{"version":0,"revision":0,"created":1627897109573},"$loki":124},{"slug":"basic-bar","toc":[{"id":"柱状图的使用建议","depth":2,"text":"柱状图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基础柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9F%BA%E7%A1%80%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"柱状图是最常见的图表类型,通过使用水平或垂直方向 \b 柱子的高度来显示不同类别的数值,其中柱状图的一个轴显示比较的类别,而另一个轴代表对应的数值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"纵向柱状图的柱是垂直方向的,横向柱状图的柱是水平方向的,又称条形图。条形图与横向柱状图表达数据的形式是一样的,不过,当图表的数据标签很长或者有超过 10 个项目进行比较时,横向柱状图会无法完全显示完标签,或者只能倾斜展示,影响美观。因此当数据标签过长时,选择用条形图可以获得更好的展示效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"柱状图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"柱状图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、避免使用太多颜色,一般情况一个柱状图(条形图)表示一组相同的度量,所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时,可以使用对比色或者变化色调来突出显示有意义的数据点。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时,用户的视觉可能会集中在两个柱中间的负空间,而这里是不承载任何数据的。合理的宽度和间隙应该是 \b 单个柱子的宽度不小于柱间间隙的两倍。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、Y 轴数据应该从 0 基线开始,以恰当地反映数值。如果展示的是被截断的数据,那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍,而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bar03.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、对多个数据系列排序时,如果不涉及到日期等特定数据,最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布,例如按照数量从多到少来对数据进行排序,也可以按照字母顺序等来排布。总之,按照逻辑排序可以一定程度上引导人们更好地阅读数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"5、一般情况下不建议使用三维柱状图,与三维饼图一样,对于数据传达不太精准,甚至还不得不猜测哪个才是数据的顶端。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bar04.jpg"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"# 基础柱状图\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-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz\">\n</iframe>\n\n## 柱状图的使用建议\n\n1、避免使用太多颜色,一般情况一个柱状图(条形图)表示一组相同的度量,所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时,可以使用对比色或者变化色调来突出显示有意义的数据点。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef\">\n</iframe>\n\n2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时,用户的视觉可能会集中在两个柱中间的负空间,而这里是不承载任何数据的。合理的宽度和间隙应该是 \b 单个柱子的宽度不小于柱间间隙的两倍。\n\n3、Y 轴数据应该从 0 基线开始,以恰当地反映数值。如果展示的是被截断的数据,那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍,而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bar03.jpg\">\n</img>\n\n4、对多个数据系列排序时,如果不涉及到日期等特定数据,最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布,例如按照数量从多到少来对数据进行排序,也可以按照字母顺序等来排布。总之,按照逻辑排序可以一定程度上引导人们更好地阅读数据。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M\">\n</iframe>\n\n5、一般情况下不建议使用三维柱状图,与三维饼图一样,对于数据传达不太精准,甚至还不得不猜测哪个才是数据的顶端。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bar04.jpg\">\n</img>\n","dir":"/zh/best-practice/specification/bar","path":"/zh/best-practice/specification/bar/basic-bar","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109575},"$loki":125},{"slug":"basic-line","toc":[{"id":"折线图的使用建议","depth":2,"text":"折线图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"基础折线图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"基础折线图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"折线图主要用来展示数据相随着时间推移的趋势或变化。折线图非常适合用于展示一个连续的二维数据,如某网站访问人数或商品销量价格的波动。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xB1kG1rLEG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"折线图除了展示某个事情发展的趋势,还可以用来比较多个不同的数据序列。如下图,可以通过对比同时间段的三种商品的销量,分析哪一种商品的销量最好。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1"},"children":[{"type":"text","value":">\n "}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"折线图是将数据点之间用线连接起来绘制成的图表。为了追求美观或特殊的效果,还可以如上图将点与点之间用曲线连接,这种图又叫曲线图或样条图样条。样条图与折线图用法相同,区别是数据点之间的连线使用曲线绘制。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"折线图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%8A%98%E7%BA%BF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"折线图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、使用实线绘制数据线,首先要保证能够的区分数据线和坐标轴线,并且要尽力要所有的数据清晰可识别。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、建议不要绘制 4 条以上的折线,如下图错误的示例,线都折叠在一起并且又没有明显的对比,整张图表就会混乱并难以阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、不建议使用过多的装饰来区分图表,图例虽然可以帮助区分不同数据系列,但如下图使用过多种类的图例有时会让用户分心。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、展示折线图的数据时,要避免刻意的歪曲趋势。如下图,左图过于扁平化掩盖了想传达的信息,右图过于夸大趋势。要根据展示数据波动的参考单位,做有意义的波动分析。正确的数据高度是线约占 Y 轴高度的 2/3。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/line/line01.jpg"},"children":[]}]}]},"text":"# 基础折线图\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-lite.html?cid=xSkBiMSU4M&v=1\">>\n </iframe>\n\n折线图是将数据点之间用线连接起来绘制成的图表。为了追求美观或特殊的效果,还可以如上图将点与点之间用曲线连接,这种图又叫曲线图或样条图样条。样条图与折线图用法相同,区别是数据点之间的连线使用曲线绘制。\n\n## 折线图的使用建议\n\n1、使用实线绘制数据线,首先要保证能够的区分数据线和坐标轴线,并且要尽力要所有的数据清晰可识别。\n\n2、建议不要绘制 4 条以上的折线,如下图错误的示例,线都折叠在一起并且又没有明显的对比,整张图表就会混乱并难以阅读。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1\">\n</iframe>\n\n3、不建议使用过多的装饰来区分图表,图例虽然可以帮助区分不同数据系列,但如下图使用过多种类的图例有时会让用户分心。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1\">\n</iframe>\n\n4、展示折线图的数据时,要避免刻意的歪曲趋势。如下图,左图过于扁平化掩盖了想传达的信息,右图过于夸大趋势。要根据展示数据波动的参考单位,做有意义的波动分析。正确的数据高度是线约占 Y 轴高度的 2/3。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/line/line01.jpg\"></img>\n","dir":"/zh/best-practice/specification/line","path":"/zh/best-practice/specification/line/basic-line","extension":".md","createdAt":"2021-06-04T12:26:37.925Z","updatedAt":"2021-06-04T12:26:37.931Z","meta":{"version":0,"revision":0,"created":1627897109576},"$loki":126},{"slug":"stacked-area","toc":[{"id":"堆叠面积图的使用建议","depth":2,"text":"堆叠面积图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"堆叠面积图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠面积图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"堆积面积图是一种特殊的面积图,可以用来比较在一个区间内的多个变量。堆叠面积图和面积图的区别在于,堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的,也就是每度量一行就要填满行与行之间的区域。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"如果有多个数据系列,并想分析每个类别的部分到整体的关系,并展现部分量对于总量的贡献时,使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"有两种不同的堆积面积图类型:"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"b","props":{},"children":[{"type":"text","value":"传统的堆积面积图"}]},{"type":"text","value":":直接使用原始值堆叠,显示整个过程如何变化。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"b","props":{},"children":[{"type":"text","value":"百分比堆积面积图"}]},{"type":"text","value":":百分比堆积显示不同部分之间的关 系如何随时间而变化。其中累积的总数不重要,重要的是显示出类别分布在整体中的作用。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"堆叠面积图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%A0%86%E5%8F%A0%E9%9D%A2%E7%A7%AF%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"堆叠面积图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、图表有重叠的数据时,类别数量越多,重叠越多,因此可见度越低。如果使用面积图(如下示例)时会因为系列的重叠而无法阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"那同样的数据,换成使用堆叠面积图展示,则相对更容易阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"div","props":{"className":["article-look-outside"]},"children":[{"type":"text","value":"\n\t"},{"type":"element","tag":"div","props":{"className":["article-look-inside"],"style":"padding-bottom:50%"},"children":[{"type":"text","value":"\n\t "},{"type":"element","tag":"iframe","props":{"className":["article-look-content"],"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"},"children":[{"type":"text","value":"\n\t "}]},{"type":"text","value":"\n\t"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果,但依然不建议堆叠面积图中包含过多数据系列,最好不要多于 7 个,以免数据难以辨识。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、堆积面积图要展示部分和整体之间的关系,所以不能用于包含负值的数据的展示。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、建议堆叠面积图中把变化量较大的数据放在上方,变化量较小的数据放在下方会获得更加的展示效果。"}]}]},"text":"# 堆叠面积图\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>:直接使用原始值堆叠,显示整个过程如何变化。\n- <b>百分比堆积面积图</b>:百分比堆积显示不同部分之间的关 系如何随时间而变化。其中累积的总数不重要,重要的是显示出类别分布在整体中的作用。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf\">\n</iframe>\n\n## 堆叠面积图的使用建议\n\n1、图表有重叠的数据时,类别数量越多,重叠越多,因此可见度越低。如果使用面积图(如下示例)时会因为系列的重叠而无法阅读。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\">\n</iframe>\n\n那同样的数据,换成使用堆叠面积图展示,则相对更容易阅读。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf\">\n</iframe>\n\n<div class=\"article-look-outside\">\n\t<div class=\"article-look-inside\" style=\"padding-bottom:50%\">\n\t <iframe class=\"article-look-content\"\n\t src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M\">\n\t </iframe>\n\t</div>\n</div>\n\n2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果,但依然不建议堆叠面积图中包含过多数据系列,最好不要多于 7 个,以免数据难以辨识。\n\n3、堆积面积图要展示部分和整体之间的关系,所以不能用于包含负值的数据的展示。\n\n4、建议堆叠面积图中把变化量较大的数据放在上方,变化量较小的数据放在下方会获得更加的展示效果。\n","dir":"/zh/best-practice/specification/line","path":"/zh/best-practice/specification/line/stacked-area","extension":".md","createdAt":"2021-06-04T12:26:37.931Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897109583},"$loki":127},{"slug":"bubble","toc":[{"id":"气泡图的使用建议","depth":2,"text":"气泡图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"气泡图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%B0%94%E6%B3%A1%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"气泡图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"气泡图是显示变量之间相关性的一种图表。与散点图类似。在直角坐标系中显示数据的两个变量( X 和 Y 轴)之间的关系,数据显示为点的集合。与散点图不同的是,气泡图是一个多变量图,它增加了第三个数值即气泡大小的变量,在气泡图中,较大的气泡表示较大的值。可以通过气泡的位置分布和大小比例,来分析数据的规律。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHkRpZuY4z&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"气泡图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%B0%94%E6%B3%A1%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"气泡图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、当数据具有 3 个序列、特征及相关值,使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点,气泡的大小说明了提交的代码量。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注,红色代表北京,黄色代表上海、蓝色代表广州,可以直观地对比分析三地的空气质量情况。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、气泡图还经常用于和地图结合,其中 x 轴和 y 轴是经度和纬度的数据定位,气泡的大小可以表明该位置数量的多少。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population"},"children":[{"type":"text","value":"\n"}]}]},"text":"# 气泡图\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 个序列、特征及相关值,使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点,气泡的大小说明了提交的代码量。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard\">\n</iframe>\n\n2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注,红色代表北京,黄色代表上海、蓝色代表广州,可以直观地对比分析三地的空气质量情况。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1\">\n</iframe>\n\n3、气泡图还经常用于和地图结合,其中 x 轴和 y 轴是经度和纬度的数据定位,气泡的大小可以表明该位置数量的多少。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population\">\n</iframe>\n","dir":"/zh/best-practice/specification/scatter","path":"/zh/best-practice/specification/scatter/bubble","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897109586},"$loki":128},{"slug":"bi-directional-bar","toc":[{"id":"双向柱状-\b-图的使用建议","depth":2,"text":"双向柱状 \b 图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"双向柱状图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%8F%8C%E5%90%91%E6%9F%B1%E7%8A%B6%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"双向柱状图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"双向柱状图多用于展示包含相反含义的数据的对比。其中图表的一个轴显示正在比较的类别,而另一轴代表对应的刻度值。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"双向柱状图一般用于正负两份相反数据的对比。例如一周内个人收入和支出的统计,其中收入为正数,支出为负数。使用双向柱状图可以很明确的对收入和支出做出对比,并能从单个系列中分析收入和支出的数值及波动。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"双向柱状图可分为垂直方向的双向柱状图(如上图)和水平方向的双向柱状图(又叫正负条形图,如下图),例如一个客户满意度的调查数据分析中,有正面评价和负面评价,这很适合用正负条形图,所有数据在中间对齐,正面的评价数据分布在右侧,负面的评价数据分布在左侧。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"双向柱状-\b-图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E5%8F%8C%E5%90%91%E6%9F%B1%E7%8A%B6-%08-%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"双向柱状 \b 图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、双向柱状图正向和负向的数据具有对比性,因此一般选用差值较大的具有对比性的颜色。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、永远不要在 0 基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子,以免和常识违背造成误解。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bi-directional-bar01.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、双向柱状图多用于展示含相反含义的数据,因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图,一侧绘制男性的数据,另一侧绘制女性的数据,只是单纯的两类不同数据的对比,并不存在负数。那么,此时将两个数据序列绘制成一个分组柱状图是更合适的。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/bar/bi-directional-bar02.jpg"},"children":[]},{"type":"text","value":"\n"}]}]},"text":"# 双向柱状图\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双向柱状图可分为垂直方向的双向柱状图(如上图)和水平方向的双向柱状图(又叫正负条形图,如下图),例如一个客户满意度的调查数据分析中,有正面评价和负面评价,这很适合用正负条形图,所有数据在中间对齐,正面的评价数据分布在右侧,负面的评价数据分布在左侧。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z\">\n</iframe>\n\n## 双向柱状 \b 图的使用建议\n\n1、双向柱状图正向和负向的数据具有对比性,因此一般选用差值较大的具有对比性的颜色。\n\n2、永远不要在 0 基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子,以免和常识违背造成误解。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bi-directional-bar01.jpg\">\n</img>\n\n3、双向柱状图多用于展示含相反含义的数据,因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图,一侧绘制男性的数据,另一侧绘制女性的数据,只是单纯的两类不同数据的对比,并不存在负数。那么,此时将两个数据序列绘制成一个分组柱状图是更合适的。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/bar/bi-directional-bar02.jpg\">\n</img>\n","dir":"/zh/best-practice/specification/bar","path":"/zh/best-practice/specification/bar/bi-directional-bar","extension":".md","createdAt":"2021-06-04T12:26:37.924Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109592},"$loki":129},{"slug":"basic-pie","toc":[{"id":"饼图的使用建议","depth":2,"text":"饼图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"饼图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%A5%BC%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"饼图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"饼图主要用于展现不同类别数值相对于总数的占比情况。图中每个分块(扇区)的弧长表示该类别的占比大小,所有分块数据总和为 100%。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"虽然饼图能快速有效地展示数据的比例分布,并被广泛用于各个领域,但是饼图及其变形图表一直是比较受争议的图表。因此,我们在使用饼图及其变形图表时一定要谨慎并避免走进误区。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"饼图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E9%A5%BC%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"饼图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、饼图适合用来展示单一维度数据的占比,要求其数值中没有零或负值,并确保各分块占比总和为 100%。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、我们很难比较一个分块过多的饼图的数据,建议尽量将饼图分块数量控制在五个以内。当数据类别较多时,可以把较小或不重要的数据合并成第五个分块,并命名为\"其它\"。如果各类别都必须全部展示,此时选择柱状图或堆积柱状图或许更合适。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie02.jpg"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、饼图不适合被用于精确数据的比较,因此当各类别数据占比较接近时(如下左图),我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图(如下右图)来获取更好的展示效果。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie03.jpg"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时,建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块,有效的强调其重要性。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"其余的数据分块有两种建议,一种是按照数据大小依次顺时针排列,另一种是在 12 点钟的左边绘制第二大的分块,其余的分块按照逆时针排列,最小的分块放在底部。如下图所示。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie01.jpg"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"按照数据大小区别顺序,不仅符合用户的视觉习惯,也更易于数据的识别和比较。当然基于这个原理,我们也可以把需要强调的最重要的部分(不一定是最大的部分)放在最突出重要的位置。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度,有时太多的装饰会让用户理解数据时分心。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"6、三维的饼图歪曲了各分块相对于整体的比例关系,会造成错误及理解上的困扰。因此不建议使用 3D 饼图。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/pie/pie04.jpg"},"children":[]}]},"text":"# 饼图\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、我们很难比较一个分块过多的饼图的数据,建议尽量将饼图分块数量控制在五个以内。当数据类别较多时,可以把较小或不重要的数据合并成第五个分块,并命名为\"其它\"。如果各类别都必须全部展示,此时选择柱状图或堆积柱状图或许更合适。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/pie/pie02.jpg\" />\n\n3、饼图不适合被用于精确数据的比较,因此当各类别数据占比较接近时(如下左图),我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图(如下右图)来获取更好的展示效果。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/pie/pie03.jpg\" />\n\n4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时,建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块,有效的强调其重要性。\n\n其余的数据分块有两种建议,一种是按照数据大小依次顺时针排列,另一种是在 12 点钟的左边绘制第二大的分块,其余的分块按照逆时针排列,最小的分块放在底部。如下图所示。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/pie/pie01.jpg\" />\n\n按照数据大小区别顺序,不仅符合用户的视觉习惯,也更易于数据的识别和比较。当然基于这个原理,我们也可以把需要强调的最重要的部分(不一定是最大的部分)放在最突出重要的位置。\n\n5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度,有时太多的装饰会让用户理解数据时分心。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\n src=\"https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1\">\n</iframe>\n\n6、三维的饼图歪曲了各分块相对于整体的比例关系,会造成错误及理解上的困扰。因此不建议使用 3D 饼图。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/pie/pie04.jpg\" />\n","dir":"/zh/best-practice/specification/pie","path":"/zh/best-practice/specification/pie/basic-pie","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-06-04T12:26:37.932Z","meta":{"version":0,"revision":0,"created":1627897109594},"$loki":130},{"slug":"scatter","toc":[{"id":"散点图的使用建议","depth":2,"text":"散点图的使用建议"}],"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"散点图"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%95%A3%E7%82%B9%E5%9B%BE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"散点图"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"散点图在直角坐标系显示数据的两个变量(X 和 Y 轴)之间的关系,数据显示为点的集合,适合用于在不考虑时间的情况下比较大量的数据点。散点图通常用来识别两个变量之间的相关性或用来观察他们的关系,从而发现某种趋势,对于查找异常值或理解数据分布也很有效。如下图某个班级学生身高和体重的分布状况。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xSkCyUwKNG&v=1"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"散点图会显示不同类型的相关性,相关性即变量之间的关系。通常有正相关、负相关、不相关三种相关性。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"ul","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"正相关:数据点从低 x、y 值的点到高 x、y 值,一个变量增加,另一个变量增加。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"负相关:数据点从高 x、y 值的点到低 x、y 值,一个变量增加,另一个变量减少。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"不相关:数据没有明显的方向性,一个变量变化对另一个没有影响。"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"img","props":{"max-width":"830","width":"100%","height":"100%","src":"images/design/scatter/scatter5.jpg"},"children":[]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"需要注意的是,散点图能够有效的说明两个变量之间的相关性,但是并不能有力地证明 \b 其中存在因果关系。例如广告投放量和点击率是正相关的,但是不能说点击率高一定是因为广告投放量多造成的。但是,如果有明显的正相关性,就有足够的理由去增加投放量,然后再去观察数据。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"h2","props":{"id":"散点图的使用建议"},"children":[{"type":"element","tag":"a","props":{"ariaHidden":"true","href":"#%E6%95%A3%E7%82%B9%E5%9B%BE%E7%9A%84%E4%BD%BF%E7%94%A8%E5%BB%BA%E8%AE%AE","tabIndex":-1},"children":[{"type":"element","tag":"span","props":{"className":["icon","icon-link"]},"children":[]}]},{"type":"text","value":"散点图的使用建议"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"1、如果一个散点图没有显示变量之间的任何关系,那么或许该图表类型不是此数据的最佳选择。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"2、如果数据包含不同系列,可以给不同系列使用不同的颜色,例如蓝色代表男性,红色代表女性,并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线,可以更好的理解数据的分布情况,如图中女生体重高于平均值的比低于平均值的少。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"iframe","props":{"max-width":"830","width":"100%","height":400,"src":"https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM"},"children":[{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"在观察两个变量之间的关系时,趋势线是非常有用的,趋势线的形状走向解释了两个变量之间的关系类型,还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条,以免干扰正常的数据的阅读。"}]},{"type":"text","value":"\n"},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"3、散点图只有有足够多的数据点,并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性,那么绘制一个很空的散点图和不相关的散点图都是没有意义的。"}]}]},"text":"# 散点图\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 值,一个变量增加,另一个变量增加。\n\n- 负相关:数据点从高 x、y 值的点到低 x、y 值,一个变量增加,另一个变量减少。\n\n- 不相关:数据没有明显的方向性,一个变量变化对另一个没有影响。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\"\nsrc=\"images/design/scatter/scatter5.jpg\">\n</img>\n\n需要注意的是,散点图能够有效的说明两个变量之间的相关性,但是并不能有力地证明 \b 其中存在因果关系。例如广告投放量和点击率是正相关的,但是不能说点击率高一定是因为广告投放量多造成的。但是,如果有明显的正相关性,就有足够的理由去增加投放量,然后再去观察数据。\n\n## 散点图的使用建议\n\n1、如果一个散点图没有显示变量之间的任何关系,那么或许该图表类型不是此数据的最佳选择。\n\n2、如果数据包含不同系列,可以给不同系列使用不同的颜色,例如蓝色代表男性,红色代表女性,并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线,可以更好的理解数据的分布情况,如图中女生体重高于平均值的比低于平均值的少。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM\">\n</iframe>\n\n在观察两个变量之间的关系时,趋势线是非常有用的,趋势线的形状走向解释了两个变量之间的关系类型,还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条,以免干扰正常的数据的阅读。\n\n3、散点图只有有足够多的数据点,并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性,那么绘制一个很空的散点图和不相关的散点图都是没有意义的。\n","dir":"/zh/best-practice/specification/scatter","path":"/zh/best-practice/specification/scatter/scatter","extension":".md","createdAt":"2021-06-04T12:26:37.932Z","updatedAt":"2021-07-29T06:23:03.480Z","meta":{"version":0,"revision":0,"created":1627897109602},"$loki":131}],"idIndex":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131],"maxId":131,"_dirty":true,"_nestedProperties":[],"transactional":false,"asyncListeners":false,"disableMeta":false,"disableChangesApi":true,"disableDeltaChangesApi":true,"cloneObjects":false,"cloneMethod":"deep","changes":[],"_fullTextSearch":{"ii":{"title":{"_store":true,"_optimizeChanges":true,"docCount":12,"docStore":[[1,{"fieldLength":2}],[2,{"fieldLength":1}],[3,{"fieldLength":1}],[4,{"fieldLength":1}],[5,{"fieldLength":2}],[6,{"fieldLength":2}],[8,{"fieldLength":1}],[9,{"fieldLength":1}],[10,{"fieldLength":1}],[11,{"fieldLength":1}],[12,{"fieldLength":1}],[13,{"fieldLength":1}]],"totalFieldLength":15,"root":{"k":[103,115,98,99,97,112,101,104,24555,20837,27010,24212,26368,32534],"v":[{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[1,1]]}}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[1,1]]}}]}]}]}]}]}]},{"k":[97,101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[2,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[5,1]]}}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[3,1]]}}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[4,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[5,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[6,1]]}}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[6,1]]}}]}]}]}]}]}]}]},{"k":[36895],"v":[{"k":[19978],"v":[{"k":[25163],"v":[{"d":{"df":1,"dc":[[8,1]]}}]}]}]},{"k":[38376],"v":[{"k":[31687],"v":[{"d":{"df":1,"dc":[[9,1]]}}]}]},{"k":[24565],"v":[{"k":[31687],"v":[{"d":{"df":1,"dc":[[10,1]]}}]}]},{"k":[29992],"v":[{"k":[31687],"v":[{"d":{"df":1,"dc":[[11,1]]}}]}]},{"k":[20339],"v":[{"k":[23454],"v":[{"k":[36341],"v":[{"d":{"df":1,"dc":[[12,1]]}}]}]}]},{"k":[36753],"v":[{"k":[26412],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"d":{"df":1,"dc":[[13,1]]}}]}]}]}]}]}},"description":{"_store":true,"_optimizeChanges":true,"docCount":0,"docStore":[],"totalFieldLength":0,"root":{}},"slug":{"_store":true,"_optimizeChanges":true,"docCount":131,"docStore":[[0,{"fieldLength":1}],[1,{"fieldLength":1}],[2,{"fieldLength":1}],[3,{"fieldLength":1}],[4,{"fieldLength":1}],[5,{"fieldLength":1}],[6,{"fieldLength":1}],[7,{"fieldLength":1}],[8,{"fieldLength":1}],[9,{"fieldLength":1}],[10,{"fieldLength":1}],[11,{"fieldLength":1}],[12,{"fieldLength":1}],[13,{"fieldLength":1}],[14,{"fieldLength":1}],[15,{"fieldLength":1}],[16,{"fieldLength":1}],[17,{"fieldLength":1}],[18,{"fieldLength":1}],[19,{"fieldLength":1}],[20,{"fieldLength":1}],[21,{"fieldLength":1}],[22,{"fieldLength":1}],[23,{"fieldLength":1}],[24,{"fieldLength":1}],[25,{"fieldLength":1}],[26,{"fieldLength":1}],[27,{"fieldLength":1}],[28,{"fieldLength":1}],[29,{"fieldLength":1}],[30,{"fieldLength":1}],[31,{"fieldLength":1}],[32,{"fieldLength":1}],[33,{"fieldLength":1}],[34,{"fieldLength":1}],[35,{"fieldLength":1}],[36,{"fieldLength":1}],[37,{"fieldLength":1}],[38,{"fieldLength":1}],[39,{"fieldLength":1}],[40,{"fieldLength":1}],[41,{"fieldLength":1}],[42,{"fieldLength":1}],[43,{"fieldLength":1}],[44,{"fieldLength":1}],[45,{"fieldLength":1}],[46,{"fieldLength":1}],[47,{"fieldLength":1}],[48,{"fieldLength":1}],[49,{"fieldLength":1}],[50,{"fieldLength":1}],[51,{"fieldLength":1}],[52,{"fieldLength":1}],[53,{"fieldLength":1}],[54,{"fieldLength":1}],[55,{"fieldLength":1}],[56,{"fieldLength":1}],[57,{"fieldLength":1}],[58,{"fieldLength":1}],[59,{"fieldLength":1}],[60,{"fieldLength":1}],[61,{"fieldLength":1}],[62,{"fieldLength":1}],[63,{"fieldLength":1}],[64,{"fieldLength":1}],[65,{"fieldLength":1}],[66,{"fieldLength":1}],[67,{"fieldLength":1}],[68,{"fieldLength":1}],[69,{"fieldLength":1}],[70,{"fieldLength":1}],[71,{"fieldLength":1}],[72,{"fieldLength":1}],[73,{"fieldLength":1}],[74,{"fieldLength":1}],[75,{"fieldLength":1}],[76,{"fieldLength":1}],[77,{"fieldLength":1}],[78,{"fieldLength":1}],[79,{"fieldLength":1}],[80,{"fieldLength":1}],[81,{"fieldLength":1}],[82,{"fieldLength":1}],[83,{"fieldLength":1}],[84,{"fieldLength":1}],[85,{"fieldLength":1}],[86,{"fieldLength":1}],[87,{"fieldLength":1}],[88,{"fieldLength":1}],[89,{"fieldLength":1}],[90,{"fieldLength":1}],[91,{"fieldLength":1}],[92,{"fieldLength":1}],[93,{"fieldLength":1}],[94,{"fieldLength":1}],[95,{"fieldLength":1}],[96,{"fieldLength":1}],[97,{"fieldLength":1}],[98,{"fieldLength":1}],[99,{"fieldLength":1}],[100,{"fieldLength":1}],[101,{"fieldLength":1}],[102,{"fieldLength":1}],[103,{"fieldLength":1}],[104,{"fieldLength":1}],[105,{"fieldLength":1}],[106,{"fieldLength":1}],[107,{"fieldLength":1}],[108,{"fieldLength":1}],[109,{"fieldLength":1}],[110,{"fieldLength":1}],[111,{"fieldLength":1}],[112,{"fieldLength":1}],[113,{"fieldLength":1}],[114,{"fieldLength":1}],[115,{"fieldLength":1}],[116,{"fieldLength":1}],[117,{"fieldLength":1}],[118,{"fieldLength":1}],[119,{"fieldLength":1}],[120,{"fieldLength":1}],[121,{"fieldLength":1}],[122,{"fieldLength":1}],[123,{"fieldLength":1}],[124,{"fieldLength":1}],[125,{"fieldLength":1}],[126,{"fieldLength":1}],[127,{"fieldLength":1}],[128,{"fieldLength":1}],[129,{"fieldLength":1}],[130,{"fieldLength":1}]],"totalFieldLength":131,"root":{"k":[103,112,109,99,115,111,116,104,100,105,97,108,101,118,114,119,102,98,53],"v":[{"k":[101,97,114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[67,1],[79,1]]}}]}]}]},{"k":[111],"v":[{"k":[117],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[99,1],[121,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115,108],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":12,"dc":[[1,1],[2,1],[3,1],[4,1],[5,1],[6,1],[8,1],[9,1],[10,1],[11,1],[12,1],[13,1]]}}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[87,1],[108,1]]}}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[98],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[14,1],[20,1],[21,1]]}}]}]}]}]}]},{"k":[111,97,104],"v":[{"k":[111,110,108],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[15,1],[22,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[19,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[69,1],[83,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[118],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101,116,109,99],"v":[{"k":[114],"v":[{"k":[105,118],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[16,1],[27,1]]}}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[57,1],[74,1]]}}]}]}]}]},{"k":[121,97,101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[99],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[98,108,97],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[84,1],[98,1],[111,1],[122,1]]}}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[93,1],[118,1]]}}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[89,1],[120,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[107,1],[130,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[17,1],[24,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":2,"dc":[[18,1],[25,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[112],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]}]},{"k":[111,114,97,121],"v":[{"k":[119,117],"v":[{"k":[110],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[26,1],[43,1]]}}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]}]},{"k":[105,97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[39,1],[60,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[45,115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[109,110],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[29,1],[41,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[114,120],"v":[{"k":[105,101],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]},{"k":[97],"v":[{"d":{"df":2,"dc":[[100,1],[123,1]]},"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[90,1],[114,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]}]}]},{"k":[118,100],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105,53],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[102,117],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,105,97,111],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[66,1],[82,1]]}}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[97,1],[112,1]]}}]}]}]},{"k":[114,97,101],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[70,1],[91,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[110],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[68,1],[80,1]]}}]}]}]}]}]},{"k":[97,117,105],"v":[{"k":[105,115,114],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[98,108,115,112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[85,1],[101,1],[110,1],[124,1]]}}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[88,1],[104,1],[116,1],[125,1]]}}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[95,1],[106,1],[115,1],[129,1]]}}]}]}]}]}]}]},{"k":[45],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[86,1],[109,1]]}}]}]}]}]}]}]},{"k":[98],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[103,1],[127,1]]}}]}]}]}]},{"k":[45],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[105,1],[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[50],"v":[{"k":[45],"v":[{"k":[48],"v":[{"d":{"df":1,"dc":[[76,1]]}}]}]}]}]}]}},"text":{"_store":true,"_optimizeChanges":true,"docCount":103,"docStore":[[0,{"fieldLength":368}],[7,{"fieldLength":173}],[14,{"fieldLength":0}],[15,{"fieldLength":0}],[16,{"fieldLength":0}],[17,{"fieldLength":0}],[18,{"fieldLength":0}],[19,{"fieldLength":0}],[20,{"fieldLength":0}],[21,{"fieldLength":0}],[22,{"fieldLength":0}],[23,{"fieldLength":330}],[24,{"fieldLength":0}],[25,{"fieldLength":0}],[26,{"fieldLength":155}],[27,{"fieldLength":0}],[28,{"fieldLength":538}],[29,{"fieldLength":49}],[30,{"fieldLength":544}],[31,{"fieldLength":541}],[32,{"fieldLength":725}],[33,{"fieldLength":511}],[34,{"fieldLength":490}],[35,{"fieldLength":1395}],[36,{"fieldLength":1180}],[37,{"fieldLength":745}],[38,{"fieldLength":822}],[39,{"fieldLength":0}],[40,{"fieldLength":71}],[41,{"fieldLength":15}],[42,{"fieldLength":248}],[43,{"fieldLength":68}],[44,{"fieldLength":27}],[45,{"fieldLength":146}],[46,{"fieldLength":121}],[47,{"fieldLength":543}],[48,{"fieldLength":145}],[49,{"fieldLength":436}],[50,{"fieldLength":27}],[51,{"fieldLength":835}],[52,{"fieldLength":251}],[53,{"fieldLength":747}],[54,{"fieldLength":262}],[55,{"fieldLength":2857}],[56,{"fieldLength":2634}],[57,{"fieldLength":76}],[58,{"fieldLength":404}],[59,{"fieldLength":1726}],[60,{"fieldLength":0}],[61,{"fieldLength":1112}],[62,{"fieldLength":1793}],[63,{"fieldLength":2329}],[64,{"fieldLength":1357}],[65,{"fieldLength":1802}],[66,{"fieldLength":341}],[67,{"fieldLength":149}],[68,{"fieldLength":346}],[69,{"fieldLength":794}],[70,{"fieldLength":0}],[71,{"fieldLength":174}],[72,{"fieldLength":30}],[73,{"fieldLength":46}],[74,{"fieldLength":22}],[75,{"fieldLength":1005}],[76,{"fieldLength":4}],[77,{"fieldLength":327}],[78,{"fieldLength":597}],[79,{"fieldLength":21}],[80,{"fieldLength":40}],[81,{"fieldLength":816}],[82,{"fieldLength":34}],[83,{"fieldLength":189}],[84,{"fieldLength":299}],[85,{"fieldLength":776}],[86,{"fieldLength":19}],[87,{"fieldLength":7}],[88,{"fieldLength":558}],[89,{"fieldLength":80}],[90,{"fieldLength":169}],[91,{"fieldLength":0}],[92,{"fieldLength":194}],[93,{"fieldLength":159}],[94,{"fieldLength":634}],[95,{"fieldLength":372}],[96,{"fieldLength":429}],[97,{"fieldLength":98}],[98,{"fieldLength":308}],[99,{"fieldLength":187}],[100,{"fieldLength":253}],[101,{"fieldLength":357}],[102,{"fieldLength":317}],[103,{"fieldLength":227}],[104,{"fieldLength":291}],[105,{"fieldLength":275}],[106,{"fieldLength":423}],[107,{"fieldLength":401}],[108,{"fieldLength":2}],[109,{"fieldLength":6}],[110,{"fieldLength":364}],[111,{"fieldLength":71}],[112,{"fieldLength":58}],[113,{"fieldLength":169}],[114,{"fieldLength":62}],[115,{"fieldLength":190}],[116,{"fieldLength":259}],[117,{"fieldLength":93}],[118,{"fieldLength":100}],[119,{"fieldLength":264}],[120,{"fieldLength":40}],[121,{"fieldLength":22}],[122,{"fieldLength":21}],[123,{"fieldLength":32}],[124,{"fieldLength":65}],[125,{"fieldLength":45}],[126,{"fieldLength":55}],[127,{"fieldLength":42}],[128,{"fieldLength":41}],[129,{"fieldLength":58}],[130,{"fieldLength":48}]],"totalFieldLength":42473,"root":{"k":[35,103,115,97,101,100,109,119,102,105,116,110,91,104,111,99,113,96,62,98,121,106,60,47,45,112,114,54,118,61,123,39,125,108,120,50,51,49,93,117,24555,33719,25903,19978,22312,36873,25991,20851,24341,30340,25171,32472,20934,23481,20043,20026,28982,26041,23454,22522,25351,20837,20351,36825,107,42,46,34,124,52,40,122,165,48,176,55,56,53,57,44,43,41,36,63,58,37,92,33,95,23547,25216,30830,26377,22240,26412,20013,21019,25110,20363,21028,25253,22914,27169,24182,21672,31561,38750,20854,24403,23448,24120,31038,20551,29305,23433,20320,25353,22270,25552,26680,28210,26159,27880,25509,38656,25105,23545,26469,31995,32452,36890,31867,20174,39033,39029,30446,21363,21151,35814,25512,36164,30456,29256,25554,27983,36827,21457,21442,21644,24213,19968,26356,20855,25968,21487,26080,21046,36981,40664,35774,24320,29983,23646,25972,37197,23450,38500,23436,20915,36824,20316,34987,25340,26032,20869,20195,27604,24038,21491,19979,39640,25928,28155,22320,21021,33410,23558,26102,21709,30417,20107,25913,19981,38405,27491,38144,20197,22352,30452,36724,26222,8220,21051,20803,31034,20889,35821,37325,27573,21477,20998,38169,33150,38463,25511,40736,22788,25152,20256,20004,28857,21482,34920,33258,35302,21435,21462,26174,35813,27809,24847,24067,26679,20132,26681,39068,35843,35270,26368,37324,26684,20840,27492,26631,33021,20063,27599,37117,31532,29616,36830,21017,31163,12290,38,126,65289,25277,25226,29992,24180,21516,37027,38142,21407,20960,65292,21069,65288,36755,22806,65306,21478,21518,20250,20540,22810,23567,8221,32431,25805,32500,20294,32780,25490,36807,39318,22768,31616,23601,30475,37319,22823,20102,21015,21160,26144,21333,26497,38024,32447,38382,31572,27668,20687,24037,36716,24418,24207,24322,22635,30001,30334,35831,26367,24494,19988,26381,29615,23500,23383,35797,20462,26576,34429,22987,24819,24102,31890,20202,25159,22278,29366,24615,33039,23618,28040,21152,22269,8203,20989,24050,25551,20027,36148,24863,25104,25302,25193,21464,23610,26082,20301,21040,24635,28431,21319,20173,20381,31227,23427,36820,25240,26093,39292,21517,38647,30740,20877,8,26609,38452,20010,38480,21450,22534,21335,21306,31515,31354,38454,19982,25955,36335,24179,38754,32437,26465,21452,36127],"v":[{"d":{"df":102,"dc":[[0,1],[7,1],[23,1],[26,1],[28,1],[29,1],[30,1],[31,1],[32,1],[33,1],[34,1],[35,1],[36,1],[37,1],[38,1],[40,1],[41,1],[42,1],[43,1],[44,1],[45,1],[46,1],[47,1],[48,1],[49,1],[50,1],[51,1],[52,1],[53,1],[54,1],[55,1],[56,1],[57,1],[58,1],[59,1],[61,1],[62,1],[63,1],[64,1],[65,1],[66,1],[67,1],[68,1],[69,1],[71,1],[72,1],[73,1],[74,1],[75,1],[76,1],[77,1],[78,1],[79,1],[80,1],[81,1],[82,1],[83,1],[84,1],[85,1],[86,1],[87,1],[88,1],[89,1],[90,1],[92,1],[93,1],[94,1],[95,1],[96,1],[97,1],[98,1],[99,1],[100,1],[101,1],[102,1],[103,1],[104,1],[106,1],[107,1],[108,1],[109,1],[110,1],[111,1],[112,1],[113,1],[114,1],[115,1],[116,1],[117,1],[118,1],[119,1],[120,1],[121,1],[122,1],[123,1],[124,1],[125,1],[126,1],[127,1],[128,1],[129,1],[130,1]]},"k":[35,109],"v":[{"d":{"df":82,"dc":[[0,3],[7,3],[23,2],[26,1],[28,4],[30,2],[31,2],[32,5],[33,2],[34,4],[35,4],[36,5],[37,8],[38,3],[40,2],[42,4],[43,1],[44,2],[45,2],[46,2],[47,8],[48,2],[49,5],[50,2],[51,4],[52,4],[53,5],[54,3],[55,5],[56,13],[58,3],[59,6],[61,3],[62,5],[63,6],[64,13],[65,3],[66,1],[67,1],[68,1],[69,3],[71,3],[72,2],[73,2],[75,6],[77,6],[78,3],[79,1],[80,1],[81,3],[82,1],[83,4],[85,3],[88,5],[94,3],[95,3],[96,2],[98,1],[99,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[106,1],[107,1],[110,3],[113,2],[115,3],[116,5],[119,3],[121,1],[122,1],[123,1],[124,1],[125,1],[126,1],[127,1],[128,1],[129,1],[130,1]]},"k":[35,115],"v":[{"d":{"df":18,"dc":[[23,3],[26,4],[33,5],[37,7],[38,2],[40,3],[43,4],[47,7],[48,5],[54,2],[85,4],[88,2],[94,2],[95,1],[110,4],[115,1],[116,2],[119,2]]},"k":[35],"v":[{"d":{"df":10,"dc":[[23,2],[37,3],[40,2],[47,3],[55,3],[62,3],[63,15],[65,5],[77,15],[81,5]]},"k":[35],"v":[{"d":{"df":4,"dc":[[63,2],[65,5],[77,2],[81,5]]}}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]},{"k":[101,114,105,111,108,117,116,97],"v":[{"k":[116,110,111],"v":[{"d":{"df":12,"dc":[[0,1],[23,3],[26,1],[28,2],[29,1],[55,3],[58,1],[61,2],[63,1],[65,1],[101,1],[102,1]]},"k":[116,115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[0,3],[28,1]]}}]}]}]},{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[101,100],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116,108],"v":[{"k":[101,105],"v":[{"d":{"df":7,"dc":[[0,1],[28,2],[30,4],[55,2],[61,1],[63,1],[65,1]]},"k":[100,44],"v":[{"d":{"df":6,"dc":[[30,2],[36,1],[55,1],[57,1],[65,1],[85,1]]},"k":[58,46],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[98,1]]}}]},{"d":{"df":1,"dc":[[30,1]]}}]},{"k":[110,111],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[30,4]]}}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":5,"dc":[[35,1],[38,1],[56,1],[96,1],[101,1]]},"k":[108,44],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[31,1],[56,1]]}}]}]},{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[31,1],[94,1]]},"k":[45,106],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,3],[81,2]]},"k":[65288],"v":[{"k":[21407],"v":[{"k":[20808],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[111,105,97,101],"v":[{"k":[117,223],"v":[{"k":[112],"v":[{"d":{"df":5,"dc":[[23,2],[36,1],[69,1],[84,1],[85,1]]},"k":[105,115,46,101,44],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"d":{"df":3,"dc":[[58,1],[98,1],[99,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[100,1]]}}]},{"d":{"df":2,"dc":[[98,2],[99,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[99,6]]}}]},{"d":{"df":1,"dc":[[99,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[100],"v":[{"d":{"df":3,"dc":[[32,1],[49,1],[66,1]]},"k":[99,58,105,47],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[28,1],[42,1],[65,1],[81,1]]},"k":[44,111],"v":[{"d":{"df":4,"dc":[[28,3],[42,3],[65,1],[81,1]]}},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,2],[42,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":5,"dc":[[36,1],[53,1],[56,1],[64,1],[83,1]]}},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[112,100,110,121],"v":[{"k":[104],"v":[{"d":{"df":10,"dc":[[33,1],[35,2],[38,1],[51,2],[56,1],[63,2],[66,1],[67,1],[85,1],[106,1]]},"k":[46,105,44,115],"v":[{"d":{"df":3,"dc":[[35,2],[67,1],[89,1]]}},{"k":[99],"v":[{"d":{"df":7,"dc":[[35,3],[36,2],[38,1],[61,7],[65,4],[69,1],[78,3]]},"k":[58,115,97],"v":[{"d":{"df":2,"dc":[[61,5],[78,5]]}},{"d":{"df":1,"dc":[[94,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[63,1],[94,2]]}}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]}]},{"d":{"df":3,"dc":[[38,1],[63,1],[85,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[105,117],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121,105],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]}]}]},{"k":[97,101],"v":[{"k":[116],"v":[{"k":[101,108],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[55,3],[62,2]]}}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]},{"k":[116,118,114],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"d":{"df":2,"dc":[[26,2],[43,2]]}}]}]}]},{"k":[101],"v":[{"d":{"df":4,"dc":[[36,1],[55,2],[56,1],[61,1]]},"k":[110,115],"v":[{"d":{"df":2,"dc":[[36,1],[55,1]]}},{"d":{"df":1,"dc":[[96,1]]}}]}]},{"k":[108],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]}]},{"d":{"df":2,"dc":[[26,1],[65,1]]},"k":[111,105,97,116],"v":[{"k":[100,103],"v":[{"d":{"df":8,"dc":[[31,1],[34,1],[63,2],[84,1],[85,1],[102,1],[103,1],[107,1]]}},{"k":[108],"v":[{"k":[101],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[50,1]]}},{"k":[102],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[107],"v":[{"k":[12289],"v":[{"k":[33150],"v":[{"k":[35759],"v":[{"k":[12289],"v":[{"k":[38463],"v":[{"k":[37324],"v":[{"k":[21644],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]},{"k":[108],"v":[{"k":[44,46],"v":[{"d":{"df":1,"dc":[[69,2]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]},{"d":{"df":1,"dc":[[88,1]]}}]},{"k":[111,97],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[36,2]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[66,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]}]},{"k":[105,101,97],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[63,1],[65,2],[101,1]]},"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[63,101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[117,118,112,116],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,4]]},"k":[114],"v":[{"d":{"df":1,"dc":[[67,6]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":3,"dc":[[85,1],[99,2],[101,3]]}},{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[99,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[94,1]]},"k":[116,117,101,97,114,105,112,111,104,121,118,99,109,119,110,113],"v":[{"k":[97,101,121,114,105,111,117],"v":[{"k":[114,110,98,116,103,99,102],"v":[{"k":[116],"v":[{"k":[101,44,105,39,115],"v":[{"k":[100],"v":[{"d":{"df":7,"dc":[[0,2],[28,1],[55,1],[58,1],[61,1],[63,1],[101,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[37,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[63,1],[65,1],[66,2]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"d":{"df":1,"dc":[[94,1]]}}]}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[114,108],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[31,1],[67,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[33,1],[65,1]]}}]}]},{"k":[101,105],"v":[{"d":{"df":5,"dc":[[33,2],[35,1],[36,1],[63,1],[94,1]]},"k":[115,44,46],"v":[{"k":[39,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":1,"dc":[[36,7]]}}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[55,1],[98,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[98,1]]},"k":[101,58,44],"v":[{"k":[100],"v":[{"d":{"df":7,"dc":[[68,1],[84,7],[93,5],[98,12],[99,1],[102,12],[106,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]},{"d":{"df":6,"dc":[[84,2],[85,4],[93,4],[110,4],[111,2],[118,4]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]},{"k":[102],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[112],"v":[{"d":{"df":2,"dc":[[28,2],[92,4]]},"k":[46,115,44,58],"v":[{"d":{"df":1,"dc":[[0,1]]}},{"d":{"df":1,"dc":[[56,1]]},"k":[46,40],"v":[{"d":{"df":1,"dc":[[68,1]]}},{"k":[34],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[68,1]]}},{"d":{"df":2,"dc":[[92,3],[117,3]]}}]}]},{"k":[108,112],"v":[{"k":[101],"v":[{"d":{"df":13,"dc":[[32,2],[34,2],[36,11],[37,1],[38,2],[59,6],[63,4],[65,2],[69,1],[85,2],[88,5],[90,1],[94,1]]},"k":[61,46,115,44,41,58,123],"v":[{"k":[34],"v":[{"k":[119,101,112],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[58],"v":[{"d":{"df":6,"dc":[[0,2],[7,2],[33,1],[37,1],[47,1],[48,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[58],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[119],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[58],"v":[{"k":[53],"v":[{"k":[48],"v":[{"k":[37],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[36,3]]}},{"d":{"df":5,"dc":[[36,6],[58,1],[59,7],[63,3],[85,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[37,1],[63,1]]}}]},{"d":{"df":4,"dc":[[36,1],[63,2],[90,1],[106,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"d":{"df":1,"dc":[[59,1]]}},{"k":[120],"v":[{"k":[124],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]},{"k":[117,105,111,97,101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[26,1],[38,1],[56,1],[58,1]]},"k":[115,44],"v":[{"d":{"df":2,"dc":[[56,1],[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[99,110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[28,1],[63,1]]}}]}]}]},{"k":[103],"v":[{"d":{"df":9,"dc":[[35,6],[37,1],[51,5],[55,10],[56,1],[62,2],[64,2],[84,1],[96,2]]},"k":[46,44,59,34,115,40],"v":[{"d":{"df":2,"dc":[[35,1],[94,1]]}},{"d":{"df":2,"dc":[[35,5],[95,1]]}},{"d":{"df":3,"dc":[[51,6],[55,3],[62,3]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[84,2]]}},{"k":[96],"v":[{"k":[39],"v":[{"k":[54,50],"v":[{"k":[48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,107,121],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[63,1],[65,1],[100,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[31,1],[107,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":3,"dc":[[59,2],[65,1],[81,1]]}}]},{"d":{"df":1,"dc":[[63,2]]}}]},{"k":[116,119,105],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[92,1],[104,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[106,2]]}}]}]}]},{"k":[108,99],"v":[{"k":[108],"v":[{"d":{"df":8,"dc":[[31,1],[36,1],[56,3],[63,1],[65,8],[66,1],[96,1],[106,1]]},"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[95,2],[115,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[115,101],"v":[{"d":{"df":1,"dc":[[59,2]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"k":[114,99],"v":[{"k":[101,121],"v":[{"k":[100],"v":[{"d":{"df":3,"dc":[[37,1],[38,1],[56,1]]}}]},{"d":{"df":1,"dc":[[63,4]]},"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[112,114,102,105,99,109,103,98,110,100],"v":[{"k":[112,101],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":9,"dc":[[30,1],[31,1],[34,1],[35,1],[36,1],[55,1],[56,7],[63,5],[65,5]]},"k":[115,101,46,105],"v":[{"d":{"df":6,"dc":[[0,1],[36,1],[37,1],[56,1],[63,2],[94,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[100],"v":[{"d":{"df":6,"dc":[[37,1],[55,3],[56,2],[59,1],[63,1],[65,2]]},"k":[44,58,46],"v":[{"d":{"df":1,"dc":[[38,1]]}},{"d":{"df":2,"dc":[[55,1],[65,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[101,112,102,118],"v":[{"d":{"df":8,"dc":[[0,1],[23,2],[30,1],[33,1],[85,2],[100,1],[104,1],[106,1]]}},{"k":[114],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]},{"k":[101],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]},{"k":[102],"v":[{"k":[105],"v":[{"k":[120,99],"v":[{"d":{"df":2,"dc":[[28,3],[55,2]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[101,97],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[65289],"v":[{"k":[65292],"v":[{"k":[33268],"v":[{"k":[21147],"v":[{"k":[20110],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[32593],"v":[{"k":[39029],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[21644],"v":[{"k":[32593],"v":[{"k":[39029],"v":[{"k":[24212],"v":[{"k":[29992],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[34987],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[27531],"v":[{"k":[38556],"v":[{"k":[20154],"v":[{"k":[22763],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[12290],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":8,"dc":[[31,1],[36,1],[56,2],[63,1],[66,1],[67,2],[90,1],[98,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]},{"k":[104,99],"v":[{"d":{"df":10,"dc":[[31,1],[32,4],[35,6],[55,1],[56,3],[58,1],[59,1],[63,9],[66,1],[69,1]]}},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]},{"d":{"df":3,"dc":[[84,1],[95,2],[106,1]]},"k":[109,46],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105,121],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":1,"dc":[[84,1]]}}]},{"k":[97,103],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[99,1],[100,1],[101,1],[102,1],[106,1]]},"k":[101,105,115],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":12,"dc":[[66,1],[67,1],[68,1],[98,1],[99,1],[100,1],[102,1],[103,1],[104,1],[105,1],[106,1],[107,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[84,2]]}}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]}]}]},{"k":[115,109,99],"v":[{"k":[101],"v":[{"k":[113,116],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[96,1]]}}]}]},{"k":[105],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[44,46],"v":[{"d":{"df":1,"dc":[[103,1]]}},{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,98],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]},{"k":[118,108,101,116,114,97,110,99,103,109,112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":14,"dc":[[0,1],[33,2],[56,6],[63,1],[68,1],[85,1],[94,1],[95,1],[98,1],[99,1],[100,1],[102,3],[103,1],[104,1]]}}]}]}]}]},{"k":[101,108],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[0,1],[31,1],[33,1],[35,1],[55,1]]},"k":[101,115,42,105],"v":[{"k":[100],"v":[{"d":{"df":3,"dc":[[35,1],[38,1],[63,1]]},"k":[58,46,39],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}},{"d":{"df":1,"dc":[[35,1]]}},{"k":[41],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]}},{"k":[42],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[111,110],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,2]]}}]},{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]},{"d":{"df":11,"dc":[[0,1],[23,1],[26,1],[36,1],[55,3],[56,2],[59,2],[61,2],[63,3],[65,1],[88,1]]},"k":[109,110],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,2]]}}]},{"d":{"df":21,"dc":[[0,1],[28,1],[36,3],[37,1],[38,1],[56,7],[57,1],[59,5],[61,1],[63,4],[65,1],[69,2],[77,1],[84,1],[85,5],[88,4],[90,1],[96,1],[99,1],[101,1],[103,1]]},"k":[116,105,111,46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":4,"dc":[[32,3],[36,1],[56,1],[88,1]]},"k":[115,46],"v":[{"d":{"df":2,"dc":[[56,1],[65,2]]}},{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[102],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[56,1],[64,1],[78,2]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[59,1],[85,1]]}}]},{"k":[105,118],"v":[{"k":[101,111],"v":[{"k":[115],"v":[{"d":{"df":25,"dc":[[28,1],[30,1],[35,6],[36,3],[38,1],[51,3],[55,4],[56,16],[58,1],[61,2],[62,5],[63,3],[64,2],[84,6],[85,4],[90,2],[93,1],[94,1],[95,2],[98,1],[99,3],[100,2],[101,1],[102,6],[107,1]]},"k":[58,111,116,105,110,46,44,108,41,96,39],"v":[{"d":{"df":51,"dc":[[0,1],[7,1],[28,1],[30,1],[32,1],[34,2],[35,7],[36,6],[37,10],[38,2],[42,1],[46,1],[47,10],[49,1],[51,7],[52,2],[53,4],[54,2],[55,8],[56,14],[58,3],[59,4],[61,4],[62,8],[64,13],[71,3],[75,4],[78,4],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]}},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":6,"dc":[[35,5],[38,1],[51,5],[54,1],[61,2],[78,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[35,2],[51,2],[56,1],[64,1]]}}]}]}]}]},{"d":{"df":13,"dc":[[35,1],[36,1],[55,3],[56,3],[61,1],[63,1],[85,1],[88,1],[90,1],[95,1],[102,1],[105,1],[107,1]]},"k":[100,110,101],"v":[{"k":[97,105],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":3,"dc":[[38,1],[54,1],[56,1]]}}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,2],[64,4]]}}]}]}]}]}]}]},{"d":{"df":10,"dc":[[56,2],[58,1],[59,1],[63,3],[84,2],[85,1],[88,1],[102,2],[103,1],[107,1]]}},{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}}]}]}]}]}]}]}]}]},{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]},"k":[58,65289],"v":[{"d":{"df":1,"dc":[[65,9]]}},{"k":[20013,65306,12290],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,4]]}},{"d":{"df":1,"dc":[[81,1]]}}]}]},{"d":{"df":1,"dc":[[84,1]]}}]}]},{"k":[117],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[57,1]]},"k":[45,46],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[57,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[57,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[107,3]]}}]}]}]}]},{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":3,"dc":[[23,3],[30,1],[35,2]]},"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"k":[115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]},{"k":[100,116,115],"v":[{"d":{"df":1,"dc":[[23,2]]}},{"d":{"df":1,"dc":[[23,1]]},"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]},{"k":[116,111],"v":[{"k":[111,105],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[35,1],[96,2],[97,1],[106,3]]},"k":[46,115,44],"v":[{"d":{"df":1,"dc":[[96,1]]}},{"d":{"df":1,"dc":[[106,3]]}},{"d":{"df":1,"dc":[[106,1]]}}]}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":7,"dc":[[38,3],[56,4],[69,2],[84,2],[90,1],[94,2],[96,1]]},"k":[108,44],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115,97,101],"v":[{"d":{"df":1,"dc":[[38,1]]}},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[38,2]]}}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115,45],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"d":{"df":6,"dc":[[56,1],[65,1],[67,1],[69,1],[92,1],[104,2]]},"k":[108,44,100],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[65,1],[84,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[56,1],[88,1]]}}]}]},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[118,109,110,116,121,102,108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[0,1],[37,1]]},"k":[100],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]},{"k":[101,112],"v":[{"d":{"df":25,"dc":[[28,1],[32,2],[34,1],[35,1],[36,1],[38,1],[55,4],[56,1],[59,2],[61,2],[63,2],[65,3],[66,2],[69,4],[84,5],[85,4],[88,1],[95,1],[97,2],[99,4],[101,2],[102,2],[103,1],[104,1],[106,2]]}},{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]},{"k":[107],"v":[{"k":[101],"v":[{"k":[121],"v":[{"k":[12289,44],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[105,117],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[105,121,97],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[99,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[69,1],[104,2]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[101,100,105,108,98,103,115,104],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[106,109],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,97],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[103,97,100,116],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[38,34],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[37,2],[47,2]]},"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[112,100],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[115,110],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[119],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[45],"v":[{"k":[109],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117,101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[97,108,100],"v":[{"k":[115],"v":[{"k":[121],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[45],"v":[{"k":[102,115],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100,102],"v":[{"k":[101],"v":[{"k":[115,109],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[97,108,99,98,112,115],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[103],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[95],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[103],"v":[{"k":[48],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[103],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[104,1],[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[48],"v":[{"k":[49,50,51,52],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[83,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[83,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[83,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[83,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97,105],"v":[{"k":[114],"v":[{"k":[48],"v":[{"k":[51,52],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[101,1],[124,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[101,1],[124,1]]}}]}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[48],"v":[{"k":[49,50],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[105,1],[128,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[105,1],[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[48],"v":[{"k":[50,51,49,52],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[129,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[129,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[129,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[129,1]]},"k":[62],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[53],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[107,1],[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[47],"v":[{"k":[101,116,110,100,112,103],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[53],"v":[{"k":[45,46],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104,105],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[108,45],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46,45],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]},{"k":[50],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[119],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[104,111],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[108,100],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[46,45],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]},{"k":[50],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,105],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[100,114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[110],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[61],"v":[{"k":[120,103,97,115],"v":[{"k":[104,114,112,105,98,115],"v":[{"k":[49,106,121,107],"v":[{"k":[45,118],"v":[{"k":[102],"v":[{"k":[110],"v":[{"k":[108],"v":[{"k":[99],"v":[{"k":[118],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[66,1],[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[57],"v":[{"k":[52],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[67,1],[79,1]]}}]}]}]}]}]}]}]}]}]},{"k":[104,105,45,49],"v":[{"k":[57,119],"v":[{"k":[51],"v":[{"k":[103],"v":[{"k":[113],"v":[{"k":[118],"v":[{"k":[102],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[66,1],[82,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[103],"v":[{"k":[109],"v":[{"k":[52],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[101,1],[124,1]]}}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[104],"v":[{"k":[110],"v":[{"k":[57],"v":[{"k":[110],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[68,1],[80,1]]}}]}]}]}]}]}]}]}]},{"k":[52],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[56],"v":[{"k":[52],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[100,1],[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[110],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[52],"v":[{"k":[122],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[105,1],[128,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110,115],"v":[{"k":[100],"v":[{"k":[120],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[52],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,2],[126,2]]},"k":[60],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[100,1],[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,108],"v":[{"k":[104],"v":[{"k":[106],"v":[{"k":[55],"v":[{"k":[52],"v":[{"k":[122],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[107],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[106,2],[129,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[112],"v":[{"k":[122],"v":[{"k":[117],"v":[{"k":[121],"v":[{"k":[52],"v":[{"k":[122],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[103,1],[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107,106,121,49],"v":[{"k":[54],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[109],"v":[{"k":[113],"v":[{"k":[118],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[66,1],[82,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105,102],"v":[{"k":[113],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[53],"v":[{"k":[110],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[68,1],[80,1]]}}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[106],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[52],"v":[{"k":[122],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[68,1],[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100,56],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[57],"v":[{"k":[52],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[68,1],[80,1]]}}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"k":[115],"v":[{"k":[120],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[34,38],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[118],"v":[{"k":[61],"v":[{"k":[51],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[99,1],[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[51,107],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[104],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[102],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[99,1],[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[55],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[103,1],[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[49],"v":[{"k":[111],"v":[{"k":[113],"v":[{"k":[106],"v":[{"k":[111],"v":[{"k":[113],"v":[{"k":[113],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[69,1],[83,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[118],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[53],"v":[{"k":[103],"v":[{"k":[122],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[69,1],[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107,121,49,106],"v":[{"k":[55],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[122],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[98,1],[122,1]]}}]}]}]}]}]}]}]}]}]},{"k":[120,121,57],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[55],"v":[{"k":[118],"v":[{"k":[122],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[101,1],[124,1]]}}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[108],"v":[{"k":[110],"v":[{"k":[55],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[101,1],[124,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[50],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[102],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[107,1],[130,1]]}}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[103],"v":[{"k":[49],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[104,1],[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[122],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[118],"v":[{"k":[122],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[104,1],[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107,49,121],"v":[{"k":[111,98,99],"v":[{"k":[54],"v":[{"k":[52],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[100,1],[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[52],"v":[{"k":[109],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[104,1],[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[117],"v":[{"k":[119],"v":[{"k":[107],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[107,1],[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[56,116],"v":[{"k":[106],"v":[{"k":[113],"v":[{"k":[109],"v":[{"k":[120],"v":[{"k":[52],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":4,"dc":[[101,1],[105,1],[124,1],[128,1]]}}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[56],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[118],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[104,1],[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[110],"v":[{"k":[50],"v":[{"k":[105],"v":[{"k":[55],"v":[{"k":[118],"v":[{"k":[102],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,2],[126,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[67,1],[79,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[100,1],[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[112,119],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[103,1],[127,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[103,1],[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109,122,110,103,116,100,120],"v":[{"k":[112,117,105],"v":[{"k":[108],"v":[{"k":[101,105],"v":[{"d":{"df":13,"dc":[[0,2],[36,1],[56,1],[58,3],[59,3],[61,2],[63,4],[65,1],[84,1],[85,1],[88,2],[94,1],[95,1]]},"k":[115,114,44],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[23,1],[36,1]]}}]},{"d":{"df":1,"dc":[[63,3]]}},{"d":{"df":1,"dc":[[88,1]]}}]},{"k":[102,99],"v":[{"k":[121,105],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":7,"dc":[[63,1],[66,1],[67,1],[68,1],[93,1],[94,1],[100,1]]},"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[66,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":12,"dc":[[28,1],[33,14],[56,2],[59,2],[63,1],[65,1],[68,1],[90,1],[94,5],[100,1],[103,4],[106,1]]},"k":[44,46,96],"v":[{"d":{"df":4,"dc":[[26,1],[36,2],[65,1],[94,1]]}},{"d":{"df":3,"dc":[[33,1],[38,1],[61,1]]}},{"d":{"df":1,"dc":[[59,4]]},"k":[65289],"v":[{"k":[65292,12290],"v":[{"k":[40664,30001],"v":[{"k":[35748],"v":[{"k":[26159],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19978],"v":[{"k":[36848],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[65292],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[99,103],"v":[{"k":[101],"v":[{"d":{"df":7,"dc":[[31,1],[36,1],[55,1],[56,1],[59,1],[61,1],[65,4]]}}]},{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":8,"dc":[[38,1],[56,1],[59,1],[63,2],[67,1],[100,1],[102,1],[105,1]]},"k":[97,58],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[31,1],[63,1],[68,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[92,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[117,101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115,46,41],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":2,"dc":[[34,1],[99,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[33,3]]}}]},{"k":[101],"v":[{"d":{"df":7,"dc":[[32,3],[57,1],[69,1],[85,1],[101,2],[102,1],[105,2]]},"k":[115,46],"v":[{"d":{"df":2,"dc":[[32,1],[105,1]]}},{"d":{"df":1,"dc":[[105,1]]}}]}]},{"d":{"df":1,"dc":[[66,1]]}}]},{"k":[101,108,97],"v":[{"k":[99,97,108,101],"v":[{"k":[105],"v":[{"k":[102,97],"v":[{"k":[121,105],"v":[{"d":{"df":8,"dc":[[0,1],[31,1],[33,1],[55,4],[56,7],[59,1],[65,1],[88,2]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[38,1],[56,1]]}}]}]}]},{"k":[101,99],"v":[{"k":[100,115],"v":[{"d":{"df":8,"dc":[[35,1],[36,1],[55,3],[56,1],[59,4],[63,1],[65,1],[88,2]]},"k":[46,44],"v":[{"d":{"df":5,"dc":[[0,1],[55,1],[56,1],[59,2],[65,1]]}},{"d":{"df":2,"dc":[[55,1],[59,1]]}}]},{"d":{"df":1,"dc":[[38,2]]}}]},{"d":{"df":10,"dc":[[31,2],[33,2],[56,2],[65,1],[66,2],[68,2],[69,3],[84,1],[101,1],[103,1]]},"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[44,115],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":9,"dc":[[31,1],[55,1],[56,2],[59,1],[63,2],[65,1],[69,1],[102,1],[104,1]]}}]}]}]},{"k":[107],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[31,1],[36,1]]}}]}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[69,2]]},"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[67,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[67,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99,116,110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"d":{"df":2,"dc":[[38,1],[63,1]]},"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[104,2]]}}]}]}]},{"k":[110,99,114],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"k":[101,105],"v":[{"d":{"df":3,"dc":[[34,1],[63,1],[90,1]]},"k":[46,115],"v":[{"d":{"df":2,"dc":[[34,1],[59,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[85,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"d":{"df":16,"dc":[[23,1],[26,1],[28,1],[36,1],[38,1],[55,1],[56,5],[61,2],[63,4],[65,2],[88,2],[96,1],[98,1],[99,1],[101,1],[105,2]]},"k":[108,109,117,102,114,99,44],"v":[{"k":[118,117,105],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[23,3]]},"k":[100],"v":[{"d":{"df":1,"dc":[[23,2]]}}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[57,1],[63,1]]}}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]},{"k":[101],"v":[{"d":{"df":25,"dc":[[26,1],[29,1],[30,1],[31,2],[32,2],[33,2],[34,2],[35,1],[38,1],[55,8],[56,8],[57,1],[59,4],[61,1],[63,3],[65,8],[68,1],[69,2],[84,1],[85,2],[88,1],[96,2],[101,1],[106,3],[107,1]]},"k":[111,116,104],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"k":[104,105],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44,46],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":7,"dc":[[33,1],[35,1],[55,1],[59,1],[69,1],[94,2],[104,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[69,1],[85,1]]}},{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[26,1],[37,1],[43,1],[55,3],[65,1]]},"k":[58,39,100],"v":[{"d":{"df":8,"dc":[[34,1],[35,1],[51,1],[52,1],[55,10],[56,13],[62,10],[64,13]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[119],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[31,2],[56,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":2,"dc":[[55,8],[63,1]]},"k":[101,116,105],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[55,1],[63,2]]}}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[63,2],[86,2],[101,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"d":{"df":1,"dc":[[100,1]]}}]},{"k":[111,97,105],"v":[{"k":[117,119,101,114,112],"v":[{"k":[108],"v":[{"k":[100],"v":[{"d":{"df":18,"dc":[[23,1],[34,2],[36,2],[37,1],[55,4],[59,1],[61,2],[66,1],[68,1],[69,1],[85,1],[93,1],[99,1],[100,1],[101,3],[102,1],[104,1],[106,3]]}}]}]},{"d":{"df":22,"dc":[[30,1],[31,1],[34,2],[35,1],[55,3],[56,5],[58,1],[61,1],[63,2],[66,1],[68,1],[85,1],[88,1],[95,2],[96,5],[98,1],[100,1],[101,1],[102,2],[104,1],[105,1],[106,1]]},"k":[58,110,47,115,101,116,98],"v":[{"d":{"df":14,"dc":[[30,1],[36,8],[46,1],[53,8],[56,1],[59,8],[64,1],[75,8],[88,1],[95,1],[96,4],[113,4],[115,1],[116,1]]}},{"d":{"df":12,"dc":[[32,1],[56,3],[61,1],[66,1],[68,1],[69,1],[98,1],[100,1],[101,1],[103,1],[104,3],[107,1]]}},{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,1],[61,1]]}}]}]}]}]},{"d":{"df":12,"dc":[[35,1],[63,1],[66,1],[68,2],[69,1],[92,1],[101,2],[102,1],[103,3],[105,1],[106,1],[107,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[68,1]]}}]},{"k":[114],"v":[{"k":[115],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[39,34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[44],"v":[{"k":[34],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[44,101],"v":[{"d":{"df":2,"dc":[[56,1],[101,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[112,100,114,110],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[61,1],[94,4],[95,2],[107,1]]},"k":[115,44,58],"v":[{"d":{"df":2,"dc":[[34,1],[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]},{"d":{"df":2,"dc":[[35,1],[94,1]]}},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]},{"k":[111,101],"v":[{"k":[119],"v":[{"d":{"df":3,"dc":[[36,1],[59,2],[85,1]]},"k":[98,111,99,44,58,115],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[59,1],[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":6,"dc":[[35,1],[36,2],[51,1],[53,2],[59,3],[75,3]]}}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"d":{"df":4,"dc":[[59,1],[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[59,3],[75,3]]}}]},{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58,125],"v":[{"d":{"df":4,"dc":[[36,2],[53,2],[59,3],[75,3]]}},{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58],"v":[{"d":{"df":6,"dc":[[35,1],[36,2],[51,1],[53,2],[59,3],[75,3]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[36,1],[59,2]]}},{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]},{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[56,1],[85,1]]}}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[39,34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[44],"v":[{"k":[34],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,109,110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"d":{"df":8,"dc":[[28,1],[32,1],[56,1],[65,2],[87,1],[88,1],[94,2],[99,1]]},"k":[46,44,115,41],"v":[{"d":{"df":2,"dc":[[32,1],[85,1]]}},{"d":{"df":3,"dc":[[56,1],[85,1],[94,2]]}},{"d":{"df":1,"dc":[[61,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]},{"k":[98,112],"v":[{"k":[111],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[61,1],[94,4]]},"k":[58,115,44],"v":[{"d":{"df":8,"dc":[[32,2],[49,2],[55,1],[59,1],[62,1],[75,1],[94,1],[119,1]]}},{"d":{"df":1,"dc":[[61,2]]},"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[38,1],[61,5],[78,5]]},"k":[58,44],"v":[{"d":{"df":12,"dc":[[36,2],[38,2],[53,2],[54,2],[56,1],[59,3],[61,2],[64,1],[75,3],[78,2],[94,2],[119,2]]}},{"d":{"df":3,"dc":[[61,2],[65,1],[78,2]]}}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]}]}]}]}]},{"k":[116,99],"v":[{"k":[97],"v":[{"k":[120,99],"v":[{"d":{"df":1,"dc":[[37,1]]}},{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"d":{"df":8,"dc":[[28,1],[31,11],[42,1],[45,8],[65,2],[81,2],[94,4],[119,4]]},"k":[114,112],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[28,1],[42,1],[65,1],[81,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[97,101,114,111,104,105],"v":[{"k":[116,108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":8,"dc":[[30,1],[31,1],[38,1],[55,1],[56,1],[94,8],[103,2],[107,10]]},"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":4,"dc":[[63,1],[66,2],[67,1],[105,1]]},"k":[58,115],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[97,101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[111],"v":[{"d":{"df":1,"dc":[[90,1]]},"k":[115,46],"v":[{"d":{"df":3,"dc":[[31,4],[55,1],[63,1]]},"k":[44,46],"v":[{"d":{"df":2,"dc":[[33,1],[63,3]]}},{"d":{"df":2,"dc":[[36,1],[63,1]]}}]},{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[94,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,3]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[64,2],[66,1]]},"k":[46,58,8221],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":2,"dc":[[56,5],[64,5]]}},{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,2]]},"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[58],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]},{"k":[111,97],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[63,1],[89,2]]},"k":[58],"v":[{"d":{"df":6,"dc":[[32,1],[49,1],[61,2],[78,2],[89,1],[120,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[65,1],[85,1],[106,1]]},"k":[101],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[85,1],[94,1],[96,2]]}}]}]}]}]}]},{"k":[101,105],"v":[{"k":[97,101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39,34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[44],"v":[{"k":[34],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":3,"dc":[[36,2],[56,1],[63,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]},{"k":[117],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]},{"d":{"df":51,"dc":[[0,9],[23,12],[26,1],[28,9],[29,3],[30,8],[31,9],[32,3],[33,6],[34,2],[35,9],[36,16],[37,8],[38,13],[40,1],[47,6],[53,4],[55,20],[56,26],[57,1],[58,5],[59,15],[61,11],[63,40],[65,10],[66,8],[67,4],[68,4],[69,7],[84,5],[85,7],[86,1],[88,4],[89,3],[90,1],[92,2],[93,2],[94,9],[95,2],[96,5],[97,1],[98,8],[99,5],[100,2],[101,9],[102,3],[103,5],[104,7],[105,10],[106,4],[107,8]]},"k":[112,114,110,116,115,98,102,108,99,100,117,109,103,120,118,39,58,101,46,12290,44,105],"v":[{"k":[97,112,105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":25,"dc":[[0,3],[7,3],[26,3],[28,2],[29,1],[31,1],[36,1],[38,1],[42,2],[43,3],[45,1],[51,1],[53,1],[55,1],[57,1],[59,1],[61,1],[62,1],[63,19],[65,1],[75,1],[76,1],[77,16],[78,1],[81,1]]}}]}]}]},{"k":[108,114,101],"v":[{"k":[105],"v":[{"k":[99,101,97],"v":[{"k":[97],"v":[{"k":[116,98],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[30,2],[46,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[61,1],[88,1]]}}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[59,4]]}}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[97,112],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[63,1],[65,1]]},"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[36,2]]}}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[65,1],[100,1],[106,1],[107,1]]},"k":[46,108],"v":[{"d":{"df":1,"dc":[[101,1]]}},{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[97,116],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[46,97],"v":[{"d":{"df":1,"dc":[[58,1]]}},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[63,1],[107,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"d":{"df":6,"dc":[[33,3],[48,1],[61,4],[65,10],[78,2],[81,6]]},"k":[41,46,115,93,42,65292,12290,65288,65306],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[65,1]]}},{"k":[40],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[42],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[36827,36825],"v":[{"k":[34892],"v":[{"k":[20102],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[20123],"v":[{"k":[34987],"v":[{"k":[21462],"v":[{"k":[20195],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]},"k":[23427],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"k":[21253],"v":[{"k":[25324],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[21644],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[65289],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,2]]}}]}]},{"k":[101,116,105,114,111,103,99],"v":[{"d":{"df":36,"dc":[[0,1],[28,3],[31,5],[32,3],[33,1],[34,3],[35,7],[36,2],[37,3],[38,6],[55,9],[56,4],[57,2],[58,1],[59,6],[63,4],[65,28],[66,4],[67,1],[69,6],[85,2],[88,3],[94,3],[95,3],[96,1],[97,1],[98,2],[99,1],[100,4],[101,2],[102,3],[103,2],[104,1],[105,3],[106,3],[107,1]]},"k":[97,58],"v":[{"d":{"df":7,"dc":[[34,1],[35,1],[63,2],[90,5],[93,1],[100,10],[102,10]]},"k":[46,115,44],"v":[{"d":{"df":2,"dc":[[35,2],[90,1]]}},{"d":{"df":1,"dc":[[66,1]]},"k":[116,46],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[44,58],"v":[{"d":{"df":2,"dc":[[36,2],[53,1]]}},{"d":{"df":4,"dc":[[90,2],[93,2],[114,2],[118,2]]}}]}]}]}]},{"d":{"df":1,"dc":[[103,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[38,1]]}}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[28,1],[36,2]]},"k":[115,46],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"k":[97,115],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[58,99],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}},{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"k":[111,97],"v":[{"k":[119],"v":[{"d":{"df":2,"dc":[[32,1],[63,1]]}}]},{"k":[121,110],"v":[{"d":{"df":9,"dc":[[38,1],[55,1],[56,3],[62,1],[85,1],[88,1],[94,2],[96,2],[119,1]]},"k":[46,44,58,59,41],"v":[{"d":{"df":2,"dc":[[35,1],[56,2]]},"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[35,1],[56,2]]}},{"d":{"df":1,"dc":[[38,1]]}},{"d":{"df":3,"dc":[[51,1],[94,1],[119,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[68,1],[106,1]]},"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[63,1],[106,1]]}}]}]}]},{"k":[117],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[94,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[106,1]]}}]},{"d":{"df":26,"dc":[[0,2],[23,3],[28,1],[30,1],[31,5],[35,4],[36,1],[37,2],[38,1],[47,2],[55,4],[56,5],[61,2],[63,3],[68,2],[69,6],[88,2],[94,6],[96,2],[98,1],[99,1],[100,2],[101,1],[105,1],[106,1],[107,2]]},"k":[100,121,115,111,97,110,103,105,99,116],"v":[{"d":{"df":44,"dc":[[0,10],[23,6],[26,2],[28,8],[30,4],[31,15],[32,13],[33,12],[34,2],[35,10],[36,9],[37,4],[38,13],[55,19],[56,21],[57,1],[58,4],[59,13],[61,5],[62,1],[63,64],[65,25],[66,9],[68,2],[69,29],[77,1],[81,1],[84,5],[85,4],[88,7],[90,1],[92,5],[94,9],[95,3],[98,6],[99,1],[100,2],[101,1],[102,3],[103,7],[104,3],[105,6],[106,6],[107,9]]},"k":[114,58,63,91,44],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[55,3],[62,3]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":7,"dc":[[26,1],[28,1],[35,1],[55,1],[63,1],[94,1],[95,1]]},"k":[116],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[23,1],[65,1]]}}]}]}]}]}]},{"k":[119],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[88,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[30,1],[55,3],[56,1],[69,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[121],"v":[{"k":[122,115],"v":[{"k":[101],"v":[{"d":{"df":7,"dc":[[56,1],[68,3],[69,1],[102,1],[103,2],[104,1],[105,1]]},"k":[44,100],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":1,"dc":[[92,1]]}}]}]},{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]},{"k":[117,108,101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[12289],"v":[{"k":[118],"v":[{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[66,1]]},"k":[58,46],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"d":{"df":1,"dc":[[66,1]]}}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[67,1]]}}]}]},{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[56,1],[58,2],[63,4]]},"k":[46,115],"v":[{"d":{"df":1,"dc":[[58,2]]}},{"d":{"df":1,"dc":[[63,5]]}}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[97,105],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]},{"k":[45],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":21,"dc":[[0,1],[23,1],[26,1],[32,6],[33,1],[34,1],[35,5],[38,1],[55,2],[56,2],[57,2],[59,5],[63,5],[65,7],[66,1],[69,1],[92,1],[100,1],[101,1],[103,1],[106,1]]},"k":[116,58],"v":[{"k":[114,101,97],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[30,1],[56,1],[105,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[33,1],[100,1],[101,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[32,1]]}}]},{"d":{"df":40,"dc":[[0,1],[28,5],[30,5],[31,9],[32,4],[33,1],[35,6],[36,4],[38,2],[42,3],[45,2],[55,8],[56,21],[57,2],[58,1],[59,4],[61,4],[63,11],[65,14],[66,2],[68,3],[69,8],[81,3],[84,1],[85,3],[88,5],[92,1],[94,7],[95,3],[96,1],[97,1],[98,3],[99,1],[100,1],[102,2],[103,2],[104,4],[105,2],[106,2],[107,6]]},"k":[115,112,58,121],"v":[{"k":[101,105,117,111],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[26,1],[43,1]]}}]}]},{"k":[115,103],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[32,1],[63,1]]}}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[33,1],[36,1]]}}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]},{"d":{"df":3,"dc":[[35,2],[38,1],[63,1]]}},{"k":[110],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[58,5]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,115,108,98,105],"v":[{"k":[117,118],"v":[{"k":[116],"v":[{"d":{"df":6,"dc":[[0,1],[30,4],[35,1],[36,1],[55,1],[59,1]]}}]},{"k":[101],"v":[{"d":{"df":4,"dc":[[28,1],[38,1],[56,2],[107,1]]},"k":[44,58,46],"v":[{"d":{"df":4,"dc":[[55,1],[61,3],[63,1],[65,1]]}},{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[104,1]]}}]}]}]},{"k":[116,111],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[95,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[55,5]]}}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[116,102],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":13,"dc":[[0,2],[26,1],[30,2],[33,3],[35,1],[37,1],[55,1],[56,3],[58,1],[61,1],[85,1],[94,1],[107,1]]}}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[69,1],[98,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[63,1],[101,1]]}}]}]}]}]}]},{"k":[108,115,103,119,114,105,116,101,109],"v":[{"d":{"df":16,"dc":[[28,4],[30,1],[34,1],[35,4],[36,1],[55,3],[56,1],[58,2],[63,5],[68,1],[69,1],[95,2],[97,1],[101,1],[105,1],[106,2]]},"k":[111,44],"v":[{"k":[119],"v":[{"d":{"df":3,"dc":[[23,1],[37,1],[63,3]]},"k":[105,115,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[23,1],[63,6]]}}]}]},{"d":{"df":2,"dc":[[30,1],[63,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]},{"d":{"df":4,"dc":[[56,1],[61,1],[63,1],[65,1]]}}]},{"k":[111],"v":[{"d":{"df":30,"dc":[[23,1],[30,2],[32,1],[34,1],[35,1],[36,1],[37,1],[38,4],[55,5],[56,5],[59,1],[63,14],[66,2],[67,1],[68,2],[69,1],[84,1],[88,1],[89,1],[92,1],[94,1],[96,2],[97,1],[98,1],[99,1],[103,1],[104,2],[105,1],[106,2],[107,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[109],"v":[{"k":[44,115],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[121],"v":[{"k":[115],"v":[{"d":{"df":6,"dc":[[31,1],[34,1],[56,2],[63,2],[65,2],[105,1]]}}]}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[121],"v":[{"d":{"df":3,"dc":[[31,1],[33,1],[56,1]]}}]}]}]}]},{"k":[103,97],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[34,1],[65,1],[81,1],[105,1]]},"k":[109,58,119,115],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[32,1],[59,3]]}}]}]}]},{"d":{"df":5,"dc":[[32,2],[49,2],[59,7],[75,7],[83,1]]}},{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[59,3]]}}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[104,101],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[103],"v":[{"k":[104],"v":[{"d":{"df":7,"dc":[[36,1],[56,1],[59,2],[61,1],[66,1],[84,1],[102,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[46],"v":[{"d":{"df":2,"dc":[[37,8],[47,8]]}}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[104,99,116,114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":6,"dc":[[23,1],[29,1],[63,3],[84,1],[89,1],[106,1]]}}]}]}]}]},{"k":[101,111,117],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105,39,101],"v":[{"k":[98],"v":[{"k":[105,108],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[30,2],[63,6]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[30,3],[46,1]]}}]}]}]},{"d":{"df":1,"dc":[[35,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[114,117],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":9,"dc":[[30,1],[32,3],[34,1],[36,1],[55,2],[56,1],[63,1],[68,1],[106,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[108,46],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[63,1],[65,2]]}}]},{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]}]},{"k":[117,105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[30,1],[56,1]]}}]}]},{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[35,2],[65,4],[81,4]]},"k":[115],"v":[{"d":{"df":2,"dc":[[35,1],[61,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[63,1],[69,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[30,2],[107,3]]},"k":[118,39,100,115,97,114,106,101],"v":[{"k":[97,105],"v":[{"k":[110],"v":[{"k":[116,99],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[28,1]]},"k":[58,115],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":2,"dc":[[56,1],[94,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[100,46],"v":[{"d":{"df":2,"dc":[[55,1],[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[30,2],[95,4]]}},{"d":{"df":9,"dc":[[36,1],[37,4],[58,1],[61,4],[68,1],[85,2],[94,1],[106,1],[107,2]]},"k":[105,101,114,115],"v":[{"k":[116,110],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[37,1],[63,3]]},"k":[97,44],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[31,1],[63,2]]}}]},{"d":{"df":3,"dc":[[63,4],[65,2],[85,1]]}}]}]}]}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[37,2],[59,2]]}}]}]},{"k":[100],"v":[{"d":{"df":4,"dc":[[33,2],[61,1],[63,3],[86,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[37,1],[63,1]]}}]}]}]},{"d":{"df":2,"dc":[[63,1],[65,1]]}}]},{"k":[39],"v":[{"d":{"df":1,"dc":[[35,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[35,2]]}}]}]},{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[117,97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[96,1]]},"k":[105,109,101,115],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[113],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[116,120],"v":[{"k":[111],"v":[{"d":{"df":3,"dc":[[36,3],[55,2],[59,1]]},"k":[109,45],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":2,"dc":[[37,1],[63,2]]},"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":6,"dc":[[30,1],[37,2],[38,2],[56,4],[63,2],[85,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[38,1],[96,1]]}}]}]}]}]}]}]}]}]}]},{"k":[109,97],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]},{"k":[111,97,98],"v":[{"k":[117,110],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":6,"dc":[[31,1],[56,2],[84,1],[98,1],[103,1],[107,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[31,1],[63,2]]}}]}]}]},{"k":[103],"v":[{"d":{"df":3,"dc":[[55,1],[85,1],[101,1]]}}]}]},{"k":[122],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[111,97,103],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[33,1],[65,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[33,1],[57,1]]}}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105,101],"v":[{"k":[115],"v":[{"d":{"df":9,"dc":[[32,4],[56,7],[59,1],[63,4],[66,4],[88,2],[90,1],[94,2],[105,2]]},"k":[108,116,112,44,46,41,39],"v":[{"k":[105,97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[32,2],[49,2],[61,4],[78,4]]}}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[58],"v":[{"d":{"df":3,"dc":[[32,5],[49,4],[83,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[32,3],[49,3]]}}]}]}]}]},{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[38,3],[66,1],[99,1]]}},{"d":{"df":6,"dc":[[38,1],[68,1],[88,1],[94,1],[95,1],[104,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[56,2]]}}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[115],"v":[{"d":{"df":4,"dc":[[32,2],[56,1],[58,3],[66,3]]},"k":[46],"v":[{"d":{"df":2,"dc":[[32,2],[56,1]]}}]}]}]},{"k":[111,101,97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"d":{"df":14,"dc":[[32,1],[33,1],[37,1],[56,2],[63,1],[96,1],[98,2],[99,1],[100,1],[101,1],[104,1],[105,1],[106,1],[107,1]]},"k":[108,97],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[32,2],[38,1],[107,2]]}}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[37,1],[55,1],[63,1],[92,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[94,1],[95,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[34,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[34,5]]}},{"d":{"df":1,"dc":[[34,1]]}}]},{"d":{"df":3,"dc":[[56,7],[59,1],[75,1]]}},{"k":[115],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[68,1]]}},{"d":{"df":1,"dc":[[80,1]]}},{"d":{"df":1,"dc":[[92,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]},{"k":[99,120,109,114,97,108,110,100,102,116,118,46,113,115,105,121,45,103],"v":[{"k":[104,111,115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[111,1]]},"k":[115],"v":[{"d":{"df":54,"dc":[[0,11],[7,9],[23,1],[26,5],[28,12],[29,2],[30,3],[31,7],[32,3],[33,1],[35,9],[36,1],[38,2],[40,1],[41,1],[42,14],[43,4],[44,2],[45,5],[48,1],[49,3],[51,10],[53,3],[54,3],[56,14],[58,4],[59,1],[61,2],[62,3],[63,30],[64,4],[65,19],[71,3],[72,4],[73,2],[74,3],[75,1],[76,1],[77,31],[78,3],[81,15],[85,2],[86,1],[94,3],[95,1],[96,2],[97,1],[109,1],[110,1],[112,1],[113,2],[116,1],[117,1],[119,3]]},"k":[105,46,33,60,44,52,93,53,45,12290,65292,65306],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[28,1],[32,1],[38,1],[84,1]]},"k":[105,117,99,114],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[40],"v":[{"k":[100,99],"v":[{"k":[111],"v":[{"k":[99,109],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[41,44],"v":[{"k":[59],"v":[{"d":{"df":12,"dc":[[0,1],[7,1],[28,2],[33,2],[35,1],[42,2],[48,2],[51,1],[58,2],[61,1],[71,2],[78,1]]}}]},{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[44,101],"v":[{"d":{"df":4,"dc":[[36,3],[53,3],[65,1],[81,1]]}},{"k":[108],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[44,41],"v":[{"d":{"df":2,"dc":[[31,2],[45,2]]}},{"k":[59],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,116],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[91,97],"v":[{"d":{"df":2,"dc":[[28,2],[42,2]]},"k":[115,98],"v":[{"k":[118],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[109,99],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,4],[78,4]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[40],"v":[{"k":[111,115,104],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[60],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116,108],"v":[{"k":[104,114],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[40],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[40],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[0,1]]}},{"k":[115],"v":[{"k":[117],"v":[{"k":[112],"v":[{"k":[62],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[112],"v":[{"k":[62],"v":[{"d":{"df":11,"dc":[[28,1],[36,1],[38,1],[42,1],[53,1],[55,1],[57,1],[59,1],[62,1],[75,1],[78,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":9,"dc":[[28,2],[35,1],[55,2],[63,2],[88,1],[89,1],[92,1],[94,1],[96,1]]}},{"d":{"df":2,"dc":[[53,2],[64,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[36,2]]}}]},{"k":[40],"v":[{"k":[122,46],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[45,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[53,1]]}},{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[73,1]]},"k":[22914],"v":[{"k":[26524],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[20943],"v":[{"k":[23567],"v":[{"k":[21253],"v":[{"k":[20307],"v":[{"k":[31215],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[91],"v":[{"k":[33258],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[26500],"v":[{"k":[24314],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[24182],"v":[{"k":[26367],"v":[{"k":[25442],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29978],"v":[{"k":[33267],"v":[{"k":[21442],"v":[{"k":[19982],"v":[{"k":[36807],"v":[{"k":[31038],"v":[{"k":[21306],"v":[{"k":[36129],"v":[{"k":[29486],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[65292],"v":[{"k":[27491],"v":[{"k":[26159],"v":[{"k":[20320],"v":[{"k":[20204],"v":[{"k":[25165],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,2],[42,2]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[112,97,105,99,101,116],"v":[{"k":[108,101,114,111],"v":[{"k":[97,105,111],"v":[{"k":[105,110],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[0,1],[34,1],[65,1],[107,1]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":4,"dc":[[0,1],[69,1],[84,2],[103,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[105,116],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[36,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[105,114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[114,99,110],"v":[{"k":[105],"v":[{"k":[109,101],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[31,1],[63,2]]},"k":[115,58,46],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[89,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":2,"dc":[[56,1],[63,1]]},"k":[97,101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[65292],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[55,1],[90,1]]},"k":[105],"v":[{"k":[111,110],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[110,114,115],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[101,115],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[109],"v":[{"k":[112,105],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":16,"dc":[[0,1],[23,2],[32,1],[33,1],[35,4],[37,1],[55,4],[56,1],[61,1],[63,1],[65,3],[69,2],[85,1],[88,2],[94,3],[95,1]]},"k":[39,93,115,44,58,46],"v":[{"d":{"df":3,"dc":[[0,1],[28,1],[58,2]]}},{"k":[40],"v":[{"k":[104,101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,2],[57,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[29,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":16,"dc":[[31,1],[35,1],[36,2],[37,1],[38,3],[55,2],[57,2],[58,1],[59,1],[61,4],[63,3],[65,1],[69,1],[90,1],[105,2],[107,2]]}},{"d":{"df":8,"dc":[[35,4],[36,2],[55,4],[56,3],[58,1],[59,6],[61,1],[85,1]]}},{"d":{"df":3,"dc":[[58,1],[61,1],[63,1]]}}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[30,1],[33,1],[59,1],[107,1]]},"k":[105,44,46,115],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[23,2],[55,1]]}}]}]},{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":2,"dc":[[33,1],[56,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]},{"k":[101,108,105],"v":[{"k":[112,101,108],"v":[{"k":[116],"v":[{"d":{"df":6,"dc":[[30,1],[33,1],[61,1],[65,1],[69,1],[104,1]]}}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[31,1],[63,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[39,12289],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"k":[110],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24211],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23548],"v":[{"k":[20986],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[99],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[114,101],"v":[{"k":[97],"v":[{"d":{"df":3,"dc":[[55,3],[65,1],[96,1]]}}]},{"k":[114,110],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[55,6]]}}]}]}]},{"k":[116,115],"v":[{"k":[46],"v":[{"d":{"df":2,"dc":[[56,1],[101,1]]}}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[98,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]}]}]}]},{"k":[112,97,98,111],"v":[{"k":[116,104],"v":[{"k":[121],"v":[{"d":{"df":4,"dc":[[0,1],[55,2],[58,3],[88,4]]}}]},{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115,122],"v":[{"d":{"df":2,"dc":[[36,11],[53,2]]},"k":[58,46],"v":[{"d":{"df":8,"dc":[[35,1],[36,5],[51,1],[53,5],[59,2],[75,2],[96,2],[113,2]]}},{"d":{"df":1,"dc":[[36,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[23,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]},{"k":[101,111],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[37,2]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97,115],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[0,1],[65,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]},{"k":[114,115,99,116],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]}]}]},{"k":[105,121],"v":[{"k":[101,108],"v":[{"k":[114],"v":[{"d":{"df":5,"dc":[[23,1],[63,1],[65,1],[69,2],[106,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]},{"k":[121],"v":[{"d":{"df":6,"dc":[[30,1],[63,4],[68,1],[69,2],[98,1],[105,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":4,"dc":[[36,1],[56,1],[63,1],[69,1]]}}]},{"k":[104],"v":[{"d":{"df":19,"dc":[[26,2],[33,2],[35,1],[38,1],[55,3],[56,7],[59,1],[61,2],[65,4],[66,1],[68,1],[69,3],[85,2],[95,1],[98,5],[99,1],[102,1],[106,2],[107,3]]}}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]},"k":[115,101,105],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[23,1],[35,2],[51,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"k":[109,103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":6,"dc":[[35,1],[59,1],[61,1],[65,3],[78,2],[96,3]]},"k":[115,58,44,46],"v":[{"d":{"df":8,"dc":[[31,1],[35,2],[36,1],[38,2],[61,6],[63,3],[65,2],[88,1]]},"k":[46,44,95,12290],"v":[{"d":{"df":6,"dc":[[35,1],[38,1],[63,1],[65,2],[88,1],[96,1]]}},{"d":{"df":4,"dc":[[35,1],[36,1],[63,1],[88,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"d":{"df":1,"dc":[[78,1]]}}]},{"d":{"df":2,"dc":[[35,2],[51,2]]}},{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]},{"k":[109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[99,103,118,97,100,104,115,116,111],"v":[{"k":[111],"v":[{"k":[117,100],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[117,58,44,46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[40],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[56,10],[64,10]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[36,2],[69,1]]},"k":[61],"v":[{"k":[34],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[45],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[53],"v":[{"k":[57],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[34],"v":[{"k":[63],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,108],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[23,1],[30,1]]},"k":[44,39,115],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":2,"dc":[[30,1],[95,4]]}},{"k":[39],"v":[{"d":{"df":1,"dc":[[35,2]]}}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[28,1],[31,2],[55,1]]},"k":[44,97,41],"v":[{"d":{"df":2,"dc":[[31,1],[69,1]]}},{"k":[108],"v":[{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101,105],"v":[{"d":{"df":2,"dc":[[55,1],[63,2]]},"k":[100],"v":[{"d":{"df":2,"dc":[[63,1],[85,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[44,39],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[69,1]]},"k":[100,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[63,1],[65,2]]},"k":[100,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[101,104,105,114,97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[117],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[44,33],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[65,1],[68,1],[85,1]]}}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"k":[117],"v":[{"k":[103],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[107,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]},{"k":[105,103,117],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[56,1],[61,1]]},"k":[111,101,105],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[28,1]]}}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[36,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[37,2],[94,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":4,"dc":[[35,2],[51,1],[59,4],[63,1]]},"k":[100,46,115,65288],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"d":{"df":2,"dc":[[35,1],[95,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"k":[36793],"v":[{"k":[65289],"v":[{"k":[19978],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[101,105],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[56,1],[63,5],[84,1],[85,1]]},"k":[105,34,93,115,58,46],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,2]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":3,"dc":[[28,1],[65,1],[107,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[46],"v":[{"d":{"df":2,"dc":[[29,1],[69,1]]}}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111,47],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[59,1],[63,3],[65,2],[69,1]]},"k":[46,58,33,44],"v":[{"d":{"df":4,"dc":[[37,1],[63,1],[69,1],[90,1]]}},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":2,"dc":[[63,1],[104,1]]}}]},{"d":{"df":1,"dc":[[58,1]]}},{"d":{"df":5,"dc":[[89,1],[98,1],[101,1],[102,1],[106,1]]}}]}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116,99],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[46,44],"v":[{"d":{"df":5,"dc":[[31,1],[36,1],[57,1],[59,1],[63,1]]},"k":[46,41,44],"v":[{"d":{"df":4,"dc":[[30,1],[32,1],[35,2],[88,1]]}},{"d":{"df":2,"dc":[[56,1],[59,1]]},"k":[44],"v":[{"d":{"df":3,"dc":[[31,1],[59,1],[94,1]]}}]},{"d":{"df":2,"dc":[[56,1],[63,1]]}}]},{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[101,111,97],"v":[{"k":[110,114],"v":[{"d":{"df":5,"dc":[[30,1],[33,1],[63,8],[101,1],[106,1]]},"k":[116,108],"v":[{"d":{"df":5,"dc":[[33,1],[35,6],[61,3],[63,1],[65,2]]},"k":[115,46,112,58,96],"v":[{"d":{"df":1,"dc":[[35,12]]},"k":[44,58,46],"v":[{"d":{"df":1,"dc":[[35,3]]}},{"d":{"df":1,"dc":[[35,2]]}},{"d":{"df":1,"dc":[[35,2]]}}]},{"d":{"df":1,"dc":[[35,3]]}},{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[35,2]]}}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[121],"v":[{"d":{"df":13,"dc":[[30,1],[38,7],[56,5],[59,2],[63,1],[66,2],[68,2],[85,1],[88,1],[96,1],[99,1],[102,3],[106,2]]},"k":[119],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]},{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[117,63],"v":[{"k":[105,97],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[31,1],[99,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":3,"dc":[[33,1],[55,5],[62,4]]},"k":[108,115],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[38,1],[95,1]]}}]}]},{"d":{"df":3,"dc":[[55,1],[95,1],[96,1]]}}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[115,112,53],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[55,1],[90,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[78,1]]},"k":[45],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]},{"k":[111,105,114,101,97,121,117,120,61,58],"v":[{"d":{"df":11,"dc":[[23,2],[33,2],[35,1],[55,3],[56,1],[61,2],[63,1],[65,1],[67,1],[88,1],[104,1]]},"k":[119,110,109,99,105,101,117],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[35,1],[37,1]]},"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"d":{"df":3,"dc":[[0,1],[26,1],[94,1]]},"k":[101,46],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[0,2],[36,4]]}}]},{"d":{"df":1,"dc":[[26,1]]}}]}]}]}]}]}]},{"k":[39,101],"v":[{"k":[116],"v":[{"d":{"df":12,"dc":[[0,1],[23,2],[28,1],[29,2],[56,3],[63,1],[68,1],[95,1],[98,1],[101,1],[104,1],[105,1]]}}]},{"d":{"df":1,"dc":[[69,1]]}}]},{"d":{"df":11,"dc":[[0,4],[7,3],[33,1],[35,2],[46,1],[48,1],[51,1],[59,1],[63,1],[77,1],[78,2]]},"k":[46,97],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[117,93],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[33,1],[37,1]]},"k":[97,93,46],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[23,4],[37,1]]}}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111,47],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[35,1],[56,1],[65,1]]}}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[23,1],[69,1]]}}]}]},{"k":[115],"v":[{"d":{"df":5,"dc":[[28,1],[55,1],[63,2],[95,1],[105,1]]},"k":[110],"v":[{"k":[39],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[23,1],[68,1]]}}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[96,9]]}}]}]}]}]}]}]},{"k":[114,115,102,97,109,118,100],"v":[{"k":[101,116],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[111,108,105],"v":[{"k":[114],"v":[{"k":[121,105],"v":[{"d":{"df":2,"dc":[[0,1],[26,2]]}},{"k":[101],"v":[{"k":[115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":7,"dc":[[28,1],[56,1],[58,1],[59,1],[63,1],[65,2],[69,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[68,1]]}},{"d":{"df":1,"dc":[[92,1]]}}]}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[63,6]]}}]}]},{"k":[112,97,116,99],"v":[{"k":[108,111,97],"v":[{"k":[97],"v":[{"k":[121],"v":[{"d":{"df":18,"dc":[[0,1],[32,1],[35,3],[55,3],[56,2],[58,1],[63,6],[66,2],[69,3],[88,1],[96,1],[98,3],[100,1],[101,1],[102,2],[104,1],[105,1],[106,2]]},"k":[101,46,44,105,115],"v":[{"k":[100],"v":[{"d":{"df":4,"dc":[[32,1],[61,1],[63,1],[88,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[36,1],[67,1]]}}]}]},{"d":{"df":2,"dc":[[58,1],[67,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":4,"dc":[[66,1],[67,1],[68,1],[104,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"d":{"df":1,"dc":[[67,1]]}}]}]}]},{"k":[115],"v":[{"k":[101,105],"v":[{"d":{"df":1,"dc":[[33,2]]},"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]},{"k":[98,100],"v":[{"k":[105,108],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[118],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[114,105,97,111],"v":[{"k":[105,97],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":6,"dc":[[30,2],[35,1],[63,1],[102,1],[106,1],[107,1]]},"k":[115,46],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[107,2]]}}]}]}]},{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[104],"v":[{"d":{"df":5,"dc":[[63,3],[69,2],[98,1],[99,1],[107,1]]},"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[66,1],[75,1],[85,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]},{"k":[114,117],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[38,3],[85,1],[94,1],[101,1]]}}]}]}]},{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]},{"k":[102],"v":[{"k":[101,105],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99,116],"v":[{"k":[101],"v":[{"d":{"df":9,"dc":[[31,1],[58,1],[68,1],[88,2],[92,1],[98,1],[100,1],[102,1],[104,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"d":{"df":23,"dc":[[33,1],[34,4],[35,1],[36,5],[55,1],[57,1],[59,5],[63,14],[67,3],[68,1],[69,4],[85,1],[94,1],[96,1],[97,1],[99,1],[100,1],[101,1],[102,1],[103,2],[104,2],[106,1],[107,4]]},"k":[46,105],"v":[{"d":{"df":1,"dc":[[34,1]]}},{"k":[97],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[66,2],[98,1],[104,1]]},"k":[121],"v":[{"d":{"df":1,"dc":[[99,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]}]},{"k":[108,103],"v":[{"d":{"df":1,"dc":[[67,1]]},"k":[111],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[46,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":5,"dc":[[38,12],[55,5],[56,26],[62,3],[64,7]]},"k":[41,115,46,58,110,105,44],"v":[{"d":{"df":1,"dc":[[38,1]]}},{"d":{"df":4,"dc":[[38,1],[55,2],[56,3],[64,1]]},"k":[41,44,58,46,91,65292],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"d":{"df":2,"dc":[[38,1],[56,1]]}},{"d":{"df":4,"dc":[[55,2],[56,4],[62,2],[64,4]]}},{"d":{"df":4,"dc":[[55,1],[56,2],[66,1],[67,1]]}},{"k":[50],"v":[{"k":[93],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[38,1],[56,2],[106,1]]}},{"d":{"df":6,"dc":[[38,1],[54,1],[55,27],[56,1],[62,26],[64,1]]},"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":3,"dc":[[55,2],[56,1],[62,2]]},"k":[59],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[56,1],[67,1]]}}]}]}]}]}]}]}]},{"k":[105,101],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[56,2],[69,1],[95,1]]},"k":[100],"v":[{"d":{"df":1,"dc":[[38,2]]}}]}]}]},{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[56,1],[102,1]]}}]},{"k":[97,105],"v":[{"k":[119,103,115,105],"v":[{"d":{"df":5,"dc":[[28,1],[94,1],[100,1],[104,1],[107,1]]},"k":[105,110],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[0,1],[63,1]]}}]}]},{"d":{"df":1,"dc":[[104,1]]}}]},{"k":[103],"v":[{"k":[105,97,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[61,6]]},"k":[44,46],"v":[{"d":{"df":2,"dc":[[61,3],[63,1]]}},{"d":{"df":1,"dc":[[61,3]]}}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,2]]},"k":[44,46,58],"v":[{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[61,2]]}},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[108,118],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[58,1]]},"k":[110],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]},{"k":[102,109,116,115,112,118,99,98,100,114,110,101,97,108],"v":[{"k":[105,97,111],"v":[{"k":[110],"v":[{"k":[101,105],"v":[{"d":{"df":10,"dc":[[30,2],[33,2],[38,2],[56,10],[85,1],[94,6],[95,2],[96,1],[100,1],[105,1]]},"k":[100,115],"v":[{"d":{"df":11,"dc":[[0,3],[28,2],[30,1],[33,1],[38,4],[56,3],[58,1],[59,4],[85,1],[94,2],[95,2]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":2,"dc":[[30,1],[38,3]]}}]},{"k":[116,110],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[58],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"d":{"df":1,"dc":[[97,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"d":{"df":12,"dc":[[30,4],[33,1],[36,1],[55,4],[56,5],[59,1],[61,2],[63,6],[65,5],[81,1],[90,1],[96,1]]},"k":[44,46,58,115],"v":[{"d":{"df":7,"dc":[[30,1],[36,2],[55,1],[56,3],[63,2],[65,1],[95,1]]}},{"d":{"df":7,"dc":[[55,1],[56,2],[58,1],[59,1],[65,2],[88,1],[96,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]},{"k":[111,97],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,3],[34,1]]}}]}]}]}]},{"k":[97,101],"v":[{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[101,46,115],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[23,1],[59,1]]}}]},{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":5,"dc":[[32,1],[36,1],[56,2],[61,1],[63,2]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[26,1]]}},{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]},{"k":[114,99],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"d":{"df":2,"dc":[[31,1],[38,1]]},"k":[100],"v":[{"d":{"df":1,"dc":[[59,4]]},"k":[44],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[99,105,115],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112,98],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[30,15],[63,3],[85,1]]},"k":[46,58,44,93,115],"v":[{"d":{"df":2,"dc":[[23,1],[30,2]]},"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":1,"dc":[[30,1]]}},{"k":[40],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[23,1],[28,1]]},"k":[100],"v":[{"d":{"df":4,"dc":[[31,1],[56,2],[63,1],[100,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[29,1],[63,6],[68,1]]},"k":[46,101,105,97],"v":[{"d":{"df":4,"dc":[[34,1],[63,2],[65,1],[69,1]]}},{"k":[100,114],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[101,114],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[34,1]]},"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":5,"dc":[[26,1],[38,1],[58,1],[68,1],[95,1]]}}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[121,105],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,6]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,28]]}}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[55,2],[65,1],[81,1]]},"k":[101,105],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[112],"v":[{"d":{"df":3,"dc":[[28,1],[55,1],[63,1]]},"k":[109,101,105],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[28,1],[63,5]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114,100],"v":[{"d":{"df":2,"dc":[[35,1],[63,3]]},"k":[115,39],"v":[{"d":{"df":5,"dc":[[28,1],[31,1],[35,1],[63,20],[65,3]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[30,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"k":[99,97],"v":[{"k":[101],"v":[{"k":[115,44],"v":[{"k":[44,41],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]},{"k":[105,108,97,114,111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[30,1],[55,1],[93,1]]}}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[101,105,97],"v":[{"d":{"df":6,"dc":[[32,1],[55,1],[56,4],[61,1],[65,1],[85,1]]},"k":[100],"v":[{"d":{"df":3,"dc":[[55,2],[56,1],[61,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[118,111],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,1],[63,1]]}}]},{"k":[110],"v":[{"d":{"df":3,"dc":[[55,2],[56,1],[65,1]]},"k":[58,115],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[65,4]]}}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[55,1],[62,2]]}}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]},{"k":[112],"v":[{"k":[101,108],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[98,1],[102,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[98,1],[104,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[116,114,110,121,115],"v":[{"k":[97,101,117],"v":[{"d":{"df":40,"dc":[[0,2],[23,1],[30,7],[31,3],[32,4],[34,1],[35,12],[36,2],[38,28],[51,1],[53,1],[55,36],[56,34],[58,12],[61,9],[62,8],[63,21],[65,2],[66,2],[67,2],[68,4],[69,10],[71,1],[78,13],[84,1],[85,3],[88,3],[90,1],[94,3],[95,3],[98,5],[99,2],[100,6],[101,5],[102,2],[103,3],[104,5],[105,7],[106,5],[107,3]]},"k":[58,44,122,115,46,105,116,98,108,91,93,95,41,65292,118,39],"v":[{"d":{"df":49,"dc":[[0,3],[7,3],[28,2],[30,1],[32,4],[34,5],[35,8],[36,2],[37,14],[38,2],[42,2],[46,1],[47,14],[49,3],[51,8],[52,5],[53,2],[54,2],[56,8],[58,9],[59,6],[61,4],[64,8],[71,7],[75,6],[78,4],[83,6],[84,3],[85,16],[88,9],[89,2],[90,3],[92,4],[93,6],[94,7],[95,4],[96,3],[97,1],[110,16],[111,3],[112,1],[113,3],[114,3],[115,4],[116,9],[117,4],[118,6],[119,7],[120,2]]}},{"d":{"df":13,"dc":[[30,1],[32,1],[35,1],[55,1],[56,4],[58,2],[61,1],[63,4],[67,1],[68,1],[88,1],[101,1],[106,1]]}},{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[55,16],[56,7],[62,26],[64,10],[104,1]]},"k":[58,105,46,115,44,63,12290],"v":[{"d":{"df":6,"dc":[[34,1],[52,1],[55,10],[56,11],[62,10],[64,10]]}},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[55,12],[56,2],[62,12],[64,2]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[56,2]]},"k":[100],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[55,1],[56,2],[63,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[104,1]]}}]},{"d":{"df":3,"dc":[[55,3],[56,2],[66,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":3,"dc":[[56,1],[62,2],[64,5]]},"k":[20363,31995,25903],"v":[{"k":[22914],"v":[{"k":[65292,65306],"v":[{"d":{"df":1,"dc":[[62,1]]}},{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[21015],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[25345],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"d":{"df":19,"dc":[[35,1],[36,1],[38,1],[55,5],[56,5],[58,2],[63,7],[67,1],[69,1],[85,3],[88,1],[92,1],[94,1],[95,2],[99,2],[100,2],[101,2],[106,2],[107,1]]},"k":[99,118,100,109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[58,2],[71,2]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[40],"v":[{"k":[102],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,116],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[61,2],[78,3]]},"k":[58,41],"v":[{"d":{"df":4,"dc":[[35,5],[51,5],[61,2],[78,2]]}},{"d":{"df":2,"dc":[[61,7],[78,7]]},"k":[44],"v":[{"d":{"df":2,"dc":[[61,4],[78,4]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"d":{"df":3,"dc":[[38,2],[54,2],[78,1]]},"k":[44,41],"v":[{"d":{"df":1,"dc":[[38,2]]}},{"k":[44,96],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}},{"d":{"df":1,"dc":[[78,1]]},"k":[44,12290],"v":[{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,2],[51,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[35,4],[51,4]]}}]}]}]}]},{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]},"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[48,49,100],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[126],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[37],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[37],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[37],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[38,1]]}},{"k":[58],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"d":{"df":1,"dc":[[51,1]]},"k":[100,22312,37325],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]},{"k":[36825],"v":[{"k":[37324],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]},{"k":[32472],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[59],"v":[{"d":{"df":2,"dc":[[55,13],[62,13]]}}]}]}]}]}]},{"k":[115],"v":[{"d":{"df":2,"dc":[[58,1],[106,1]]}}]}]},{"d":{"df":3,"dc":[[35,1],[55,2],[103,1]]},"k":[59,44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"d":{"df":1,"dc":[[101,1]]}}]},{"k":[109],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[107],"v":[{"d":{"df":4,"dc":[[34,1],[36,2],[63,1],[68,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[104],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[46,115],"v":[{"d":{"df":1,"dc":[[67,1]]}},{"d":{"df":1,"dc":[[67,1]]}}]}]}]}]}]}]}]}]},{"k":[110,41],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":3,"dc":[[58,3],[63,6],[86,2]]},"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[61,1],[78,1]]}}]},{"k":[97,114],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[68,1]]}}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]},{"k":[34],"v":[{"k":[109],"v":[{"k":[8230,53],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}},{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[99],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[44],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[44],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[44],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[51],"v":[{"k":[44],"v":[{"k":[48],"v":[{"k":[45],"v":[{"k":[57],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[44],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[56],"v":[{"k":[52],"v":[{"k":[44],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[48],"v":[{"k":[53],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[94,1]]}}]},{"k":[101,111,97,121,105,117,108,100,252,115],"v":[{"k":[116,115,109,97,101,105,110,99,100,108,114],"v":[{"k":[104,114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"d":{"df":8,"dc":[[0,2],[32,1],[35,2],[56,1],[61,2],[63,1],[65,2],[94,1]]},"k":[115,46,58],"v":[{"d":{"df":1,"dc":[[26,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[0,1],[55,1]]}}]},{"d":{"df":2,"dc":[[33,1],[98,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[0,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":3,"dc":[[31,2],[33,1],[63,2]]}}]}]}]},{"k":[110,115],"v":[{"k":[105,115,119],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[33,1],[69,1],[105,1]]},"k":[108,102,115,46,44],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":3,"dc":[[35,1],[84,1],[107,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[66,1],[84,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"d":{"df":4,"dc":[[55,1],[63,1],[101,1],[104,1]]}}]}]},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":2,"dc":[[69,1],[105,1]]}},{"d":{"df":1,"dc":[[105,1]]}}]}]}]},{"d":{"df":9,"dc":[[35,1],[38,2],[55,3],[56,4],[61,4],[65,2],[85,2],[103,1],[106,1]]}},{"k":[104],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[109,100],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[67,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":2,"dc":[[55,1],[63,1]]}}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[105],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[95,1],[107,1]]}}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]},{"k":[114,100,115,98,110,117,109,116,118],"v":[{"k":[101,112],"v":[{"d":{"df":27,"dc":[[0,1],[23,4],[30,2],[31,1],[32,2],[35,1],[36,2],[37,2],[38,4],[55,1],[56,3],[59,2],[61,3],[63,25],[65,3],[66,3],[67,1],[68,1],[85,1],[90,1],[98,1],[99,2],[100,2],[101,1],[102,1],[104,1],[107,3]]},"k":[44,46,111],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[63,2]]}},{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[104],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[117,101,105],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[115,44,46],"v":[{"d":{"df":2,"dc":[[26,1],[65,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":1,"dc":[[28,2]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"d":{"df":2,"dc":[[36,1],[65,2]]},"k":[44,115,46,114],"v":[{"d":{"df":2,"dc":[[28,1],[63,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"d":{"df":1,"dc":[[65,1]]}},{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[102],"v":[{"k":[105,121],"v":[{"k":[99,101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"d":{"df":2,"dc":[[30,1],[59,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]},{"k":[116],"v":[{"d":{"df":12,"dc":[[31,1],[35,1],[36,1],[38,2],[55,2],[56,4],[59,1],[63,2],[65,3],[69,1],[98,1],[106,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":3,"dc":[[56,1],[100,1],[105,1]]}}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[108,44],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[115,110],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[35,5],[36,1],[61,3],[63,4],[88,1]]},"k":[47,111,46],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[35,3]]}}]}]}]}]}]}]}]},{"k":[118,117],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"d":{"df":1,"dc":[[96,1]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]},{"k":[107,110,116,105,114,112,121,120,100,106,108,103],"v":[{"k":[101,105],"v":[{"d":{"df":20,"dc":[[0,1],[23,3],[30,3],[31,2],[33,1],[55,5],[56,1],[61,6],[63,3],[65,3],[66,1],[69,1],[85,2],[98,1],[100,2],[101,1],[102,1],[104,2],[106,1],[107,1]]},"k":[115],"v":[{"d":{"df":9,"dc":[[36,1],[55,1],[56,1],[61,1],[66,1],[68,1],[69,2],[96,1],[104,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[55,4],[63,6]]}}]}]}]},{"k":[117,97,121,100],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[93,108,58],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":3,"dc":[[31,1],[35,1],[65,2]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[35,1],[56,2]]}},{"d":{"df":1,"dc":[[55,1]]}}]}]},{"d":{"df":1,"dc":[[85,1]]}}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,3]]},"k":[109,115,114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"d":{"df":12,"dc":[[31,1],[34,2],[58,1],[63,1],[66,1],[68,1],[98,2],[99,1],[100,1],[101,1],[102,1],[106,2]]}},{"k":[97],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[99,104,101],"v":[{"k":[104],"v":[{"d":{"df":3,"dc":[[23,1],[55,1],[66,1]]},"k":[101,105],"v":[{"k":[100,115],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[115],"v":[{"k":[113],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[91],"v":[{"k":[50],"v":[{"k":[93],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[108,110],"v":[{"d":{"df":2,"dc":[[23,1],[30,1]]}},{"d":{"df":2,"dc":[[63,3],[102,1]]},"k":[108,116],"v":[{"k":[121],"v":[{"d":{"df":4,"dc":[[61,1],[68,1],[95,1],[106,1]]}}]},{"k":[97,101],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]},{"k":[107,105],"v":[{"d":{"df":2,"dc":[[67,1],[107,1]]},"k":[101,112,100],"v":[{"k":[116,114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[39],"v":[{"d":{"df":2,"dc":[[30,1],[35,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]}}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[37,3],[47,3]]}}]}]}]}]},{"k":[110],"v":[{"k":[111],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[36,1],[38,5],[56,20],[78,1]]},"k":[44,112,115,46],"v":[{"d":{"df":2,"dc":[[31,1],[38,1]]}},{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[36,1],[38,15],[56,8]]},"k":[46,58,44],"v":[{"d":{"df":1,"dc":[[38,3]]}},{"d":{"df":1,"dc":[[56,3]]}},{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[38,8],[94,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,2]]}}]}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[103,1]]}}]},{"d":{"df":5,"dc":[[31,1],[36,2],[38,1],[85,1],[101,1]]}},{"k":[45,58,105],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[56],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[34],"v":[{"d":{"df":32,"dc":[[32,1],[34,1],[49,1],[52,1],[66,3],[67,2],[68,4],[69,7],[79,2],[80,4],[82,3],[83,6],[98,1],[99,2],[100,4],[101,6],[102,4],[103,4],[104,5],[105,4],[106,6],[107,3],[121,2],[122,1],[123,4],[124,6],[125,5],[126,4],[127,4],[128,4],[129,6],[130,3]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":10,"dc":[[32,2],[38,1],[49,2],[54,1],[56,1],[59,6],[61,4],[64,1],[75,6],[78,4]]}},{"k":[109],"v":[{"k":[117,105],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[38,6],[85,2]]}}]},{"k":[122],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":3,"dc":[[61,1],[63,1],[65,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"d":{"df":3,"dc":[[84,1],[105,1],[107,1]]},"k":[34],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":12,"dc":[[0,1],[7,1],[28,2],[33,3],[35,1],[42,2],[48,3],[51,1],[58,2],[61,1],[71,2],[78,1]]},"k":[46,115],"v":[{"k":[115,114,111,100,103,104,99],"v":[{"k":[101,104],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[111,123,46],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[35,1],[51,1]]}}]}]}]}]}]}]}]},{"d":{"df":8,"dc":[[28,2],[35,1],[42,2],[51,1],[58,3],[61,10],[71,3],[78,10]]}},{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[40],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[41,123],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]},{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[99,108],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,5],[51,5]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[123],"v":[{"d":{"df":4,"dc":[[35,3],[51,3],[61,4],[78,4]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[122],"v":[{"k":[114],"v":[{"k":[40],"v":[{"k":[41],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[40],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116,102],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,4],[78,4]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,115,103,108,100],"v":[{"k":[105,58],"v":[{"k":[109],"v":[{"k":[97,117],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[23,1],[28,5],[65,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]},{"k":[109],"v":[{"d":{"df":2,"dc":[[38,3],[85,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]},{"d":{"df":10,"dc":[[32,2],[38,1],[49,2],[54,1],[56,1],[59,4],[61,4],[64,1],[75,4],[78,4]]}}]},{"k":[115,116,117,108],"v":[{"k":[105,112],"v":[{"k":[110,111],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[28,1]]}}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[110,115],"v":[{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[105,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[98,1],[101,1]]}}]}]}]}]},{"k":[104,114],"v":[{"k":[116],"v":[{"d":{"df":7,"dc":[[36,1],[55,4],[56,1],[68,2],[69,2],[85,1],[106,1]]}}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[115,111],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[41,115],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[41,115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]},{"k":[100,45],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[59,1],[96,6]]},"k":[39,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"d":{"df":1,"dc":[[105,1]]}}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]}]}]},{"k":[99,108,115],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[31,1],[63,1]]}}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[112,45],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":9,"dc":[[34,1],[38,2],[55,10],[56,2],[59,1],[63,1],[67,2],[85,1],[101,1]]}}]}]},{"k":[115],"v":[{"k":[116,101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]},{"k":[39],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[45],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[104,101,105,111,97,51,114],"v":[{"k":[105,101,111,97,121],"v":[{"k":[99,108,116],"v":[{"k":[104],"v":[{"d":{"df":27,"dc":[[0,1],[23,1],[28,2],[31,1],[32,1],[33,1],[35,2],[36,2],[37,1],[38,4],[55,4],[56,4],[59,2],[61,10],[63,5],[65,3],[66,2],[68,3],[69,2],[88,1],[93,1],[97,1],[101,1],[102,1],[104,1],[106,1],[107,1]]}}]},{"k":[101],"v":[{"d":{"df":27,"dc":[[30,1],[31,1],[32,1],[33,5],[34,2],[35,6],[38,2],[55,2],[56,2],[58,1],[61,2],[65,1],[66,2],[67,1],[84,1],[85,1],[88,2],[89,1],[92,1],[95,3],[96,3],[98,2],[100,2],[101,1],[103,1],[105,2],[106,1]]}}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[55,1],[69,1]]}}]}]},{"k":[114,110,116],"v":[{"k":[101],"v":[{"d":{"df":9,"dc":[[0,1],[31,3],[33,1],[35,1],[38,1],[55,4],[59,2],[61,1],[63,1]]}}]},{"d":{"df":26,"dc":[[0,1],[29,1],[31,2],[32,1],[33,1],[34,1],[35,12],[36,1],[37,1],[55,6],[56,2],[58,3],[59,1],[61,3],[63,6],[65,5],[69,3],[77,1],[85,1],[88,1],[98,1],[99,1],[101,2],[103,1],[104,1],[107,3]]},"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":6,"dc":[[30,1],[35,1],[55,1],[69,2],[93,1],[96,1]]}}]}]}]}]},{"d":{"df":4,"dc":[[23,1],[28,1],[63,1],[65,3]]},"k":[108,109,115],"v":[{"k":[101],"v":[{"d":{"df":6,"dc":[[30,1],[59,2],[63,1],[65,1],[102,1],[104,1]]},"k":[46,34,44],"v":[{"d":{"df":3,"dc":[[68,2],[98,2],[102,1]]}},{"d":{"df":1,"dc":[[98,2]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]},{"d":{"df":1,"dc":[[55,1]]}},{"k":[101],"v":[{"d":{"df":2,"dc":[[59,2],[61,1]]}}]}]},{"k":[116],"v":[{"d":{"df":7,"dc":[[38,1],[55,1],[63,2],[65,1],[66,1],[68,1],[84,1]]}}]},{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":30,"dc":[[0,2],[28,1],[30,2],[31,3],[32,1],[33,3],[35,3],[36,8],[37,2],[38,1],[55,17],[56,6],[58,1],[61,10],[63,26],[65,6],[66,1],[69,12],[84,2],[85,2],[88,10],[94,3],[96,3],[99,1],[100,2],[101,3],[102,1],[104,1],[106,3],[107,3]]},"k":[39,98,108,114,101,105],"v":[{"k":[108,118],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[26,1],[63,2],[65,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[30,3]]},"k":[112,115],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[42,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[35,1],[68,1],[104,1]]},"k":[93,44],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[35,1],[68,1]]}}]}]}]}]}]},{"k":[99,108],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[31,1],[65,1]]}}]}]}]},{"d":{"df":4,"dc":[[56,1],[63,1],[98,1],[107,1]]},"k":[45,44,46],"v":[{"k":[107],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[95,1]]}},{"d":{"df":1,"dc":[[95,1]]}}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[63,2],[65,1]]}}]},{"k":[107],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[107,2]]}}]}]}]}]},{"k":[116,108,100,115,110],"v":[{"k":[104],"v":[{"d":{"df":32,"dc":[[0,7],[28,7],[30,5],[31,4],[35,2],[38,1],[55,8],[56,3],[58,2],[61,6],[63,26],[65,5],[66,1],[68,1],[69,10],[84,2],[85,2],[88,1],[90,4],[92,1],[94,3],[95,2],[96,2],[98,4],[99,1],[101,2],[102,4],[103,2],[104,2],[105,1],[106,4],[107,3]]},"k":[111,105],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":10,"dc":[[23,1],[33,2],[36,1],[56,3],[59,2],[69,1],[88,1],[93,1],[104,1],[107,1]]}}]}]},{"k":[110],"v":[{"d":{"df":2,"dc":[[38,1],[63,1]]}}]}]}]},{"k":[108],"v":[{"d":{"df":31,"dc":[[0,1],[23,2],[28,4],[30,5],[31,2],[32,1],[33,3],[35,2],[36,4],[37,1],[38,1],[55,4],[56,16],[58,3],[59,2],[61,5],[63,3],[65,6],[66,1],[69,2],[84,4],[85,4],[88,6],[95,2],[96,5],[98,3],[99,2],[100,1],[101,1],[102,3],[106,2]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[33,1],[63,1],[95,1]]}}]}]}]}]},{"k":[116,101],"v":[{"k":[104],"v":[{"d":{"df":11,"dc":[[0,2],[33,7],[37,1],[59,5],[65,1],[75,1],[81,1],[85,6],[88,3],[94,1],[101,1]]},"k":[46,61,58,47,40,44],"v":[{"d":{"df":3,"dc":[[0,1],[33,1],[85,2]]}},{"k":[34],"v":[{"k":[49,56,52,55,53,54],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[37],"v":[{"k":[34],"v":[{"d":{"df":32,"dc":[[32,1],[37,2],[47,2],[49,1],[66,3],[67,2],[68,4],[69,5],[79,2],[80,4],[82,3],[83,4],[98,1],[99,2],[100,4],[101,6],[102,4],[103,4],[104,5],[105,4],[106,6],[107,3],[121,2],[122,1],[123,4],[124,6],[125,5],[126,4],[127,4],[128,4],[129,6],[130,3]]}}]}]}]}]},{"k":[48],"v":[{"k":[37,48],"v":[{"k":[34],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[69,1],[83,1]]}}]},{"k":[112],"v":[{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[34,112],"v":[{"d":{"df":3,"dc":[[59,1],[63,1],[77,1]]}},{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,4],[77,4]]}}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,2],[77,2]]}}]}]}]},{"k":[48],"v":[{"k":[48,37],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,5],[77,5]]}}]}]}]},{"k":[34],"v":[{"d":{"df":2,"dc":[[69,1],[83,1]]}}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[112,34],"v":[{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[63,3],[77,3]]}}]}]},{"d":{"df":2,"dc":[[63,3],[77,3]]}}]}]}]}]}]},{"d":{"df":6,"dc":[[33,3],[48,3],[59,5],[75,5],[88,1],[116,1]]}},{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[39],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[88,1]]}}]}]},{"d":{"df":1,"dc":[[85,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]},{"k":[104],"v":[{"d":{"df":1,"dc":[[33,1]]}}]},{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[111,97],"v":[{"k":[110,112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[40],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[39],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[63],"v":[{"k":[119],"v":[{"k":[100],"v":[{"k":[61],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114,110,117,109],"v":[{"k":[114,100,107,116,115],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[44,115],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]},{"d":{"df":4,"dc":[[31,2],[36,2],[59,1],[63,2]]},"k":[115,101,44,105,112,97],"v":[{"d":{"df":5,"dc":[[35,4],[59,1],[61,1],[88,1],[102,1]]}},{"k":[100],"v":[{"k":[63],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"d":{"df":1,"dc":[[63,2]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]},{"k":[104],"v":[{"d":{"df":2,"dc":[[56,1],[65,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]},{"k":[39,100],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[35,1],[65,1]]}}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]},{"k":[108],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[121,110,115,114,108,118],"v":[{"d":{"df":12,"dc":[[23,1],[28,1],[30,1],[33,1],[36,2],[37,1],[56,1],[58,1],[63,4],[66,1],[84,1],[96,1]]},"k":[44,115,46],"v":[{"d":{"df":6,"dc":[[31,1],[55,1],[56,1],[63,4],[88,1],[94,1]]}},{"d":{"df":1,"dc":[[34,1]]}},{"d":{"df":5,"dc":[[56,1],[58,1],[63,2],[69,1],[101,1]]}}]},{"k":[116],"v":[{"d":{"df":16,"dc":[[26,1],[28,1],[33,1],[36,1],[38,1],[56,1],[63,3],[65,2],[85,1],[88,1],[90,2],[94,1],[95,1],[96,1],[98,1],[102,1]]}}]},{"d":{"df":18,"dc":[[30,3],[31,1],[32,1],[33,4],[35,2],[56,2],[58,3],[63,1],[65,1],[66,1],[67,1],[85,2],[88,1],[90,1],[94,1],[97,1],[103,1],[107,1]]}},{"k":[110,109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[37,2],[47,2],[65,1]]},"k":[65292],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20174],"v":[{"k":[38271],"v":[{"k":[36828],"v":[{"k":[32500],"v":[{"k":[25252],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[25104],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[69,2]]},"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]},{"k":[99],"v":[{"d":{"df":1,"dc":[[46,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[105,111],"v":[{"k":[116],"v":[{"k":[105,116,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[35,1],[37,2],[65,1]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[36,1],[63,1]]}}]}]},{"d":{"df":2,"dc":[[36,1],[37,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[101,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[117,114,105,111,101,97,40,108],"v":[{"k":[114,110,116,108,99],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[0,1],[63,5],[69,1],[88,1]]}}]}]}]}]},{"k":[99,110,100],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":10,"dc":[[23,1],[30,1],[35,5],[55,2],[58,1],[61,9],[63,2],[78,6],[85,1],[86,1]]},"k":[97,46,40,115],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[105],"v":[{"k":[116],"v":[{"k":[121,105],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[26,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[26,1],[35,1],[55,1],[94,1]]}},{"k":[41,112,100,101,116,105,118],"v":[{"d":{"df":6,"dc":[[33,1],[35,5],[48,1],[51,9],[61,2],[78,2]]}},{"k":[97],"v":[{"k":[114],"v":[{"k":[97,109],"v":[{"k":[109],"v":[{"k":[115,41],"v":[{"k":[41,44],"v":[{"d":{"df":4,"dc":[[35,4],[51,4],[61,2],[78,2]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]},{"k":[97],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]},{"k":[101,97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[41,105],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}},{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]},{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,3],[51,3]]}}]}]}]}]}]},{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,3],[78,3]]}}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[63,1]]},"k":[46,34],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[101,121],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[56,1],[68,10]]},"k":[115],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]},{"d":{"df":1,"dc":[[69,1]]}}]},{"d":{"df":1,"dc":[[66,1]]}}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[23,1],[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[108,102],"v":[{"d":{"df":2,"dc":[[26,1],[61,2]]},"k":[121,102],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[104],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]},{"k":[111,101,97,117],"v":[{"k":[109],"v":[{"d":{"df":27,"dc":[[0,1],[26,7],[28,9],[31,5],[33,1],[35,4],[37,1],[38,1],[42,9],[45,3],[55,11],[56,12],[57,1],[59,5],[61,3],[62,1],[63,3],[65,15],[66,2],[68,4],[78,1],[81,10],[84,1],[94,1],[96,3],[101,1],[106,2]]},"k":[46,100,116],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[113,101],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[63,1],[94,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[103,109],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[59,16]]},"k":[115,58,44,125,46,65289],"v":[{"d":{"df":1,"dc":[[59,9]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":1,"dc":[[59,6]]}},{"d":{"df":1,"dc":[[59,1]]}},{"k":[39,116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[59,1]]}},{"k":[65306],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[22359],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]},{"k":[108,114,110,120,118,101,103],"v":[{"k":[101,116,108],"v":[{"d":{"df":6,"dc":[[0,3],[26,1],[36,1],[37,3],[56,1],[94,2]]},"k":[46,115,44,110],"v":[{"d":{"df":2,"dc":[[0,1],[33,1]]}},{"d":{"df":3,"dc":[[0,1],[63,3],[65,2]]}},{"d":{"df":1,"dc":[[36,2]]}},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[55,4],[62,1]]},"k":[115,46,116,105],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}},{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"d":{"df":7,"dc":[[56,1],[58,3],[59,2],[65,1],[81,1],[90,1],[100,1]]},"k":[101,115,105],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[58,1],[102,1]]}}]},{"d":{"df":1,"dc":[[90,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[93,1],[100,2]]}}]}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":16,"dc":[[0,1],[23,1],[37,1],[38,4],[55,1],[56,9],[61,5],[63,1],[65,1],[68,1],[69,1],[84,2],[94,2],[96,1],[100,1],[106,1]]},"k":[108,46,45],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[94,1]]}}]}]},{"d":{"df":2,"dc":[[55,1],[56,1]]}},{"k":[119],"v":[{"k":[97],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[100,101,97],"v":[{"d":{"df":12,"dc":[[26,1],[31,1],[33,1],[37,1],[58,2],[65,2],[68,1],[69,1],[84,1],[94,2],[105,1],[107,3]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[45],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[55,2],[68,1]]},"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[55,2],[59,1],[61,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[96,1]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[61,1],[96,2]]}}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]},{"k":[108],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[84,1],[88,1],[106,1]]}}]}]}]}]},{"k":[117,108,114,111,99,110],"v":[{"k":[110,114],"v":[{"k":[100],"v":[{"d":{"df":3,"dc":[[0,1],[63,1],[69,1]]}}]},{"d":{"df":1,"dc":[[55,1]]},"k":[116],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[38,2]]}}]}]}]},{"k":[108,100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"d":{"df":4,"dc":[[23,1],[36,2],[56,2],[98,1]]},"k":[105,115,101,58],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":23,"dc":[[0,2],[26,1],[28,1],[29,1],[30,2],[31,1],[33,2],[35,1],[36,1],[37,2],[38,1],[56,3],[58,1],[59,1],[63,1],[65,2],[68,1],[69,1],[85,1],[88,1],[94,3],[100,1],[106,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"d":{"df":3,"dc":[[55,1],[65,1],[106,1]]},"k":[58,46],"v":[{"d":{"df":6,"dc":[[30,1],[35,1],[36,1],[55,1],[57,1],[65,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"d":{"df":44,"dc":[[0,4],[23,4],[26,1],[28,3],[30,2],[31,5],[33,3],[34,3],[35,5],[36,15],[37,4],[38,9],[55,6],[56,15],[57,2],[58,1],[59,8],[61,3],[63,34],[65,12],[66,3],[67,3],[68,5],[69,8],[84,3],[85,8],[88,2],[89,1],[90,2],[92,1],[93,3],[94,1],[95,1],[96,1],[98,4],[99,1],[100,3],[101,2],[102,3],[103,1],[104,3],[105,2],[106,4],[107,4]]},"k":[109,99],"v":[{"d":{"df":6,"dc":[[33,1],[38,1],[55,1],[56,1],[63,1],[67,1]]},"k":[101,97,44,117],"v":[{"k":[100,114],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[116,108],"v":[{"d":{"df":4,"dc":[[35,1],[36,1],[37,3],[56,5]]},"k":[116,58,44,115,65306],"v":[{"k":[101,105],"v":[{"k":[114,100],"v":[{"k":[58],"v":[{"d":{"df":13,"dc":[[32,4],[35,1],[36,6],[49,4],[51,1],[53,6],[56,1],[59,9],[61,2],[64,1],[75,9],[78,2],[83,1]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[37,2]]}}]}]}]},{"d":{"df":4,"dc":[[35,1],[56,1],[65,1],[94,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]},{"d":{"df":1,"dc":[[38,1]]}},{"k":[108],"v":[{"k":[97],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[116,100],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]},{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[92,1],[102,1]]},"k":[58,101],"v":[{"d":{"df":6,"dc":[[36,2],[53,2],[59,2],[65,1],[75,2],[81,1]]}},{"k":[100],"v":[{"d":{"df":2,"dc":[[63,2],[101,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":5,"dc":[[59,3],[63,1],[65,1],[69,2],[81,1]]},"k":[44,115,102,119],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":7,"dc":[[59,8],[75,8],[83,1],[88,1],[96,1],[113,1],[116,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97,101,116,119,109],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[23,2],[55,2],[61,1],[63,2],[65,1]]},"k":[44,115],"v":[{"d":{"df":2,"dc":[[35,1],[38,1]]}},{"d":{"df":4,"dc":[[55,2],[63,7],[65,2],[103,1]]},"k":[58,46],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[37,1],[69,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[58,1],[65,1]]}}]}]},{"d":{"df":2,"dc":[[63,4],[90,1]]}},{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]},"k":[46,34,44,115],"v":[{"d":{"df":1,"dc":[[84,1]]}},{"d":{"df":1,"dc":[[84,1]]}},{"d":{"df":1,"dc":[[105,1]]}},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]},{"k":[108,99,109,100,114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":12,"dc":[[34,1],[36,2],[52,1],[53,2],[55,1],[61,4],[62,1],[78,4],[95,1],[96,1],[113,1],[115,1]]},"k":[44,96],"v":[{"d":{"df":8,"dc":[[56,1],[59,4],[64,1],[75,4],[95,2],[96,2],[113,2],[115,2]]}},{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[116,101,105],"v":[{"k":[44,111],"v":[{"d":{"df":3,"dc":[[35,1],[36,1],[56,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[63,1],[69,1]]}}]}]}]},{"k":[98],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[107],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]},{"k":[110,108],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[58,1]]}}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[121,105],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[69,1],[100,1]]}}]}]}]}]}]},{"k":[101,105],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":2,"dc":[[66,1],[69,1]]}}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[96],"v":[{"k":[44,12290],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[96],"v":[{"k":[102],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,111,117],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[121,101],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":1,"dc":[[63,3]]}}]}]}]}]}]},{"k":[119],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[104,1],[105,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]},"k":[110,116,115,100,102,109,101,99,108,103],"v":[{"d":{"df":47,"dc":[[0,3],[23,9],[26,3],[28,6],[29,1],[30,4],[31,12],[32,6],[33,7],[34,3],[35,18],[36,16],[37,5],[38,6],[55,27],[56,51],[57,1],[58,9],[59,23],[61,12],[63,50],[65,32],[66,7],[67,2],[68,2],[69,16],[84,7],[85,10],[86,1],[87,1],[88,10],[90,2],[92,1],[93,1],[94,11],[95,2],[96,10],[98,6],[99,2],[100,2],[101,7],[102,5],[103,1],[104,4],[105,6],[106,11],[107,3]]},"k":[115,102,99,116,105,100,114,112,97,118,110],"v":[{"k":[116,112,105],"v":[{"k":[97,101,105],"v":[{"k":[108,110],"v":[{"k":[108],"v":[{"d":{"df":6,"dc":[[0,1],[26,1],[28,2],[42,1],[43,1],[85,1]]},"k":[97,105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[26,3],[28,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[0,3],[28,1],[31,1],[33,1],[55,2]]},"k":[115,44,34,58],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":12,"dc":[[33,1],[55,1],[56,1],[68,1],[69,1],[84,1],[85,2],[94,1],[95,1],[98,1],[101,1],[102,1]]}},{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44,46,58],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[65,20]]}},{"d":{"df":1,"dc":[[65,4]]}}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[100],"v":[{"d":{"df":1,"dc":[[29,1]]}}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[37,1],[98,1],[99,1]]}}]}]}]},{"k":[111,108],"v":[{"d":{"df":8,"dc":[[30,2],[37,2],[47,2],[56,1],[59,1],[67,1],[69,1],[98,1]]},"k":[114,46],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":5,"dc":[[0,1],[30,1],[37,1],[38,1],[63,3]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[96,1]]}}]},{"k":[117],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[108,111,114],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[0,1],[36,1],[66,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"d":{"df":10,"dc":[[0,2],[26,1],[28,1],[30,2],[34,1],[35,1],[67,1],[98,1],[102,2],[107,1]]},"k":[58,100],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":13,"dc":[[32,1],[35,2],[36,1],[56,1],[65,1],[66,1],[88,1],[94,3],[98,2],[99,1],[103,1],[105,1],[107,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]},{"k":[109,114],"v":[{"k":[105,112,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,2]]}}]}]},{"k":[97,108],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[101,2],[105,2]]}}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[99,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[68,1],[69,1],[107,1]]},"k":[100,115],"v":[{"d":{"df":2,"dc":[[84,1],[101,1]]}},{"k":[44,46],"v":[{"d":{"df":1,"dc":[[107,2]]}},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]},{"k":[114,101,111,117],"v":[{"k":[111,97],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[101,105,116],"v":[{"d":{"df":4,"dc":[[26,1],[28,1],[38,1],[65,2]]},"k":[100],"v":[{"d":{"df":5,"dc":[[0,1],[33,2],[61,2],[63,2],[65,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[28,1],[61,1]]}}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]},{"k":[110,114,108],"v":[{"k":[100,115],"v":[{"k":[101,105],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[23,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[102,110,99,97,112,118],"v":[{"k":[97,101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[28,2],[65,1]]},"k":[115,44,46],"v":[{"d":{"df":2,"dc":[[28,1],[65,1]]}},{"d":{"df":2,"dc":[[28,1],[65,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[100,110],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[101,97],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]},{"k":[116,108],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118,111],"v":[{"k":[101,105],"v":[{"d":{"df":3,"dc":[[34,2],[35,1],[63,3]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]},{"k":[110],"v":[{"d":{"df":3,"dc":[[35,2],[63,1],[69,1]]},"k":[46,44,115],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[33,1],[38,6],[55,2],[63,2],[68,1],[105,1]]}},{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[63,1],[90,1],[101,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":2,"dc":[[35,1],[63,1]]},"k":[105,8203],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101,105,97],"v":[{"d":{"df":3,"dc":[[0,2],[28,2],[33,4]]},"k":[100],"v":[{"k":[46],"v":[{"d":{"df":2,"dc":[[58,1],[61,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[31,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[33,1],[63,2]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[105,101],"v":[{"k":[99,118],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101,111,105],"v":[{"d":{"df":5,"dc":[[32,1],[34,1],[55,3],[56,1],[93,1]]},"k":[115],"v":[{"d":{"df":5,"dc":[[35,1],[38,1],[61,1],[85,1],[97,1]]}}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[66,1],[67,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[69,1],[99,1]]}}]}]}]}]}]}]},{"k":[120,101],"v":[{"d":{"df":5,"dc":[[35,6],[51,5],[55,1],[62,15],[66,1]]},"k":[12290],"v":[{"k":[24403],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[55,1],[67,1]]}}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[38,1],[54,1],[56,1],[64,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[55,7],[56,1]]}}]}]},{"k":[99],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,2]]}}]}]}]}]}]}]}]}]},{"k":[101,111,105],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[66,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[96,4]]}}]}]}]},{"d":{"df":40,"dc":[[0,3],[23,4],[28,2],[30,3],[31,3],[32,1],[34,1],[35,3],[36,5],[38,2],[55,5],[56,7],[58,1],[59,3],[61,2],[63,8],[65,11],[66,3],[67,4],[68,3],[69,3],[84,1],[85,3],[88,4],[89,1],[90,1],[92,1],[93,2],[94,2],[95,2],[96,3],[98,5],[99,1],[100,1],[101,4],[102,2],[103,3],[105,1],[106,3],[107,4]]},"k":[101,39,44,46,115,45],"v":[{"k":[109],"v":[{"d":{"df":15,"dc":[[30,2],[35,4],[37,1],[38,3],[55,2],[61,1],[63,1],[64,2],[65,1],[66,1],[85,1],[88,3],[92,1],[94,4],[104,1]]},"k":[115,46,58,105,110,41],"v":[{"d":{"df":10,"dc":[[0,2],[28,1],[30,1],[55,5],[65,1],[85,1],[88,2],[90,1],[92,1],[94,1]]},"k":[44,116,46],"v":[{"d":{"df":2,"dc":[[30,1],[63,1]]}},{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[58,44],"v":[{"d":{"df":6,"dc":[[35,1],[36,5],[38,2],[51,1],[53,5],[54,2]]}},{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[38,2],[88,1]]}}]},{"d":{"df":4,"dc":[[30,2],[63,1],[88,1],[94,2]]}},{"d":{"df":1,"dc":[[30,1]]}},{"k":[100],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[61,2],[78,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]},{"k":[115],"v":[{"d":{"df":3,"dc":[[23,5],[58,1],[84,1]]}}]},{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":4,"dc":[[34,1],[36,1],[37,1],[56,2]]}},{"d":{"df":5,"dc":[[38,1],[55,2],[59,2],[61,2],[106,1]]},"k":[101],"v":[{"k":[108],"v":[{"k":[102],"v":[{"k":[58,46],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[45],"v":[{"k":[45],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":47,"dc":[[0,3],[23,1],[28,4],[30,12],[31,14],[32,2],[33,5],[34,5],[35,22],[36,13],[37,11],[38,28],[47,8],[53,4],[55,45],[56,37],[57,2],[58,3],[59,24],[61,23],[63,17],[65,38],[66,8],[67,4],[68,6],[69,12],[84,6],[85,15],[86,1],[88,6],[89,2],[90,1],[92,1],[93,3],[94,12],[95,6],[96,5],[98,6],[99,3],[100,7],[101,9],[102,8],[103,5],[104,9],[105,2],[106,8],[107,7]]},"k":[115,44,58],"v":[{"k":[117,101],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]},"k":[93,115,65306],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[31,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[91],"v":[{"k":[35],"v":[{"k":[49],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[49],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[33,1],[35,1],[55,1],[65,1]]}},{"d":{"df":2,"dc":[[55,1],[56,1]]}}]},{"d":{"df":4,"dc":[[35,1],[51,1],[56,1],[64,1]]},"k":[61,101,58,46,12290],"v":[{"k":[34],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[34],"v":[{"d":{"df":4,"dc":[[0,2],[7,2],[33,1],[48,1]]},"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[33,2],[48,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,110],"v":[{"d":{"df":3,"dc":[[63,1],[85,1],[96,1]]},"k":[115],"v":[{"d":{"df":3,"dc":[[29,1],[56,2],[69,2]]}}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[121,105],"v":[{"d":{"df":6,"dc":[[35,1],[63,1],[69,3],[100,1],[106,1],[107,1]]}},{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[55,1],[61,4],[62,1],[78,4]]}},{"d":{"df":1,"dc":[[56,1]]}},{"k":[36825],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"d":{"df":39,"dc":[[23,5],[26,1],[28,3],[30,5],[31,4],[33,3],[34,1],[35,9],[36,3],[37,2],[38,3],[51,6],[55,9],[56,16],[57,1],[58,1],[59,3],[61,1],[63,1],[65,11],[66,2],[67,1],[68,1],[69,4],[85,3],[88,4],[90,2],[94,1],[95,3],[96,1],[98,1],[99,1],[100,1],[101,2],[102,1],[104,1],[105,1],[106,1],[107,2]]},"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]},{"k":[112,97],"v":[{"k":[111,108,114,97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":12,"dc":[[28,15],[31,5],[33,1],[36,1],[42,9],[45,3],[61,1],[63,1],[65,15],[77,1],[78,1],[81,9]]},"k":[105,97,101,115],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[28,1],[65,3]]}}]}]},{"k":[110],"v":[{"k":[116,99],"v":[{"d":{"df":4,"dc":[[31,2],[56,1],[63,3],[102,1]]},"k":[108],"v":[{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[31,1],[65,4]]}}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":8,"dc":[[33,1],[35,1],[58,2],[61,3],[63,2],[84,2],[88,1],[97,1]]},"k":[97,101,115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[31,1],[59,1],[63,1]]}}]}]}]}]},{"k":[100],"v":[{"d":{"df":5,"dc":[[35,1],[55,1],[58,1],[59,4],[61,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"d":{"df":2,"dc":[[55,1],[61,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[63,1],[68,1],[69,4],[107,1]]},"k":[109,100],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115,46],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]},{"k":[105],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[101,105],"v":[{"d":{"df":3,"dc":[[37,1],[59,2],[63,1]]},"k":[115,41,58,44],"v":[{"d":{"df":1,"dc":[[37,2]]}},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":2,"dc":[[59,5],[75,5]]}},{"d":{"df":2,"dc":[[59,1],[94,2]]}}]},{"k":[110],"v":[{"k":[101,97],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]},{"k":[56],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]},"k":[45],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[59,2]]},"k":[58,44],"v":[{"d":{"df":2,"dc":[[34,4],[52,4]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[108],"v":[{"k":[101,117],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]},{"k":[104,117,97,111,121,105,101,114,119,99],"v":[{"k":[101,105,97,111,117,114],"v":[{"d":{"df":49,"dc":[[0,21],[23,17],[26,11],[28,33],[29,1],[30,55],[31,31],[32,48],[33,57],[34,29],[35,64],[36,31],[37,21],[38,48],[55,103],[56,131],[57,3],[58,20],[59,51],[61,53],[62,1],[63,138],[65,85],[66,31],[67,9],[68,36],[69,74],[77,1],[84,31],[85,55],[88,31],[89,4],[90,19],[92,10],[93,4],[94,45],[95,21],[96,35],[97,3],[98,24],[99,15],[100,23],[101,31],[102,32],[103,26],[104,29],[105,21],[106,40],[107,37]]},"k":[115,110,114,105,121,109,111],"v":[{"k":[101],"v":[{"d":{"df":15,"dc":[[0,1],[26,1],[31,1],[32,2],[33,1],[35,1],[36,1],[55,1],[56,3],[59,1],[61,1],[63,5],[65,10],[92,1],[94,1]]}}]},{"d":{"df":8,"dc":[[0,2],[30,1],[33,1],[56,2],[59,1],[61,1],[63,1],[107,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":1,"dc":[[36,1]]}}]},{"k":[101],"v":[{"d":{"df":28,"dc":[[30,1],[31,2],[32,2],[33,1],[34,2],[35,1],[55,5],[56,2],[58,1],[59,1],[63,1],[66,2],[67,1],[69,1],[84,1],[85,2],[88,2],[94,1],[95,1],[98,1],[99,1],[100,4],[101,1],[102,1],[103,1],[105,2],[106,3],[107,1]]},"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,1],[106,1]]},"k":[44],"v":[{"d":{"df":16,"dc":[[23,1],[58,1],[63,2],[66,1],[68,1],[69,3],[84,1],[85,1],[93,1],[96,1],[98,1],[99,1],[100,1],[101,1],[102,1],[106,1]]},"k":[97],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"d":{"df":9,"dc":[[31,2],[35,1],[38,1],[56,2],[63,1],[65,1],[69,1],[85,1],[95,1]]}}]},{"d":{"df":9,"dc":[[31,2],[36,4],[38,2],[55,2],[59,1],[63,1],[65,2],[100,1],[101,1]]}},{"d":{"df":6,"dc":[[36,2],[55,3],[61,1],[63,3],[65,1],[68,1]]},"k":[46,101,115,44],"v":[{"d":{"df":4,"dc":[[31,2],[36,1],[63,1],[107,1]]}},{"d":{"df":3,"dc":[[36,9],[63,5],[65,3]]},"k":[46,115,44,101],"v":[{"d":{"df":2,"dc":[[36,1],[65,1]]}},{"d":{"df":2,"dc":[[36,2],[63,1]]}},{"d":{"df":1,"dc":[[63,2]]}},{"k":[99],"v":[{"k":[52],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,114,110],"v":[{"d":{"df":30,"dc":[[0,2],[23,1],[28,3],[29,1],[30,3],[33,2],[35,8],[36,2],[37,8],[38,4],[47,8],[55,27],[56,5],[59,4],[61,10],[63,9],[65,6],[69,2],[78,1],[84,2],[85,4],[88,4],[89,1],[94,1],[96,2],[99,1],[102,1],[104,1],[106,2],[107,1]]},"k":[58,46,44],"v":[{"d":{"df":2,"dc":[[36,1],[65,1]]}},{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[59,96],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}},{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[38,2],[65,1]]},"k":[45],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[55,1],[65,1]]}}]}]}]}]}]}]}]},{"k":[103,107],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]},{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[116,110],"v":[{"d":{"df":35,"dc":[[0,1],[23,4],[28,3],[31,1],[33,2],[35,4],[36,1],[37,2],[38,4],[55,18],[56,8],[59,2],[61,4],[63,17],[65,11],[66,2],[68,1],[69,7],[84,1],[85,3],[86,1],[88,2],[92,1],[94,2],[96,2],[98,3],[99,2],[100,5],[101,4],[102,2],[103,2],[104,2],[105,4],[106,2],[107,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[61,1]]}}]},{"d":{"df":18,"dc":[[32,1],[34,1],[35,1],[55,7],[62,4],[63,2],[66,3],[67,1],[85,1],[96,1],[98,1],[99,3],[100,2],[101,3],[102,1],[104,1],[105,1],[107,2]]},"k":[107],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":6,"dc":[[23,1],[55,1],[59,1],[61,2],[65,2],[69,1]]}}]}]},{"k":[115,109],"v":[{"d":{"df":4,"dc":[[23,1],[55,1],[63,2],[107,1]]}},{"k":[98],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]},{"k":[111,101],"v":[{"k":[117,119],"v":[{"k":[103],"v":[{"k":[104],"v":[{"d":{"df":4,"dc":[[30,1],[58,1],[63,1],[88,3]]},"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[101],"v":[{"d":{"df":10,"dc":[[37,1],[38,3],[66,1],[68,1],[88,1],[92,2],[94,1],[100,2],[103,3],[104,1]]},"k":[45],"v":[{"k":[99,115],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,114],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[0,2]]}}]}]}]}]}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[30,2]]}}]}]},{"k":[107,103,98,114,108,115,105],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[0,1],[55,2],[63,1],[85,2]]},"k":[115,110],"v":[{"d":{"df":3,"dc":[[58,1],[63,1],[85,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[0,1]]},"k":[44,41],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":3,"dc":[[28,1],[63,1],[65,1]]},"k":[108,115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[59,2],[64,1]]},"k":[34,46,44],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,3]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[51,1],[63,1],[69,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[107],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[108],"v":[{"k":[46,111],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":47,"dc":[[0,4],[23,14],[26,4],[28,12],[29,3],[30,16],[31,13],[32,10],[33,22],[34,10],[35,20],[36,12],[37,12],[38,21],[40,1],[55,54],[56,76],[58,12],[59,18],[61,23],[63,82],[65,43],[66,12],[67,7],[68,14],[69,23],[84,7],[85,16],[88,9],[89,4],[90,9],[92,2],[93,4],[94,14],[95,10],[96,12],[97,1],[98,8],[99,4],[100,11],[101,12],[102,9],[103,3],[104,7],[105,6],[106,13],[107,11]]},"k":[111,46,112,107,103,121,116],"v":[{"d":{"df":9,"dc":[[31,1],[63,1],[66,2],[68,1],[85,1],[98,2],[100,1],[101,2],[106,2]]},"k":[108,58,107],"v":[{"d":{"df":7,"dc":[[28,2],[37,1],[55,1],[57,1],[63,1],[65,1],[69,1]]},"k":[116,115],"v":[{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":5,"dc":[[51,1],[61,3],[63,4],[64,1],[78,2]]},"k":[58,44,99,65292,46,63,12290],"v":[{"d":{"df":15,"dc":[[0,1],[7,1],[28,1],[32,1],[35,1],[42,1],[49,1],[51,1],[56,5],[58,2],[61,2],[64,5],[71,2],[78,2],[83,1]]}},{"d":{"df":3,"dc":[[28,1],[35,1],[63,1]]}},{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[28,3],[42,3]]}}]}]}]}]}]}]}]}]}]},{"k":[36873],"v":[{"k":[20013],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"k":[29992],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[63,2]]}}]},{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":6,"dc":[[32,1],[59,2],[65,1],[101,1],[102,1],[106,1]]},"k":[58,45,105],"v":[{"d":{"df":9,"dc":[[34,2],[36,1],[52,2],[53,1],[56,1],[64,1],[83,1],[96,1],[113,1]]}},{"k":[108],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[121],"v":[{"k":[111],"v":[{"k":[44,46],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":1,"dc":[[32,1]]}}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[66,1],[98,1],[104,1]]},"k":[46,44],"v":[{"d":{"df":4,"dc":[[56,1],[84,1],[92,1],[93,1]]}},{"d":{"df":2,"dc":[[63,1],[106,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[66,1]]},"k":[115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":4,"dc":[[98,1],[100,1],[102,2],[106,1]]},"k":[46,44],"v":[{"d":{"df":4,"dc":[[84,1],[95,1],[96,1],[106,1]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]},{"k":[112],"v":[{"k":[101,105],"v":[{"d":{"df":23,"dc":[[28,5],[30,1],[32,1],[35,1],[38,2],[42,1],[51,1],[55,13],[56,9],[61,1],[62,11],[63,5],[64,4],[65,6],[68,1],[69,1],[78,1],[84,1],[85,1],[88,3],[92,1],[94,1],[107,1]]},"k":[61,58,115,46,44,65292,40],"v":[{"k":[34],"v":[{"k":[116,105,115,119,100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[106],"v":[{"k":[97],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[33,3],[48,3]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[99],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,3],[47,3]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":51,"dc":[[0,1],[7,1],[28,1],[30,1],[32,17],[34,5],[35,10],[36,9],[37,10],[38,3],[42,1],[46,1],[47,10],[49,17],[51,10],[52,5],[53,9],[54,3],[55,31],[56,31],[58,2],[59,7],[61,13],[62,31],[64,31],[71,2],[75,7],[78,13],[83,6],[84,2],[85,12],[88,8],[89,1],[90,3],[92,5],[93,4],[94,4],[95,4],[96,2],[97,1],[110,12],[111,2],[112,1],[113,2],[114,2],[115,4],[116,8],[117,5],[118,4],[119,4],[120,1]]}},{"d":{"df":6,"dc":[[28,2],[38,1],[55,1],[56,2],[63,2],[94,1]]},"k":[99,46,44],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[28,2],[42,2],[63,3],[77,3],[81,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"d":{"df":3,"dc":[[34,1],[59,1],[92,1]]}},{"d":{"df":1,"dc":[[38,1]]}}]},{"d":{"df":5,"dc":[[28,1],[85,1],[88,1],[96,1],[107,1]]}},{"d":{"df":3,"dc":[[35,3],[69,1],[94,1]]}},{"k":[22914],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[96],"v":[{"k":[39],"v":[{"k":[98,115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[116,99,109,112,110,108,114],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[30,3],[34,1],[37,1],[59,4]]},"k":[58,44,99,46,125,98],"v":[{"d":{"df":12,"dc":[[0,1],[7,1],[28,1],[30,1],[42,1],[46,1],[51,1],[58,2],[71,2],[83,1],[96,1],[113,1]]}},{"d":{"df":3,"dc":[[28,1],[30,2],[58,1]]}},{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[44,111],"v":[{"d":{"df":2,"dc":[[28,4],[42,4]]}},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[30,1],[32,1]]}},{"k":[123,39],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[98],"v":[{"k":[103],"v":[{"k":[124],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]},{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,5],[75,5]]}}]}]}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[44,115],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"k":[44,46],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":1,"dc":[[32,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":9,"dc":[[32,1],[38,1],[55,4],[56,3],[58,1],[61,1],[63,12],[102,1],[103,1]]},"k":[34,39,46,115,44,45,108],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"d":{"df":1,"dc":[[32,3]]}},{"d":{"df":7,"dc":[[32,1],[35,1],[63,3],[100,1],[102,1],[104,1],[107,1]]}},{"d":{"df":1,"dc":[[101,1]]},"k":[116,46],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"d":{"df":4,"dc":[[55,2],[56,1],[62,1],[63,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":2,"dc":[[63,1],[65,1]]}},{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[61,1]]}}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]},{"k":[120,99,109,97,114,101,115,108,110],"v":[{"k":[116],"v":[{"d":{"df":11,"dc":[[32,1],[34,1],[36,2],[56,1],[59,58],[63,3],[65,3],[69,3],[75,4],[81,1],[96,3]]},"k":[58,115,46,44,39,98,41,112,99,111,114,100,102,97,118,108,119,104,117],"v":[{"d":{"df":13,"dc":[[0,1],[7,1],[28,1],[30,1],[42,1],[46,1],[51,1],[58,2],[59,5],[71,2],[83,1],[96,1],[113,1]]}},{"d":{"df":1,"dc":[[34,1]]},"k":[116,104],"v":[{"k":[121,114],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":5,"dc":[[34,1],[52,1],[83,1],[88,1],[116,1]]}}]}]}]},{"k":[111],"v":[{"k":[107],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98,111,58,99],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[59,1],[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"d":{"df":4,"dc":[[59,1],[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[125,58],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[59,2]]}},{"d":{"df":2,"dc":[[59,1],[63,1]]}},{"k":[44,93],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"k":[46],"v":[{"k":[106],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[92],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,97],"v":[{"k":[114,120],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119,58,99,114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[125,58],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99,98,111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}},{"k":[111,97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[46],"v":[{"k":[112,111,114,100],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[105,111],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]},{"k":[104],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[99,113],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[23,1],[63,1]]}}]}]},{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[108,101,111],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,5]]},"k":[93,115],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[32,2],[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"k":[39],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,7],[64,7]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[109],"v":[{"d":{"df":4,"dc":[[36,1],[55,1],[61,1],[65,1]]},"k":[44,115],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":3,"dc":[[59,1],[63,1],[69,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,6],[62,6]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46,101],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[63,4]]},"k":[34,105],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[121,101,117,97,105,111],"v":[{"d":{"df":19,"dc":[[23,2],[33,1],[34,1],[37,1],[52,1],[56,3],[57,1],[59,1],[65,1],[66,1],[68,1],[69,2],[85,1],[90,2],[94,1],[98,2],[100,1],[102,1],[106,2]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101,110,97,109],"v":[{"k":[115,45,44,109],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[105,97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[42,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[101,97,105],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[28,2]]}}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[28,2]]}}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[65,4],[81,2]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[38,1],[63,1]]}},{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[100],"v":[{"d":{"df":5,"dc":[[32,1],[84,2],[100,3],[104,2],[107,3]]},"k":[115,46],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[67,1]]}}]},{"d":{"df":3,"dc":[[69,1],[104,1],[107,1]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[99,1]]}}]}]}]}]}]}]}]},{"k":[101,110,116],"v":[{"d":{"df":15,"dc":[[30,1],[32,1],[36,1],[46,1],[49,1],[53,1],[55,2],[59,1],[62,2],[75,1],[83,1],[89,1],[96,1],[113,1],[120,1]]},"k":[44,96],"v":[{"d":{"df":16,"dc":[[32,1],[34,2],[36,7],[49,1],[52,2],[53,7],[59,4],[61,6],[75,4],[78,6],[85,1],[88,1],[96,1],[110,1],[113,1],[116,1]]}},{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[104],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]},{"k":[110,118,99],"v":[{"k":[115],"v":[{"k":[112,108,102,109,105],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116,99],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"k":[121],"v":[{"k":[40],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117,97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[46],"v":[{"d":{"df":2,"dc":[[34,1],[90,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":6,"dc":[[55,32],[61,1],[62,29],[65,1],[78,1],[81,1]]},"k":[96,101,58,115,44,46,34,97,105],"v":[{"d":{"df":1,"dc":[[55,2]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":2,"dc":[[55,16],[62,14]]}},{"d":{"df":1,"dc":[[55,6]]},"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[55,3]]}},{"d":{"df":1,"dc":[[55,5]]}},{"d":{"df":1,"dc":[[55,1]]},"k":[58,46],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[56,1],[101,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[103,109,99,101,97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[35,8]]},"k":[58,101,111,115],"v":[{"d":{"df":5,"dc":[[32,1],[35,1],[49,1],[51,1],[83,1]]}},{"k":[100],"v":[{"d":{"df":2,"dc":[[35,11],[61,1]]}}]},{"k":[110],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[109],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[107],"v":[{"k":[121],"v":[{"k":[44,46,65292],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[19981],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[26356],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[25490],"v":[{"k":[29256],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[32780],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[65,2]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[111,105],"v":[{"d":{"df":22,"dc":[[32,3],[35,2],[38,2],[55,2],[56,2],[58,1],[59,1],[63,1],[66,1],[68,2],[69,2],[85,1],[88,1],[92,1],[94,1],[99,3],[100,1],[102,1],[103,1],[105,1],[106,1],[107,7]]},"k":[45,46],"v":[{"k":[100,116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[32,1],[56,6]]}}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[84,1]]}}]},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"k":[101,111,97,117,112,105],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[120,119,101,99,97,105,115,63,117,118,103],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[0,3],[28,1],[55,1],[88,1],[96,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]},{"d":{"df":10,"dc":[[0,1],[23,2],[35,1],[36,1],[55,2],[56,1],[61,3],[63,11],[65,9],[86,1]]},"k":[108,115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]},{"k":[112],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":26,"dc":[[0,1],[28,2],[31,3],[32,1],[33,2],[34,1],[35,3],[36,1],[38,1],[55,6],[56,5],[58,3],[61,2],[63,2],[65,12],[66,1],[69,1],[84,3],[85,3],[89,1],[94,2],[95,3],[96,1],[100,1],[105,1],[106,1]]},"k":[101,115,46,105],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[55,1],[59,1]]},"k":[46],"v":[{"d":{"df":4,"dc":[[28,1],[30,1],[38,1],[56,1]]}}]}]},{"d":{"df":6,"dc":[[30,1],[55,1],[63,3],[65,2],[88,1],[106,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[38,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":4,"dc":[[28,1],[56,1],[65,1],[85,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[116,114],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]},{"k":[44,98],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"k":[121],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[98,1],[102,1],[105,6]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[107,2]]}}]}]}]}]}]}]}]}]},{"d":{"df":13,"dc":[[0,1],[30,1],[31,1],[33,1],[35,1],[63,3],[65,8],[68,2],[94,1],[95,1],[100,1],[105,1],[107,3]]},"k":[116,110,46,114,100,117,119],"v":[{"d":{"df":32,"dc":[[23,3],[28,3],[30,1],[31,2],[33,4],[35,2],[36,3],[37,1],[55,10],[56,13],[59,1],[61,3],[62,1],[63,5],[65,7],[67,2],[68,2],[69,1],[84,1],[85,2],[88,3],[94,1],[95,2],[96,1],[98,2],[100,5],[101,4],[102,3],[104,2],[105,1],[106,3],[107,2]]},"k":[101,97,105,58,63,46],"v":[{"d":{"df":4,"dc":[[28,2],[55,1],[65,1],[88,1]]},"k":[58],"v":[{"d":{"df":3,"dc":[[31,1],[55,1],[65,2]]}}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,1],[65,1]]},"k":[100,58,44],"v":[{"d":{"df":1,"dc":[[69,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]},{"d":{"df":3,"dc":[[36,1],[57,1],[59,1]]}},{"d":{"df":1,"dc":[[59,3]]}}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[45],"v":[{"k":[116,115,114],"v":[{"k":[101,97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]}]}]}]}]}]}]},{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":9,"dc":[[32,1],[35,1],[36,8],[53,2],[56,4],[90,1],[92,2],[93,1],[94,1]]},"k":[58,108,41],"v":[{"d":{"df":6,"dc":[[36,2],[53,2],[59,6],[75,6],[88,1],[116,1]]}},{"k":[121],"v":[{"d":{"df":1,"dc":[[58,1]]}}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":3,"dc":[[33,6],[35,3],[51,1]]},"k":[46,100,115,65288],"v":[{"d":{"df":1,"dc":[[33,2]]}},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"k":[33410],"v":[{"k":[28857],"v":[{"k":[65289],"v":[{"k":[19978],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":3,"dc":[[56,2],[61,2],[63,2]]},"k":[44,46],"v":[{"d":{"df":2,"dc":[[56,1],[63,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[109,110,116],"v":[{"k":[101,105],"v":[{"d":{"df":11,"dc":[[35,9],[36,1],[51,6],[55,4],[56,12],[58,1],[64,2],[84,1],[95,1],[105,1],[106,1]]},"k":[58,100,34,44,115,46,108],"v":[{"d":{"df":31,"dc":[[0,1],[7,1],[28,1],[30,6],[32,11],[34,6],[35,17],[36,2],[42,1],[46,6],[49,11],[51,17],[52,6],[53,2],[55,4],[56,9],[58,3],[59,3],[62,4],[64,9],[71,3],[75,3],[83,4],[92,3],[95,12],[96,8],[97,5],[112,5],[113,8],[115,12],[117,3]]}},{"d":{"df":3,"dc":[[30,1],[35,3],[56,3]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"d":{"df":2,"dc":[[35,1],[56,1]]}},{"d":{"df":1,"dc":[[56,1]]},"k":[46,112],"v":[{"d":{"df":1,"dc":[[37,1]]}},{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,2],[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[56,3]]}},{"k":[121],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[109,108],"v":[{"k":[98,101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":15,"dc":[[23,1],[31,2],[32,1],[35,3],[51,3],[55,8],[62,2],[63,1],[66,2],[94,1],[98,1],[104,1],[106,1],[107,1],[119,2]]},"k":[44,59,46,40,93,96,115,41],"v":[{"d":{"df":4,"dc":[[35,2],[55,2],[94,1],[119,1]]}},{"d":{"df":3,"dc":[[51,2],[55,2],[62,2]]}},{"d":{"df":1,"dc":[[55,1]]}},{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[65,3],[81,3]]}}]},{"d":{"df":1,"dc":[[81,3]]},"k":[47,46,12290],"v":[{"k":[96],"v":[{"k":[121,115,111],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,3]]}},{"d":{"df":1,"dc":[[81,3]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]},{"d":{"df":1,"dc":[[105,2]]}}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":2,"dc":[[55,2],[62,1]]},"k":[97,45],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":3,"dc":[[56,1],[64,1],[88,1]]},"k":[44],"v":[{"d":{"df":10,"dc":[[31,2],[33,1],[45,2],[48,1],[55,2],[56,1],[62,2],[63,1],[64,1],[77,1]]}}]}]}]},{"k":[109],"v":[{"d":{"df":4,"dc":[[26,3],[28,4],[42,3],[43,3]]}}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[97,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":53,"dc":[[0,1],[7,1],[28,1],[30,2],[32,6],[34,3],[35,12],[36,11],[37,9],[38,4],[42,1],[46,2],[47,9],[49,7],[51,10],[52,3],[53,11],[54,4],[55,22],[56,17],[58,3],[59,13],[61,6],[62,24],[64,19],[65,2],[71,3],[75,13],[78,6],[81,2],[83,3],[84,1],[85,6],[88,6],[89,1],[90,1],[92,1],[93,2],[94,5],[95,6],[96,4],[97,2],[110,6],[111,1],[112,2],[113,4],[114,1],[115,8],[116,6],[117,1],[118,2],[119,5],[120,1]]},"k":[105,106,104,101,115,39,53,97,111,102,103,99,100,114,119,116,122,108,112,93,54,96,123,91,50,51,49,52,118,37197,24120,109,23448,26415,29305,27700,22312,31034,20027,25968,98,56,57,55,110,34,48,45,120,46,32858,30452,31616,32447,25351,23545,22810,20363,35,20837,35813,25240],"v":[{"k":[110,115,116],"v":[{"k":[115,116],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[0,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[26,1],[31,1]]}}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46,45],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[98,115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,4],[81,5]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[100],"v":[{"k":[101,111],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,111,101,105],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119,103],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116,115],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[104,99],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[102],"v":[{"k":[119],"v":[{"k":[47],"v":[{"k":[101,112],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[102],"v":[{"k":[119],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[98],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[102],"v":[{"k":[119],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[98],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[52],"v":[{"k":[99],"v":[{"k":[51],"v":[{"k":[50],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[99],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[51],"v":[{"k":[54],"v":[{"k":[97],"v":[{"k":[102],"v":[{"k":[55],"v":[{"k":[50],"v":[{"k":[98],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[97],"v":[{"k":[49],"v":[{"k":[97],"v":[{"k":[52],"v":[{"k":[97],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[52],"v":[{"k":[99],"v":[{"k":[51],"v":[{"k":[50],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[99],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[51],"v":[{"k":[54],"v":[{"k":[97],"v":[{"k":[102],"v":[{"k":[55],"v":[{"k":[50],"v":[{"k":[98],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[97],"v":[{"k":[49],"v":[{"k":[97],"v":[{"k":[52],"v":[{"k":[97],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]},{"k":[97],"v":[{"k":[116,100],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[108,116],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[112],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99,102,118,120,109],"v":[{"k":[104,115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":7,"dc":[[26,1],[31,1],[41,1],[43,1],[45,1],[72,2],[81,1]]},"k":[46,93,45],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[26,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103,119,108,102],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[73,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115,93],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98,100,112],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[101,100,108],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[49,48],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[107],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[36,2],[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,99,104,116],"v":[{"k":[116,114],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104,126],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"d":{"df":1,"dc":[[0,1]]},"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[46,23454],"v":[{"d":{"df":1,"dc":[[58,1]]}},{"k":[29616],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23450],"v":[{"k":[26102],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[91],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[126],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46,108,45],"v":[{"k":[100,115,101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93,115],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115,35],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[38,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,2],[64,1]]},"k":[44,46,65292,12290],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[64,1]]}},{"k":[21478],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[24040],"v":[{"k":[22823],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[30334],"v":[{"k":[19975],"v":[{"k":[20197],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[38,1],[55,5]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[108,116],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[112],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104,97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[93,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,10],[62,10]]},"k":[115,38144,34924,112,109,99,119,108,100,53,98,30452,22270,116,50,55,110,122,104,35,29461,31532,97,52],"v":[{"k":[97,104,99,101,117],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[0,1],[58,1]]}}]}]}]}]}]},{"k":[105,111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115,39],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]},{"k":[119],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[94,3],[119,3]]}}]}]}]}]},{"k":[37327],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[7,1],[71,1]]}}]}]}]},{"k":[34923],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]},{"k":[114,111],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[34,1],[52,1],[55,3],[56,4],[62,3],[64,4]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]}]}]}]}]}]},{"k":[97,105,111],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,5],[64,5]]}}]}]}]}]},{"k":[108,97],"v":[{"k":[107],"v":[{"d":{"df":6,"dc":[[34,1],[52,1],[55,6],[56,2],[62,6],[64,2]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[37,5],[47,5],[85,3],[92,1],[110,3],[117,1]]}}]}]}]}]},{"k":[104,97,101],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]}]}]}]},{"k":[107],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,10],[62,10]]}}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,1],[64,1]]}}]}]}]}]}]},{"k":[101,97,105],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[34,4]]},"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,98],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,6],[62,6]]}}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[97,117],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[35,1],[51,1],[55,1],[62,1],[96,1],[113,1]]}}]}]}]}]},{"k":[108,105,97],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25509],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[20363],"v":[{"k":[19968],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[52,4]]}}]}]}]}]},{"k":[111],"v":[{"k":[102],"v":[{"k":[117],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,8],[62,8]]}}]}]}]}]}]},{"k":[53,48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[49],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[53],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[111],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"k":[54],"v":[{"k":[101],"v":[{"k":[57],"v":[{"k":[100],"v":[{"k":[52],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]},{"k":[29492],"v":[{"k":[26691],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[19968],"v":[{"k":[21608],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":14,"dc":[[84,1],[85,3],[88,4],[89,1],[90,1],[93,2],[96,1],[110,3],[111,1],[113,1],[114,1],[116,4],[118,2],[120,1]]}}]}]},{"k":[48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]},{"k":[44,57,51,55,48],"v":[{"d":{"df":18,"dc":[[0,1],[7,1],[28,1],[35,1],[42,1],[51,1],[56,1],[58,1],[59,3],[64,1],[71,1],[75,3],[84,1],[85,2],[93,2],[110,2],[111,1],[118,2]]}},{"k":[48],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[51],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[46,44],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]},{"k":[112,114,120,99,119,103,110,108,105],"v":[{"k":[105,97,112],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47,97],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[29,1]]},"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[26,1],[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104,97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,101],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]},"k":[46],"v":[{"k":[115,100,103],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[30,2],[46,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[30,2],[46,1]]},"k":[65292],"v":[{"k":[21017],"v":[{"k":[23558],"v":[{"k":[20854],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[21542],"v":[{"k":[21017],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[25340],"v":[{"k":[25509],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[31639],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[20165],"v":[{"k":[24403],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[19981],"v":[{"k":[22826],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[25165],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[65292],"v":[{"k":[29978],"v":[{"k":[33267],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[116,111],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108,115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,3],[81,4]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[108,116],"v":[{"k":[105,97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[49,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[49,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[49,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[65306],"v":[{"k":[21508],"v":[{"k":[31181],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112,102],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[23,1],[59,1],[75,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[53,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[115,105],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[32,1],[57,1]]}}]}]}]}]}]}]}]},{"k":[97,101],"v":[{"k":[113],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[113],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,101,114],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"d":{"df":2,"dc":[[23,1],[40,1]]}}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]},{"k":[97,105],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[93,105],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[61,2]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,97],"v":[{"k":[100,110,109],"v":[{"k":[101],"v":[{"k":[112,115],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[121],"v":[{"k":[119],"v":[{"k":[120],"v":[{"k":[119],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"k":[91],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[121],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[121],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[50],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[122],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[121],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[121],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[50],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[122],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116,102],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97,104],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[97,104],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]},{"k":[101,97,115,105],"v":[{"k":[118,116,102],"v":[{"k":[64],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[58],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[64],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[41],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[23,2]]}},{"d":{"df":1,"dc":[[40,1]]},"k":[20026],"v":[{"k":[20102],"v":[{"k":[35753],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20154],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[22312],"v":[{"k":[23558],"v":[{"k":[26469],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[65292],"v":[{"k":[24378],"v":[{"k":[28872],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[33521],"v":[{"k":[25991],"v":[{"k":[21457],"v":[{"k":[36865],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97,105],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[95],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[115,93,122],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[93,46],"v":[{"k":[40],"v":[{"k":[126],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[55,2],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[118],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[51],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[51],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[118],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104,97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[108,110],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[26,1],[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[46],"v":[{"k":[63],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[46],"v":[{"k":[60],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[95],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[44,65292],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[19979],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,114,104,111],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,101],"v":[{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"k":[101],"v":[{"k":[109,45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"k":[91],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[45,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,97],"v":[{"k":[113,118,110],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[93,45],"v":[{"d":{"df":39,"dc":[[32,1],[34,1],[35,1],[36,1],[37,2],[47,2],[49,1],[51,2],[52,1],[53,1],[55,2],[56,6],[59,2],[62,2],[64,7],[75,2],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]}},{"k":[108,114,98],"v":[{"k":[114],"v":[{"k":[93],"v":[{"d":{"df":4,"dc":[[37,2],[47,2],[59,2],[75,2]]}}]}]},{"k":[108],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]},{"k":[116],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[115],"v":[{"k":[116,93],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108,115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,4],[81,4]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[93,46],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102,112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"k":[58,65292],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"k":[29616],"v":[{"k":[22312],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[75,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,114,117,104],"v":[{"k":[115,112],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[117],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[57,1]]}},{"k":[91],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":7,"dc":[[32,1],[55,3],[56,5],[58,2],[62,1],[64,3],[71,2]]}},{"k":[44,52,56,48],"v":[{"d":{"df":4,"dc":[[32,1],[49,1],[94,1],[119,1]]}},{"k":[51],"v":[{"k":[48],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[101,115,98,97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46,105],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[33,1]]}},{"k":[91],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[114,100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[33,2],[48,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,104],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100,105,108,101,115,114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98,108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[110,1]]},"k":[12290],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[116,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96,46],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[116,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[95,1],[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121,116],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[119,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[95,1],[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,111],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[115,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[97,1],[112,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114,99],"v":[{"k":[119,109,99],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35,115],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[41],"v":[{"k":[46,65292],"v":[{"d":{"df":1,"dc":[[85,1]]}},{"k":[21478],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[19982],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[36317],"v":[{"k":[31163],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,105],"v":[{"k":[120],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[46,65292],"v":[{"d":{"df":1,"dc":[[85,1]]}},{"k":[24403],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[23567],"v":[{"k":[20110],"v":[{"k":[35813],"v":[{"k":[20540],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[23558],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[85,1]]}},{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[114,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[90,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":11,"dc":[[34,1],[35,1],[37,1],[47,1],[51,1],[52,1],[55,3],[56,4],[62,3],[64,4],[95,2]]}},{"k":[49,111,37197],"v":[{"k":[50,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[39033],"v":[{"k":[25163],"v":[{"k":[20876],"v":[{"k":[93],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[56,57,48,52,54,49,51,50,53,44],"v":[{"k":[54,53],"v":[{"k":[48,54],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[57],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[52,53],"v":[{"k":[55],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[53],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[55,44],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":2,"dc":[[88,1],[116,1]]}}]},{"k":[48,55],"v":[{"k":[50],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[56],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[52,44],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"d":{"df":2,"dc":[[85,1],[110,1]]}}]},{"k":[50],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[48,44,50],"v":[{"k":[51],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"d":{"df":6,"dc":[[37,9],[47,9],[56,1],[64,1],[85,3],[110,3]]}},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[59,1],[75,1],[92,1],[94,3],[117,1],[119,3]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[90,1],[114,1]]}}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"k":[49,55,56,54,52,48,50,44],"v":[{"k":[49,52],"v":[{"k":[54],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[55],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[48,53],"v":[{"k":[54],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[57],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[57,50],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[50],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[49],"v":[{"k":[54],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[54,49,51],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[56],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[38,2],[54,2]]}}]},{"k":[46,48],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[53,51,55,50,48,57,44,49],"v":[{"k":[49,44],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[54,51,57,44],"v":[{"k":[55],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[51],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[55],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[48,49,44],"v":[{"k":[56,44],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":7,"dc":[[83,1],[85,1],[88,1],[92,1],[110,1],[116,1],[117,1]]}}]},{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]},{"d":{"df":4,"dc":[[56,1],[64,1],[85,1],[110,1]]}}]},{"k":[48,54,46,44],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[55],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":14,"dc":[[84,1],[85,2],[88,2],[89,1],[90,1],[93,2],[94,1],[110,2],[111,1],[114,1],[116,2],[118,2],[119,1],[120,1]]}}]},{"k":[51,46],"v":[{"k":[52,54],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"d":{"df":2,"dc":[[56,3],[64,3]]}},{"k":[44,48],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]},{"k":[51,52,50,48,53],"v":[{"k":[50,52],"v":[{"k":[57],"v":[{"k":[54,52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]},{"k":[48],"v":[{"k":[53],"v":[{"k":[54,51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[49],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]}]},{"k":[105,115,109,101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":6,"dc":[[36,1],[38,1],[53,1],[54,1],[65,4],[81,2]]},"k":[46,45,93],"v":[{"k":[116,105,111,100],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[126],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115,112,99],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35,118],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[56,1],[64,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[39033],"v":[{"k":[25163],"v":[{"k":[20876],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47,111],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[65306],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23581],"v":[{"k":[35797],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35265],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[113],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46,93],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[40,1],[41,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[65306],"v":[{"k":[31038],"v":[{"k":[21306],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[38598],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26041],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35821],"v":[{"k":[36895],"v":[{"k":[26597],"v":[{"k":[25163],"v":[{"k":[20876],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25928],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[19981],"v":[{"k":[23569],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[115],"v":[{"k":[118],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29699],"v":[{"k":[22270],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]},{"k":[20363],"v":[{"k":[38598,93],"v":[{"k":[21512],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[36],"v":[{"k":[123],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[98],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[125],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[101,108],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[49,48],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[107],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"k":[65292],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20849],"v":[{"k":[20139],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39064],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[22120],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114,105],"v":[{"d":{"df":2,"dc":[[55,1],[63,1]]}},{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[57,53,49,50,44],"v":[{"k":[46],"v":[{"k":[51,55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[46],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"k":[53,55,50,52,49,48],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,3],[64,3]]}}]}]}]},{"k":[46],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]},{"k":[46],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[46],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[52],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[111,101,117],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[65,3],[81,3]]}}]}]}]}]}]}]},{"k":[115,34924],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[34923],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[32650],"v":[{"k":[27611],"v":[{"k":[34923],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[38634],"v":[{"k":[32442],"v":[{"k":[34923],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[35044],"v":[{"k":[23376],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[39640],"v":[{"k":[36319],"v":[{"k":[38795],"v":[{"k":[34],"v":[{"k":[44],"v":[{"k":[34],"v":[{"k":[34972],"v":[{"k":[23376],"v":[{"k":[34],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":6,"dc":[[59,7],[75,7],[88,1],[94,1],[116,1],[119,1]]}}]},{"k":[53,52,50],"v":[{"k":[48,54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[46],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]},{"k":[54],"v":[{"k":[46],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]},{"k":[50],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[46],"v":[{"k":[46],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[38598],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[26041],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[21333],"v":[{"k":[32858],"v":[{"k":[31867],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[24615],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[25968],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[25968],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[39033],"v":[{"k":[24335],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[23376],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[49],"v":[{"k":[52,51],"v":[{"k":[48],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[49],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[55],"v":[{"k":[54],"v":[{"k":[52],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[54],"v":[{"k":[52],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38376],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[21518],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[20013],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[22635],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24322],"v":[{"k":[27493],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[22635],"v":[{"k":[20837],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[23376],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[101,111,116,97,114,105,117],"v":[{"k":[114,105,108,97],"v":[{"k":[101],"v":[{"d":{"df":16,"dc":[[0,1],[33,1],[34,1],[35,3],[38,4],[55,1],[56,5],[58,1],[61,3],[69,3],[84,1],[85,1],[88,2],[94,2],[95,1],[102,1]]},"k":[44,58,46],"v":[{"d":{"df":2,"dc":[[0,1],[88,1]]}},{"d":{"df":2,"dc":[[55,2],[59,2]]}},{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":8,"dc":[[0,3],[33,3],[37,1],[59,2],[84,2],[85,3],[104,2],[107,2]]},"k":[61,46,58],"v":[{"k":[34],"v":[{"k":[49,56,51,52,54],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[37],"v":[{"k":[34],"v":[{"d":{"df":14,"dc":[[32,1],[49,1],[69,4],[83,4],[101,2],[104,1],[105,2],[106,4],[107,1],[124,2],[125,1],[128,2],[129,4],[130,1]]}}]}]}]}]},{"k":[48],"v":[{"k":[37],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]},{"k":[48,53],"v":[{"k":[48],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":3,"dc":[[37,2],[47,2],[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[63,2],[77,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[34],"v":[{"d":{"df":28,"dc":[[66,3],[67,2],[68,4],[69,3],[79,2],[80,4],[82,3],[83,2],[98,1],[99,2],[100,4],[101,4],[102,4],[103,4],[104,4],[105,2],[106,2],[107,2],[121,2],[122,1],[123,4],[124,4],[125,4],[126,4],[127,4],[128,2],[129,2],[130,2]]},"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":4,"dc":[[61,1],[63,3],[77,3],[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[33,2],[84,1],[85,1],[94,1]]}},{"d":{"df":4,"dc":[[33,3],[48,3],[59,10],[75,10]]}}]}]}]}]},{"k":[112],"v":[{"d":{"df":8,"dc":[[23,4],[28,1],[30,2],[31,1],[37,1],[55,3],[63,15],[69,1]]},"k":[46,102,115,105],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"k":[117],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]},{"d":{"df":3,"dc":[[30,1],[55,1],[63,2]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114,100],"v":[{"k":[105,116],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[30,2]]}}]}]},{"d":{"df":1,"dc":[[94,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[94,2]]}}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[57,1],[74,1]]}}]}]}]}]}]}]},{"k":[119,114,118,112],"v":[{"d":{"df":16,"dc":[[0,1],[23,1],[28,1],[29,2],[31,2],[33,1],[35,1],[36,1],[38,1],[55,1],[56,9],[61,2],[88,1],[94,1],[96,1],[102,1]]},"k":[45,101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[44],"v":[{"d":{"df":11,"dc":[[30,1],[31,2],[56,2],[65,1],[67,1],[84,1],[93,1],[94,1],[96,1],[98,1],[107,2]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":5,"dc":[[59,4],[92,1],[98,1],[101,1],[105,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[63,1],[77,1]]},"k":[105,101,115],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[63,1],[84,1]]}}]}]},{"k":[109,116],"v":[{"k":[108],"v":[{"d":{"df":6,"dc":[[33,1],[48,2],[53,1],[59,1],[63,1],[77,1]]},"k":[62,44,46,65306],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}},{"d":{"df":3,"dc":[[33,1],[36,1],[48,1]]}},{"d":{"df":1,"dc":[[37,1]]}},{"d":{"df":1,"dc":[[47,1]]}}]}]},{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101,103],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101,122],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116,115],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[104,99],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[102],"v":[{"k":[119],"v":[{"k":[47],"v":[{"k":[101,112],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[98],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[121],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[52],"v":[{"k":[99],"v":[{"k":[51],"v":[{"k":[50],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[99],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[51],"v":[{"k":[54],"v":[{"k":[97],"v":[{"k":[102],"v":[{"k":[55],"v":[{"k":[50],"v":[{"k":[98],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[97],"v":[{"k":[49],"v":[{"k":[97],"v":[{"k":[52],"v":[{"k":[97],"v":[{"k":[55],"v":[{"k":[51],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,100,110,118,114,112,98],"v":[{"d":{"df":23,"dc":[[23,2],[30,1],[31,3],[32,2],[33,3],[34,1],[38,2],[55,5],[56,1],[61,2],[63,7],[65,6],[66,2],[68,1],[69,1],[85,1],[88,3],[90,1],[92,1],[96,1],[100,1],[103,1],[106,1]]}},{"d":{"df":1,"dc":[[23,1]]}},{"k":[100,110],"v":[{"k":[98,108,44],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[107],"v":[{"d":{"df":3,"dc":[[23,1],[29,1],[88,1]]}}]}]}]},{"k":[101,105],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[114],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[97],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[101,105],"v":[{"d":{"df":24,"dc":[[23,1],[28,1],[29,1],[31,2],[34,1],[35,1],[38,2],[55,3],[56,1],[58,1],[61,3],[63,18],[65,4],[66,2],[68,3],[69,2],[84,1],[94,2],[95,1],[98,1],[99,1],[101,1],[105,1],[107,4]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":4,"dc":[[35,1],[55,1],[56,1],[59,2]]}}]}]}]},{"k":[100,109],"v":[{"d":{"df":6,"dc":[[31,1],[65,1],[66,1],[93,1],[102,1],[106,1]]},"k":[119],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,2]]}}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[112],"v":[{"k":[101,105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[35,2],[68,1]]}}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[106,2]]}}]}]}]}]},{"k":[101,58],"v":[{"k":[102],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[115,119],"v":[{"k":[116,101],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[12289],"v":[{"k":[60],"v":[{"k":[97],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[24320],"v":[{"k":[28304],"v":[{"k":[20013],"v":[{"k":[22269],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[62],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[59,2],[75,2]]}}]},{"k":[103,100,115,114],"v":[{"k":[104],"v":[{"k":[108,101,45,116],"v":[{"k":[121,105],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[35,1],[63,1],[101,1]]},"k":[105,115,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[37,1],[63,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[96,3]]}}]}]}]}]}]}]},{"k":[114,115],"v":[{"d":{"df":6,"dc":[[56,1],[63,1],[66,1],[68,1],[101,1],[107,1]]}},{"k":[116],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]},{"k":[112,99,100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]},{"k":[101,105],"v":[{"d":{"df":5,"dc":[[34,2],[58,1],[61,1],[63,1],[95,2]]},"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[96,1]]}}]}]}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[93,44],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[105],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[110,103,109],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[30,1],[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[63,1],[69,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[102,112,110,116,114,118,117,98,99,119,109,108,104],"v":[{"d":{"df":44,"dc":[[0,1],[23,1],[26,5],[28,4],[30,20],[31,11],[32,14],[33,13],[34,8],[35,21],[36,12],[37,6],[38,19],[55,29],[56,44],[58,4],[59,44],[61,16],[63,66],[65,20],[66,5],[67,4],[68,7],[69,29],[84,14],[85,25],[88,8],[89,1],[90,4],[92,3],[94,14],[95,6],[96,14],[97,2],[98,10],[99,6],[100,5],[101,6],[102,7],[103,10],[104,9],[105,6],[106,11],[107,11]]},"k":[102,116],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[101,105,115],"v":[{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[26,1]]}}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[29,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[36,6],[53,6]]}}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[56,1],[63,2],[66,1]]}}]}]}]},{"k":[101,116,97,112],"v":[{"k":[110,114],"v":[{"d":{"df":2,"dc":[[0,2],[94,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105,111],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46,115],"v":[{"d":{"df":2,"dc":[[34,1],[35,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[55,3]]},"k":[58,115],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"d":{"df":1,"dc":[[55,2]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[111,109],"v":[{"k":[110],"v":[{"d":{"df":48,"dc":[[0,1],[7,1],[28,3],[30,1],[32,8],[34,6],[35,3],[36,6],[37,15],[38,2],[42,1],[46,1],[47,14],[49,8],[51,2],[52,6],[53,5],[54,2],[55,11],[56,12],[59,6],[62,10],[64,12],[65,15],[75,4],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]},"k":[115,58,46,97,49,50,44],"v":[{"d":{"df":5,"dc":[[26,1],[36,2],[59,1],[63,1],[65,1]]},"k":[44,58],"v":[{"d":{"df":2,"dc":[[26,1],[59,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":2,"dc":[[28,1],[42,1]]}},{"d":{"df":2,"dc":[[31,1],[36,1]]},"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[46,91],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"k":[48],"v":[{"k":[93],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[55,1],[59,1]]}}]},{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[105],"v":[{"k":[115,122],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]},{"k":[97,101,105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[56,2],[63,1]]},"k":[100,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[88,1],[100,1]]},"k":[58,46],"v":[{"d":{"df":2,"dc":[[90,1],[114,1]]}},{"d":{"df":1,"dc":[[90,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[105,2]]}}]}]}]}]}]}]},{"d":{"df":31,"dc":[[0,1],[23,2],[26,3],[28,2],[30,3],[31,4],[32,3],[34,2],[35,9],[38,3],[55,7],[56,2],[58,1],[59,2],[61,9],[63,5],[65,5],[67,1],[68,1],[69,1],[84,1],[85,3],[88,2],[92,1],[95,1],[99,1],[101,4],[102,1],[105,4],[106,1],[107,1]]},"k":[108,101,44,122,100,112,109,45,46],"v":[{"k":[105,121],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[26,3]]}}]}]},{"d":{"df":25,"dc":[[26,1],[28,2],[30,1],[31,1],[34,1],[35,3],[36,3],[37,1],[55,7],[56,2],[58,2],[59,3],[61,1],[63,9],[65,4],[66,1],[68,2],[84,1],[88,1],[89,1],[92,1],[101,2],[104,1],[106,1],[107,3]]}}]},{"d":{"df":22,"dc":[[33,1],[34,2],[35,8],[38,4],[55,8],[56,6],[63,2],[66,1],[67,1],[68,1],[69,1],[84,1],[85,2],[94,2],[96,2],[99,3],[100,2],[101,3],[102,2],[104,1],[105,1],[107,2]]},"k":[115,46,44,58],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":2,"dc":[[56,1],[102,1]]}},{"d":{"df":2,"dc":[[65,1],[102,1]]}},{"d":{"df":1,"dc":[[106,1]]}}]},{"d":{"df":1,"dc":[[38,1]]}},{"k":[101],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,4],[78,4]]}}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]},{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[41,44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}},{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[109,111],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[88,1]]}}]},{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":17,"dc":[[23,2],[33,1],[35,1],[36,1],[38,1],[55,5],[56,3],[59,1],[63,8],[69,1],[85,1],[88,1],[94,1],[96,1],[97,1],[105,1],[107,2]]},"k":[115,119,46],"v":[{"d":{"df":2,"dc":[[23,1],[56,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[102,1]]}}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,1],[59,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[88,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]},{"d":{"df":35,"dc":[[23,3],[28,4],[29,1],[30,1],[31,6],[32,2],[33,2],[34,4],[35,7],[36,3],[37,2],[38,3],[55,15],[56,9],[58,1],[59,8],[61,1],[62,2],[63,6],[65,6],[66,2],[67,3],[68,3],[69,1],[93,1],[94,4],[96,1],[98,3],[99,2],[100,2],[101,3],[104,2],[105,1],[106,4],[107,1]]},"k":[100,105,58,63,44,97],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":8,"dc":[[23,1],[28,1],[37,1],[55,1],[58,1],[63,2],[65,2],[106,1]]},"k":[58,46,101],"v":[{"d":{"df":2,"dc":[[55,8],[62,6]]}},{"d":{"df":2,"dc":[[55,1],[68,1]]}},{"k":[100,120],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[91],"v":[{"k":[93],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,103],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":6,"dc":[[34,2],[35,1],[51,1],[52,2],[96,1],[113,1]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[97],"v":[{"k":[108],"v":[{"d":{"df":4,"dc":[[55,3],[56,1],[63,2],[102,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":1,"dc":[[65,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":6,"dc":[[26,1],[31,1],[63,3],[100,1],[102,1],[104,1]]},"k":[97,108,118,44,115,119,114],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":5,"dc":[[30,5],[34,1],[63,2],[68,1],[84,1]]}}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[115,112],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[96,1]]}}]},{"k":[101,105],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[100,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[119],"v":[{"d":{"df":1,"dc":[[36,2]]}}]}]}]},{"d":{"df":1,"dc":[[61,1]]}},{"k":[116,112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116,100],"v":[{"d":{"df":1,"dc":[[66,1]]}},{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[90,1]]}}]}]}]}]}]}]},{"k":[114,116],"v":[{"d":{"df":6,"dc":[[28,1],[36,1],[61,1],[63,2],[65,2],[69,2]]},"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[38,1],[63,1],[65,1],[68,1],[69,1],[107,1]]},"k":[111,115,112,108,46,44,99,100,101],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,4]]}}]}]},{"k":[105],"v":[{"k":[101,110],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[55,2],[62,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[66,1],[107,1]]}}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[66,1],[85,1]]}}]}]}]},{"d":{"df":2,"dc":[[61,1],[88,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[68,1],[105,2],[107,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[96,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[96,2]]}}]}]}]},{"k":[115,106,116,118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[118],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":4,"dc":[[32,1],[69,1],[106,1],[107,1]]}}]}]},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[63,2],[77,1]]},"k":[46,44,59,105,41],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}},{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":3,"dc":[[68,1],[104,1],[107,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[117],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"d":{"df":2,"dc":[[38,1],[55,1]]}}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[88,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[106,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[56,1],[65,2]]}}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[100,108,97,114,111,104,117,101,105,115,39,112,45,49,53],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[26,2],[43,2]]}}]},{"k":[105,97,117,111,101],"v":[{"k":[99,101],"v":[{"k":[107],"v":[{"d":{"df":4,"dc":[[0,1],[26,1],[34,1],[35,4]]},"k":[105,115,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[34,1],[35,1]]}}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[35,4]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[35,3]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[114,115],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[121,105],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"k":[101,99],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[85,1],[88,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[93,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101,105,61,46],"v":[{"k":[115],"v":[{"k":[44,34],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[102],"v":[{"k":[121,105],"v":[{"d":{"df":2,"dc":[[69,1],[103,1]]}},{"k":[99,101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[99,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]},{"k":[34],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[107],"v":[{"k":[45],"v":[{"k":[111,105,99],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[102,1],[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[107,1]]}}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[93,44],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[117,116,115,99],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]},{"k":[104],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[66,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[44,100],"v":[{"d":{"df":1,"dc":[[101,1]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]},{"k":[107],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[106,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[63,3],[66,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[63,4],[69,1]]}}]}]}]}]}]},{"k":[110,115,117,112,114,108,116],"v":[{"d":{"df":42,"dc":[[0,3],[23,5],[26,3],[28,4],[30,7],[31,6],[32,7],[33,3],[34,3],[35,12],[36,10],[37,2],[38,7],[55,20],[56,27],[57,1],[58,4],[59,26],[61,9],[63,21],[65,7],[66,2],[67,2],[68,3],[69,7],[84,2],[85,3],[88,6],[94,5],[95,1],[96,1],[97,1],[98,5],[99,1],[100,1],[101,4],[102,1],[103,4],[104,3],[105,3],[106,3],[107,8]]},"k":[118,110,100,39],"v":[{"k":[97],"v":[{"k":[115],"v":[{"d":{"df":10,"dc":[[28,1],[31,11],[42,1],[45,9],[61,2],[63,2],[65,2],[73,3],[77,2],[81,2]]},"k":[114,58,46,65306,44],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":6,"dc":[[28,5],[31,1],[42,5],[45,1],[65,1],[81,1]]},"k":[93],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":4,"dc":[[31,1],[45,1],[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":3,"dc":[[35,1],[61,2],[63,1]]}},{"k":[22914],"v":[{"k":[91],"v":[{"k":[28843],"v":[{"k":[20809],"v":[{"k":[23614],"v":[{"k":[36857],"v":[{"k":[29305],"v":[{"k":[25928],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[24102],"v":[{"k":[26377],"v":[{"k":[28151],"v":[{"k":[21512],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[30340],"v":[{"k":[28909],"v":[{"k":[21147],"v":[{"k":[22270],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"d":{"df":6,"dc":[[30,1],[56,2],[63,1],[69,1],[106,1],[107,2]]}}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]},{"k":[101],"v":[{"d":{"df":5,"dc":[[38,2],[55,3],[56,1],[85,1],[96,3]]},"k":[115,44,46,58,93],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[46,44,93],"v":[{"d":{"df":2,"dc":[[31,1],[59,1]]},"k":[93],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":6,"dc":[[33,1],[36,1],[55,1],[56,1],[58,1],[65,4]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"d":{"df":10,"dc":[[33,1],[55,2],[56,2],[84,2],[85,3],[88,2],[94,1],[96,1],[106,1],[107,1]]}},{"d":{"df":2,"dc":[[55,1],[61,2]]}},{"d":{"df":1,"dc":[[56,1]]}},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,116],"v":[{"k":[105,101,97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[31,1],[63,1]]}}]}]},{"d":{"df":3,"dc":[[69,1],[96,1],[106,1]]},"k":[100],"v":[{"d":{"df":2,"dc":[[68,1],[105,2]]}}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[99,98],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[63,2]]}},{"d":{"df":2,"dc":[[63,1],[65,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[116,101,112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":5,"dc":[[32,1],[56,1],[85,1],[88,1],[94,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[61,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[66,1]]}},{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[67,1]]}}]}]}]}]}]}]},{"k":[99,108,109],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]},{"k":[100],"v":[{"d":{"df":2,"dc":[[38,2],[59,1]]}}]}]}]}]}]}]},{"d":{"df":5,"dc":[[33,3],[35,2],[55,1],[58,2],[94,1]]},"k":[101,105,98],"v":[{"k":[100],"v":[{"d":{"df":11,"dc":[[32,1],[38,2],[56,2],[61,2],[67,1],[69,2],[94,1],[97,1],[99,1],[104,1],[105,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[33,2]]}}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[35,3]]}}]}]}]}]},{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[101,99],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105,121],"v":[{"k":[101,99],"v":[{"k":[115],"v":[{"d":{"df":13,"dc":[[32,1],[38,1],[63,1],[66,1],[67,1],[85,1],[95,1],[97,1],[98,1],[100,1],[101,1],[105,1],[106,4]]},"k":[46,58,41,44],"v":[{"d":{"df":4,"dc":[[32,1],[34,2],[98,1],[105,1]]}},{"d":{"df":4,"dc":[[34,1],[58,1],[71,1],[85,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":3,"dc":[[56,1],[98,1],[106,1]]}}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[85,1],[99,1],[101,1]]}}]}]}]},{"d":{"df":6,"dc":[[56,2],[63,1],[84,1],[85,3],[88,1],[94,2]]},"k":[44,65292,46,58,39],"v":[{"d":{"df":2,"dc":[[56,3],[98,1]]}},{"d":{"df":1,"dc":[[64,1]]}},{"d":{"df":4,"dc":[[84,1],[95,1],[98,1],[106,1]]}},{"d":{"df":1,"dc":[[85,1]]}},{"k":[115],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]},{"k":[104],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]},{"k":[101,97,111],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"d":{"df":7,"dc":[[0,1],[23,4],[40,1],[56,1],[61,1],[63,7],[65,1]]},"k":[100],"v":[{"d":{"df":4,"dc":[[31,1],[36,1],[63,1],[100,1]]}}]},{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[115],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"k":[119],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]}]}]}]}]},{"k":[110,100,109,114,111,118,108,99,117,112,103,115,105],"v":[{"k":[116,115,102,118,99,100,110],"v":[{"k":[101,97,114,105],"v":[{"k":[110,120],"v":[{"k":[116],"v":[{"d":{"df":7,"dc":[[30,2],[33,1],[34,2],[59,5],[63,1],[75,4],[88,1]]},"k":[58,46,125,44],"v":[{"d":{"df":2,"dc":[[0,1],[94,1]]}},{"d":{"df":3,"dc":[[32,1],[33,1],[63,1]]}},{"k":[96],"v":[{"d":{"df":1,"dc":[[75,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[101,115,108,105],"v":[{"k":[114,100],"v":[{"d":{"df":2,"dc":[[0,1],[33,11]]},"k":[44,115,46,40],"v":[{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":1,"dc":[[33,1]]}},{"k":[96],"v":[{"k":[39],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[33,1],[35,1],[56,1],[69,1]]}}]},{"d":{"df":5,"dc":[[31,1],[38,1],[55,1],[61,1],[63,1]]}},{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[58],"v":[{"d":{"df":3,"dc":[[36,1],[53,1],[83,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]},{"k":[111,105,97],"v":[{"k":[108,118],"v":[{"d":{"df":3,"dc":[[34,1],[63,1],[96,1]]},"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]},{"k":[98],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[57,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[102,2]]},"k":[46,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[115,99],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[63,2],[104,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[110],"v":[{"k":[117],"v":[{"k":[111,101],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":3,"dc":[[38,9],[94,2],[104,1]]},"k":[108,63],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]},{"d":{"df":1,"dc":[[88,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[111,105,116,117],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[0,1],[35,1],[65,1],[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[108],"v":[{"k":[111],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[40],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[112,40],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[110,115],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,100],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116,99],"v":[{"d":{"df":3,"dc":[[63,1],[69,1],[106,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[121],"v":[{"d":{"df":2,"dc":[[55,1],[69,2]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[105,97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[34,1],[107,1]]}}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[59,1],[65,2],[75,1],[81,2]]},"k":[114],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]},{"k":[109,108],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]},{"k":[105,111,108,117],"v":[{"k":[103,110,100],"v":[{"d":{"df":8,"dc":[[32,5],[35,1],[36,2],[55,4],[56,1],[62,2],[94,2],[95,1]]},"k":[117,46,58,115],"v":[{"k":[114],"v":[{"k":[97,101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":10,"dc":[[0,2],[28,1],[30,5],[38,3],[56,3],[63,5],[65,1],[85,2],[90,1],[94,1]]},"k":[115,44],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":2,"dc":[[59,1],[63,1]]}}]},{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]}]},{"d":{"df":3,"dc":[[56,4],[69,1],[95,1]]},"k":[100],"v":[{"d":{"df":3,"dc":[[55,2],[63,2],[85,1]]}}]}]}]},{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":2,"dc":[[55,16],[62,16]]}},{"d":{"df":3,"dc":[[56,1],[58,1],[97,1]]},"k":[34,58],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":1,"dc":[[56,4]]}}]}]},{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[109],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[110,111],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[66,1],[104,1]]}}]},{"k":[110],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]},{"k":[101,105],"v":[{"k":[110,114,121],"v":[{"k":[105,116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116,99],"v":[{"d":{"df":2,"dc":[[28,1],[56,1]]},"k":[108],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[84,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[36,2]]}}]}]}]}]},{"k":[116,115],"v":[{"d":{"df":2,"dc":[[55,2],[61,1]]},"k":[101,105,115,116],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[55,4],[61,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"d":{"df":1,"dc":[[61,1]]}},{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,1],[68,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[100,1]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[105,101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[55,1],[56,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[105,117],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,3]]},"k":[115,97],"v":[{"d":{"df":1,"dc":[[67,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[59,91],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[93],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[56,1],[66,2],[92,1],[104,1]]},"k":[105,101,115],"v":[{"k":[111,110],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[63,1],[92,1],[104,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[104,1]]}}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[88,1]]}}]},{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]},{"k":[101,105],"v":[{"d":{"df":14,"dc":[[0,1],[23,1],[26,1],[28,2],[31,2],[35,2],[36,1],[37,9],[61,7],[63,4],[65,3],[84,1],[88,1],[103,2]]},"k":[46,34,44,65292,45,96],"v":[{"d":{"df":5,"dc":[[0,1],[28,1],[37,1],[63,3],[65,1]]}},{"d":{"df":1,"dc":[[28,1]]}},{"d":{"df":2,"dc":[[37,1],[65,1]]}},{"k":[35299],"v":[{"k":[21387],"v":[{"k":[21518],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]},{"k":[112,109,98,101,102],"v":[{"k":[108,111,97,114],"v":[{"k":[101,105,121],"v":[{"k":[116,120],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[0,1],[30,1],[56,1],[63,2],[85,1]]},"k":[100,108],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[58,1]]}}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,3]]}}]},{"k":[101,99,97],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100,46],"v":[{"d":{"df":4,"dc":[[38,1],[59,1],[65,2],[69,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"d":{"df":1,"dc":[[101,1]]}}]},{"k":[110,115],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":10,"dc":[[28,2],[35,8],[36,1],[37,2],[38,7],[42,1],[56,1],[61,3],[63,2],[65,2]]},"k":[115,111,116,58,41,93,46,44,96,65292],"v":[{"d":{"df":8,"dc":[[28,7],[36,1],[37,2],[38,3],[56,1],[59,1],[63,1],[65,1]]},"k":[44,46,58],"v":[{"d":{"df":2,"dc":[[28,2],[63,2]]}},{"d":{"df":3,"dc":[[36,1],[37,1],[63,1]]}},{"d":{"df":1,"dc":[[65,2]]}}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,4],[51,4]]},"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[36,1]]}},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118,103,116,100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":3,"dc":[[36,1],[38,1],[65,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[38,1]]}},{"d":{"df":2,"dc":[[56,1],[61,1]]}},{"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[37324],"v":[{"k":[38754],"v":[{"k":[26377],"v":[{"k":[33509],"v":[{"k":[24178],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]}]}]}]},{"k":[114,116],"v":[{"k":[105,101,97],"v":[{"k":[115,110],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[55,2],[63,1],[66,1],[106,1]]},"k":[44,46,115],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":3,"dc":[[55,5],[63,1],[106,1]]}},{"d":{"df":2,"dc":[[85,1],[101,1]]}}]}]}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[68,1],[98,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":9,"dc":[[55,1],[66,1],[68,1],[99,2],[102,1],[103,1],[104,2],[106,1],[107,1]]},"k":[100],"v":[{"d":{"df":9,"dc":[[55,2],[69,3],[90,1],[92,1],[95,1],[96,1],[98,2],[101,1],[106,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]},{"k":[98,116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]},{"k":[105,44],"v":[{"k":[98],"v":[{"k":[108,105],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[61,1],[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[101],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]},{"k":[117,97,111,101,105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116,99],"v":[{"k":[121],"v":[{"d":{"df":3,"dc":[[23,1],[57,1],[63,3]]}}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]},{"k":[110,100],"v":[{"d":{"df":9,"dc":[[29,1],[33,1],[36,1],[38,5],[55,3],[56,3],[63,2],[69,2],[105,1]]},"k":[46,108,106],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"k":[121],"v":[{"d":{"df":6,"dc":[[35,1],[56,1],[57,1],[63,2],[96,1],[103,1]]}}]},{"k":[115],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[37,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[105,3]]}}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101,97,105],"v":[{"d":{"df":4,"dc":[[28,2],[59,1],[63,2],[103,1]]},"k":[44,100],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":2,"dc":[[63,1],[99,1]]}}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}},{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[89,1]]}}]}]}]}]},{"k":[101,114,110],"v":[{"d":{"df":3,"dc":[[28,1],[63,2],[65,1]]}},{"k":[101],"v":[{"k":[99,115,108],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[108,110],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":10,"dc":[[34,2],[35,3],[63,1],[65,1],[69,1],[84,1],[85,3],[94,1],[95,1],[96,1]]}}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[107,3]]},"k":[40],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[107,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[107,2]]}},{"d":{"df":1,"dc":[[107,2]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[34,1],[63,3],[92,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114,100,112,108],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":9,"dc":[[28,1],[32,2],[56,6],[61,4],[65,1],[85,1],[87,1],[88,1],[94,5]]},"k":[115,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":1,"dc":[[56,2]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[63,2],[69,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[30,1],[56,1],[61,1]]}}]}]},{"k":[111,117,108],"v":[{"k":[114,110],"v":[{"d":{"df":17,"dc":[[34,3],[35,1],[36,6],[38,1],[59,2],[63,5],[66,1],[67,1],[69,23],[85,3],[90,2],[93,1],[94,1],[99,2],[100,2],[101,2],[103,1]]},"k":[115,58,44,34,40,46],"v":[{"d":{"df":9,"dc":[[38,1],[63,2],[65,2],[68,2],[69,9],[98,1],[100,1],[103,1],[107,1]]},"k":[44,116,46,59],"v":[{"d":{"df":4,"dc":[[34,1],[36,1],[63,4],[69,1]]}},{"k":[111],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[36,3],[53,3]]}}]}]}]}]},{"d":{"df":4,"dc":[[63,1],[68,1],[69,1],[101,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":19,"dc":[[34,1],[35,1],[36,15],[38,1],[51,1],[52,1],[53,15],[54,1],[59,14],[65,2],[75,14],[81,2],[83,2],[85,1],[88,1],[90,1],[110,1],[114,1],[116,1]]}},{"d":{"df":6,"dc":[[36,1],[63,2],[65,1],[88,2],[90,1],[106,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[96],"v":[{"k":[39],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[101,1],[102,1]]}}]},{"k":[58],"v":[{"d":{"df":1,"dc":[[56,2]]}}]}]},{"k":[109],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[56,17],[59,1],[85,4],[101,1]]},"k":[46,44,40,115,59,41],"v":[{"d":{"df":4,"dc":[[35,1],[56,1],[69,1],[84,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"k":[114,96],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,4]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[99,98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[85,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[38,1],[107,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,7],[64,7]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]}]}]},{"k":[108,110,114],"v":[{"k":[100],"v":[{"d":{"df":4,"dc":[[35,2],[63,1],[95,1],[96,2]]}}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[56,2]]},"k":[58,101],"v":[{"d":{"df":2,"dc":[[56,5],[64,5]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[63,1],[69,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[97,111,101,105,114,117],"v":[{"k":[114,110],"v":[{"k":[115,116,97],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[45],"v":[{"k":[56],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":48,"dc":[[0,4],[28,3],[30,11],[31,6],[32,1],[33,12],[34,5],[35,4],[36,3],[38,3],[42,1],[45,3],[53,3],[55,1],[56,4],[58,3],[59,1],[61,3],[63,13],[65,2],[66,13],[67,6],[68,11],[69,7],[81,1],[84,3],[85,7],[86,2],[87,1],[88,6],[89,2],[90,3],[92,3],[93,3],[94,7],[95,8],[96,9],[97,2],[98,12],[99,9],[100,10],[101,10],[102,11],[103,8],[104,12],[105,8],[106,15],[107,10]]},"k":[12290,115,34,44,46,39,93,58,41,63,65289,65288,60,40],"v":[{"d":{"df":1,"dc":[[0,1]]}},{"d":{"df":17,"dc":[[28,3],[31,2],[33,1],[34,1],[35,3],[38,1],[56,8],[59,1],[61,1],[63,9],[65,1],[69,1],[95,1],[96,1],[98,1],[104,1],[105,1]]},"k":[44,46,34,93],"v":[{"d":{"df":7,"dc":[[28,1],[30,1],[34,1],[35,1],[38,1],[63,4],[65,1]]}},{"d":{"df":7,"dc":[[28,1],[33,1],[56,1],[63,3],[98,1],[99,1],[104,1]]}},{"d":{"df":1,"dc":[[29,1]]}},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[29,1]]},"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]},{"d":{"df":22,"dc":[[30,2],[34,1],[38,1],[56,2],[63,1],[68,1],[84,1],[85,3],[90,2],[92,3],[94,1],[96,2],[97,2],[98,2],[99,1],[100,2],[101,1],[102,1],[103,1],[104,1],[105,1],[107,1]]}},{"d":{"df":28,"dc":[[30,2],[31,1],[32,1],[33,1],[34,3],[35,1],[36,1],[56,4],[58,1],[59,1],[63,1],[68,3],[69,2],[84,1],[88,1],[92,1],[93,2],[94,1],[95,1],[96,1],[97,1],[98,2],[99,2],[100,3],[102,4],[104,4],[105,1],[106,2]]},"k":[111,115],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[101,39],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[99,109],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,6],[51,6]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[111,117],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]}}]}]}]}]}]},{"k":[112],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[123,47],"v":[{"d":{"df":4,"dc":[[35,4],[51,4],[65,1],[81,1]]}},{"k":[42],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"d":{"df":1,"dc":[[96,1]]}}]},{"k":[40],"v":[{"k":[104,101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111,104],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[121],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[93,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[56,1],[85,1],[95,1],[102,1]]}},{"d":{"df":1,"dc":[[68,1]]},"k":[58,46],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[105,1]]}}]},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[97,1]]},"k":[21448],"v":[{"k":[34987],"v":[{"k":[21483],"v":[{"k":[20570],"v":[{"k":[34584],"v":[{"k":[34523],"v":[{"k":[32593],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[36866],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[12290],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[28857],"v":[{"k":[24320],"v":[{"k":[22987],"v":[{"k":[30340],"v":[{"k":[36724],"v":[{"k":[19978],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[30340],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22810],"v":[{"k":[20803],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[21644],"v":[{"k":[35282],"v":[{"k":[24230],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[26159],"v":[{"k":[26080],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[97,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[47],"v":[{"k":[98],"v":[{"k":[62],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[102,2]]}}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46,44,105],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[59,1]]}},{"k":[115,122],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]}]}]}]},{"k":[103,110],"v":[{"k":[101,105],"v":[{"d":{"df":16,"dc":[[30,1],[32,4],[33,5],[36,1],[56,3],[58,1],[61,1],[65,4],[68,1],[84,1],[85,2],[88,2],[89,1],[90,2],[102,1],[103,1]]},"k":[100,115,93,46],"v":[{"d":{"df":7,"dc":[[30,1],[56,1],[65,3],[68,1],[88,1],[90,1],[102,1]]},"k":[46,44,58],"v":[{"d":{"df":2,"dc":[[33,1],[65,2]]}},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,3]]}}]},{"d":{"df":4,"dc":[[58,1],[63,2],[65,4],[92,1]]},"k":[46,41,58],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":1,"dc":[[65,2]]}}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":1,"dc":[[88,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[34,1],[35,1],[84,1]]}}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[36,1],[56,2]]},"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[111,105,115],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":11,"dc":[[26,1],[28,1],[31,1],[38,1],[55,1],[58,1],[63,2],[68,1],[69,1],[96,1],[103,1]]}}]}]},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":7,"dc":[[31,2],[34,1],[69,2],[84,1],[89,1],[103,1],[105,1]]},"k":[115,46],"v":[{"d":{"df":1,"dc":[[69,1]]}},{"d":{"df":1,"dc":[[107,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":12,"dc":[[28,1],[32,1],[36,1],[37,1],[38,1],[56,4],[58,1],[65,2],[69,1],[85,1],[94,1],[101,1]]},"k":[58,101,105],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[66,1]]}}]}]}]}]}]},{"k":[108],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[58,46],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[43],"v":[{"k":[47],"v":[{"k":[108],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[57,1]]}},{"k":[91],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[12289],"v":[{"k":[91],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[115,114,116,108,109],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":3,"dc":[[35,1],[38,1],[63,2]]},"k":[105,122,101,97],"v":[{"k":[122],"v":[{"k":[97,101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[26,2],[36,1],[56,1],[63,2]]},"k":[93,46],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[26,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]},{"d":{"df":3,"dc":[[30,1],[36,2],[61,2]]},"k":[100],"v":[{"d":{"df":5,"dc":[[32,1],[85,1],[88,1],[94,1],[95,1]]}}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[114],"v":[{"d":{"df":2,"dc":[[69,1],[105,1]]}}]},{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"k":[114,118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[28,1],[35,1],[37,1],[61,1]]},"k":[108,105],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[35,5],[51,5]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[61,2],[104,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]}]}]}]}]},{"k":[114,110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":7,"dc":[[29,1],[32,1],[36,1],[56,1],[65,1],[69,1],[101,2]]}}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[59,3]]},"k":[58,46],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[55,3],[62,3]]}},{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[99],"v":[{"k":[117,108],"v":[{"k":[109,108],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[44,115],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[61,5]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[61,5]]}},{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"k":[115,118],"v":[{"d":{"df":6,"dc":[[33,1],[48,1],[59,1],[65,1],[75,3],[81,1]]},"k":[46,41],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[58],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"d":{"df":1,"dc":[[64,3]]}}]},{"d":{"df":1,"dc":[[34,2]]},"k":[93,58,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[34,3]]}}]},{"d":{"df":1,"dc":[[34,1]]}},{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[117],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]},{"k":[50],"v":[{"k":[46],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[55],"v":[{"k":[45],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[55],"v":[{"k":[45],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[52],"v":[{"k":[54],"v":[{"k":[45],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[48],"v":[{"k":[54],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[57],"v":[{"k":[55],"v":[{"k":[45],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[48],"v":[{"k":[54],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[48],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[44],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[48],"v":[{"k":[54],"v":[{"k":[49],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[48],"v":[{"k":[55],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[49],"v":[{"k":[53],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[48],"v":[{"k":[46],"v":[{"k":[48],"v":[{"k":[54],"v":[{"k":[44],"v":[{"k":[48],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[54],"v":[{"k":[57],"v":[{"k":[45],"v":[{"k":[48],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[54],"v":[{"k":[44],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[48],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[44],"v":[{"k":[53],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[55],"v":[{"k":[56],"v":[{"d":{"df":2,"dc":[[94,2],[119,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"k":[48],"v":[{"k":[55],"v":[{"k":[56],"v":[{"k":[44],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[53],"v":[{"k":[54],"v":[{"k":[56],"v":[{"k":[44],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[53],"v":[{"k":[54],"v":[{"k":[56],"v":[{"k":[44],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[55],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[44],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[108],"v":[{"k":[49],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[53],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[108],"v":[{"k":[49],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[54],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[56],"v":[{"k":[99],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[45],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[49],"v":[{"k":[45],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[44],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[52],"v":[{"d":{"df":2,"dc":[[94,2],[119,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[50],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[53],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[44],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[55],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[122],"v":[{"k":[34,39],"v":[{"k":[47],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117,105,58],"v":[{"k":[105,101,97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[0,1],[23,1]]}},{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]},{"k":[115,114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[23,1],[29,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[23,3]]}}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[110,115,108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[97,121],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[32,1],[67,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[102,1]]},"k":[34,39],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":1,"dc":[[32,3]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[45],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[67,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[103,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":1,"dc":[[56,7]]}}]},{"k":[100,101,105,96,60,110,121,99,115,116,97,39,111,119,114,109,108,112,113,122,118,46,63,103,102,98,50,62,61,33,123,91,49,117,104,48,51,25968,31995,120],"v":[{"k":[105,97,116,111,96],"v":[{"k":[115],"v":[{"k":[116,112],"v":[{"k":[47,96,97],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[44,65292],"v":[{"d":{"df":1,"dc":[[0,1]]}},{"k":[28857],"v":[{"k":[20987],"v":[{"k":[24182],"v":[{"k":[20445],"v":[{"k":[23384],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[26,1],[43,1]]}},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[59,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97,101],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[115,96,105,122],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105,96,46],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[55,5]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[56,7],[64,3]]},"k":[58,46,12290,65292],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,4]]}},{"d":{"df":1,"dc":[[64,2]]}},{"k":[24182],"v":[{"k":[24102],"v":[{"k":[26377],"v":[{"k":[32852],"v":[{"k":[21160],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[115,100],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96,104],"v":[{"d":{"df":2,"dc":[[56,2],[64,3]]},"k":[59,46],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[56,4],[61,1],[85,1],[88,1],[116,2],[119,1]]},"k":[46,44,65292],"v":[{"d":{"df":2,"dc":[[61,1],[88,3]]}},{"d":{"df":1,"dc":[[94,1]]}},{"k":[33258,25152],"v":[{"k":[21160],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]},{"k":[110,116],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[46,96],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[55,3],[62,2]]},"k":[65289],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[26085],"v":[{"k":[26399],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[119],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[119,2]]},"k":[39],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]},{"k":[99,120,110,102,109],"v":[{"k":[104,45],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[46,111,96,47],"v":[{"k":[106,105,116,117,102,110],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":5,"dc":[[0,1],[7,2],[26,1],[43,1],[73,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[48,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[112,102],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[62,1],[65,1],[81,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[109,99],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[102,103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]}]}]},{"d":{"df":5,"dc":[[31,1],[58,1],[65,1],[88,1],[116,1]]}},{"k":[115,108,109],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[98],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[118,101],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[65292],"v":[{"k":[20063],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[63,4]]}}]}]}]}]}]}]}]}]},{"k":[110,116,100],"v":[{"k":[100,99,108],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]},"k":[44,65292],"v":[{"d":{"df":1,"dc":[[0,1]]}},{"k":[20320],"v":[{"k":[20250],"v":[{"k":[30475],"v":[{"k":[21040],"v":[{"k":[19968],"v":[{"k":[29255],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[25285],"v":[{"k":[24515],"v":[{"k":[65292],"v":[{"k":[25171],"v":[{"k":[24320],"v":[{"k":[25511],"v":[{"k":[21046],"v":[{"k":[21488],"v":[{"k":[30830],"v":[{"k":[35748],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[25253],"v":[{"k":[38169],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[19979],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[65292],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[27969],"v":[{"k":[20013],"v":[{"k":[25353],"v":[{"k":[34892],"v":[{"k":[25918],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[96],"v":[{"d":{"df":61,"dc":[[0,3],[7,3],[26,1],[28,4],[30,3],[31,3],[32,8],[33,4],[34,6],[35,16],[36,7],[37,24],[38,4],[42,4],[43,1],[45,3],[46,3],[47,24],[48,4],[49,8],[51,16],[52,6],[53,7],[54,4],[55,15],[56,16],[58,3],[59,8],[61,7],[62,15],[63,1],[64,16],[65,10],[71,3],[75,8],[77,1],[78,7],[81,10],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,6],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,6],[120,1]]},"k":[104,115,106,116,109,120],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"d":{"df":4,"dc":[[0,3],[7,3],[33,3],[48,3]]}}]}]}]},{"k":[104],"v":[{"d":{"df":2,"dc":[[26,1],[43,1]]},"k":[101],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]},{"k":[115],"v":[{"d":{"df":57,"dc":[[28,2],[30,1],[31,3],[32,8],[33,1],[34,6],[35,16],[36,7],[37,11],[38,4],[42,2],[45,3],[46,1],[47,11],[48,1],[49,8],[51,14],[52,6],[53,7],[54,4],[55,13],[56,16],[58,3],[59,8],[61,7],[62,13],[63,1],[64,16],[65,10],[71,3],[75,8],[77,1],[78,7],[81,10],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]},"k":[123],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[51],"v":[{"k":[45],"v":[{"k":[53],"v":[{"k":[125],"v":[{"k":[91],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"d":{"df":7,"dc":[[28,1],[42,1],[51,2],[55,2],[62,2],[94,1],[119,1]]}}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[37,15],[47,15]]}}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]},{"k":[47,100,96,61,62,112],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[62],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[118],"v":[{"k":[62],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]},{"k":[40,44],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[40],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]},{"k":[112,111,97,117],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]},{"k":[114,116],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[53,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[110,109],"v":[{"k":[96],"v":[{"k":[46,44,12290],"v":[{"d":{"df":1,"dc":[[55,2]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[22312],"v":[{"k":[22823],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[25353],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[31574],"v":[{"k":[30053],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[20687],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[23601],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[36716],"v":[{"k":[25104],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[31574],"v":[{"k":[30053],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[20005],"v":[{"k":[26684],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[22120],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[23485],"v":[{"k":[26494],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36935],"v":[{"k":[21040],"v":[{"k":[21547],"v":[{"k":[26377],"v":[{"k":[23614],"v":[{"k":[32512],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[96,100],"v":[{"d":{"df":3,"dc":[[58,2],[96,1],[113,1]]},"k":[65289],"v":[{"k":[65292],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22312],"v":[{"k":[22278],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[19981],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[108],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]},{"k":[97,58],"v":[{"k":[114,120],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[116,2]]},"k":[46],"v":[{"d":{"df":2,"dc":[[88,1],[94,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[97,108,111,117,104],"v":[{"k":[110,116],"v":[{"k":[118,100],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[28,2],[65,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[88,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]}]},{"k":[105,117],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[110,108,109],"v":[{"k":[116,102,115,118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[115],"v":[{"k":[47],"v":[{"k":[122,101],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[96,112],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[65288],"v":[{"k":[20013],"v":[{"k":[25991],"v":[{"k":[25991],"v":[{"k":[31456],"v":[{"k":[65289],"v":[{"k":[25110],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[47],"v":[{"k":[96,112],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[65288],"v":[{"k":[33521],"v":[{"k":[25991],"v":[{"k":[25991],"v":[{"k":[31456],"v":[{"k":[65289],"v":[{"k":[30446],"v":[{"k":[24405],"v":[{"k":[19979],"v":[{"k":[26032],"v":[{"k":[22686],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[37,1]]}},{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[96,46,58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,2]]}}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,4],[62,3]]}}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[61,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[96,97,108,115,104],"v":[{"d":{"df":1,"dc":[[75,1]]},"k":[44,46,12289],"v":[{"d":{"df":4,"dc":[[38,1],[59,1],[65,1],[88,1]]}},{"d":{"df":1,"dc":[[59,1]]}},{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[65,3],[81,1]]},"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[118,116,114,121,111,101,99,104,117,109],"v":[{"k":[103],"v":[{"k":[114,112,96],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[21069],"v":[{"k":[32512],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[94,2],[119,1]]}}]}]},{"k":[114,97,121,101],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[35,1],[51,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[116,99],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[47,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[84,3],[111,4],[118,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[46,96],"v":[{"k":[116,114],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[46],"v":[{"k":[63],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]},{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[92,1],[117,2]]}}]}]}]},{"k":[99],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[20026],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[96,115],"v":[{"d":{"df":2,"dc":[[94,4],[119,3]]},"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[114,116,108],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46,96,108],"v":[{"k":[100,101,104,99,98,108,109,102],"v":[{"k":[97,105,111],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[56,1],[61,1],[64,1]]}}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"k":[110,109],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,3],[64,4]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46,58],"v":[{"k":[115,102],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96,115],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"k":[111,105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97,111],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[105,111],"v":[{"k":[112],"v":[{"k":[111,96],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[102],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]},{"k":[99],"v":[{"k":[107],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,4],[81,4]]}}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[109,101],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[116,96,108],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[111],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[106],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[56,3],[85,1],[88,1],[93,1],[110,4],[116,2]]},"k":[44,46],"v":[{"d":{"df":2,"dc":[[56,1],[88,2]]}},{"d":{"df":2,"dc":[[56,1],[85,2]]}}]},{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,2],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[58,1],[61,1],[71,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[58,1],[61,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99,96,101],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[63,1],[65,2],[77,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,2],[77,1]]},"k":[46,12290],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[81,2]]}}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116,108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[59,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[58,120,96,121],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]},{"d":{"df":1,"dc":[[65,1]]}},{"k":[58],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[97,111],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99,98,111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[88,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[119],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]},{"k":[110],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[104,117],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[89,1],[120,1]]}}]}]}]}]}]}]},{"k":[114,104,121,111,101],"v":[{"k":[117,101,97],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":4,"dc":[[46,1],[62,1],[89,1],[120,1]]},"k":[46,44,65292],"v":[{"d":{"df":2,"dc":[[30,1],[96,1]]}},{"d":{"df":2,"dc":[[30,1],[88,2]]}},{"k":[21017,32780],"v":[{"k":[29983,34920],"v":[{"k":[25104],"v":[{"k":[26080],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[21542],"v":[{"k":[21017],"v":[{"k":[19981],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[22312],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[31227],"v":[{"k":[21160],"v":[{"k":[21040],"v":[{"k":[35813],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[25165],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[19981],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[21040],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23558],"v":[{"k":[20854],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[96,46],"v":[{"d":{"df":2,"dc":[[55,1],[62,2]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[112,116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[96,46],"v":[{"d":{"df":1,"dc":[[61,1]]}},{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[101],"v":[{"k":[96,100],"v":[{"d":{"df":6,"dc":[[38,1],[54,1],[85,1],[88,1],[110,1],[116,2]]},"k":[12290],"v":[{"k":[22312],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[30340],"v":[{"k":[24212],"v":[{"k":[29992],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,2]]},"k":[65292],"v":[{"k":[23545],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[26377],"v":[{"k":[22909],"v":[{"k":[22788],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,103],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[116],"v":[{"k":[98,115,96,99],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99,119],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":2,"dc":[[59,2],[65,1]]}},{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99,98,111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[116,102],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[65292],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[33021],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[26356],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114,103,110,120,108,112,117,118,96],"v":[{"k":[101,105],"v":[{"k":[97],"v":[{"k":[45,115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[114,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[46,45,96],"v":[{"k":[100,103],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[30,2],[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[40],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[47],"v":[{"k":[96],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[47],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[96,46],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,6],[75,7]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[46],"v":[{"k":[115,118],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[40,101],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[40],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[111],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[96,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65289],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[23376],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[36317],"v":[{"k":[31163],"v":[{"k":[65292],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[123,112,116,99,115,100,109,103,108,22270,20215,50,51,39,45,49,97,110,111,102,105,92,98,114,120,121,52,101,30007,22899,54,118],"v":[{"k":[116,64],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[65292],"v":[{"k":[23558],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[26367],"v":[{"k":[25442],"v":[{"k":[25104],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,91],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]},{"k":[52],"v":[{"k":[93],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]},{"k":[114,105,97],"v":[{"k":[105,111],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]},{"k":[101,110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[38,1]]},"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[23558],"v":[{"k":[19978],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[36873],"v":[{"k":[20854],"v":[{"k":[19968],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[31867],"v":[{"k":[20284],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[22411],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[94,1],[119,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]},{"k":[104,105,111,114],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,2]]},"k":[58,46,65289],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"k":[19978],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112,111],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[58,65306],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[30418],"v":[{"k":[30340],"v":[{"k":[39030],"v":[{"k":[36793],"v":[{"k":[36148],"v":[{"k":[20303],"v":[{"k":[34892],"v":[{"k":[39030],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[97,108,111,101,105],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,65292],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[21017],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[20013],"v":[{"k":[26159],"v":[{"k":[23621],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]},{"k":[118,99,101,104,116],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99,111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120,121],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]},{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114,99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]},{"k":[107],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[93,1]]}}]}]}]}]}]}]},{"k":[98,105],"v":[{"k":[108],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]},{"k":[111,105,252,97],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[100,109,117,111],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[118,117],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[58,65306,46],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[23621],"v":[{"k":[34892],"v":[{"k":[20013],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[92,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]}]},{"k":[108,114],"v":[{"k":[111],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,12289],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]},{"k":[101,105],"v":[{"k":[103,102],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99,101],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]},"k":[44,65292],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[21017],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[20013],"v":[{"k":[26159],"v":[{"k":[23621],"v":[{"k":[24038],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[102],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,2],[64,1]]}}]}]}]},{"k":[34920],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"k":[123,20215],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[12290],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26684],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26684],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[22270],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[49,37],"v":[{"k":[50],"v":[{"k":[45],"v":[{"k":[48],"v":[{"k":[53,51],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[50],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[45],"v":[{"k":[49],"v":[{"k":[50],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[96],"v":[{"k":[46,65292],"v":[{"d":{"df":1,"dc":[[85,2]]}},{"k":[34920,36825],"v":[{"k":[31034],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24847],"v":[{"k":[21619],"v":[{"k":[30528],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[65288],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[51],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]},{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]},"k":[41,65289],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[22312],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[30340],"v":[{"k":[22836],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[23614],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[54],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41,65289],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109,117,39,114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[84,1],[111,1]]}}]},{"k":[101,114],"v":[{"k":[97],"v":[{"k":[115,39],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[90,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[90,1]]}}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":1,"dc":[[112,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[97,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]},{"k":[117,97],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[108,101],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[58,65292],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"k":[22312],"v":[{"k":[23384],"v":[{"k":[20648],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]}]}]}]}]},{"k":[110,116,109],"v":[{"k":[116,104],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[58,65292],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"k":[22312],"v":[{"k":[23384],"v":[{"k":[20648],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[39,58],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[94,1]]}}]},{"k":[47],"v":[{"k":[47],"v":[{"k":[104,46,39],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[47],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[94,1]]}},{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,2],[75,1]]}}]}]}]},{"k":[111,39,97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[58,65306],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[30418],"v":[{"k":[30340],"v":[{"k":[24213],"v":[{"k":[36793],"v":[{"k":[36148],"v":[{"k":[20303],"v":[{"k":[34892],"v":[{"k":[24213],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[84,1],[111,1]]}}]},{"k":[114],"v":[{"k":[39,119,103],"v":[{"k":[96],"v":[{"k":[46,12290],"v":[{"d":{"df":1,"dc":[[85,1]]}},{"d":{"df":1,"dc":[[110,1]]}}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[85,2]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]},{"k":[105,101,111],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]},"k":[44,65292],"v":[{"d":{"df":1,"dc":[[59,1]]}},{"k":[21017],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[20013],"v":[{"k":[26159],"v":[{"k":[23621],"v":[{"k":[21491],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[40],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[40],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39,97],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,65292],"v":[{"d":{"df":1,"dc":[[85,1]]}},{"k":[24847],"v":[{"k":[21619],"v":[{"k":[30528],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[27599],"v":[{"k":[20391],"v":[{"k":[31354],"v":[{"k":[20313],"v":[{"k":[30340],"v":[{"k":[36317],"v":[{"k":[31163],"v":[{"k":[65292],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[44,65292],"v":[{"d":{"df":1,"dc":[[92,1]]}},{"k":[20998],"v":[{"k":[21035],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[22312],"v":[{"k":[24403],"v":[{"k":[21069],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[21069],"v":[{"k":[28857],"v":[{"k":[19982],"v":[{"k":[19979],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[25296],"v":[{"k":[24367],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]},{"k":[39],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]},{"k":[112,98,117,114,110],"v":[{"k":[116,97],"v":[{"k":[115,105],"v":[{"k":[46],"v":[{"k":[119,104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[48,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[88,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]},{"k":[106],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[46,44,12290,65292],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[51,1]]}},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[21487],"v":[{"k":[36873],"v":[{"k":[30340],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[96,105],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[58,120,96,121],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[58],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110,100],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]},"k":[44,12289],"v":[{"d":{"df":1,"dc":[[59,2]]}},{"k":[96],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,111,105,97],"v":[{"k":[115,103,110],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[33,2],[48,1]]}}]}]}]}]}]}]},{"k":[114,96,105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[65,2]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[96,46],"v":[{"d":{"df":2,"dc":[[59,2],[75,4]]},"k":[44,65292],"v":[{"d":{"df":1,"dc":[[59,2]]}},{"k":[19981],"v":[{"k":[33021],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[22359],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,2]]},"k":[63],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[96,46],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[110,97],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96,103],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96,103],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121,97,100],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115,46],"v":[{"k":[46],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[56],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100,99],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[123],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116,102],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105,114,112],"v":[{"k":[110],"v":[{"k":[116,115],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96,46],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"k":[115],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]},"k":[96,116,115,117],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[111],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96,99,101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96,101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101,105,97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[115,96,104,116],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]},{"k":[44,12289,65292],"v":[{"d":{"df":3,"dc":[[56,1],[59,1],[88,1]]}},{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24182],"v":[{"k":[19988],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]},"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":7,"dc":[[36,1],[56,1],[59,1],[75,1],[88,1],[96,2],[116,1]]},"k":[58,12290,65288,65292],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[81,1]]}},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[29992],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[26102],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,114,105,111],"v":[{"k":[114,100,116,103],"v":[{"k":[97,115],"v":[{"k":[109,108],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[65292],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,8],[62,8]]}}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96,45],"v":[{"d":{"df":3,"dc":[[65,1],[75,1],[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,4]]}}]},{"k":[116,98],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]},{"k":[101,111],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"k":[118],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[96,116,115,117],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[111],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96,99,101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96,101],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96,58],"v":[{"d":{"df":1,"dc":[[59,2]]},"k":[44,12289],"v":[{"d":{"df":2,"dc":[[59,1],[65,1]]}},{"k":[96],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[35,3],[51,2]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]},{"k":[105,101,52,53,97],"v":[{"k":[110,115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[38,3],[54,1]]},"k":[12290,46],"v":[{"k":[26368],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[91],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,3]]},"k":[41,44,65289],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[65,2]]}},{"k":[21319],"v":[{"k":[32423],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[96,46],"v":[{"d":{"df":2,"dc":[[65,7],[81,8]]},"k":[41,44,46,58,65289],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"d":{"df":1,"dc":[[65,4]]}},{"d":{"df":1,"dc":[[65,4]]}},{"d":{"df":1,"dc":[[65,1]]}},{"k":[30340],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[12290],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":3,"dc":[[88,2],[95,1],[115,2]]},"k":[58],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]},{"k":[46],"v":[{"k":[46],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]},{"k":[99],"v":[{"k":[61],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]},{"k":[114,97],"v":[{"k":[97,105],"v":[{"k":[112],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[96,105],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"k":[99],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,1]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[96,105,114,117,97,111],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96,58],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[109],"v":[{"k":[100,116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110,100],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[96,58],"v":[{"d":{"df":2,"dc":[[55,3],[62,2]]},"k":[47],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,3],[62,1]]}}]}]}]}]},{"k":[96,58],"v":[{"d":{"df":2,"dc":[[55,3],[62,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,108],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[108],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[57,1],[95,1]]},"k":[46,12290,65292],"v":[{"d":{"df":2,"dc":[[95,1],[96,1]]}},{"d":{"df":2,"dc":[[113,1],[115,2]]}},{"k":[32780],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]},{"k":[110,114],"v":[{"k":[116],"v":[{"k":[115,119,102],"v":[{"k":[116,105],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]},{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,2]]}}]}]}]}]}]}]}]}]}]},{"k":[109,99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[63,2],[77,1]]},"k":[65292],"v":[{"k":[32467],"v":[{"k":[21512],"v":[{"k":[24050],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[23500],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[20986],"v":[{"k":[37266],"v":[{"k":[30446],"v":[{"k":[32780],"v":[{"k":[22810],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[45],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,97,108],"v":[{"k":[120,114],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[59,2]]},"k":[99,119,114,115,116],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[59,3],[65,1],[88,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,3],[88,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[114,99],"v":[{"k":[96,103,99,119,109],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[59,1]]}}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[85,2],[110,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[85,1],[110,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[120],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[75,2]]},"k":[44,46,58],"v":[{"d":{"df":1,"dc":[[59,3]]}},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[46,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[48,96],"v":[{"k":[49,48],"v":[{"k":[49],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[96],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]},{"d":{"df":1,"dc":[[62,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]},{"k":[96,61],"v":[{"k":[40,44,65288],"v":[{"k":[96],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[96],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[62],"v":[{"k":[61],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[60],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[60],"v":[{"k":[61],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[61],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[113],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[33],"v":[{"k":[61],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[60],"v":[{"k":[62],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"k":[65288],"v":[{"k":[23567],"v":[{"k":[25324],"v":[{"k":[21495],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[31526],"v":[{"k":[21495],"v":[{"k":[25110],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[21035],"v":[{"k":[21517],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[36215],"v":[{"k":[26469],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[39318],"v":[{"k":[20808],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[22320],"v":[{"k":[33021],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[20063],"v":[{"k":[26377],"v":[{"k":[20123],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[29305],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[40,44],"v":[{"k":[96],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[40,44],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[113],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[61],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[40,46],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[115,121,125],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[124],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[121],"v":[{"k":[121],"v":[{"k":[125],"v":[{"k":[45],"v":[{"k":[123],"v":[{"k":[109],"v":[{"k":[109],"v":[{"k":[125],"v":[{"k":[45],"v":[{"k":[123],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[125],"v":[{"k":[96],"v":[{"k":[41,65289],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20026],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[31890],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[90,1],[114,1]]}}]}]},{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[93],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[50,96,49],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[96],"v":[{"k":[41,65289],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,3]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,2]]}}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[46,12290],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[100,115],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[96,101],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]},{"k":[100],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,111,105],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[44,12290],"v":[{"d":{"df":1,"dc":[[59,2]]}},{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"d":{"df":1,"dc":[[62,3]]},"k":[12290,46],"v":[{"d":{"df":1,"dc":[[62,2]]}},{"d":{"df":1,"dc":[[88,1]]}}]}]},{"k":[96,51],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[46,12290],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[25454],"v":[{"k":[38598],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,3]]},"k":[65288],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[26159,20013],"v":[{"k":[19987],"v":[{"k":[38376],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[31649],"v":[{"k":[29702],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[22909],"v":[{"k":[22788],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[96],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[20013,12290],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[36825],"v":[{"k":[20214],"v":[{"k":[20107],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[58,97],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}},{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[96],"v":[{"d":{"df":4,"dc":[[88,2],[94,1],[110,1],[116,3]]}}]}]}]}]}]}]},{"d":{"df":29,"dc":[[0,1],[7,1],[28,1],[31,1],[33,2],[36,1],[37,1],[42,1],[45,2],[47,1],[48,2],[50,6],[53,1],[55,1],[56,1],[59,2],[62,1],[64,1],[65,1],[75,2],[81,1],[84,3],[85,1],[88,2],[92,1],[110,1],[111,3],[116,2],[117,1]]},"k":[59,61],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}},{"d":{"df":2,"dc":[[55,1],[73,1]]}}]},{"d":{"df":2,"dc":[[68,1],[80,1]]},"k":[101,117,97,121,111,114,108,39,105,246,58,103,44,46],"v":[{"d":{"df":38,"dc":[[0,1],[23,3],[30,5],[31,4],[32,2],[33,2],[34,4],[35,8],[36,12],[38,6],[55,26],[56,13],[57,1],[58,1],[59,28],[61,11],[63,15],[65,6],[66,4],[67,2],[69,4],[84,5],[85,4],[88,7],[93,1],[94,3],[95,4],[96,5],[98,1],[99,3],[100,1],[101,5],[102,1],[103,1],[104,2],[105,1],[106,4],[107,2]]},"k":[102,99,116,101,103,108,104,115,58,96,105,97],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":11,"dc":[[0,1],[23,1],[33,2],[35,1],[36,1],[37,1],[55,5],[58,1],[61,1],[65,1],[69,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":2,"dc":[[28,1],[63,1]]}}]}]}]}]},{"k":[97,111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":12,"dc":[[31,3],[33,1],[36,1],[55,1],[56,1],[65,2],[66,1],[68,1],[69,1],[88,1],[101,1],[102,1]]}}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,2],[66,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[119,116],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":22,"dc":[[31,2],[32,1],[58,1],[63,3],[65,1],[66,1],[68,1],[69,2],[85,3],[88,1],[90,1],[92,2],[98,2],[99,1],[100,1],[101,3],[102,4],[103,2],[104,1],[105,1],[106,1],[107,5]]}}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":11,"dc":[[31,2],[63,5],[65,1],[66,1],[69,2],[89,1],[101,3],[102,1],[105,1],[106,1],[107,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]},{"k":[110],"v":[{"d":{"df":5,"dc":[[31,1],[55,1],[61,2],[63,4],[65,3]]}}]},{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[85,1],[95,1]]},"k":[110],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[31,1],[33,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"d":{"df":5,"dc":[[36,1],[59,1],[65,8],[66,1],[103,1]]},"k":[58,46,41,44],"v":[{"d":{"df":2,"dc":[[32,1],[56,1]]}},{"d":{"df":3,"dc":[[55,1],[56,1],[61,1]]}},{"d":{"df":1,"dc":[[106,2]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[55,1],[66,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]},{"d":{"df":6,"dc":[[66,1],[68,1],[100,1],[103,1],[104,2],[105,1]]}}]}]}]},{"k":[97,105],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[35,1],[61,1],[69,1]]},"k":[46,115],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,4]]},"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[105,116],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[55,3]]},"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[94,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[98,1],[107,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]},{"d":{"df":2,"dc":[[55,2],[56,1]]}},{"k":[39],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[110,106],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[69,1],[105,1]]}}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]},{"k":[116,103,110,105,98,100,115],"v":[{"d":{"df":23,"dc":[[0,1],[23,1],[28,1],[35,1],[36,3],[38,1],[55,7],[56,3],[58,2],[59,2],[61,1],[63,7],[65,6],[68,2],[69,1],[84,2],[94,1],[97,1],[100,1],[101,1],[104,2],[106,1],[107,2]]}},{"d":{"df":3,"dc":[[23,2],[40,2],[71,1]]},"k":[46,44,12290,65292,115],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[23,2]]}},{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]},{"k":[25110,32780],"v":[{"k":[32773],"v":[{"k":[20320],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24819],"v":[{"k":[35831],"v":[{"k":[27714],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159],"v":[{"k":[19981],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[26576],"v":[{"k":[31181],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23581],"v":[{"k":[35797],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[58,1]]}}]},{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[28,3],[65,2]]},"k":[114,46],"v":[{"d":{"df":1,"dc":[[28,1]]}},{"d":{"df":1,"dc":[[28,2]]}}]}]}]}]},{"k":[108],"v":[{"k":[100,116],"v":[{"d":{"df":1,"dc":[[88,1]]},"k":[115,101],"v":[{"d":{"df":1,"dc":[[28,1]]}},{"k":[114],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[45],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":6,"dc":[[36,1],[37,1],[38,2],[55,5],[65,2],[94,3]]}}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[36,1],[103,7]]},"k":[46,115],"v":[{"d":{"df":2,"dc":[[56,1],[103,1]]}},{"d":{"df":1,"dc":[[103,1]]},"k":[46,39],"v":[{"d":{"df":1,"dc":[[103,2]]}},{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[115,46],"v":[{"d":{"df":1,"dc":[[66,1]]}},{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]},{"k":[114,115,99,105,110],"v":[{"d":{"df":21,"dc":[[0,1],[28,1],[35,1],[38,1],[63,1],[64,1],[65,1],[68,1],[84,5],[85,13],[86,2],[87,1],[93,2],[95,1],[96,1],[98,15],[99,10],[101,6],[102,3],[105,11],[106,3]]},"k":[99,115,44,103,47,45,46,58],"v":[{"k":[104,97],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[28,1],[42,1],[65,1],[81,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[28,3],[42,3]]}}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[69,1],[85,4],[99,1],[101,2]]},"k":[101,44,46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":2,"dc":[[85,1],[101,2]]}}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[97],"v":[{"k":[112],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[85,1],[110,1]]}}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[85,2],[101,1]]}},{"d":{"df":1,"dc":[[85,1]]}}]},{"k":[101,105],"v":[{"d":{"df":3,"dc":[[35,1],[102,1],[106,1]]},"k":[100],"v":[{"d":{"df":14,"dc":[[0,1],[28,1],[30,1],[31,1],[35,1],[38,2],[55,1],[56,1],[59,1],[61,6],[63,1],[65,1],[69,1],[84,1]]}}]},{"k":[99],"v":[{"d":{"df":19,"dc":[[30,2],[37,1],[55,1],[56,1],[59,3],[61,3],[85,2],[88,1],[89,1],[94,2],[95,2],[96,1],[97,1],[98,1],[99,1],[100,1],[101,1],[104,1],[105,1]]},"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[94,1]]},"k":[103,119],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":5,"dc":[[34,2],[59,3],[63,1],[85,2],[90,1]]},"k":[44,99,46,115],"v":[{"d":{"df":2,"dc":[[34,1],[59,1]]}},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":6,"dc":[[34,1],[36,1],[52,1],[53,1],[59,14],[75,14]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[59,1],[69,1]]}},{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[45],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[117],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"d":{"df":31,"dc":[[23,1],[28,1],[30,8],[34,2],[35,5],[36,7],[38,1],[55,13],[56,15],[57,1],[58,6],[59,16],[61,5],[63,15],[65,8],[68,1],[69,3],[84,2],[85,6],[88,6],[90,1],[92,1],[94,3],[95,2],[96,1],[97,2],[99,1],[101,1],[103,1],[104,1],[105,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[88,1]]}}]},{"k":[116,100,111,120,117,114,97,121],"v":[{"k":[116,104],"v":[{"k":[111,108],"v":[{"k":[109],"v":[{"d":{"df":6,"dc":[[26,1],[32,1],[34,1],[59,2],[65,1],[106,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":7,"dc":[[34,1],[36,1],[52,1],[53,1],[56,1],[64,1],[83,1]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"d":{"df":12,"dc":[[31,1],[32,1],[35,1],[55,3],[56,1],[63,1],[65,1],[66,1],[94,1],[95,1],[100,1],[105,1]]}}]},{"k":[121],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]},{"k":[107],"v":[{"k":[109,115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]},{"d":{"df":3,"dc":[[59,5],[63,1],[75,3]]},"k":[44,112,46,101,65289],"v":[{"d":{"df":2,"dc":[[35,1],[59,1]]}},{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[55,3],[62,2]]}}]}]}]},{"d":{"df":1,"dc":[[59,3]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[56,2],[63,1]]},"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[59,2],[63,1],[75,1],[85,1]]},"k":[44,119,99,114,58],"v":[{"d":{"df":1,"dc":[[59,2]]}},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":4,"dc":[[59,1],[65,1],[75,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,7],[75,7]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,7],[75,7]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":4,"dc":[[59,2],[65,1],[75,2],[81,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[59,9],[75,9]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[59,2],[75,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]},{"k":[105,111,101],"v":[{"k":[110,103],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[28,1],[63,2]]},"k":[115],"v":[{"d":{"df":2,"dc":[[63,1],[65,2]]}}]}]},{"k":[104],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[119,117],"v":[{"k":[115,110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":3,"dc":[[31,2],[33,1],[65,1]]},"k":[45],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[31,1],[57,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,3],[64,3]]}},{"d":{"df":2,"dc":[[56,3],[64,3]]},"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[63,1],[65,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[105,115],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[37,1],[65,3]]}}]}]},{"d":{"df":2,"dc":[[55,1],[59,1]]}}]}]}]}]},{"k":[105,117,101,97,111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[30,2]]},"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[114,101],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[69,3],[103,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[107],"v":[{"d":{"df":3,"dc":[[35,4],[55,1],[96,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":4,"dc":[[37,1],[59,10],[61,2],[66,1]]},"k":[44,115,58,46,65289],"v":[{"d":{"df":2,"dc":[[37,1],[59,1]]}},{"d":{"df":1,"dc":[[37,1]]}},{"d":{"df":1,"dc":[[59,3]]}},{"d":{"df":1,"dc":[[59,2]]}},{"k":[65306],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[22359],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[34,1]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[34,5]]}},{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[110,103,45],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[61,2],[106,1]]},"k":[103],"v":[{"k":[101],"v":[{"k":[115,114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":2,"dc":[[99,1],[103,1]]}}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[105,8]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"d":{"df":1,"dc":[[92,2]]}},{"d":{"df":1,"dc":[[92,1]]}}]},{"d":{"df":9,"dc":[[32,1],[38,2],[49,6],[54,1],[64,7],[119,1],[125,1],[127,2],[130,1]]},"k":[111,97,45,58,93,101,61],"v":[{"k":[117],"v":[{"d":{"df":38,"dc":[[0,7],[23,7],[26,4],[28,7],[29,1],[30,2],[31,5],[32,5],[33,7],[35,2],[37,7],[38,3],[56,20],[58,5],[63,8],[65,13],[66,2],[67,1],[68,2],[69,3],[84,2],[85,8],[88,1],[89,2],[90,2],[94,4],[95,3],[96,2],[98,5],[99,1],[100,2],[101,1],[102,4],[103,1],[104,2],[105,3],[106,6],[107,2]]},"k":[114,39],"v":[{"d":{"df":12,"dc":[[0,1],[23,7],[26,2],[28,2],[31,1],[35,1],[37,1],[56,1],[61,1],[63,1],[65,1],[69,1]]},"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[102],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]},{"k":[120,104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[58,105],"v":[{"d":{"df":41,"dc":[[0,1],[7,1],[28,1],[32,8],[34,1],[35,1],[36,1],[37,5],[42,1],[47,5],[49,8],[51,1],[52,1],[53,1],[55,2],[56,7],[58,2],[59,4],[61,2],[62,2],[64,7],[71,2],[75,4],[78,2],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[110,6],[111,1],[114,1],[116,5],[117,1],[118,2],[119,4],[120,1]]}},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":4,"dc":[[32,2],[49,2],[56,4],[64,4]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[120],"v":[{"k":[105,101],"v":[{"k":[115],"v":[{"d":{"df":7,"dc":[[32,6],[56,1],[85,2],[88,1],[94,3],[101,2],[103,1]]},"k":[46,58,63],"v":[{"d":{"df":3,"dc":[[32,1],[56,2],[104,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,2]]}}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]},{"d":{"df":5,"dc":[[36,3],[53,3],[56,4],[64,4],[83,1]]}},{"d":{"df":2,"dc":[[61,1],[78,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]},{"k":[97,108],"v":[{"k":[114],"v":[{"k":[115,44],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"d":{"df":3,"dc":[[69,1],[90,1],[103,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]}]},{"k":[34],"v":[{"k":[48],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]},{"k":[117,115,97,113,111],"v":[{"k":[115,109,100,105],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[0,4],[37,2]]}}]},{"k":[112],"v":[{"d":{"df":1,"dc":[[35,2]]}}]},{"k":[103],"v":[{"k":[101,109],"v":[{"d":{"df":2,"dc":[[56,2],[93,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[36,1],[53,2],[55,1],[62,2]]},"k":[100,111],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[43,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[26,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[56,2],[64,1]]},"k":[46,12290],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[41],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[115,118,112,103],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[97],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]}]},{"k":[98],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[33,104,109,115,47,98,100,116,97,105,63,112],"v":[{"d":{"df":1,"dc":[[0,1]]},"k":[100,45],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]}]}]}]},{"k":[45],"v":[{"d":{"df":4,"dc":[[0,3],[7,4],[37,14],[47,14]]}}]}]},{"k":[116,101],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]}]},{"k":[101,100],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]},{"k":[45],"v":[{"k":[101,111,97],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":15,"dc":[[0,1],[7,1],[30,1],[37,2],[46,1],[47,2],[55,3],[58,3],[59,1],[61,1],[62,3],[63,6],[71,3],[77,6],[78,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[37,8],[47,8]]}}]}]}]}]}]}]}]},{"k":[99,116,118],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[0,3],[7,3],[33,3],[48,3]]}}]}]}]}]},{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]},{"k":[104,98,115,105,109,100],"v":[{"k":[101,116],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]},{"k":[109],"v":[{"k":[108],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]}]},{"k":[111],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]}]},{"k":[99,116,118],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[62],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[33,3],[48,3]]}}]}]}]}]}]},{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]}]}]},{"k":[103],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]},{"k":[109,102],"v":[{"k":[103],"v":[{"k":[62],"v":[{"d":{"df":10,"dc":[[32,1],[49,1],[69,4],[101,2],[105,2],[106,4],[107,1],[124,2],[128,2],[130,1]]}}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":26,"dc":[[66,3],[67,2],[68,4],[69,3],[79,2],[80,4],[82,3],[83,2],[98,1],[99,2],[101,4],[102,5],[103,4],[104,4],[105,2],[106,2],[107,2],[121,2],[122,1],[124,4],[125,4],[126,5],[127,4],[128,2],[129,2],[130,2]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,8],[47,8]]}}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[118],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[102,2],[126,2]]}}]}]}]}]},{"k":[111,114,62],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,2],[7,2]]}}]}]}]},{"k":[47],"v":[{"k":[62],"v":[{"k":[123],"v":[{"k":[98],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[116,112,20256,30334],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]}]}]}]}]}]},{"k":[32479],"v":[{"k":[30340],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[62],"v":[{"k":[65306],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[20540],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[65292],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25972],"v":[{"k":[20010],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20998],"v":[{"k":[27604],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[62],"v":[{"k":[65306],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[118],"v":[{"d":{"df":6,"dc":[[0,2],[7,2],[33,3],[48,3],[102,2],[126,2]]}}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[0,1],[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[23,1],[40,2]]}},{"k":[109,102],"v":[{"k":[103],"v":[{"d":{"df":20,"dc":[[32,1],[34,1],[37,1],[47,1],[49,1],[52,1],[63,13],[69,4],[77,13],[83,4],[101,2],[104,1],[105,2],[106,4],[107,1],[124,2],[125,1],[128,2],[129,4],[130,1]]}}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":28,"dc":[[66,3],[67,2],[68,4],[69,3],[79,2],[80,4],[82,3],[83,2],[98,1],[99,2],[100,4],[101,4],[102,5],[103,4],[104,4],[105,2],[106,2],[107,2],[121,2],[122,1],[123,4],[124,4],[125,4],[126,5],[127,4],[128,2],[129,2],[130,2]]}}]}]}]}]}]},{"k":[120],"v":[{"k":[109],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]},{"d":{"df":8,"dc":[[36,2],[53,2],[55,2],[61,2],[78,2],[81,3],[94,1],[119,1]]},"k":[62,47,42,92],"v":[{"d":{"df":10,"dc":[[0,2],[7,2],[34,1],[37,1],[47,1],[52,1],[63,13],[77,13],[83,4],[129,4]]},"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]},{"d":{"df":32,"dc":[[0,3],[7,3],[28,14],[31,4],[32,25],[34,15],[35,54],[36,18],[37,1],[38,35],[42,14],[45,4],[47,1],[49,25],[51,57],[52,15],[53,22],[54,32],[55,81],[56,52],[58,9],[59,18],[61,34],[62,73],[63,1],[64,49],[65,4],[71,9],[75,16],[77,1],[78,25],[81,4]]},"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"d":{"df":2,"dc":[[62,1],[64,1]]}}]}]}]},{"d":{"df":2,"dc":[[34,1],[52,1]]}},{"k":[115],"v":[{"k":[43],"v":[{"k":[109],"v":[{"k":[252],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[92],"v":[{"k":[115],"v":[{"k":[42],"v":[{"k":[36],"v":[{"k":[47],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":31,"dc":[[23,6],[26,4],[29,3],[31,4],[36,4],[37,4],[38,6],[40,6],[41,4],[43,4],[44,6],[45,4],[47,4],[50,1],[53,4],[54,6],[55,33],[56,17],[57,4],[59,24],[62,33],[64,18],[65,104],[74,4],[75,24],[81,104],[85,5],[107,3],[110,5],[126,2],[130,3]]},"k":[45,49,51],"v":[{"d":{"df":1,"dc":[[0,1]]},"k":[62,115],"v":[{"d":{"df":4,"dc":[[0,4],[7,4],[37,14],[47,14]]}},{"k":[97],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[26,1],[28,1],[42,1],[43,1]]}}]}]}]}]},{"k":[59,44,48],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":2,"dc":[[59,3],[75,3]]}},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]},{"k":[97,114,108,111,101,105,104,117,115],"v":[{"k":[103,99,114,121,108,116,100,115,105],"v":[{"k":[101],"v":[{"d":{"df":6,"dc":[[26,1],[28,1],[33,1],[34,1],[35,1],[65,2]]},"k":[46,44,115,93],"v":[{"d":{"df":3,"dc":[[0,1],[33,1],[63,1]]}},{"d":{"df":2,"dc":[[26,1],[37,1]]}},{"d":{"df":1,"dc":[[33,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[33,1]]}}]},{"k":[40],"v":[{"k":[36,104],"v":[{"k":[123],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[98],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[125],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[107],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101,105],"v":[{"d":{"df":3,"dc":[[26,1],[28,2],[107,1]]},"k":[100,46],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[28,1],[65,1]]}}]}]}]}]}]}]},{"k":[116,97,101,115],"v":[{"d":{"df":10,"dc":[[30,2],[32,1],[56,1],[65,12],[66,2],[68,1],[98,2],[102,1],[103,1],[106,1]]},"k":[46,105,101,115,108,45,41],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"k":[116,99,101,97],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[105],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[55,1],[63,1]]}}]}]}]}]}]}]},{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[108],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]},{"d":{"df":1,"dc":[[61,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"k":[121],"v":[{"d":{"df":1,"dc":[[98,1]]}}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[45],"v":[{"k":[119],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[106,1]]}}]},{"k":[109,108],"v":[{"k":[101,115,46],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[61,2]]},"k":[93,115],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58,115],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[35,2],[55,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[33,1],[63,1]]}},{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]},{"k":[46,58],"v":[{"k":[110,115,100],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[44,41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[59],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[91],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[91],"v":[{"k":[48,49],"v":[{"k":[93],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[40],"v":[{"k":[50],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[93],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[40],"v":[{"k":[50],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[91],"v":[{"k":[51],"v":[{"k":[93],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[31,1],[98,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[33,1],[59,1]]},"k":[104],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":3,"dc":[[55,2],[65,1],[81,1]]},"k":[114,100],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[58,63],"v":[{"d":{"df":2,"dc":[[55,3],[62,2]]},"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":1,"dc":[[33,1]]}},{"k":[101,108],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[36,5]]},"k":[44,58],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]},{"k":[104,116],"v":[{"d":{"df":3,"dc":[[37,1],[63,1],[94,3]]},"k":[119,46,44,58,59],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"d":{"df":1,"dc":[[94,1]]}},{"d":{"df":1,"dc":[[94,1]]}},{"d":{"df":1,"dc":[[94,1]]}},{"d":{"df":1,"dc":[[94,1]]}}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]},"k":[58,125,46,12290],"v":[{"d":{"df":2,"dc":[[59,9],[75,9]]}},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]},{"d":{"df":1,"dc":[[59,1]]}},{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[116,115],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[88,1]]},"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]},{"k":[111,101,105],"v":[{"k":[99,98,109,106,118,110,112,100,103],"v":[{"k":[101],"v":[{"k":[101,115,100],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[0,1]]}}]},{"k":[115],"v":[{"d":{"df":5,"dc":[[30,2],[55,1],[61,1],[68,1],[69,1]]},"k":[105,46],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[56,1],[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":2,"dc":[[68,1],[102,1]]}}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[38,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[108,97],"v":[{"k":[101],"v":[{"k":[109],"v":[{"d":{"df":2,"dc":[[23,6],[68,2]]},"k":[115,46,97],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[23,2]]}},{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]},{"k":[98],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[23,1],[65,1]]}}]}]}]}]},{"k":[112,105],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[68,2],[98,1]]},"k":[46,93,44],"v":[{"d":{"df":3,"dc":[[26,2],[28,1],[98,1]]}},{"k":[40],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[26,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]},{"k":[105,101],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":10,"dc":[[28,2],[30,2],[32,3],[36,1],[55,3],[56,3],[63,4],[67,1],[68,1],[96,1]]},"k":[100,115],"v":[{"d":{"df":5,"dc":[[28,1],[31,1],[55,1],[65,1],[69,1]]}},{"d":{"df":9,"dc":[[28,2],[29,1],[36,1],[38,1],[55,1],[59,1],[63,4],[65,2],[102,1]]}}]}]}]},{"d":{"df":2,"dc":[[69,1],[107,2]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":2,"dc":[[55,2],[65,2]]},"k":[101,115,111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[58,1]]},"k":[116,108],"v":[{"k":[121,105],"v":[{"d":{"df":2,"dc":[[55,3],[85,2]]},"k":[46],"v":[{"d":{"df":2,"dc":[[36,1],[59,1]]}}]},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[121],"v":[{"k":[46,44],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[65,7]]}},{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":5,"dc":[[68,1],[95,2],[96,1],[98,1],[106,3]]},"k":[97,46],"v":[{"k":[108,116],"v":[{"d":{"df":5,"dc":[[94,1],[95,1],[98,1],[99,1],[101,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[95,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[99],"v":[{"k":[116,101],"v":[{"d":{"df":2,"dc":[[55,1],[64,1]]},"k":[58,115],"v":[{"d":{"df":2,"dc":[[56,9],[64,9]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[55,2]]},"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[97,101],"v":[{"k":[109],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[63,1],[67,1]]}}]}]}]}]}]},{"k":[112,99,116,118,115,102,100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[0,3]]},"k":[100],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]}]},{"k":[105,111],"v":[{"k":[112,115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[105,121],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]},"k":[45],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[115,101],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[37,7],[47,7]]}}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[37,7],[47,7]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[104,1]]}}]}]},{"k":[101,105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[37,1],[105,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"k":[101,111],"v":[{"k":[119],"v":[{"d":{"df":1,"dc":[[37,3]]}}]},{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":8,"dc":[[55,1],[56,3],[58,1],[63,1],[65,3],[94,1],[96,1],[102,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[63,1],[65,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[55,1],[68,1],[107,1]]},"k":[97,115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[58,1],[63,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[85,1],[101,1]]}}]}]}]}]},{"k":[105,101],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[84,1]]},"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[69,1],[106,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]}]},{"k":[99,110,111],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34,39,115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[32,1]]}}]},{"d":{"df":1,"dc":[[32,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]},{"k":[116,99],"v":[{"d":{"df":1,"dc":[[35,3]]},"k":[101,58],"v":[{"k":[100],"v":[{"d":{"df":3,"dc":[[55,1],[63,1],[65,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[105],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[65,2]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[65,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[111,97,101,117],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":3,"dc":[[0,1],[61,1],[63,1]]}}]}]}]}]}]},{"k":[99,110],"v":[{"k":[101,105],"v":[{"d":{"df":5,"dc":[[23,1],[36,1],[59,2],[85,1],[106,1]]},"k":[46,100,44,115],"v":[{"d":{"df":2,"dc":[[32,1],[55,1]]}},{"d":{"df":5,"dc":[[34,1],[56,2],[59,2],[98,1],[99,1]]}},{"d":{"df":1,"dc":[[36,1]]}},{"k":[58,46],"v":[{"d":{"df":1,"dc":[[65,2]]}},{"d":{"df":1,"dc":[[103,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[97,110],"v":[{"k":[115],"v":[{"k":[101,105],"v":[{"d":{"df":11,"dc":[[30,1],[33,1],[56,2],[57,1],[68,1],[69,1],[85,2],[88,2],[92,1],[98,1],[106,2]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[63],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[61],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,111,112,105,119,108],"v":[{"k":[115,105,116],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[55,2],[63,3],[65,1]]},"k":[46,44],"v":[{"d":{"df":4,"dc":[[23,1],[63,1],[65,1],[69,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":10,"dc":[[59,7],[61,4],[65,1],[66,1],[75,1],[84,3],[94,1],[96,1],[103,1],[106,1]]},"k":[58,101,46],"v":[{"d":{"df":12,"dc":[[32,2],[36,2],[49,2],[53,2],[59,1],[61,5],[75,1],[78,4],[88,1],[96,1],[113,1],[116,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[69,1]]}}]},{"d":{"df":2,"dc":[[103,1],[106,1]]}}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[105,5],[107,1]]},"k":[46,108],"v":[{"d":{"df":1,"dc":[[106,1]]}},{"k":[121],"v":[{"d":{"df":1,"dc":[[107,3]]}}]}]}]}]}]}]},{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[37,2]]}}]}]}]},{"k":[114],"v":[{"d":{"df":2,"dc":[[31,1],[63,1]]}}]},{"k":[45,117],"v":[{"k":[117],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]},{"k":[112,108],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[63,1],[88,1]]},"k":[46,115,105,101],"v":[{"d":{"df":2,"dc":[[36,1],[66,1]]}},{"d":{"df":8,"dc":[[55,1],[61,3],[63,1],[88,2],[92,1],[94,1],[104,3],[107,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[61,1],[101,1]]}},{"d":{"df":2,"dc":[[103,1],[107,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[67,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[67,2]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[102],"v":[{"k":[117],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[55,1],[63,2],[65,1]]}}]}]}]}]}]},{"k":[121,97],"v":[{"k":[110,103,108],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[46,115],"v":[{"d":{"df":1,"dc":[[66,1]]}},{"d":{"df":1,"dc":[[66,1]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]},{"k":[114],"v":[{"d":{"df":2,"dc":[[56,1],[87,1]]},"k":[41],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[111,114],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":5,"dc":[[23,1],[30,3],[63,2],[98,1],[106,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[102,105,99,115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[89,1]]},"k":[97,115],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[31,1],[56,2],[63,6],[66,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]},{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110,112,105],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[95,2]]},"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":7,"dc":[[59,1],[63,1],[68,1],[69,1],[95,1],[96,1],[102,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[111,112],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[105,1]]},"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[96,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101,99,112,120,110],"v":[{"d":{"df":10,"dc":[[30,1],[35,2],[56,3],[63,3],[68,2],[95,8],[96,2],[97,2],[98,2],[106,11]]},"k":[99],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[38,1],[59,1]]},"k":[119,115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[38,5]]}}]}]}]},{"d":{"df":1,"dc":[[38,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[107,116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[100,41],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[55,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[61,1],[94,1],[95,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[107],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]},{"k":[111,121,101,97],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[111,99],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]},{"k":[116,114,98,108],"v":[{"d":{"df":3,"dc":[[34,1],[55,1],[106,2]]},"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[102,1]]}}]}]}]}]},{"k":[101,112],"v":[{"d":{"df":1,"dc":[[55,2]]}},{"k":[108],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]},{"k":[121],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,105,111,117,97,58],"v":[{"k":[112,108,115,111,109,113,99,102,100,110,103,97,98,116,117,45,118,105,119],"v":[{"k":[111,114,108,101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[101],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]}]}]}]},{"k":[111,101],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[105,101],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[23,2],[40,1]]}}]}]}]},{"d":{"df":1,"dc":[[23,2]]}}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":9,"dc":[[38,2],[56,1],[67,1],[85,1],[88,1],[94,2],[95,1],[100,1],[103,1]]},"k":[101,115,97],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[68,1],[88,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[30,1],[63,1]]}}]}]},{"d":{"df":6,"dc":[[32,3],[56,1],[96,1],[100,1],[101,1],[105,1]]}},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]},"k":[100],"v":[{"d":{"df":2,"dc":[[30,2],[85,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[108,101],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[61,2]]}}]},{"k":[100],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]},{"k":[121,101,105,97,111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]},{"k":[97,118],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[33,1],[63,1]]},"k":[100,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[99,116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[103,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]},{"d":{"df":1,"dc":[[107,2]]}}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"k":[116],"v":[{"k":[105,101],"v":[{"k":[111,118],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[32,1],[102,1],[107,4]]},"k":[97,115],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[101],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":5,"dc":[[55,1],[98,3],[102,2],[103,1],[107,1]]},"k":[58,115,44,46],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[98,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]},{"k":[100],"v":[{"d":{"df":10,"dc":[[36,1],[65,5],[68,1],[69,1],[85,2],[94,1],[95,1],[99,1],[101,2],[103,1]]}}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[111,117,105,101,116,112],"v":[{"k":[117,108],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[23,1],[33,1]]}}]}]}]}]},{"k":[118,117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[96,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[116],"v":[{"d":{"df":5,"dc":[[35,2],[36,1],[55,6],[57,1],[69,1]]},"k":[44,58,46,91],"v":[{"d":{"df":3,"dc":[[23,1],[31,1],[68,1]]}},{"d":{"df":1,"dc":[[37,2]]}},{"d":{"df":1,"dc":[[55,3]]}},{"k":[48,49],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[58,46],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[55,1],[62,3]]},"k":[58,44,46],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,2]]}}]}]}]}]}]}]},{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]},{"k":[108,116,97],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[38,2],[59,1],[106,1]]},"k":[114],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[101,111],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[115],"v":[{"k":[105,101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"d":{"df":1,"dc":[[69,3]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]},{"k":[111,97,101],"v":[{"k":[118],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[23,1],[65,1]]}}]}]},{"d":{"df":2,"dc":[[55,1],[65,1]]},"k":[100,115],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[33,1]]}}]},{"d":{"df":1,"dc":[[65,2]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[101,105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[23,1],[65,1],[81,1]]},"k":[44,115],"v":[{"d":{"df":1,"dc":[[23,1]]}},{"d":{"df":1,"dc":[[106,1]]}}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[31,1],[65,1]]},"k":[100,109,40],"v":[{"d":{"df":2,"dc":[[28,6],[31,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[57,1]]}}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115,46],"v":[{"k":[46,44],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[47],"v":[{"k":[101,99],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]}]}]}]},{"k":[104,111],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[98,108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[103,97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,116,101],"v":[{"k":[109,114,103],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":8,"dc":[[26,1],[37,1],[56,1],[58,1],[65,1],[66,1],[101,1],[106,1]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":6,"dc":[[23,1],[37,1],[65,2],[67,1],[93,1],[98,1]]},"k":[46],"v":[{"d":{"df":3,"dc":[[31,1],[36,1],[106,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[35,1]]}}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[88,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[65,1]]},"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[117,108],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,5]]},"k":[44,41],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[86,1]]}}]}]}]}]}]},{"k":[101,108,97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[101,114,115],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[26,1]]}}]}]},{"d":{"df":4,"dc":[[55,6],[56,2],[62,1],[65,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]}]},{"k":[101,105],"v":[{"k":[114],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]},{"d":{"df":2,"dc":[[61,1],[94,1]]}}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[66,1],[98,1],[101,1],[107,1]]},"k":[115],"v":[{"d":{"df":2,"dc":[[32,1],[102,1]]}}]}]}]}]},{"k":[99],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[63,1],[69,2],[103,1]]},"k":[117,101,114,45,46],"v":[{"k":[99],"v":[{"k":[101,116],"v":[{"d":{"df":1,"dc":[[26,1]]}},{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[119],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[110],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[107,1]]}}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[31,3],[56,1]]},"k":[101,105],"v":[{"k":[114,100],"v":[{"d":{"df":3,"dc":[[28,1],[31,12],[65,2]]},"k":[44,46,63,115,58,93],"v":[{"d":{"df":3,"dc":[[28,1],[63,1],[65,2]]}},{"d":{"df":2,"dc":[[28,1],[31,2]]}},{"d":{"df":1,"dc":[[31,1]]}},{"d":{"df":2,"dc":[[31,3],[65,1]]}},{"d":{"df":2,"dc":[[31,2],[45,2]]}},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[57,1],[61,1]]}}]},{"k":[110,116],"v":[{"k":[103],"v":[{"d":{"df":5,"dc":[[28,1],[31,1],[57,2],[63,7],[65,3]]},"k":[44],"v":[{"d":{"df":1,"dc":[[57,1]]}}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"k":[105,117,58,63,101,114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101,114],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[28,2],[36,2],[55,1],[65,1]]},"k":[101,109],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[37,1],[55,1]]}}]},{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[120],"v":[{"k":[112],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[93,41,44],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[108,101,112],"v":[{"k":[105,111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[108,101,112],"v":[{"k":[105,111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[100,99,108,115],"v":[{"d":{"df":4,"dc":[[33,1],[66,1],[98,1],[101,1]]},"k":[105,97,46,58],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":5,"dc":[[30,2],[33,2],[67,1],[68,1],[99,1]]},"k":[46],"v":[{"d":{"df":2,"dc":[[84,1],[107,1]]}}]}]}]},{"k":[98],"v":[{"k":[105,108],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,1]]},"k":[46,44],"v":[{"d":{"df":2,"dc":[[63,1],[84,1]]}},{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]}]},{"d":{"df":2,"dc":[[66,2],[104,1]]}},{"d":{"df":1,"dc":[[102,1]]}}]},{"k":[116,104],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]},{"k":[116,45,108],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,3]]}}]}]}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[107,1]]},"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]}]}]},{"k":[117,114],"v":[{"k":[114],"v":[{"k":[110],"v":[{"d":{"df":10,"dc":[[35,1],[36,4],[51,1],[53,4],[55,1],[61,7],[65,2],[78,7],[94,1],[119,1]]}}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[115,100],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,2]]}}]}]}]},{"k":[114,99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[61,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[61,1],[65,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[119],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105,116],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[99,103],"v":[{"k":[104],"v":[{"d":{"df":7,"dc":[[30,1],[46,1],[59,2],[61,1],[63,3],[65,1],[75,2]]},"k":[101,58],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[56,1],[63,2]]}}]},{"d":{"df":2,"dc":[[59,10],[75,10]]}}]}]},{"k":[104,105],"v":[{"k":[116],"v":[{"d":{"df":9,"dc":[[32,1],[34,1],[37,2],[56,2],[59,3],[65,6],[69,2],[101,1],[105,2]]},"k":[46,58,45],"v":[{"d":{"df":1,"dc":[[32,1]]}},{"d":{"df":5,"dc":[[34,2],[36,1],[52,2],[53,1],[83,1]]}},{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[117,116,119,108,115],"v":[{"k":[103,110],"v":[{"k":[104],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[63,2]]},"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,2]]}}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"k":[58,100,46],"v":[{"d":{"df":3,"dc":[[32,1],[59,1],[75,1]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[59,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,13]]},"k":[115,46],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,2]]}}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[97,3],[106,1]]},"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[97,1],[112,1]]}}]}]}]}]}]}]}]},{"k":[110,108],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[110,116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":5,"dc":[[36,1],[55,1],[56,3],[59,3],[98,1]]},"k":[58,115,44,34],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[56,1]]}},{"d":{"df":1,"dc":[[59,3]]}},{"d":{"df":1,"dc":[[61,1]]},"k":[44,46],"v":[{"d":{"df":1,"dc":[[61,2]]}},{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]},{"k":[116,119,100,110,114,99],"v":[{"k":[104,105,101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":5,"dc":[[34,1],[55,2],[63,1],[99,1],[105,1]]}}]}]},{"k":[111],"v":[{"d":{"df":2,"dc":[[59,1],[106,1]]},"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[68,3]]},"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"d":{"df":1,"dc":[[35,1]]},"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]},{"k":[105,97],"v":[{"k":[117,97,111],"v":[{"k":[115],"v":[{"d":{"df":6,"dc":[[38,1],[61,1],[85,1],[95,2],[96,7],[97,1]]},"k":[58,46],"v":[{"d":{"df":10,"dc":[[35,1],[51,1],[55,3],[56,1],[62,3],[64,1],[95,1],[96,2],[113,2],[115,1]]}},{"d":{"df":2,"dc":[[96,1],[97,1]]}}]}]},{"k":[108,110],"v":[{"d":{"df":1,"dc":[[66,1]]}},{"k":[115],"v":[{"d":{"df":1,"dc":[[95,2]]}}]}]},{"d":{"df":1,"dc":[[106,1]]}}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[66,12]]}}]}]},{"k":[103,107],"v":[{"k":[101],"v":[{"d":{"df":3,"dc":[[38,5],[66,1],[85,1]]},"k":[59,46],"v":[{"d":{"df":1,"dc":[[38,1]]}},{"d":{"df":1,"dc":[[38,1]]}}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[115],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"d":{"df":4,"dc":[[36,3],[53,3],[61,2],[78,2]]}}]},{"d":{"df":6,"dc":[[59,1],[63,1],[75,1],[77,1],[98,1],[122,1]]},"k":[48,44,56,46,53,55,57,52,54,12289],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[48,93,44],"v":[{"k":[112,44],"v":[{"k":[120],"v":[{"k":[59],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[58],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[59],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[62],"v":[{"d":{"df":4,"dc":[[0,2],[7,2],[33,1],[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[33,1],[48,1]]}}]},{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"d":{"df":4,"dc":[[32,2],[49,2],[59,1],[75,1]]}},{"k":[46,44],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":1,"dc":[[106,1]]},"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[46],"v":[{"k":[50,49],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[46,44],"v":[{"k":[57,51,50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[46],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[51,55],"v":[{"k":[57],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[49],"v":[{"k":[53],"v":[{"k":[56],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[46],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[19977],"v":[{"k":[32500],"v":[{"k":[30340],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[27498],"v":[{"k":[26354],"v":[{"k":[20102],"v":[{"k":[21508],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[20363],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[21450],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[22256],"v":[{"k":[25200],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[19981],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,101,105,52,111,115,51,109],"v":[{"k":[114,108],"v":[{"d":{"df":22,"dc":[[0,2],[7,2],[28,3],[31,3],[33,3],[35,4],[36,5],[42,3],[45,3],[48,3],[51,4],[53,4],[55,1],[56,6],[58,2],[61,5],[62,1],[64,6],[65,2],[71,2],[78,5],[81,2]]},"k":[105,121],"v":[{"k":[101,97,111],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[26,1],[63,1]]}}]}]},{"k":[98,110],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[66,1]]},"k":[115],"v":[{"d":{"df":4,"dc":[[37,1],[66,1],[67,1],[107,2]]},"k":[44,46,41],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":4,"dc":[[66,2],[99,1],[103,3],[107,3]]}},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[89,1]]}}]}]},{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[36,1],[63,1]]}}]}]}]},{"d":{"df":1,"dc":[[38,1]]}}]},{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":23,"dc":[[30,2],[32,2],[35,1],[36,1],[38,15],[54,3],[55,7],[56,5],[63,2],[65,2],[66,1],[84,5],[88,3],[94,7],[95,2],[96,1],[100,1],[101,2],[102,2],[103,1],[105,1],[107,5],[119,1]]},"k":[58,41,44,115,91,65292,34,46],"v":[{"d":{"df":20,"dc":[[30,5],[35,10],[38,2],[46,5],[51,10],[54,2],[55,4],[56,1],[59,4],[62,4],[64,1],[69,1],[75,4],[94,1],[95,12],[96,8],[97,5],[112,5],[113,8],[115,12]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"d":{"df":6,"dc":[[38,2],[55,1],[61,1],[85,1],[94,2],[96,2]]}},{"d":{"df":11,"dc":[[55,4],[59,1],[63,1],[66,1],[85,1],[88,1],[92,1],[96,1],[102,1],[105,1],[107,1]]},"k":[46,58],"v":[{"d":{"df":6,"dc":[[38,1],[66,1],[98,1],[100,2],[103,1],[107,1]]}},{"d":{"df":4,"dc":[[56,1],[58,1],[71,1],[92,1]]}}]},{"k":[51],"v":[{"k":[93],"v":[{"k":[41,65289],"v":[{"d":{"df":1,"dc":[[38,1]]}},{"k":[34987],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[36825],"v":[{"k":[26356],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,2]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[55,3]]}},{"d":{"df":8,"dc":[[55,1],[56,1],[67,1],[94,1],[96,1],[100,1],[103,1],[105,1]]}}]}]}]}]},{"k":[114,99],"v":[{"k":[121,115,116],"v":[{"d":{"df":5,"dc":[[23,1],[28,1],[63,6],[98,3],[107,1]]}},{"k":[105,97],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":3,"dc":[[26,1],[63,1],[65,1]]},"k":[115,44,61],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,2]]}},{"k":[34],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[48,49],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"d":{"df":2,"dc":[[56,1],[69,1]]}}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":5,"dc":[[34,1],[59,1],[92,1],[101,1],[105,1]]},"k":[108,97],"v":[{"k":[121],"v":[{"d":{"df":2,"dc":[[34,1],[98,1]]}}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[63,1],[94,6]]}}]}]}]}]},{"k":[97,115,100,101,110,99,117,111],"v":[{"d":{"df":3,"dc":[[28,3],[55,4],[65,1]]}},{"k":[105,117],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[30,1],[55,1]]},"k":[39,101,111,115],"v":[{"d":{"df":2,"dc":[[30,1],[95,4]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[36,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[114],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]},{"d":{"df":1,"dc":[[107,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":10,"dc":[[31,1],[36,3],[38,19],[56,4],[63,4],[65,2],[69,4],[89,1],[90,1],[106,2]]},"k":[105,109,108,115],"v":[{"k":[122],"v":[{"k":[97,101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":4,"dc":[[38,1],[55,1],[63,6],[69,1]]},"k":[44,58,115,46],"v":[{"d":{"df":2,"dc":[[36,1],[69,3]]}},{"d":{"df":1,"dc":[[56,2]]}},{"d":{"df":1,"dc":[[63,2]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":2,"dc":[[63,1],[69,3]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":4,"dc":[[36,1],[38,8],[53,1],[54,8]]},"k":[58],"v":[{"d":{"df":4,"dc":[[38,2],[54,2],[56,1],[64,1]]}}]}]}]},{"k":[121],"v":[{"d":{"df":3,"dc":[[38,1],[99,1],[103,1]]}}]},{"d":{"df":1,"dc":[[65,4]]}}]}]}]}]},{"k":[101],"v":[{"k":[111],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[119],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[105,98],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]},{"k":[111],"v":[{"k":[120],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[48],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":2,"dc":[[56,1],[69,1]]}}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]}]},{"k":[46],"v":[{"k":[48,55],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]},{"k":[108],"v":[{"k":[117,97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[104,1]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[37,1],[44,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[55],"v":[{"d":{"df":1,"dc":[[75,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[65,3],[81,2]]}}]}]},{"d":{"df":57,"dc":[[0,2],[7,2],[28,4],[30,1],[31,3],[32,8],[33,4],[34,6],[35,9],[36,9],[37,13],[38,2],[42,4],[45,3],[46,1],[47,13],[48,4],[49,8],[51,8],[52,6],[53,8],[54,2],[55,22],[56,15],[58,2],[59,6],[61,7],[62,22],[64,14],[65,4],[71,2],[75,10],[78,7],[81,4],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]},"k":[61,96,62],"v":[{"k":[61],"v":[{"d":{"df":2,"dc":[[35,5],[51,5]]}}]},{"k":[39],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[65,34],[81,34],[94,1],[119,1]]}}]},{"d":{"df":58,"dc":[[0,5],[7,5],[28,10],[30,9],[31,3],[32,44],[33,4],[34,24],[35,57],[36,46],[37,27],[38,11],[42,10],[45,3],[46,9],[47,27],[48,4],[49,43],[51,58],[52,24],[53,46],[54,11],[55,95],[56,87],[58,13],[59,72],[61,36],[62,94],[63,1],[64,87],[65,6],[71,13],[75,76],[78,36],[81,6],[83,13],[84,4],[85,24],[88,19],[89,3],[90,5],[92,6],[93,8],[94,12],[95,19],[96,19],[97,7],[110,24],[111,4],[112,7],[113,19],[114,5],[115,21],[116,19],[117,6],[118,8],[119,12],[120,3]]},"k":[125,46,99,110,115,8203,98],"v":[{"d":{"df":10,"dc":[[38,2],[54,2],[55,1],[59,1],[62,1],[75,1],[90,1],[93,2],[114,1],[118,2]]},"k":[44,41],"v":[{"d":{"df":33,"dc":[[0,2],[7,2],[28,2],[32,1],[34,1],[35,1],[37,5],[42,2],[47,5],[49,1],[51,1],[52,1],[55,3],[56,13],[58,5],[62,3],[64,13],[71,5],[84,1],[85,5],[88,5],[89,1],[90,1],[92,1],[93,2],[94,5],[110,5],[111,1],[114,1],[116,5],[118,2],[119,5],[120,1]]}},{"k":[59],"v":[{"d":{"df":1,"dc":[[51,4]]}}]}]},{"k":[46],"v":[{"k":[46],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[35,4]]}}]}]}]}]}]},{"k":[125,108],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[111],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[124],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[124],"v":[{"k":[123],"v":[{"k":[97],"v":[{"k":[125],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[117,104],"v":[{"k":[110],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[124],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[124],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}},{"k":[97],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[125],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":5,"dc":[[55,1],[59,9],[61,4],[75,9],[78,4]]},"k":[101,99,112,104,115,98,32650,38634,35044,39640,34972,38144,114,100,117,118,116,97,123,106,102,109,111,110,108,50,35,119,103,120,121,39,105,53,54,49,26576,35775,30452,37038,32852,35270,25628,51,52,55,56,57,38477,28201,36873,21462,22270,39292,22307,26805,29785,61,62,60,46,33,44,96,24322,92,39321,27225,33609,31532,29461,45,22278],"v":[{"k":[99,109,100,110,120,39],"v":[{"k":[104,115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":4,"dc":[[0,1],[7,1],[28,1],[42,1]]},"k":[39,47],"v":[{"k":[59],"v":[{"d":{"df":8,"dc":[[28,1],[31,1],[42,1],[45,1],[61,1],[65,2],[78,1],[81,2]]}}]},{"k":[99,114,108],"v":[{"k":[111,104],"v":[{"k":[114,109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[59],"v":[{"d":{"df":6,"dc":[[28,2],[31,1],[42,2],[45,1],[65,1],[81,1]]}}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[59],"v":[{"d":{"df":4,"dc":[[28,2],[42,2],[65,2],[81,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[59,96],"v":[{"d":{"df":4,"dc":[[28,2],[42,2],[65,1],[81,1]]}},{"k":[59],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[59],"v":[{"d":{"df":6,"dc":[[28,2],[31,1],[42,2],[45,1],[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[98],"v":[{"k":[47],"v":[{"k":[101,99],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[65292],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[96],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[58,39],"v":[{"k":[120,114],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[65292],"v":[{"k":[39],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":2,"dc":[[30,1],[35,2]]}}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]},"k":[44,41,65292],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[24403],"v":[{"k":[21069],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[103,100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,8],[62,8]]}}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[96,1],[97,1],[112,1],[113,1]]},"k":[93],"v":[{"d":{"df":14,"dc":[[84,1],[85,3],[88,3],[89,1],[90,1],[93,2],[96,1],[110,3],[111,1],[113,1],[114,1],[116,3],[118,2],[120,1]]}}]}]},{"k":[97,104,101,114,105,117,111,39],"v":[{"k":[114,110,116,107],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115,39],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]}]}]}]},{"k":[118,97],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[39],"v":[{"d":{"df":6,"dc":[[34,1],[52,1],[55,2],[56,3],[62,2],[64,3]]},"k":[44,41,96,65289],"v":[{"d":{"df":13,"dc":[[32,1],[49,1],[56,4],[59,1],[64,4],[75,1],[83,1],[85,1],[88,1],[92,1],[110,1],[116,1],[117,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":1,"dc":[[62,1]]}},{"k":[65292],"v":[{"k":[21017],"v":[{"k":[23558],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[34892],"v":[{"k":[65289],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[21518],"v":[{"k":[32493],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[34892],"v":[{"k":[65289],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[105,101],"v":[{"k":[102,110],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[115,39],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[0,1]]}}]}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,7],[64,7]]}}]}]}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":9,"dc":[[30,1],[32,2],[34,1],[46,1],[49,2],[51,1],[52,1],[96,1],[113,1]]},"k":[44],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[96,2],[113,2]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[61,1],[78,2]]},"k":[44,46],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[61,3],[78,3]]}},{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]},{"k":[115,98],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]},{"k":[110,108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]},{"k":[117],"v":[{"k":[109],"v":[{"k":[110],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[96,2],[97,1],[112,1],[113,2]]},"k":[44,93],"v":[{"d":{"df":14,"dc":[[84,1],[85,3],[88,3],[89,1],[90,1],[93,2],[96,1],[110,3],[111,1],[113,1],[114,1],[116,3],[118,2],[120,1]]}},{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]},{"k":[97,105,114,111,108],"v":[{"k":[110,116],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[0,1],[28,1],[35,1]]}}]}]}]}]},{"k":[104],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[99],"v":[{"k":[53],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[49],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[44],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[44],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[44],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[44],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[51],"v":[{"k":[44],"v":[{"k":[48],"v":[{"k":[45],"v":[{"k":[57],"v":[{"k":[46],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[44],"v":[{"k":[50],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[56],"v":[{"k":[52],"v":[{"k":[44],"v":[{"k":[54],"v":[{"k":[46],"v":[{"k":[57],"v":[{"k":[48],"v":[{"k":[53],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,110],"v":[{"k":[39,99],"v":[{"k":[44],"v":[{"d":{"df":14,"dc":[[30,1],[35,2],[36,1],[46,1],[51,2],[53,1],[55,6],[62,6],[95,4],[96,2],[97,1],[112,1],[113,2],[115,4]]}}]},{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]},{"k":[101,105,111],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,7],[62,7]]}}]}]}]}]},{"k":[100,102],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44,93],"v":[{"d":{"df":4,"dc":[[55,3],[56,2],[62,3],[64,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,3],[62,3]]}}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[101,111,105,116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[0,1],[28,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]}]}]}]}]}]}]},{"k":[103,100],"v":[{"k":[104],"v":[{"k":[45,108],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119,101],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[63],"v":[{"k":[113],"v":[{"k":[61],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[115,99],"v":[{"k":[117,104],"v":[{"k":[110],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[95],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[121],"v":[{"k":[95],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111,97,101,118,99,104,117,116],"v":[{"k":[99,117,114],"v":[{"k":[107],"v":[{"k":[115],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[93],"v":[{"d":{"df":2,"dc":[[0,1],[28,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]},{"k":[116],"v":[{"k":[39],"v":[{"k":[44,41,65289],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}},{"d":{"df":1,"dc":[[55,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[27809],"v":[{"k":[26377],"v":[{"k":[21517],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[108,110,116],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[32,7]]},"k":[39],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[0,1],[28,1],[35,1],[55,5],[58,3],[62,5]]}}]}]}]}]},{"d":{"df":1,"dc":[[38,1]]},"k":[107],"v":[{"k":[101],"v":[{"k":[121],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[44,93],"v":[{"d":{"df":6,"dc":[[37,5],[47,5],[85,3],[92,1],[110,3],[117,1]]}},{"d":{"df":2,"dc":[[94,3],[119,3]]}}]}]}]},{"k":[97,112,114,108],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":3,"dc":[[30,1],[35,2],[95,4]]}}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[39,46],"v":[{"d":{"df":3,"dc":[[51,4],[59,2],[75,2]]},"k":[12289,46,41,44],"v":[{"k":[39],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[12289],"v":[{"k":[39],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[12289],"v":[{"k":[39],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[35,4]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":4,"dc":[[35,1],[36,2],[51,1],[53,2]]}}]},{"k":[108,101],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[31,1],[45,1]]}}]}]},{"k":[114,97,111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44],"v":[{"d":{"df":8,"dc":[[36,4],[53,4],[55,3],[59,3],[62,3],[75,3],[94,4],[119,4]]}}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44,93,34],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}},{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[105,111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[119],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[61,2],[78,2]]}}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":6,"dc":[[37,5],[47,5],[85,3],[92,1],[110,3],[117,1]]}}]}]}]},{"k":[114,101,97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[112],"v":[{"d":{"df":2,"dc":[[92,3],[117,3]]},"k":[112],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[99,114],"v":[{"k":[107],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]},{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]}]}]}]}]},{"k":[97,39,108,111],"v":[{"k":[114],"v":[{"k":[39,109],"v":[{"d":{"df":6,"dc":[[34,3],[37,1],[47,1],[52,3],[56,7],[64,6]]},"k":[44],"v":[{"d":{"df":25,"dc":[[0,1],[7,1],[28,1],[32,1],[35,1],[36,1],[37,9],[42,1],[47,9],[49,1],[51,1],[53,1],[55,2],[56,14],[58,2],[59,2],[62,2],[64,14],[71,2],[75,2],[83,4],[84,2],[85,10],[110,10],[111,2]]}}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[96,2],[97,1],[112,1],[113,2]]},"k":[44],"v":[{"d":{"df":16,"dc":[[35,1],[51,1],[84,1],[85,3],[88,4],[89,1],[90,1],[93,2],[96,1],[110,3],[111,1],[113,1],[114,1],[116,4],[118,2],[120,1]]}}]},{"k":[117],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]},"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]},{"k":[120,116,108],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[88,1],[116,1]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]},{"k":[27611],"v":[{"k":[34923],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]}]},{"k":[32442],"v":[{"k":[34923],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]}]},{"k":[23376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]},{"k":[36319],"v":[{"k":[38795],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]}]},{"k":[23376],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]},{"k":[37327,21806],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[7,1],[42,1],[51,1],[71,3]]}}]}]},{"k":[26102,25968,37329],"v":[{"k":[38388],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[49,3]]}}]}]},{"k":[37327],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[49,3]]}}]}]},{"k":[39069],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]},{"k":[101,105,103,117,97,111],"v":[{"k":[102,99,100,103],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[30,1]]},"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[34,2],[52,2]]}}]}]},{"k":[39],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]},"k":[93,44,46],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]},{"d":{"df":3,"dc":[[38,2],[59,1],[75,1]]}},{"d":{"df":1,"dc":[[38,1]]}}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[103,99],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":3,"dc":[[59,2],[75,2],[83,1]]},"k":[44],"v":[{"d":{"df":4,"dc":[[32,1],[49,1],[59,2],[75,2]]}}]}]}]}]},{"k":[104],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[98],"v":[{"k":[97,40],"v":[{"k":[40],"v":[{"k":[48,49,50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"k":[50],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[53,50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]}]}]},{"k":[50,49],"v":[{"k":[53,48],"v":[{"k":[49,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[50],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,3],[53,3]]}}]}]}]}]}]}]},{"k":[119,117],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,5],[64,4]]},"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105,97,101,111,39],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[30,1],[35,2],[95,4]]}}]}]}]}]},{"k":[115,116,114],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"d":{"df":4,"dc":[[32,4],[49,4],[88,1],[116,1]]}}]}]}]}]},{"k":[97,101],"v":[{"k":[39,122,115],"v":[{"d":{"df":1,"dc":[[35,1]]}},{"k":[111],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[93,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,3],[62,3]]}}]},{"d":{"df":2,"dc":[[55,2],[62,1]]}}]}]}]},{"k":[107],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[99,115,39],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]},"k":[44,59],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[8203],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[119],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":4,"dc":[[96,1],[97,1],[112,1],[113,1]]},"k":[44],"v":[{"d":{"df":14,"dc":[[84,1],[85,3],[88,3],[89,1],[90,1],[93,2],[96,1],[110,3],[111,1],[113,1],[114,1],[116,3],[118,2],[120,1]]}}]}]},{"k":[110,117],"v":[{"k":[105],"v":[{"k":[111,116],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[30,1],[95,4]]}}]},{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[36,4],[53,4]]}}]}]}]}]},{"k":[117],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,3],[51,3]]}}]}]}]},{"k":[105,97,101],"v":[{"k":[100,110],"v":[{"k":[101],"v":[{"k":[111],"v":[{"d":{"df":2,"dc":[[30,1],[35,2]]}}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]}]},{"k":[108,116],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":8,"dc":[[59,1],[75,1],[85,1],[88,1],[92,1],[110,1],[116,1],[117,1]]},"k":[44],"v":[{"d":{"df":5,"dc":[[32,6],[49,6],[61,4],[78,4],[83,1]]}}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":6,"dc":[[34,2],[35,1],[51,1],[52,2],[96,1],[113,1]]}}]}]}]}]}]}]}]}]}]},{"k":[105,101,117,111,104,114,121],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,6],[62,5]]},"k":[44,96],"v":[{"d":{"df":2,"dc":[[32,3],[49,3]]}},{"d":{"df":1,"dc":[[55,2]]},"k":[58,65292,65306,12290],"v":[{"d":{"df":1,"dc":[[55,2]]}},{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"d":{"df":1,"dc":[[62,1]]},"k":[25226],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[20540],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[25104],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25139],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[109,97],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[99,39],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,6],[62,6]]}}]}]}]}]}]},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[114,101,118],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[37,5],[47,5],[85,3],[92,1],[94,3],[110,3],[117,1],[119,3]]}}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[112,102],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]},{"k":[117],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[105,117],"v":[{"k":[115],"v":[{"d":{"df":2,"dc":[[36,4],[53,4]]}}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[37,5],[47,5],[85,3],[92,1],[94,3],[110,3],[117,1],[119,3]]}}]}]}]},{"k":[105],"v":[{"k":[109],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,3],[62,3]]},"k":[96],"v":[{"k":[58,65306],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[22914],"v":[{"k":[26524],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[25226],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[20004],"v":[{"k":[31471],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[26684],"v":[{"k":[65288],"v":[{"k":[20840],"v":[{"k":[35282],"v":[{"k":[21322],"v":[{"k":[35282],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[25442],"v":[{"k":[34892],"v":[{"k":[31526],"v":[{"k":[21435],"v":[{"k":[25481],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"k":[20026],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[96,1]]},"k":[114,120,112,117,39,102,99,103,115,109,97,100],"v":[{"k":[114,105,101],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,2],[49,2]]}}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[97],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[97,1],[112,1]]}}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[83,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]},{"k":[103,115],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[55,1],[62,1],[96,2],[97,1],[112,1],[113,2]]},"k":[44,96],"v":[{"d":{"df":4,"dc":[[35,1],[51,1],[61,4],[78,4]]}},{"d":{"df":2,"dc":[[55,1],[62,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[35,2]]}}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[99,121],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[58,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44,93],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[123],"v":[{"k":[64],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[125],"v":[{"k":[98],"v":[{"k":[98],"v":[{"k":[98],"v":[{"k":[123],"v":[{"k":[64],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[99],"v":[{"k":[99],"v":[{"k":[99],"v":[{"k":[123],"v":[{"k":[64],"v":[{"k":[91],"v":[{"k":[52],"v":[{"k":[93],"v":[{"k":[125],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[106],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[125],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[118,97,98,116,115,99,104],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[32,4],[49,4]]},"k":[39],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]},{"k":[125,124],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[115,36825],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"k":[27573],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[97],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[124,103,111],"v":[{"k":[115,36825],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]},{"k":[27573],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[98],"v":[{"k":[125],"v":[{"k":[36825],"v":[{"k":[27573],"v":[{"k":[29992],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[123],"v":[{"k":[120],"v":[{"k":[124],"v":[{"k":[36825],"v":[{"k":[27573],"v":[{"k":[29992],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[120],"v":[{"k":[125],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[124],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[124],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,99,105],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98,115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[124],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[124],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[124],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[98],"v":[{"k":[103],"v":[{"k":[124],"v":[{"k":[108,114],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[124],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[125],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[114],"v":[{"k":[124],"v":[{"k":[125],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]}]},{"k":[97,117],"v":[{"k":[110,112],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[110,108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]},{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]},{"k":[101,105,114,111],"v":[{"k":[98],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]}]},{"k":[110,108],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44,59],"v":[{"d":{"df":2,"dc":[[55,11],[62,10]]}},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]},{"k":[97,105],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[37,5],[47,5],[85,3],[92,1],[94,3],[110,3],[117,1],[119,3]]}}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"k":[97,111,121,117,105,115],"v":[{"k":[114,121,105,120,116],"v":[{"k":[99,107],"v":[{"k":[104],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]},{"k":[110],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[39,46],"v":[{"d":{"df":1,"dc":[[51,1]]}},{"k":[115],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[96,59],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}}]}]}]}]},{"k":[117,110],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[111,117],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,1],[51,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[112],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[94,3],[119,3]]}}]}]}]},{"k":[95],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,3],[51,3]]}}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]}]}]}]}]},{"k":[110,108,99,100],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[107],"v":[{"d":{"df":2,"dc":[[56,6],[64,6]]}}]},{"k":[114],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[99,117,114],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]},{"k":[100,97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,2],[64,3]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]},{"k":[111,101,97,117],"v":[{"k":[118,100,116,114,110],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"d":{"df":1,"dc":[[35,1]]}},{"k":[116,119],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]},{"k":[97],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[55,1],[61,2],[62,1],[78,2]]}}]}]}]}]},{"k":[119],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]},{"k":[117,109],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]},{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[39,115],"v":[{"k":[96,59],"v":[{"d":{"df":2,"dc":[[55,2],[62,1]]},"k":[58,46,65306,65292,12290],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}},{"k":[24378],"v":[{"k":[21046],"v":[{"k":[25226],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25104],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[36716],"v":[{"k":[25104],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[36716],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20174],"v":[{"k":[32780],"v":[{"k":[21435],"v":[{"k":[25481],"v":[{"k":[23614],"v":[{"k":[32512],"v":[{"k":[36716],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[25165],"v":[{"k":[33021],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[39],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]},{"k":[101,105],"v":[{"k":[102,103,109],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[32,1],[35,1],[49,1],[51,1],[59,4],[75,3],[96,1],[113,1]]}}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[34,18]]},"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[88,3],[116,3]]},"k":[44,12289],"v":[{"d":{"df":18,"dc":[[32,1],[49,1],[55,1],[56,1],[61,2],[62,1],[64,1],[78,2],[88,2],[89,1],[90,2],[92,3],[93,4],[114,2],[116,2],[117,3],[118,4],[120,1]]}},{"k":[39],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[12289],"v":[{"k":[39],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48,26376,37,54],"v":[{"k":[49,37],"v":[{"k":[53,54,55,50,49,51,52],"v":[{"k":[39],"v":[{"k":[44,58,93],"v":[{"d":{"df":8,"dc":[[34,1],[36,1],[52,1],[53,1],[56,4],[59,1],[64,4],[75,1]]}},{"d":{"df":2,"dc":[[56,4],[64,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[39],"v":[{"k":[44,58,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,4],[64,4]]}},{"d":{"df":2,"dc":[[56,4],[64,4]]}},{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"k":[39,45],"v":[{"k":[93,44,58],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]},{"d":{"df":2,"dc":[[56,2],[64,2]]}},{"d":{"df":2,"dc":[[56,4],[64,4]]}}]},{"k":[48],"v":[{"k":[53],"v":[{"k":[45],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[96,65292],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[20250],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[34987],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[34987],"v":[{"k":[29992],"v":[{"k":[22312],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25968],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[45,39],"v":[{"k":[48],"v":[{"k":[53,54,55],"v":[{"k":[45,39],"v":[{"k":[49,50],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[41,44,93,65289],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[45,39],"v":[{"k":[48,50],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]},{"k":[50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[45],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[45],"v":[{"k":[48],"v":[{"k":[50,51,52,49],"v":[{"k":[45],"v":[{"k":[49,50],"v":[{"k":[50,52,56],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]},{"k":[52],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]},{"k":[45],"v":[{"k":[48,49],"v":[{"k":[49],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]},{"k":[57,50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]},{"k":[45],"v":[{"k":[48],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]},{"k":[45],"v":[{"k":[49],"v":[{"k":[54],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[56,1],[59,1],[64,1],[75,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[56,1],[59,1],[64,1],[75,1]]}}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[39],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[99,50,54,100,57,55,98,53,101,56,102,51,49,52,48],"v":[{"k":[99,50,97,52,100],"v":[{"k":[99],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}}]}]}]},{"k":[51],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[56],"v":[{"k":[54],"v":[{"k":[50],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[99],"v":[{"k":[100],"v":[{"k":[51],"v":[{"k":[39],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]},{"k":[100],"v":[{"k":[48],"v":[{"k":[100],"v":[{"k":[53],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[102],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]}]},{"k":[49,101,55],"v":[{"k":[97],"v":[{"k":[48],"v":[{"k":[97],"v":[{"k":[56],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[55],"v":[{"k":[48],"v":[{"k":[55],"v":[{"k":[52],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[48],"v":[{"k":[101],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[52,100],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[54],"v":[{"k":[53],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[54,100],"v":[{"k":[98],"v":[{"k":[54],"v":[{"k":[54],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]},{"k":[49,102,100,54,56,57],"v":[{"k":[99],"v":[{"k":[55,97],"v":[{"k":[97],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]},{"k":[56],"v":[{"k":[99],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[54],"v":[{"k":[98],"v":[{"k":[56],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[57],"v":[{"k":[54],"v":[{"k":[102],"v":[{"k":[53],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[98],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[52],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[53],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]},{"k":[50],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"k":[52,53,51,50,55],"v":[{"k":[57],"v":[{"k":[102],"v":[{"k":[56],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[57],"v":[{"k":[97],"v":[{"k":[97],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[97,98],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[57],"v":[{"k":[98],"v":[{"k":[99],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[56],"v":[{"k":[57],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[55],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]},{"k":[100],"v":[{"k":[97],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]}]},{"k":[52,53],"v":[{"k":[54],"v":[{"k":[53],"v":[{"k":[55],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[65,2],[81,2]]}}]}]}]}]}]}]},{"k":[53],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]},{"k":[54,97,101,48,55,100],"v":[{"k":[57],"v":[{"k":[100,48],"v":[{"k":[56],"v":[{"k":[55],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[100],"v":[{"k":[49],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[55],"v":[{"k":[101],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[100,101],"v":[{"k":[100],"v":[{"k":[55],"v":[{"k":[56],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[39],"v":[{"d":{"df":2,"dc":[[59,4],[75,4]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]},{"k":[54],"v":[{"k":[50],"v":[{"k":[97],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[98],"v":[{"k":[99],"v":[{"k":[102],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[98],"v":[{"k":[52],"v":[{"k":[102],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]},{"k":[100,51,56],"v":[{"k":[99],"v":[{"k":[49],"v":[{"k":[97],"v":[{"k":[57],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[55],"v":[{"k":[56],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[56],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]},{"k":[52,102,98,55,49],"v":[{"k":[57],"v":[{"k":[102],"v":[{"k":[52],"v":[{"k":[50],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[100,57,102,48],"v":[{"k":[98],"v":[{"k":[53],"v":[{"k":[99],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[102],"v":[{"k":[55],"v":[{"k":[102],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[39],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]},"k":[44],"v":[{"d":{"df":3,"dc":[[59,2],[75,2],[83,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[90,1],[114,1]]}}]}]}]},{"k":[55],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[102,57],"v":[{"k":[56],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[50],"v":[{"k":[51],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]},{"k":[52],"v":[{"k":[55],"v":[{"k":[52],"v":[{"k":[55],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]},{"k":[55,50,51],"v":[{"k":[97],"v":[{"k":[50],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[53],"v":[{"k":[101],"v":[{"k":[57],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[51,57,54],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]},{"k":[57],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[54],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"k":[50],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]}]}]}]}]},{"k":[52],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[51,49],"v":[{"k":[51],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]},{"k":[49],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,9],[75,9]]}}]}]}]}]}]},{"k":[111,101,97],"v":[{"k":[111],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]},{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[37,5],[47,5],[85,3],[92,1],[94,3],[110,3],[117,1],[119,3]]}}]}]}]},{"k":[108],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[56,6],[64,6]]}}]}]}]}]}]},{"k":[114,101],"v":[{"k":[97,111,101],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[35,1]]},"k":[41,44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[112],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]}]},{"k":[97,120,58,39],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39,120],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"k":[47],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[112],"v":[{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}},{"d":{"df":6,"dc":[[84,2],[85,4],[93,2],[110,4],[111,2],[118,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[93,2],[118,2]]}}]}]},{"k":[121,101],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]},{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[93,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":2,"dc":[[55,7],[62,7]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[116,99,110],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]},{"k":[100,115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[39,116,108,114,98],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[111],"v":[{"k":[112],"v":[{"k":[39,108,114],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39,108,114],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[53,26376,48],"v":[{"k":[37],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[37],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[95,1],[115,1]]},"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,3],[62,3]]}}]}]}]}]}]},{"k":[48,26376],"v":[{"k":[37],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[57,26376,48,49,50,37,53],"v":[{"k":[57],"v":[{"k":[48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[26376,48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[37],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[44,65292],"v":[{"d":{"df":2,"dc":[[59,5],[75,5]]}},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[38271],"v":[{"k":[24230],"v":[{"k":[20805],"v":[{"k":[28385],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[22359],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[26376],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[37],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[31449],"v":[{"k":[28857],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[38382],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[46,1],[51,1]]}}]}]}]}]}]},{"k":[25509],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[39],"v":[{"d":{"df":3,"dc":[[46,1],[51,1],[115,4]]}}]}]}]}]},{"k":[20214],"v":[{"k":[33829],"v":[{"k":[38144],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[46,1],[51,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[30431],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[39],"v":[{"d":{"df":3,"dc":[[46,1],[51,1],[115,4]]},"k":[44],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[39057],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[46,1],[51,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[32034],"v":[{"k":[24341],"v":[{"k":[25806],"v":[{"k":[39],"v":[{"d":{"df":3,"dc":[[46,1],[51,1],[115,4]]},"k":[93],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[26376,37,48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,3]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]},{"k":[26376,48],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"k":[37],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]}]},{"k":[26376,48],"v":[{"k":[39,27700],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]},{"k":[26524],"v":[{"k":[38144],"v":[{"k":[37327],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]},{"k":[37],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]},{"k":[26376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[26376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[27700],"v":[{"k":[37327],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,2]]}}]}]}]}]},{"k":[24230],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,2]]}}]}]}]},{"k":[20013],"v":[{"k":[20102],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[28040],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[20102],"v":[{"k":[39],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[20363,29926],"v":[{"k":[39,20108,19977,110,19968],"v":[{"d":{"df":1,"dc":[[51,1]]}},{"k":[39],"v":[{"d":{"df":1,"dc":[[52,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[52,5]]}}]}]},{"k":[39],"v":[{"d":{"df":1,"dc":[[52,2]]},"k":[93,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[52,3]]}}]},{"d":{"df":1,"dc":[[52,1]]}}]}]},{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]},{"k":[39],"v":[{"d":{"df":1,"dc":[[52,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]},{"k":[21346],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]},{"k":[22270],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[39532],"v":[{"k":[21147],"v":[{"k":[35834],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[33922],"v":[{"k":[20872],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]},{"k":[40065],"v":[{"k":[39],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[58,63],"v":[{"d":{"df":2,"dc":[[55,6],[62,6]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[61,39],"v":[{"k":[39],"v":[{"k":[58,63],"v":[{"d":{"df":2,"dc":[[55,5],[62,5]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[39,61,62,98],"v":[{"k":[58,63],"v":[{"d":{"df":2,"dc":[[55,7],[62,7]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"k":[39],"v":[{"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[39],"v":[{"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[114],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]},"k":[62],"v":[{"k":[121],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[61,1],[78,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[47],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[95],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[56],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[61],"v":[{"k":[39],"v":[{"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]},{"d":{"df":4,"dc":[[55,10],[59,3],[62,10],[75,3]]}},{"k":[41,12290],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[36716],"v":[{"k":[25442],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[31354],"v":[{"k":[26684],"v":[{"k":[65288],"v":[{"k":[20840],"v":[{"k":[35282],"v":[{"k":[21322],"v":[{"k":[35282],"v":[{"k":[31354],"v":[{"k":[26684],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[25442],"v":[{"k":[34892],"v":[{"k":[31526],"v":[{"k":[37117],"v":[{"k":[33021],"v":[{"k":[34987],"v":[{"k":[28040],"v":[{"k":[38500],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27493],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[71,2]]}}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]},{"k":[34121],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,2]]}}]}]}]},{"k":[23376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,2]]}}]}]}]},{"k":[33683],"v":[{"k":[39],"v":[{"k":[93,44],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]},{"d":{"df":1,"dc":[[83,1]]}}]}]}]},{"k":[20108,19977,22235],"v":[{"k":[21608],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]},{"k":[21608],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]},{"k":[21608],"v":[{"k":[39],"v":[{"k":[93],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[29492],"v":[{"k":[26691],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]},{"k":[29615],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":57,"dc":[[0,1],[7,1],[28,7],[30,2],[31,1],[32,22],[33,2],[34,8],[35,21],[36,19],[37,9],[38,5],[42,7],[45,1],[46,2],[47,9],[48,2],[49,22],[51,21],[52,8],[53,19],[54,5],[55,49],[56,32],[58,4],[59,45],[61,17],[62,49],[64,32],[65,4],[71,4],[75,45],[78,17],[81,4],[83,5],[84,1],[85,7],[88,9],[89,1],[90,2],[92,1],[93,2],[94,5],[95,7],[96,6],[97,2],[110,7],[111,1],[112,2],[113,6],[114,2],[115,8],[116,9],[117,1],[118,2],[119,5],[120,1]]},"k":[44,59,41,93,96],"v":[{"d":{"df":51,"dc":[[0,3],[7,3],[28,2],[30,6],[32,14],[34,10],[35,18],[36,22],[37,5],[38,4],[42,2],[46,6],[47,5],[49,13],[51,19],[52,10],[53,22],[54,4],[55,27],[56,41],[58,6],[59,21],[61,7],[62,27],[64,41],[71,6],[75,21],[78,7],[83,7],[84,2],[85,11],[88,5],[89,1],[90,2],[92,4],[93,4],[94,3],[95,8],[96,11],[97,4],[110,11],[111,2],[112,4],[113,11],[114,2],[115,9],[116,5],[117,4],[118,4],[119,3],[120,1]]}},{"d":{"df":53,"dc":[[0,1],[7,1],[28,1],[30,1],[32,8],[33,1],[34,6],[35,4],[36,4],[37,13],[38,2],[42,1],[46,1],[47,13],[48,1],[49,8],[51,4],[52,6],[53,4],[54,2],[55,15],[56,14],[59,6],[61,5],[62,15],[64,14],[65,1],[75,10],[78,5],[81,1],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[95,4],[96,2],[97,1],[110,6],[111,1],[112,1],[113,2],[114,1],[115,4],[116,5],[117,1],[118,2],[119,4],[120,1]]}},{"d":{"df":2,"dc":[[61,5],[78,5]]},"k":[59,96],"v":[{"d":{"df":18,"dc":[[28,2],[31,2],[33,2],[35,22],[36,1],[42,2],[45,2],[48,2],[51,22],[53,1],[58,6],[61,16],[63,1],[65,1],[71,6],[77,1],[78,16],[81,1]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"d":{"df":11,"dc":[[34,1],[35,1],[37,1],[47,1],[51,1],[52,1],[55,3],[56,2],[62,3],[64,2],[95,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]},{"d":{"df":2,"dc":[[55,2],[62,1]]},"k":[46,44,12290],"v":[{"d":{"df":1,"dc":[[55,3]]}},{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[62,2]]},"k":[19981,36825],"v":[{"k":[36807],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[8220],"v":[{"k":[19982],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[65292],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"k":[20215],"v":[{"k":[26684],"v":[{"k":[22823],"v":[{"k":[20110],"v":[{"k":[31561],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,97,105,111,116,110,8230],"v":[{"k":[103,118,115,102,110,97,116,105],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100,116],"v":[{"d":{"df":5,"dc":[[34,10],[35,4],[56,1],[104,1],[107,1]]},"k":[58,115,46],"v":[{"d":{"df":16,"dc":[[0,1],[7,1],[32,1],[34,7],[35,1],[49,1],[51,1],[52,6],[56,3],[58,2],[64,3],[71,2],[83,1],[92,1],[96,1],[113,1]]}},{"d":{"df":2,"dc":[[34,2],[58,1]]},"k":[44,46,101],"v":[{"d":{"df":1,"dc":[[34,1]]}},{"d":{"df":2,"dc":[[34,1],[35,1]]}},{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[35,1]]}}]},{"d":{"df":1,"dc":[[34,1]]}}]}]}]},{"k":[101],"v":[{"k":[108,114],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[46,115],"v":[{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":1,"dc":[[63,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]},{"k":[97],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"d":{"df":5,"dc":[[31,1],[55,3],[62,2],[63,1],[101,1]]}}]},{"k":[116],"v":[{"d":{"df":8,"dc":[[32,3],[37,2],[56,1],[59,3],[65,6],[69,1],[101,1],[105,1]]},"k":[58,46],"v":[{"d":{"df":7,"dc":[[35,1],[36,1],[51,2],[53,1],[83,1],[96,1],[113,1]]}},{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[103],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":5,"dc":[[32,1],[85,1],[99,1],[101,1],[106,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[32,2],[49,2]]}}]}]}]}]},{"k":[107,118,100,115],"v":[{"k":[115],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[33,1]]}}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[59,1]]}}]},{"d":{"df":2,"dc":[[101,1],[107,1]]},"k":[115],"v":[{"d":{"df":1,"dc":[[68,1]]}}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[101,1]]}}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]},"k":[39],"v":[{"k":[115],"v":[{"d":{"df":6,"dc":[[55,1],[61,1],[63,1],[85,1],[94,1],[95,1]]}}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]},{"k":[114,98,116,121,115,110,119],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":6,"dc":[[23,1],[31,1],[32,1],[56,2],[63,5],[107,1]]},"k":[45,44,114,115],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[31,1],[85,1]]}},{"d":{"df":3,"dc":[[31,1],[102,1],[103,1]]}},{"k":[116],"v":[{"d":{"df":1,"dc":[[106,3]]}}]}]}]}]},{"k":[101,111],"v":[{"k":[108],"v":[{"d":{"df":7,"dc":[[32,3],[59,5],[63,5],[88,2],[95,1],[96,2],[101,1]]},"k":[115,44,58,46,63,111,105,108],"v":[{"d":{"df":3,"dc":[[59,1],[63,9],[101,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[36,2]]}},{"d":{"df":2,"dc":[[98,1],[101,1]]}}]},{"d":{"df":3,"dc":[[36,2],[53,1],[59,1]]}},{"d":{"df":12,"dc":[[36,5],[53,5],[56,1],[59,8],[64,1],[75,8],[88,1],[95,1],[96,2],[113,2],[115,1],[116,1]]}},{"d":{"df":1,"dc":[[56,1]]},"k":[39],"v":[{"d":{"df":2,"dc":[[36,4],[53,4]]}}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[59,2],[75,6]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,2],[75,2]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[96,1],[113,1]]}}]}]}]}]}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[101,116,58,105],"v":[{"k":[114,115],"v":[{"k":[44,46],"v":[{"d":{"df":1,"dc":[[33,1]]}},{"d":{"df":1,"dc":[[61,1]]}}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[101],"v":[{"k":[39,114],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,7],[64,7]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":2,"dc":[[35,1],[55,1]]}}]}]},{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"k":[116],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]},{"k":[111,101],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":3,"dc":[[34,2],[59,3],[63,1]]},"k":[115,46],"v":[{"d":{"df":2,"dc":[[34,1],[37,1]]}},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[34,1]]},"k":[115],"v":[{"d":{"df":3,"dc":[[63,1],[68,1],[100,1]]}}]}]}]},{"k":[116],"v":[{"d":{"df":4,"dc":[[55,1],[63,2],[85,1],[94,1]]}}]},{"k":[103],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]},"k":[117,41],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,6]]},"k":[115,44],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[59],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[8203],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[103,1]]}}]},{"k":[107,110,115,98,116,103,118,109],"v":[{"k":[101],"v":[{"d":{"df":17,"dc":[[28,2],[33,1],[35,1],[36,2],[38,2],[55,11],[56,5],[59,2],[61,1],[63,2],[65,1],[69,1],[84,1],[100,1],[101,1],[104,1],[106,1]]},"k":[108,58,115],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[23,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]},{"d":{"df":2,"dc":[[36,1],[55,4]]}},{"d":{"df":1,"dc":[[69,1]]}}]}]},{"k":[107,101],"v":[{"d":{"df":2,"dc":[[37,1],[68,1]]},"k":[115,61,97,105],"v":[{"d":{"df":1,"dc":[[26,1]]}},{"k":[34],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[37,2],[47,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"d":{"df":21,"dc":[[31,1],[32,1],[38,1],[55,2],[56,1],[59,1],[61,4],[63,3],[65,1],[66,1],[69,2],[88,13],[89,3],[90,3],[92,8],[93,5],[95,1],[100,11],[102,1],[104,10],[107,3]]},"k":[99,115,44,97,104,46,45,119],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[28,1],[42,1]]}}]}]}]}]}]},{"d":{"df":7,"dc":[[37,1],[63,1],[88,1],[92,1],[102,1],[104,3],[107,1]]},"k":[101,116,46],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[28,2],[42,2]]}}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[58,44],"v":[{"d":{"df":4,"dc":[[32,4],[49,4],[88,1],[116,1]]}},{"d":{"df":2,"dc":[[36,2],[53,1]]}}]}]}]}]},{"d":{"df":3,"dc":[[59,1],[66,1],[104,1]]}}]},{"d":{"df":3,"dc":[[32,1],[59,1],[69,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[38,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]}]},{"d":{"df":3,"dc":[[59,7],[69,1],[104,1]]}},{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":4,"dc":[[29,1],[38,1],[57,1],[63,1]]},"k":[101,44],"v":[{"k":[110,100],"v":[{"d":{"df":3,"dc":[[33,2],[35,3],[63,1]]},"k":[105,101],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,5]]}}]}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[35,2]]},"k":[115],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"d":{"df":2,"dc":[[35,2],[65,1]]}}]},{"d":{"df":1,"dc":[[38,1]]}}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105,121],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"d":{"df":2,"dc":[[31,1],[55,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":4,"dc":[[34,1],[59,3],[68,1],[107,1]]}}]}]}]},{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":4,"dc":[[34,1],[63,1],[68,1],[69,1]]}}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[37,1]]},"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"d":{"df":2,"dc":[[66,1],[85,1]]},"k":[101,44],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[85,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]},{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]},{"k":[111,99,119,110,97,103,116],"v":[{"k":[107,115],"v":[{"d":{"df":2,"dc":[[63,2],[69,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[97],"v":[{"k":[116,108],"v":[{"k":[101,105],"v":[{"d":{"df":3,"dc":[[23,1],[56,1],[94,1]]},"k":[100],"v":[{"d":{"df":3,"dc":[[32,1],[33,1],[61,1]]}}]},{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[59,1],[103,1]]},"k":[34],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[63,1],[77,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,2]]},"k":[45,101],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]},{"k":[114],"v":[{"d":{"df":2,"dc":[[56,1],[66,1]]},"k":[99,46],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,1],[37,1]]}}]}]}]},{"d":{"df":1,"dc":[[107,1]]}}]}]}]},{"k":[103],"v":[{"d":{"df":5,"dc":[[58,1],[63,1],[65,1],[88,1],[98,1]]},"k":[101,44,105],"v":[{"k":[114,115],"v":[{"d":{"df":4,"dc":[[33,1],[56,1],[63,2],[65,8]]}},{"k":[116],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"d":{"df":1,"dc":[[101,1]]}},{"k":[116],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[103,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":3,"dc":[[36,1],[58,1],[63,1]]},"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":2,"dc":[[58,10],[71,2]]}}]}]}]}]},{"k":[105,97],"v":[{"k":[99],"v":[{"d":{"df":3,"dc":[[63,1],[68,1],[101,1]]},"k":[97],"v":[{"k":[108],"v":[{"d":{"df":3,"dc":[[55,3],[68,1],[101,1]]},"k":[101],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[59],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[63,2],[65,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[58,63,101],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}},{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[63],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]}]},{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[34],"v":[{"k":[62],"v":[{"k":[60],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[62],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[119,1]]},"k":[59],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":8,"dc":[[32,1],[38,2],[49,6],[54,1],[64,8],[110,1],[119,1],[127,2]]},"k":[97,58,47,45,39,104,109,120,12289,61],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[58,105],"v":[{"d":{"df":41,"dc":[[0,1],[7,1],[28,1],[32,8],[34,1],[35,1],[36,1],[37,5],[42,1],[47,5],[49,8],[51,1],[52,1],[53,1],[55,2],[56,7],[58,3],[59,4],[61,2],[62,2],[64,7],[71,3],[75,4],[78,2],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,4],[110,6],[111,1],[114,1],[116,5],[117,1],[118,2],[119,4],[120,1]]}},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[56,4],[64,4]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":11,"dc":[[30,1],[36,3],[46,1],[53,3],[56,4],[59,1],[64,4],[75,1],[83,1],[96,1],[113,1]]}},{"k":[121],"v":[{"d":{"df":1,"dc":[[49,3]]},"k":[45],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]}]}]},{"k":[97],"v":[{"k":[120],"v":[{"k":[105,101],"v":[{"k":[115],"v":[{"d":{"df":6,"dc":[[32,6],[56,4],[85,1],[88,2],[94,3],[103,1]]},"k":[44,46,58],"v":[{"d":{"df":2,"dc":[[32,1],[56,2]]}},{"d":{"df":2,"dc":[[56,1],[85,1]]}},{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]}]}]},{"k":[93],"v":[{"d":{"df":1,"dc":[[34,1]]}}]},{"k":[114],"v":[{"d":{"df":1,"dc":[[36,1]]}}]},{"k":[108],"v":[{"k":[104,110,58],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[113],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[40],"v":[{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[61,58],"v":[{"k":[34],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[48],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[118],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[107],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[49],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[47],"v":[{"k":[120],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[107],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[61],"v":[{"k":[34],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[62],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]},"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[59,9],[75,9]]},"k":[120],"v":[{"d":{"df":2,"dc":[[59,3],[75,3]]}}]}]}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":2,"dc":[[64,1],[130,4]]}}]},{"k":[34],"v":[{"k":[48],"v":[{"k":[112],"v":[{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]},{"d":{"df":11,"dc":[[55,2],[56,3],[59,2],[61,2],[62,2],[64,6],[75,2],[78,2],[94,1],[96,1],[98,1]]},"k":[48,51,100,53,55,50,52,56,57,49,96,44,54,34,110,93,65289,46,12289,47],"v":[{"d":{"df":6,"dc":[[35,1],[51,1],[55,4],[62,4],[88,1],[116,1]]},"k":[44,93,49,55,59,37,48],"v":[{"d":{"df":18,"dc":[[0,1],[7,1],[28,1],[34,2],[35,1],[42,1],[51,1],[52,2],[55,4],[58,1],[59,2],[62,4],[71,1],[75,2],[85,1],[94,1],[110,1],[119,1]]}},{"d":{"df":8,"dc":[[0,1],[7,1],[28,1],[35,1],[42,1],[51,1],[58,1],[71,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[57,53,49,50,44,51,52,55],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[36,18],[53,18]]}}]}]},{"d":{"df":2,"dc":[[55,6],[62,8]]},"k":[93,50,12289],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,10],[62,10]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[50],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[12289],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[51],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,2]]},"k":[93,46],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,10],[62,10]]}}]},{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":4,"dc":[[55,2],[62,2],[92,1],[117,1]]}},{"d":{"df":2,"dc":[[55,1],[62,1]]},"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,10],[62,10]]}}]}]},{"d":{"df":1,"dc":[[124,2]]},"k":[93,53,46],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]},"k":[44],"v":[{"d":{"df":2,"dc":[[55,8],[62,8]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"d":{"df":1,"dc":[[101,2]]}}]},{"d":{"df":2,"dc":[[101,2],[124,2]]}}]},{"k":[41],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}},{"d":{"df":1,"dc":[[85,3]]},"k":[12290],"v":[{"k":[30001],"v":[{"k":[20110],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[44,93],"v":[{"d":{"df":6,"dc":[[85,1],[88,1],[97,1],[110,1],[112,1],[116,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]},{"k":[52,57,56,50,44,49,53,48],"v":[{"k":[44],"v":[{"d":{"df":14,"dc":[[30,1],[35,1],[46,1],[51,1],[59,1],[75,1],[92,1],[94,3],[95,2],[96,2],[113,2],[115,2],[117,1],[119,3]]},"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]},{"k":[54],"v":[{"k":[56],"v":[{"k":[57],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[41],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,2],[54,2]]}}]}]},{"d":{"df":10,"dc":[[38,1],[54,1],[85,1],[88,3],[89,1],[90,2],[110,1],[114,2],[116,3],[120,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":4,"dc":[[55,2],[56,2],[62,2],[64,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"d":{"df":4,"dc":[[32,1],[56,2],[73,2],[104,1]]},"k":[65292,65288],"v":[{"k":[24403],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[22522],"v":[{"k":[30784],"v":[{"k":[24211],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]},{"k":[48,44,52,50,49,93,53,51,37],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"d":{"df":8,"dc":[[32,1],[37,9],[47,9],[49,1],[55,4],[62,4],[85,3],[110,3]]}},{"k":[56],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[56],"v":[{"k":[52],"v":[{"k":[55],"v":[{"k":[56],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[53],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[37,9],[47,9],[85,2],[110,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":1,"dc":[[101,1]]},"k":[45,12290],"v":[{"k":[55],"v":[{"k":[53],"v":[{"k":[37],"v":[{"d":{"df":2,"dc":[[69,1],[83,1]]}}]}]}]},{"d":{"df":1,"dc":[[124,1]]}}]}]},{"k":[54,44,49,93],"v":[{"k":[54],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":6,"dc":[[37,9],[47,9],[55,2],[62,2],[85,2],[110,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":2,"dc":[[85,1],[110,1]]}}]},{"k":[55,51,44,48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":14,"dc":[[65,2],[81,2],[84,1],[85,3],[88,3],[89,1],[90,1],[93,2],[110,3],[111,1],[114,1],[116,3],[118,2],[120,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[85,2],[110,2]]}}]}]},{"k":[44,49,46],"v":[{"d":{"df":6,"dc":[[37,9],[47,9],[55,2],[62,2],[85,4],[110,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44,49,55,52,50],"v":[{"d":{"df":16,"dc":[[37,9],[47,9],[55,4],[62,4],[84,1],[85,4],[88,2],[89,1],[90,1],[93,2],[110,4],[111,1],[114,1],[116,2],[118,2],[120,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":4,"dc":[[55,2],[56,1],[62,2],[64,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[44,48],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}},{"k":[93,44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}},{"d":{"df":4,"dc":[[92,1],[94,3],[117,1],[119,3]]}}]}]},{"k":[44,49,57,48],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":6,"dc":[[55,1],[56,5],[59,3],[62,1],[64,5],[75,3]]}},{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[100],"v":[{"d":{"df":1,"dc":[[56,4]]}}]},{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"d":{"df":14,"dc":[[66,1],[67,1],[68,1],[73,1],[98,1],[99,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[106,1],[107,1]]},"k":[57],"v":[{"k":[46],"v":[{"k":[48],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]},{"k":[20202,21487,21464,24314,22534,38754,26609,34429,25105,27704,22914],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[19978],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[32428],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[24120],"v":[{"k":[35782],"v":[{"k":[65292],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[30340],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[26368],"v":[{"k":[22810],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[36229],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[79,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[23545],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[32479],"v":[{"k":[19968],"v":[{"k":[20107],"v":[{"k":[24773],"v":[{"k":[21069],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21472],"v":[{"k":[21152],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[39044],"v":[{"k":[26399],"v":[{"k":[20540],"v":[{"k":[21644],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[21644],"v":[{"k":[39044],"v":[{"k":[26399],"v":[{"k":[25351],"v":[{"k":[26631],"v":[{"k":[30340],"v":[{"k":[20559],"v":[{"k":[24046],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[37327],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[20250],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21464],"v":[{"k":[24471],"v":[{"k":[28151],"v":[{"k":[20081],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[35201],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[24182],"v":[{"k":[38480],"v":[{"k":[21046],"v":[{"k":[20854],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35758],"v":[{"k":[27599,19981],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[38388],"v":[{"k":[36317],"v":[{"k":[22823],"v":[{"k":[20110],"v":[{"k":[32452],"v":[{"k":[20869],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[38388],"v":[{"k":[36317],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[20813],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[19978],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[30340],"v":[{"k":[24402],"v":[{"k":[31867],"v":[{"k":[21644],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]},{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[19981],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[20869],"v":[{"k":[21516],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31215],"v":[{"k":[22270],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20108],"v":[{"k":[21040],"v":[{"k":[19977],"v":[{"k":[32452],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[26368],"v":[{"k":[22810],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[36229],"v":[{"k":[36807],"v":[{"k":[22235],"v":[{"k":[32452],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[21542],"v":[{"k":[21017],"v":[{"k":[23601],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[26041],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[32780],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[36776],"v":[{"k":[35782],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[35201],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[22312],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[21644],"v":[{"k":[30830],"v":[{"k":[20999],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[36229],"v":[{"k":[36807],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[38750],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26159],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"k":[26609],"v":[{"k":[23376],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[38388],"v":[{"k":[38553],"v":[{"k":[35201],"v":[{"k":[36866],"v":[{"k":[24403],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[26609],"v":[{"k":[23376],"v":[{"k":[22826],"v":[{"k":[31364],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[38598],"v":[{"k":[20013],"v":[{"k":[22312],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[36127],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[25215],"v":[{"k":[36733],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[21512],"v":[{"k":[29702],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[38388],"v":[{"k":[38553],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28982],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[26102],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[27604],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[26377],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[20381],"v":[{"k":[28982],"v":[{"k":[19981],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[26368],"v":[{"k":[22909],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[22810],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[36824,24456],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[32473],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[21152],"v":[{"k":[20837],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[32534],"v":[{"k":[30721],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[23558],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[22320],"v":[{"k":[21306],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[27668],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[26631],"v":[{"k":[27880],"v":[{"k":[65292],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[21271],"v":[{"k":[20140],"v":[{"k":[65292],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[19978],"v":[{"k":[28023],"v":[{"k":[12289],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[24191],"v":[{"k":[24030],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[22320],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[19977],"v":[{"k":[22320],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[27668],"v":[{"k":[36136],"v":[{"k":[37327],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38590],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[23613],"v":[{"k":[37327],"v":[{"k":[23558],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[25511],"v":[{"k":[21046],"v":[{"k":[22312],"v":[{"k":[20116],"v":[{"k":[20010],"v":[{"k":[20197],"v":[{"k":[20869],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25226],"v":[{"k":[36739],"v":[{"k":[23567],"v":[{"k":[25110],"v":[{"k":[19981],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21512],"v":[{"k":[24182],"v":[{"k":[25104],"v":[{"k":[31532],"v":[{"k":[20116],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[21629],"v":[{"k":[21517],"v":[{"k":[20026],"v":[{"k":[34],"v":[{"k":[20854],"v":[{"k":[23427],"v":[{"k":[34],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[21508],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[37117],"v":[{"k":[24517],"v":[{"k":[39035],"v":[{"k":[20840],"v":[{"k":[37096],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[35768],"v":[{"k":[26356],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36828],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]},{"k":[26524],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[32473],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[30007],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[22899],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[26631],"v":[{"k":[27880],"v":[{"k":[20986],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[30007],"v":[{"k":[22899],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[24615],"v":[{"k":[21035],"v":[{"k":[36523],"v":[{"k":[39640],"v":[{"k":[21644],"v":[{"k":[20307],"v":[{"k":[37325],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[29366],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[36741],"v":[{"k":[21161],"v":[{"k":[32447],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[22899],"v":[{"k":[29983],"v":[{"k":[20307],"v":[{"k":[37325],"v":[{"k":[39640],"v":[{"k":[20110],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[20302],"v":[{"k":[20110],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23569],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[51],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]},{"d":{"df":9,"dc":[[55,1],[56,4],[62,1],[64,5],[67,1],[79,1],[98,1],[100,1],[127,1]]},"k":[54,51,49,48,50,57,56,53,52,44,96,55,34,93,114,46,8221,12289,100],"v":[{"k":[44,46,54],"v":[{"d":{"df":12,"dc":[[0,1],[7,1],[28,1],[35,1],[36,1],[42,1],[51,1],[53,1],[55,4],[58,1],[62,4],[71,1]]}},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]},"k":[53,93,57,55,50,52,44,48],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[30,1],[35,1],[46,1],[51,1],[95,2],[96,2],[113,2],[115,2]]},"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]},{"k":[55],"v":[{"k":[53],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[49],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"d":{"df":2,"dc":[[65,2],[81,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[94,3],[119,3]]}}]}]},{"k":[48,44,49,52,56],"v":[{"k":[44,93],"v":[{"d":{"df":6,"dc":[[30,1],[35,1],[46,1],[51,1],[96,1],[113,1]]},"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]},{"d":{"df":2,"dc":[[94,1],[119,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[94,2],[119,2]]}}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":7,"dc":[[32,1],[36,1],[53,1],[55,2],[59,1],[62,4],[75,1]]},"k":[48,44,41,46,49,93,109],"v":[{"k":[112,44],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[33,1]]},"k":[12289],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[20026],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[97,1],[112,1]]}}]},{"d":{"df":5,"dc":[[38,1],[55,2],[59,7],[62,2],[75,7]]}},{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[55,1]]},"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]},"k":[65289],"v":[{"k":[65292],"v":[{"k":[29978],"v":[{"k":[33267],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[21315],"v":[{"k":[19975],"v":[{"k":[32423],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[44,57,49,50,51],"v":[{"d":{"df":4,"dc":[[32,1],[49,1],[55,2],[62,2]]}},{"k":[52],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[55],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[54],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[46,53,44,48],"v":[{"k":[49],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,1],[64,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[93],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]}]},{"k":[49,54],"v":[{"k":[57],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[49],"v":[{"k":[49],"v":[{"k":[55],"v":[{"k":[57],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[57,44,49],"v":[{"k":[51,44],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"d":{"df":4,"dc":[[55,2],[62,2],[90,1],[114,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"k":[51,49,44,53],"v":[{"k":[52],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]},{"d":{"df":14,"dc":[[38,1],[54,1],[55,4],[56,2],[59,10],[62,4],[64,2],[75,10],[84,1],[85,2],[93,2],[110,2],[111,1],[118,2]]}},{"d":{"df":1,"dc":[[55,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[56,7]]}}]},{"d":{"df":13,"dc":[[56,1],[66,1],[68,1],[73,1],[98,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[106,1],[107,1]]}},{"d":{"df":1,"dc":[[64,1]]}},{"k":[36824,30001,22534,24403,121,19981,27668,21452,39292,25955],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[24038],"v":[{"k":[21491],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[30340],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[36716],"v":[{"k":[21270],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[21487],"v":[{"k":[35265],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110],"v":[{"k":[24452],"v":[{"k":[21521],"v":[{"k":[36317],"v":[{"k":[31163],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[26377],"v":[{"k":[32593],"v":[{"k":[26684],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[21442],"v":[{"k":[32771],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20869],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[20540],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21472,31215],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[26368],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[26159],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[32452],"v":[{"k":[21482],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20004],"v":[{"k":[21040],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[26368],"v":[{"k":[22810],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[36229],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[35201],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21644],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[36127],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[30456],"v":[{"k":[36317],"v":[{"k":[24456],"v":[{"k":[36828],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[26159],"v":[{"k":[27169],"v":[{"k":[31946],"v":[{"k":[19981],"v":[{"k":[28165],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[124,1]]}},{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[35013],"v":[{"k":[39280],"v":[{"k":[26469],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[31181],"v":[{"k":[31867],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[20250],"v":[{"k":[35753],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20998],"v":[{"k":[24515],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27873],"v":[{"k":[22270],"v":[{"k":[36824],"v":[{"k":[32463],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[21644],"v":[{"k":[22320],"v":[{"k":[22270],"v":[{"k":[32467],"v":[{"k":[21512],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[22810],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[21547],"v":[{"k":[30456],"v":[{"k":[21453],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[35201],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[19981],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[27491],"v":[{"k":[36127],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32780],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[35823],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[19981],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[34987],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[31934],"v":[{"k":[30830],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[24403],"v":[{"k":[21508],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[25509],"v":[{"k":[36817],"v":[{"k":[26102],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[24038],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[20986],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[36873],"v":[{"k":[29992],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[21335],"v":[{"k":[19969],"v":[{"k":[26684],"v":[{"k":[23572],"v":[{"k":[29611],"v":[{"k":[29808],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[21491],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[26469],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[22270],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[26377],"v":[{"k":[36275],"v":[{"k":[22815],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[26377],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[26102],"v":[{"k":[25165],"v":[{"k":[33021],"v":[{"k":[21576],"v":[{"k":[29616],"v":[{"k":[24456],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19968],"v":[{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[26497],"v":[{"k":[23569],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38388],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24456],"v":[{"k":[31354],"v":[{"k":[30340],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[21644],"v":[{"k":[19981],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[101,1],[106,2],[129,1]]}}]},{"d":{"df":8,"dc":[[35,2],[51,2],[55,9],[56,7],[59,3],[62,9],[64,9],[75,3]]},"k":[48,51,53,50,49,57,44,52,54,56,41,55,107,96,34,115,93,46,8221,12289],"v":[{"d":{"df":6,"dc":[[35,1],[51,1],[59,1],[75,1],[101,1],[124,1]]},"k":[44,48,46,53,50,49,52,93,59],"v":[{"d":{"df":16,"dc":[[0,2],[7,2],[28,2],[34,2],[35,3],[36,5],[42,2],[51,3],[52,2],[53,5],[55,2],[58,2],[59,8],[62,2],[71,2],[75,8]]}},{"d":{"df":4,"dc":[[55,2],[61,1],[62,2],[78,1]]},"k":[46,37,48,44,93,65285],"v":[{"d":{"df":1,"dc":[[38,2]]},"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"d":{"df":2,"dc":[[33,2],[48,1]]},"k":[59,12290,46,65292],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}},{"d":{"df":2,"dc":[[48,1],[129,2]]}},{"d":{"df":2,"dc":[[68,1],[106,2]]}},{"k":[32780],"v":[{"k":[19981],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[41],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]},{"d":{"df":6,"dc":[[36,1],[53,1],[61,1],[78,1],[97,1],[112,1]]}},{"d":{"df":3,"dc":[[38,2],[54,2],[83,2]]}},{"k":[12290],"v":[{"k":[19982],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[21576],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[20063],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26159],"v":[{"k":[35813],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[24635],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[12289],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36724],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[50,51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[32,2],[49,2]]}}]}]},{"k":[56],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[56,44],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]},{"k":[44],"v":[{"d":{"df":14,"dc":[[59,3],[61,2],[75,3],[78,2],[84,1],[85,2],[90,1],[93,2],[94,1],[110,2],[111,1],[114,1],[118,2],[119,1]]}}]},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"k":[53,46,55,49,48,50,52],"v":[{"k":[44],"v":[{"d":{"df":8,"dc":[[30,1],[35,1],[46,1],[51,1],[55,1],[62,1],[96,1],[113,1]]},"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]},{"k":[50,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[54],"v":[{"k":[48],"v":[{"k":[52],"v":[{"k":[56],"v":[{"k":[57],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]},{"k":[49],"v":[{"k":[48],"v":[{"k":[53],"v":[{"k":[48],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]},{"k":[44,93],"v":[{"d":{"df":1,"dc":[[83,1]]}},{"d":{"df":1,"dc":[[83,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"d":{"df":1,"dc":[[63,1]]},"k":[52,48,51,44],"v":[{"k":[56],"v":[{"k":[44,46],"v":[{"d":{"df":8,"dc":[[30,1],[35,1],[46,1],[51,1],[95,2],[96,2],[113,2],[115,2]]}},{"d":{"df":1,"dc":[[30,1]]}}]}]},{"k":[44,93],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[85,1],[110,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":4,"dc":[[56,1],[59,1],[64,1],[75,1]]}}]},{"d":{"df":1,"dc":[[129,2]]},"k":[53,46,49,50,54,51,57,55,93,48],"v":[{"k":[46],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]},"k":[50,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]},{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[50,44],"v":[{"k":[52],"v":[{"k":[57],"v":[{"k":[50],"v":[{"k":[56],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[53],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[56],"v":[{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,1]]},"k":[41,44],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]},{"k":[53],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":4,"dc":[[56,1],[64,1],[94,1],[119,1]]}}]},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[88,1],[116,1]]}}]}]}]},{"k":[50,46,53,51,56,58,48,93],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]},{"k":[53,50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[52],"v":[{"k":[54],"v":[{"k":[48],"v":[{"k":[53],"v":[{"k":[55],"v":[{"k":[55],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]},{"k":[56],"v":[{"k":[57],"v":[{"k":[53],"v":[{"k":[54],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[49],"v":[{"k":[51],"v":[{"k":[58],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[41,65289],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":3,"dc":[[83,1],[85,1],[110,1]]}}]},{"d":{"df":2,"dc":[[85,1],[110,1]]}}]},{"k":[46,57,44,53,49,48,93],"v":[{"k":[51],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[48],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[36,18],[53,18]]}}]}]}]},{"d":{"df":2,"dc":[[55,4],[62,4]]}},{"k":[52],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[94,3],[119,3]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]},{"k":[44],"v":[{"d":{"df":6,"dc":[[88,3],[89,1],[90,1],[114,1],[116,3],[120,1]]}}]}]},{"d":{"df":12,"dc":[[32,1],[35,1],[36,5],[49,1],[51,1],[53,5],[55,3],[56,4],[59,4],[62,3],[64,4],[75,4]]}},{"k":[46,55,51,44,48],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[53],"v":[{"k":[54],"v":[{"k":[56],"v":[{"k":[53],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[52,44],"v":[{"k":[53],"v":[{"k":[54],"v":[{"k":[57],"v":[{"k":[49],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":8,"dc":[[55,2],[59,2],[62,2],[75,2],[85,1],[90,1],[110,1],[114,1]]}},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[46,53,55,44,48],"v":[{"k":[52,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"d":{"df":2,"dc":[[59,2],[75,2]]}},{"k":[44,93],"v":[{"d":{"df":3,"dc":[[59,1],[75,1],[83,1]]}},{"d":{"df":1,"dc":[[83,1]]}}]}]},{"k":[46,51,44,49,50,48,93],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":6,"dc":[[37,9],[47,9],[59,2],[75,2],[85,4],[110,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[44],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[94,3],[119,3]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[83,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[48,44],"v":[{"k":[57,44],"v":[{"k":[54],"v":[{"k":[56],"v":[{"k":[54],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[83,1]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[65289],"v":[{"k":[12289],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"d":{"df":1,"dc":[[56,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"d":{"df":2,"dc":[[63,1],[77,1]]},"k":[116],"v":[{"d":{"df":1,"dc":[[56,2]]}}]},{"k":[93,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"d":{"df":2,"dc":[[59,1],[75,1]]}}]},{"d":{"df":15,"dc":[[61,1],[66,1],[67,1],[68,1],[73,1],[98,1],[99,1],[100,1],[101,1],[102,1],[103,1],[104,1],[105,1],[106,1],[107,1]]}},{"d":{"df":1,"dc":[[64,1]]}},{"k":[20202,20197,19968,22914,36981,38754,36991,20351,22270,24403,21452,39292],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[22312],"v":[{"k":[37327],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[21333],"v":[{"k":[19968],"v":[{"k":[30340],"v":[{"k":[20215],"v":[{"k":[20540],"v":[{"k":[21644],"v":[{"k":[34913],"v":[{"k":[37327],"v":[{"k":[26631],"v":[{"k":[20934],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[79,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30005],"v":[{"k":[21830],"v":[{"k":[32593],"v":[{"k":[31449],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20026],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[33021],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[22320],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[20174],"v":[{"k":[26368],"v":[{"k":[21021],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[32593],"v":[{"k":[31449],"v":[{"k":[21040],"v":[{"k":[26368],"v":[{"k":[32456],"v":[{"k":[19979],"v":[{"k":[35746],"v":[{"k":[21333],"v":[{"k":[36141],"v":[{"k":[20080],"v":[{"k":[36825],"v":[{"k":[25972],"v":[{"k":[20010],"v":[{"k":[27969],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[36716],"v":[{"k":[21270],"v":[{"k":[29366],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"k":[23427],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[33021],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20174],"v":[{"k":[30475],"v":[{"k":[21040],"v":[{"k":[32593],"v":[{"k":[31449],"v":[{"k":[21040],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[36141],"v":[{"k":[20080],"v":[{"k":[30340],"v":[{"k":[26368],"v":[{"k":[32456],"v":[{"k":[36716],"v":[{"k":[21270],"v":[{"k":[29575],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[27493],"v":[{"k":[39588],"v":[{"k":[30340],"v":[{"k":[36716],"v":[{"k":[21270],"v":[{"k":[29575],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[22320],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[21644],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[25152],"v":[{"k":[22312],"v":[{"k":[65292],"v":[{"k":[36827],"v":[{"k":[32780],"v":[{"k":[33021],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[24615],"v":[{"k":[22320],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[21508],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[36716],"v":[{"k":[21270],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[21435],"v":[{"k":[25913],"v":[{"k":[21892],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[30340],"v":[{"k":[22810],"v":[{"k":[36793],"v":[{"k":[24418],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[26159],"v":[{"k":[26377],"v":[{"k":[38480],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26377],"v":[{"k":[20116],"v":[{"k":[20010],"v":[{"k":[20197],"v":[{"k":[19978],"v":[{"k":[35201],"v":[{"k":[35780],"v":[{"k":[20272],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[29289],"v":[{"k":[65292],"v":[{"k":[26080],"v":[{"k":[35770],"v":[{"k":[26159],"v":[{"k":[36718],"v":[{"k":[24275],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[20250],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[21644],"v":[{"k":[28151],"v":[{"k":[20081],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38590],"v":[{"k":[20197],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26524],"v":[{"k":[27599,19968],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[38590],"v":[{"k":[24230],"v":[{"k":[23601],"v":[{"k":[20250],"v":[{"k":[36234],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[20013],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[36807],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[25110],"v":[{"k":[35768],"v":[{"k":[35813],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[27492],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26368],"v":[{"k":[20339],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24490],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21407],"v":[{"k":[21017],"v":[{"k":[12290],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[20351],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26131],"v":[{"k":[20110],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[21051],"v":[{"k":[24847],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[34987],"v":[{"k":[25130],"v":[{"k":[26029],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[35823],"v":[{"k":[23548],"v":[{"k":[35835],"v":[{"k":[32773],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31215],"v":[{"k":[22270],"v":[{"k":[35201],"v":[{"k":[29992],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[19978],"v":[{"k":[26377],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[23618],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[35201],"v":[{"k":[23613],"v":[{"k":[37327],"v":[{"k":[30830],"v":[{"k":[20445],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[23558],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21644],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[36866],"v":[{"k":[24403],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22270],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21464],"v":[{"k":[24471],"v":[{"k":[21487],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20813],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[32452],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[24230],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[33394],"v":[{"k":[35843],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24378],"v":[{"k":[35843],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[33394],"v":[{"k":[35843],"v":[{"k":[26469],"v":[{"k":[31361],"v":[{"k":[20986],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[23454],"v":[{"k":[32447],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32447],"v":[{"k":[65292],"v":[{"k":[39318],"v":[{"k":[20808],"v":[{"k":[35201],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32447],"v":[{"k":[21644],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[32447],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[35201],"v":[{"k":[23613],"v":[{"k":[21147],"v":[{"k":[35201],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28165],"v":[{"k":[26224],"v":[{"k":[21487],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[26377],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[36234],"v":[{"k":[22810],"v":[{"k":[65292],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[36234],"v":[{"k":[22810],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[21487],"v":[{"k":[35265],"v":[{"k":[24230],"v":[{"k":[36234],"v":[{"k":[20302],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[65289],"v":[{"k":[26102],"v":[{"k":[20250],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[32780],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]},{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[27491],"v":[{"k":[21521],"v":[{"k":[21644],"v":[{"k":[36127],"v":[{"k":[21521],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[36873],"v":[{"k":[29992],"v":[{"k":[24046],"v":[{"k":[20540],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[21333],"v":[{"k":[19968],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[35201],"v":[{"k":[27714],"v":[{"k":[20854],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[20013],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[38646],"v":[{"k":[25110],"v":[{"k":[36127],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[30830],"v":[{"k":[20445],"v":[{"k":[21508],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[24635],"v":[{"k":[21644],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":53,"dc":[[0,1],[7,1],[28,1],[30,2],[32,4],[34,3],[35,10],[36,8],[37,9],[38,2],[42,1],[46,2],[47,9],[49,5],[51,8],[52,3],[53,8],[54,2],[55,14],[56,13],[58,3],[59,2],[61,4],[62,16],[64,15],[65,2],[71,3],[75,2],[78,4],[81,2],[83,1],[84,1],[85,6],[88,5],[89,1],[90,1],[92,1],[93,2],[94,5],[95,5],[96,3],[97,1],[110,6],[111,1],[112,1],[113,3],[114,1],[115,7],[116,5],[117,1],[118,2],[119,5],[120,1]]},"k":[41,44,59,46],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[28,2],[42,2]]}}]},{"d":{"df":21,"dc":[[32,2],[35,2],[36,2],[49,2],[51,2],[53,2],[55,8],[56,3],[59,6],[62,8],[64,3],[75,6],[83,2],[88,1],[95,1],[96,1],[97,1],[112,1],[113,1],[115,1],[116,1]]}},{"d":{"df":8,"dc":[[36,1],[38,2],[53,1],[54,2],[56,1],[61,2],[64,1],[78,2]]}},{"k":[106],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[92],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[59,1],[75,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[59,4],[75,4]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115,110,112,109,116],"v":[{"d":{"df":5,"dc":[[31,1],[37,1],[63,1],[69,1],[93,1]]},"k":[105,101,97,117,46],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":32,"dc":[[0,1],[23,2],[28,3],[30,1],[31,5],[34,1],[35,3],[37,1],[55,4],[56,4],[58,1],[59,2],[61,2],[63,6],[65,9],[66,2],[67,1],[68,2],[69,1],[84,1],[85,1],[89,1],[98,3],[99,1],[100,1],[101,3],[102,1],[103,1],[104,1],[105,2],[106,1],[107,1]]}}]}]},{"d":{"df":38,"dc":[[23,2],[26,7],[28,4],[29,1],[30,4],[31,3],[32,2],[33,2],[34,3],[35,2],[36,3],[37,1],[38,3],[55,9],[56,20],[58,3],[59,2],[61,2],[63,3],[65,28],[66,1],[67,1],[68,2],[69,3],[85,3],[88,2],[90,3],[93,1],[94,2],[98,4],[99,1],[100,1],[101,3],[102,2],[104,3],[105,3],[106,1],[107,1]]},"k":[114,115,100,46,58,102],"v":[{"d":{"df":11,"dc":[[30,1],[33,1],[34,1],[35,3],[55,1],[58,1],[59,1],[65,1],[69,1],[99,1],[101,4]]},"k":[115,39,34,46],"v":[{"d":{"df":10,"dc":[[30,1],[35,2],[36,1],[55,3],[56,1],[63,8],[65,6],[100,1],[101,1],[103,2]]},"k":[44,39,58],"v":[{"d":{"df":2,"dc":[[23,1],[63,1]]}},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[104,1]]}}]},{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"d":{"df":1,"dc":[[30,1]]}},{"d":{"df":4,"dc":[[63,1],[69,1],[98,1],[106,1]]}}]},{"d":{"df":6,"dc":[[28,1],[56,1],[67,1],[92,1],[100,1],[103,1]]}},{"d":{"df":28,"dc":[[31,3],[32,3],[34,2],[35,3],[36,1],[38,2],[55,6],[56,3],[57,1],[59,4],[61,7],[63,6],[65,1],[66,2],[67,1],[68,2],[69,3],[92,1],[94,1],[95,1],[96,4],[99,1],[100,1],[102,1],[103,1],[104,2],[105,2],[106,2]]},"k":[44],"v":[{"d":{"df":3,"dc":[[55,1],[61,1],[65,1]]}}]},{"d":{"df":2,"dc":[[31,2],[37,1]]}},{"d":{"df":1,"dc":[[37,2]]}},{"k":[117],"v":[{"k":[108],"v":[{"d":{"df":4,"dc":[[66,1],[68,2],[104,1],[107,1]]}}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":7,"dc":[[31,1],[32,1],[33,1],[37,2],[55,1],[63,1],[104,1]]},"k":[58,44],"v":[{"d":{"df":1,"dc":[[37,1]]}},{"d":{"df":2,"dc":[[63,1],[85,1]]}}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":9,"dc":[[32,3],[36,1],[38,3],[55,1],[66,1],[68,1],[69,1],[97,1],[99,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[110,100,122,105,97,116,101,99,114],"v":[{"k":[101],"v":[{"k":[99,101],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[23,1]]}}]}]}]}]}]}]},{"k":[100],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":8,"dc":[[30,1],[37,1],[56,3],[67,1],[85,4],[88,2],[93,1],[106,1]]},"k":[115,108,101],"v":[{"k":[116,112],"v":[{"k":[97,111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"d":{"df":9,"dc":[[23,1],[30,3],[33,1],[34,1],[56,1],[59,1],[63,5],[69,1],[107,1]]},"k":[46,105],"v":[{"d":{"df":2,"dc":[[36,1],[98,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":4,"dc":[[56,1],[63,3],[98,1],[107,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[111],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[98,1]]}}]}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]},{"k":[121],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[31,2]]}}]}]}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[26,1]]}}]}]},{"k":[111,116,113,118,102,110,109],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"d":{"df":1,"dc":[[55,2]]}},{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,4]]}}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[116],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[98],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[120],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[96,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[46,58],"v":[{"d":{"df":1,"dc":[[107,1]]}},{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[107,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[37,2],[84,2]]},"k":[112,100,115,103],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[34,1]]}}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[101,105],"v":[{"d":{"df":5,"dc":[[35,1],[37,1],[56,1],[58,4],[61,2]]},"k":[100,46,115,41],"v":[{"d":{"df":3,"dc":[[58,1],[61,2],[63,1]]}},{"d":{"df":1,"dc":[[58,1]]}},{"d":{"df":1,"dc":[[63,2]]}},{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[58,2]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[101,105],"v":[{"d":{"df":2,"dc":[[63,1],[65,4]]},"k":[100,115,44],"v":[{"d":{"df":2,"dc":[[63,1],[65,2]]}},{"d":{"df":1,"dc":[[63,1]]}},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]},{"k":[100],"v":[{"d":{"df":1,"dc":[[53,1]]}}]},{"k":[105],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]},{"k":[36895],"v":[{"k":[19978],"v":[{"k":[25163],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]},{"k":[21462],"v":[{"d":{"df":2,"dc":[[7,1],[43,7]]},"k":[28789,28857,30340,31995],"v":[{"k":[24863],"v":[{"d":{"df":1,"dc":[[41,1]]}}]},{"k":[20987],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]},{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[32479],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[20998],"v":[{"k":[37197],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25345],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[22810,24120,26356,30340,65306,20102],"v":[{"k":[31181],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[19979],"v":[{"k":[19968],"v":[{"k":[31687],"v":[{"k":[25945],"v":[{"k":[31243],"v":[{"k":[91],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[20013],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20197],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35268],"v":[{"k":[30340],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[21253],"v":[{"k":[25324],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[12289],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[31243],"v":[{"k":[24230],"v":[{"k":[19978],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[32780],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[39],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]},{"k":[26102,39292],"v":[{"k":[38388],"v":[{"k":[27169],"v":[{"k":[29256],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[12289],"v":[{"k":[26093],"v":[{"k":[26085],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[26641],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[22278],"v":[{"k":[35282],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[23567],"v":[{"k":[30475],"v":[{"k":[20102],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[22278],"v":[{"k":[35282],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[65292],"v":[{"k":[21512],"v":[{"k":[29702],"v":[{"k":[22320],"v":[{"k":[25645],"v":[{"k":[37197],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24418],"v":[{"k":[25104],"v":[{"k":[26356],"v":[{"k":[20855],"v":[{"k":[20010],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]},"k":[33719,38754,65292,12290,20540],"v":[{"k":[21462],"v":[{"k":[20026],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[24555],"v":[{"k":[36895],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340,25552],"v":[{"k":[20195,20363],"v":[{"k":[30721],"v":[{"k":[20250,20013],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]},{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[20102],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"k":[23376],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[20102],"v":[{"k":[22312],"v":[{"k":[22278],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22266],"v":[{"k":[23450],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[35201],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[22312],"v":[{"k":[22278],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[12290],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[30340],"v":[{"k":[24605],"v":[{"k":[36335],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[21033],"v":[{"k":[29992],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[35832],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[20250],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[51,2]]},"k":[32780],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"d":{"df":15,"dc":[[7,1],[40,1],[42,1],[47,1],[48,1],[51,4],[62,2],[64,1],[77,1],[78,2],[81,4],[113,1],[116,1],[117,1],[119,1]]},"k":[21018,32472,39033,32447,36719,29615,39035,24320,91,26377,23481,20108,25511,35752,28145,19979,40736,22270,36825,19968,22823,31995,25968,20219,39292,22352,30334,24494,25991,19981,33258,36817,19978,37197,20351,32477,96,21487,21516,22278,40664,35266],"v":[{"k":[25165],"v":[{"k":[20445],"v":[{"k":[23384],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]},{"k":[22270],"v":[{"k":[21069],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[20013],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]},{"k":[23450],"v":[{"k":[21046],"v":[{"d":{"df":1,"dc":[[43,2]]},"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30828],"v":[{"k":[20214],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[36739],"v":[{"k":[22909],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[19981],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36866],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[32416],"v":[{"k":[32467],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22659],"v":[{"k":[36739],"v":[{"k":[24046],"v":[{"k":[65292],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[35797],"v":[{"k":[39564],"v":[{"k":[26469],"v":[{"k":[30830],"v":[{"k":[23450],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21738],"v":[{"k":[31181],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[26377],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[32463],"v":[{"k":[39564],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]},{"k":[22987,21457],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29615],"v":[{"k":[22659],"v":[{"k":[20013],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[24555],"v":[{"k":[36895],"v":[{"k":[19978],"v":[{"k":[25163],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[20102],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[24403],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[20063],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[22320],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22120],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[34987],"v":[{"k":[38144],"v":[{"k":[27585],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[24635],"v":[{"k":[26159],"v":[{"k":[24212],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32500],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[36724],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26377],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[12290],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21046],"v":[{"k":[21488],"v":[{"k":[20013],"v":[{"k":[25171],"v":[{"k":[21360],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[35770],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20808],"v":[{"k":[26126],"v":[{"k":[30830],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[122],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33394],"v":[{"k":[31995],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[12289],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[32473],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[21322],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[30340],"v":[{"k":[27973],"v":[{"k":[33394],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[23618],"v":[{"k":[65292],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[27973],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[20363,30340],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[32473],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20102],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[65292],"v":[{"k":[28176],"v":[{"k":[21464],"v":[{"k":[33394],"v":[{"k":[31561],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30475],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23558],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[19982],"v":[{"k":[20854],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[25104],"v":[{"k":[27491],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26631],"v":[{"k":[24748],"v":[{"k":[28014],"v":[{"k":[21040],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[19978],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[20250],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[26159],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[65292],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[26159],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[24448],"v":[{"k":[24448],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[25226],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[22522,27178,25105,96,31532],"v":[{"k":[30784],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[26159],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]},"k":[35774],"v":[{"k":[32622],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]},{"k":[20108],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[25152],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[22522],"v":[{"k":[30784],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[19978],"v":[{"k":[21319],"v":[{"k":[20102],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[33021],"v":[{"k":[30475],"v":[{"k":[20986],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[32773],"v":[{"k":[24635],"v":[{"k":[21644],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010,34892],"v":[{"k":[31354,31995],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[21015],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[27178],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[31354],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[20854],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[22810,37096],"v":[{"k":[25968],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20998],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[37117],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[23613],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[22871],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[31243],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[21033],"v":[{"k":[29992],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[20013],"v":[{"k":[35774,65292],"v":[{"k":[32622],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[36825],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[38598,21487,28857],"v":[{"k":[20013],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[35270],"v":[{"k":[21270],"v":[{"k":[25152,30340],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[36890],"v":[{"k":[36947],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[30340],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[24863],"v":[{"k":[30693],"v":[{"k":[22240],"v":[{"k":[32032],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[32534],"v":[{"k":[30721],"v":[{"k":[21644],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[26159],"v":[{"k":[24456],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24471],"v":[{"k":[24403],"v":[{"k":[65292],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[22320],"v":[{"k":[22686],"v":[{"k":[24378],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[25509],"v":[{"k":[19979],"v":[{"k":[26469],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26469],"v":[{"k":[30475],"v":[{"k":[30475],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[26377],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[26469],"v":[{"k":[22686],"v":[{"k":[24378],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[30340],"v":[{"k":[30340],"v":[{"k":[25216],"v":[{"k":[24039],"v":[{"k":[21644],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19982],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12289],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[12289],"v":[{"k":[21463],"v":[{"k":[20247],"v":[{"k":[20154],"v":[{"k":[32676],"v":[{"k":[12289],"v":[{"k":[31038],"v":[{"k":[20250],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[31561],"v":[{"k":[22240],"v":[{"k":[32032],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[19981],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25226],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[29420],"v":[{"k":[31435],"v":[{"k":[30340],"v":[{"k":[22240],"v":[{"k":[32032],"v":[{"k":[21435],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[24320],"v":[{"k":[22987],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[20808],"v":[{"k":[20811],"v":[{"k":[21046],"v":[{"k":[20303],"v":[{"k":[33258],"v":[{"k":[30001],"v":[{"k":[21019],"v":[{"k":[20316],"v":[{"k":[30340],"v":[{"k":[28909],"v":[{"k":[24773],"v":[{"k":[65292],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[19968],"v":[{"k":[19979],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20221],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20877],"v":[{"k":[21435],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[23545],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32929],"v":[{"k":[31080],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[21644],"v":[{"k":[32511],"v":[{"k":[33394],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"k":[29420],"v":[{"k":[29305],"v":[{"k":[30340],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[21563],"v":[{"k":[21512],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[30340],"v":[{"k":[24120],"v":[{"k":[35782],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[21644],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22788],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]},{"k":[20309],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[21644],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[31561],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[26377],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[65288],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[65289],"v":[{"k":[20013],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[12289],"v":[{"k":[26497],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]},{"k":[20449],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[20013],"v":[{"k":[20351,65292],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[20570],"v":[{"k":[23567],"v":[{"k":[22270],"v":[{"k":[26631],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23545],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21516],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[21487],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[26377],"v":[{"k":[25152],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013,65288],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[21152],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[24378],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[25554],"v":[{"k":[20540],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[21464],"v":[{"k":[65288],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[20998],"v":[{"k":[35010],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[21512],"v":[{"k":[24182],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[31561],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[30340],"v":[{"k":[36807],"v":[{"k":[28193],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}},{"k":[19968,36848,25991],"v":[{"k":[20010],"v":[{"k":[22823],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[20102],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[21644],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[19968],"v":[{"k":[38190],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20195],"v":[{"k":[30721],"v":[{"k":[20013],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[27178],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[31163],"v":[{"k":[25955],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[36724],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[32780],"v":[{"k":[35328],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[22343],"v":[{"k":[20026],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[31515],"v":[{"k":[21345],"v":[{"k":[23572],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26102],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[30053],"v":[{"k":[26377],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[27178],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[21644],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[19968],"v":[{"k":[21516],"v":[{"k":[20889],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33394],"v":[{"k":[31561],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[19978],"v":[{"k":[20570],"v":[{"k":[20102],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[26469],"v":[{"k":[36798],"v":[{"k":[21040],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[20381],"v":[{"k":[26087],"v":[{"k":[24819],"v":[{"k":[20445],"v":[{"k":[30041],"v":[{"k":[26087],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22823],"v":[{"k":[22810],"v":[{"k":[22788],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20026],"v":[{"k":[20445],"v":[{"k":[38505],"v":[{"k":[36215],"v":[{"k":[35265],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[22312],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[96],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20013],"v":[{"k":[65306],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35270],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36873],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[19982],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[30340],"v":[{"k":[29305],"v":[{"k":[28857],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[24819],"v":[{"k":[35201],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[32490],"v":[{"k":[21563],"v":[{"k":[21512],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20276],"v":[{"k":[38543],"v":[{"k":[30528],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[32780],"v":[{"k":[24341],"v":[{"k":[36215],"v":[{"k":[24773],"v":[{"k":[24863],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[27492],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20849],"v":[{"k":[20139],"v":[{"k":[12290],"v":[{"k":[27492],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[24212],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20110],"v":[{"k":[27492],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[26368],"v":[{"k":[21518],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[19978],"v":[{"k":[25165],"v":[{"k":[20250],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[26159],"v":[{"k":[23545],"v":[{"k":[27492],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29615],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[21644],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23519],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[32447],"v":[{"k":[26159],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[26377],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[36208],"v":[{"k":[21521],"v":[{"k":[35299],"v":[{"k":[37322],"v":[{"k":[20102],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[39044],"v":[{"k":[27979],"v":[{"k":[26410],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[32447],"v":[{"k":[26368],"v":[{"k":[21487],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20004],"v":[{"k":[26465],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[20813],"v":[{"k":[24178],"v":[{"k":[25200],"v":[{"k":[27491],"v":[{"k":[24120],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25321,20013,39033],"v":[{"d":{"df":1,"dc":[[7,1]]},"k":[21738,28210],"v":[{"k":[31181],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[45,1]]},"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[36719],"v":[{"k":[30828],"v":[{"k":[20214],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[12289],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[12289],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[32508],"v":[{"k":[21512],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26579],"v":[{"k":[22120],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]},{"k":[33539],"v":[{"k":[22260],"v":[{"k":[20013,22806],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]},{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,15]]}}]},{"k":[20214,26723,26412,23383],"v":[{"d":{"df":2,"dc":[[7,2],[47,1]]},"k":[12290,65292,21517,21363,21518,22841,26412],"v":[{"d":{"df":1,"dc":[[7,1]]}},{"k":[20869,26368,37027,25214,21487],"v":[{"k":[23481],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]},{"k":[22810],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[19977],"v":[{"k":[32423],"v":[{"k":[30446],"v":[{"k":[24405],"v":[{"k":[12290],"v":[{"k":[23558],"v":[{"k":[36335],"v":[{"k":[24452],"v":[{"k":[21450],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20040],"v":[{"k":[21487,25903],"v":[{"k":[20197],"v":[{"k":[33258,20351],"v":[{"k":[34892],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[21644],"v":[{"k":[27880],"v":[{"k":[20876],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[25345],"v":[{"k":[20102],"v":[{"k":[33258],"v":[{"k":[27880],"v":[{"k":[20876],"v":[{"k":[65292],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[24418],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]},{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30690],"v":[{"k":[37327],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[36719],"v":[{"k":[20214],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[20174],"v":[{"k":[32593],"v":[{"k":[19978],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[21040],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[36164],"v":[{"k":[28304],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31216],"v":[{"k":[23567],"v":[{"k":[20889],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]},{"k":[21487],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]},{"k":[65288],"v":[{"k":[20551],"v":[{"k":[35774],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]},{"k":[19979],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[23601],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[20110],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[26041],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[20173],"v":[{"k":[28982],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21435],"v":[{"k":[20174],"v":[{"k":[32769],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[20013],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[23547],"v":[{"k":[25214],"v":[{"k":[26356],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[93,32534,25903,30340,20013],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111,47],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35,41],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[20013],"v":[{"k":[35814],"v":[{"k":[32454],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[20102],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[26412],"v":[{"k":[25991],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36753],"v":[{"k":[25351],"v":[{"k":[21335],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[25345],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20840],"v":[{"k":[23616],"v":[{"k":[27880],"v":[{"k":[20876],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[21018],"v":[{"k":[25165],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[26377],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20960],"v":[{"k":[31181],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26102,20171],"v":[{"k":[20505],"v":[{"k":[35201],"v":[{"k":[30041],"v":[{"k":[24847],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[30340],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[35823],"v":[{"k":[35748],"v":[{"k":[20026],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32461],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[26377],"v":[{"k":[21015],"v":[{"k":[20986],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,2]]}}]}]}]}]}]},{"k":[22359,29255,26679,12289,26694],"v":[{"k":[65288,25110,30340],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[22823,30340],"v":[{"k":[23567],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545,36793,38452],"v":[{"k":[40784],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26694],"v":[{"k":[12289],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[65288],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24433],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20301,23485],"v":[{"k":[32622],"v":[{"k":[21644],"v":[{"k":[26059],"v":[{"k":[36716],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[30001],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[22359],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27573],"v":[{"k":[65288,20063,30340],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[21644],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[75,1]]},"k":[25490],"v":[{"k":[29256],"v":[{"k":[21644],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26694],"v":[{"k":[12289],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[21644],"v":[{"k":[35013],"v":[{"k":[39280],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[21644],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39068,25551,38452],"v":[{"k":[33394],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[36793],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24433],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110,31995],"v":[{"k":[36825,26631,25490,25991],"v":[{"k":[20123],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[19979],"v":[{"k":[19968],"v":[{"k":[31687],"v":[{"k":[25945],"v":[{"k":[31243],"v":[{"k":[91],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[110],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[20013],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31614],"v":[{"k":[30340],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[29256],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24819],"v":[{"k":[35937],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23383],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270,25805],"v":[{"k":[30340,65288],"v":[{"k":[33410,36793],"v":[{"k":[28857],"v":[{"k":[34987],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[26102],"v":[{"k":[27492],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[34987],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34987],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[26102],"v":[{"k":[27492],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[34987],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]},{"k":[20316],"v":[{"k":[31526],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20837,29992],"v":[{"d":{"df":3,"dc":[[7,1],[42,3],[53,1]]},"k":[21018,26609,25552],"v":[{"k":[21018],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[7,2]]}}]}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21518],"v":[{"k":[32512],"v":[{"k":[37117],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[26694],"v":[{"k":[65292],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[21518],"v":[{"k":[32512],"v":[{"k":[37117],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[43,1],[62,2],[81,1]]},"k":[20195,22270,36825,27880,25991],"v":[{"k":[30721],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[29255],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[20876],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25913],"v":[{"k":[20026],"v":[{"k":[20174],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[96],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":9,"dc":[[51,5],[53,1],[54,2],[62,18],[64,6],[78,1],[110,1],[116,2],[119,1]]},"k":[30446,24320,25277,25509,33410,24418,22270,20540,31995,20803,21508,37197,27599,21069,35270,31532,25968,32467,36755,25152,21478,20363,21015,32500,34892,21160,26041,29256,24773,29238,25991,26680,31867,24038,36870,8220,26102,31283,25903,33021,27169,20860,20248,26684,35268,30456,96,21462,22278,40644,36335],"v":[{"k":[24405],"v":[{"k":[26032],"v":[{"k":[24314],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]},{"k":[21457],"v":[{"k":[32773,20043],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[26469],"v":[{"k":[32452],"v":[{"k":[21512],"v":[{"k":[20986],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[26356],"v":[{"k":[20005],"v":[{"k":[26684],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[20320],"v":[{"k":[26816],"v":[{"k":[26597],"v":[{"k":[20986],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[23569],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[20102],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21021],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]},{"k":[35937],"v":[{"k":[21644],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[65292],"v":[{"k":[24418],"v":[{"k":[25104],"v":[{"k":[21487],"v":[{"k":[20114],"v":[{"k":[25442],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[21475],"v":[{"d":{"df":1,"dc":[[48,1]]}}]},{"k":[28857],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[22312],"v":[{"k":[27983],"v":[{"k":[35272],"v":[{"k":[22120],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[22987],"v":[{"k":[32456],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[26159],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[65292,21270],"v":[{"k":[20294],"v":[{"k":[20854],"v":[{"k":[23454],"v":[{"k":[19981],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[65306,12290],"v":[{"d":{"df":1,"dc":[[62,1]]}},{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[34920],"v":[{"k":[20013,26377],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[23558],"v":[{"k":[20250],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[20989],"v":[{"k":[25968],"v":[{"k":[20570],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[36339],"v":[{"k":[36716],"v":[{"k":[21040],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22320],"v":[{"k":[22336],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[24377],"v":[{"k":[20986],"v":[{"k":[23545],"v":[{"k":[35805],"v":[{"k":[26694],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[20570],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[19979],"v":[{"k":[38075],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[20250,22312,35797,12290,28155,20316],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"d":{"df":1,"dc":[[64,1]]}},{"k":[35797],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"d":{"df":1,"dc":[[78,1]]}},{"k":[21152],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]},{"k":[20026],"v":[{"k":[36335],"v":[{"k":[24452],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]},{"k":[21015],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[34987],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]},{"k":[32032],"v":[{"k":[34987],"v":[{"d":{"df":1,"dc":[[51,2]]}}]}]},{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21644],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[36981],"v":[{"k":[20174],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[21629],"v":[{"k":[21517],"v":[{"k":[20064],"v":[{"k":[24815],"v":[{"k":[65292],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21644],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[65288],"v":[{"k":[21363],"v":[{"k":[26412],"v":[{"k":[25991],"v":[{"k":[24320],"v":[{"k":[22836],"v":[{"k":[30340],"v":[{"k":[37027],"v":[{"k":[31181],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[26356],"v":[{"k":[25153],"v":[{"k":[24179],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31181,19968,39033],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[23601],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[20102],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[25226],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[8220],"v":[{"k":[32447],"v":[{"k":[8221],"v":[{"k":[65292],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[25226],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[8220],"v":[{"k":[38271],"v":[{"k":[24230],"v":[{"k":[8221],"v":[{"k":[12290],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[26356],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[27827],"v":[{"k":[27969],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[26641],"v":[{"k":[22270],"v":[{"k":[20063],"v":[{"k":[37117],"v":[{"k":[20250],"v":[{"k":[20570],"v":[{"k":[20986],"v":[{"k":[21508],"v":[{"k":[33258],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015,34892],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,2]]}}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[65292],"v":[{"k":[20026],"v":[{"k":[27599],"v":[{"k":[39033],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[21462],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35273],"v":[{"k":[26144,26679],"v":[{"k":[23556],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20998],"v":[{"k":[20026],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[19982],"v":[{"k":[20998],"v":[{"k":[27573],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[20248],"v":[{"k":[20808],"v":[{"k":[32423],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]},{"k":[22235,19968],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[21363],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]},{"k":[20010,34892],"v":[{"k":[36755],"v":[{"k":[20986],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[36755],"v":[{"k":[20837],"v":[{"k":[65288],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[65288],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19978],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[65292,39033,35774,12290],"v":[{"k":[26469],"v":[{"k":[33258],"v":[{"k":[20110],"v":[{"k":[27492],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]}]}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,3]]}}]},{"k":[32622],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[65289],"v":[{"k":[20173],"v":[{"k":[27491],"v":[{"k":[24120],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[116,1]]}}]}]},{"k":[26524,26500],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,3]]},"k":[20363],"v":[{"k":[22914],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[58],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]},{"k":[20837,20986],"v":[{"k":[65292,12290],"v":[{"k":[26469,26159],"v":[{"k":[33258],"v":[{"k":[20110],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[19978],"v":[{"k":[28216],"v":[{"k":[30340],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[20013],"v":[{"k":[20197],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[26159],"v":[{"k":[21518],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[26377],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[25968,39033],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[20013],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[37117],"v":[{"k":[19981],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[21462],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[30418],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[23376],"v":[{"k":[65306],"v":[{"d":{"df":2,"dc":[[62,1],[64,1]]}}]}]},{"k":[65288,19978],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[110],"v":[{"k":[65289],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[34892],"v":[{"k":[65288],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[65289],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[24230],"v":[{"k":[65288,8221,21517,37324],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[8220],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[24847],"v":[{"k":[24605],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[47],"v":[{"k":[21015],"v":[{"k":[65289],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,3]]}},{"k":[36830],"v":[{"k":[36215],"v":[{"k":[26469],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21517],"v":[{"k":[12290],"v":[{"k":[65288],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[38271],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,2]]}}]}]}]}]}]},{"k":[19978],"v":[{"k":[38754],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[30011],"v":[{"k":[26469],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[27491],"v":[{"k":[22312],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[12290,23545],"v":[{"d":{"df":1,"dc":[[72,1]]}},{"k":[22278],"v":[{"k":[28857],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[23450],"v":[{"k":[20301],"v":[{"k":[12290],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[21495],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[33258],"v":[{"k":[34892],"v":[{"k":[26356],"v":[{"k":[25442],"v":[{"k":[25110],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[33258],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[26500],"v":[{"k":[24314],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[28857],"v":[{"k":[26159],"v":[{"k":[30001],"v":[{"k":[24213],"v":[{"k":[23618],"v":[{"k":[26694],"v":[{"k":[26550],"v":[{"k":[30340],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[26469],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[24211],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20917],"v":[{"k":[19979,12290],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[23618],"v":[{"k":[32423],"v":[{"k":[20013],"v":[{"k":[32479],"v":[{"k":[19968],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[32780],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,2]]}}]}]}]}]}]},{"k":[24515],"v":[{"k":[65292],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[20116],"v":[{"k":[22823],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[12289],"v":[{"k":[21313],"v":[{"k":[20116],"v":[{"k":[39033],"v":[{"k":[29305],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[20840],"v":[{"k":[38754],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[65292],"v":[{"k":[22260],"v":[{"k":[32469],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[21465],"v":[{"k":[20107],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[22270],"v":[{"k":[8220],"v":[{"k":[34920],"v":[{"k":[8221],"v":[{"k":[26356],"v":[{"k":[33021],"v":[{"k":[20256],"v":[{"k":[8220],"v":[{"k":[36798],"v":[{"k":[8221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32972],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[25925],"v":[{"k":[20107],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[26356],"v":[{"k":[36731],"v":[{"k":[26494],"v":[{"k":[22320],"v":[{"k":[21019],"v":[{"k":[36896],"v":[{"k":[28385],"v":[{"k":[36275],"v":[{"k":[21508],"v":[{"k":[31181],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22411,30446],"v":[{"k":[25551,26159,35774],"v":[{"k":[36848],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[26159],"v":[{"k":[30001],"v":[{"k":[31038],"v":[{"k":[21306],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[24110],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[32500],"v":[{"k":[25252],"v":[{"k":[24182],"v":[{"k":[21457],"v":[{"k":[24067],"v":[{"k":[21040],"v":[{"k":[91],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[26377],"v":[{"k":[30528],"v":[{"k":[19981],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[24863],"v":[{"k":[35874],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[30340],"v":[{"k":[36129],"v":[{"k":[29486],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[23450],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]},{"k":[23485],"v":[{"k":[24230],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[25972],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]},{"k":[19978],"v":[{"k":[35282],"v":[{"k":[20026],"v":[{"k":[38646],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[20197],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[20026],"v":[{"k":[21333],"v":[{"k":[20301],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21521],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[121],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26174],"v":[{"k":[31034],"v":[{"k":[8221],"v":[{"k":[8220],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[8221],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20505],"v":[{"k":[26174,38544],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[34255],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]},{"k":[23450],"v":[{"k":[21644],"v":[{"k":[21521],"v":[{"k":[21518],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25345],"v":[{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[21147],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[21629],"v":[{"k":[21517],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[20914],"v":[{"k":[31361],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[32780],"v":[{"k":[19988],"v":[{"k":[38450],"v":[{"k":[27490],"v":[{"k":[20102],"v":[{"k":[20869],"v":[{"k":[37096],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[30340],"v":[{"k":[26292],"v":[{"k":[38706],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20320],"v":[{"k":[20381],"v":[{"k":[26087],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22359],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[20381],"v":[{"k":[26087],"v":[{"k":[26159],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[30340],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23481],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[30830],"v":[{"k":[23454],"v":[{"k":[26377],"v":[{"k":[24456],"v":[{"k":[24378],"v":[{"k":[30340],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[27426],"v":[{"k":[36814],"v":[{"k":[25552],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20808],"v":[{"k":[32423],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[33021],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[20351],"v":[{"k":[20854],"v":[{"k":[26356],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[33539],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[52],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[20851],"v":[{"k":[25193],"v":[{"k":[23637],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20102],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21450],"v":[{"k":[20854],"v":[{"k":[29992],"v":[{"k":[27861],"v":[{"k":[35831],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[25163],"v":[{"k":[20876],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20540],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[34920],"v":[{"k":[26126],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[23558],"v":[{"k":[34987],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[65292],"v":[{"k":[29702],"v":[{"k":[35770],"v":[{"k":[19978],"v":[{"k":[21482],"v":[{"k":[35201],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[65292],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[24182],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[22312],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[30340],"v":[{"k":[24212],"v":[{"k":[29992],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29615],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[22278],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[29305],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[114,1]]}}]}]},{"k":[24452],"v":[{"k":[12290,20316,65292],"v":[{"d":{"df":1,"dc":[[119,1]]}},{"k":[20026],"v":[{"k":[30690],"v":[{"k":[37327],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]},{"k":[23558],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]},{"k":[24320,21360],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]},{"k":[25152,20986],"v":[{"k":[26377],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[30340],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[26469],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[21046],"v":[{"k":[19968,22270],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]},{"k":[34920],"v":[{"d":{"df":1,"dc":[[42,1]]},"k":[12290],"v":[{"k":[32780],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]},{"k":[22791],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[20102],"v":[{"k":[39640,23485],"v":[{"k":[23485],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]},{"k":[39640],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[7,2]]}}]}]}]}]}]}]}]}]}]},{"k":[22120],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[12290,33410],"v":[{"k":[22312],"v":[{"k":[21018],"v":[{"k":[25165],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[34987],"v":[{"k":[38144],"v":[{"k":[27585],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[34987],"v":[{"k":[37325],"v":[{"k":[24314],"v":[{"k":[26102],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21518,25152,21069,38388],"v":[{"k":[65292],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]},{"k":[20197],"v":[{"k":[29992],"v":[{"k":[8220],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[8221],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[19981],"v":[{"k":[24456],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[24605],"v":[{"k":[32500],"v":[{"k":[30340],"v":[{"k":[35789],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[36890],"v":[{"k":[20439],"v":[{"k":[26131],"v":[{"k":[25026],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[30452],"v":[{"k":[20197],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[20173],"v":[{"k":[28982],"v":[{"k":[34987],"v":[{"k":[27491],"v":[{"k":[24120],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[37329],"v":[{"k":[39069],"v":[{"k":[26469],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[29609],"v":[{"k":[20855],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[30340],"v":[{"k":[25903],"v":[{"k":[20986],"v":[{"k":[36229],"v":[{"k":[20986],"v":[{"k":[20102],"v":[{"k":[39044],"v":[{"k":[31639],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26381],"v":[{"k":[39280],"v":[{"k":[33457],"v":[{"k":[36153],"v":[{"k":[36828],"v":[{"k":[20302],"v":[{"k":[20110],"v":[{"k":[39044],"v":[{"k":[31639],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[26041],"v":[{"k":[38754],"v":[{"k":[36229],"v":[{"k":[20986],"v":[{"k":[25110],"v":[{"k":[19981],"v":[{"k":[36275],"v":[{"k":[21464],"v":[{"k":[24471],"v":[{"k":[19968],"v":[{"k":[30446],"v":[{"k":[20102],"v":[{"k":[28982],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":8,"dc":[[7,2],[45,1],[51,8],[62,10],[64,3],[75,5],[78,1],[116,1]]},"k":[20102,22270,26609],"v":[{"k":[21487,26041,20445],"v":[{"k":[20197],"v":[{"k":[35753],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23545],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[23613],"v":[{"k":[37327],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[26377],"v":[{"k":[35821],"v":[{"k":[27861],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20415],"v":[{"k":[25302,22823],"v":[{"k":[25341],"v":[{"k":[65292],"v":[{"k":[25226],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[23478],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[20102],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[96],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[19979],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[21518],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35777],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[34920],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]},{"k":[26465],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[33394],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]},{"k":[21518],"v":[{"k":[23601,65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]},{"k":[25105,20174],"v":[{"k":[20204],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[91],"v":[{"k":[20256],"v":[{"k":[20837],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21491],"v":[{"k":[21521],"v":[{"k":[24038],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[32039],"v":[{"k":[38752],"v":[{"k":[25918],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27861,20415,24335],"v":[{"k":[21021,29983,26174,38544,36941],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]},{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[26159],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[12290],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34255],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]},{"k":[21382],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"d":{"df":1,"dc":[[62,1]]}},{"k":[30340,19968],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[31867],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[31867],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[30446],"v":[{"k":[21069],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33268],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[22312],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[26041],"v":[{"k":[26696],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363,29616,26102],"v":[{"k":[24182,19988,65289,25110],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]},{"k":[27983],"v":[{"k":[35272],"v":[{"k":[22120],"v":[{"k":[26131],"v":[{"k":[23849],"v":[{"k":[28291],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65288],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[26159],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[26159],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25139],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[26159],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32773],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[26576,30340,22522,22534,21335],"v":[{"k":[31181],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[30097],"v":[{"k":[38382],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[21015],"v":[{"k":[34920],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[24605],"v":[{"k":[36335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,2]]}}]},{"k":[26412],"v":[{"k":[30340],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"k":[31215],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[32473],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19969],"v":[{"k":[26684],"v":[{"k":[23572],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21644],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[112,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39044,26102],"v":[{"k":[35272],"v":[{"k":[21644],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]},{"k":[24207],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110,30784,26412,32447],"v":[{"k":[20934],"v":[{"k":[22791],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[65292],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"d":{"df":3,"dc":[[7,1],[42,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351,22278,39292,25240,25955,26609],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[29615],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]},{"k":[22270],"v":[{"d":{"df":1,"dc":[[115,1]]}}]},{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":2,"dc":[[116,1],[125,1]]}}]}]},{"k":[28857],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]},{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]},{"k":[24320,30340],"v":[{"k":[22987],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[24688],"v":[{"k":[24403],"v":[{"k":[22320],"v":[{"k":[21453],"v":[{"k":[26144],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[34987],"v":[{"k":[25130],"v":[{"k":[26029],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[24456],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[35823],"v":[{"k":[23548],"v":[{"k":[35266],"v":[{"k":[20247],"v":[{"k":[20570],"v":[{"k":[20986],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[30340],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[24038],"v":[{"k":[20391],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20986],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21491,19978],"v":[{"k":[36793],"v":[{"k":[30011],"v":[{"k":[36127],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[26465],"v":[{"k":[34892],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36793],"v":[{"k":[30011],"v":[{"k":[36127],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[23376],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[20813],"v":[{"k":[21644],"v":[{"k":[24120],"v":[{"k":[35782],"v":[{"k":[36829],"v":[{"k":[32972],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[35823],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450,21521],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[22270,20102,32500,25968,21160,65292,22635,20026],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[37197,22823],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21644],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":2,"dc":[[7,1],[51,1]]}}]}]}]}]}]},{"k":[23567],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]},{"k":[25968,32500,25240,31867],"v":[{"k":[25454],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[24230],"v":[{"k":[65292,30340],"v":[{"k":[33021],"v":[{"k":[35774],"v":[{"k":[25104],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[39034],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[33021],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26368],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]},{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[65306],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[39033],"v":[{"k":[30340],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[24577],"v":[{"k":[24211],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[65292],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"k":[91],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[41],"v":[{"k":[30340],"v":[{"k":[12300],"v":[{"k":[22312],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[24211],"v":[{"k":[12301],"v":[{"k":[31456],"v":[{"k":[33410],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21542],"v":[{"k":[21017],"v":[{"k":[65292],"v":[{"k":[30001],"v":[{"k":[26368],"v":[{"k":[38271],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[12290],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[20013],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[25918],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20805],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[25551],"v":[{"k":[36793],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65288],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[25551],"v":[{"k":[36793],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[25551],"v":[{"k":[36793],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[19981],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[65289],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"k":[19982],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[21313],"v":[{"k":[20998],"v":[{"k":[30456],"v":[{"k":[20284],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[23637],"v":[{"k":[24320],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[96],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[35813],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[26102],"v":[{"k":[23601],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[65307],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31532],"v":[{"k":[19977],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[21015],"v":[{"k":[24207],"v":[{"k":[21495],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[38376],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[7,1],[42,1]]}}]}]}]}]},{"k":[29992,24471],"v":[{"d":{"df":7,"dc":[[40,1],[45,3],[47,1],[51,1],[62,3],[64,2],[111,1]]},"k":[21018,25628,24517,27169,26041,65306,21322,20998,22806,24207,26032,32773],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21644],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"d":{"df":2,"dc":[[7,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32034],"v":[{"k":[24341],"v":[{"k":[25806],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[20851],"v":[{"k":[38190],"v":[{"k":[23383],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]},{"k":[39035],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]},{"k":[26495],"v":[{"k":[25340],"v":[{"k":[25509],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[20808],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"d":{"df":2,"dc":[[72,1],[73,1]]},"k":[58],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]},{"d":{"df":1,"dc":[[47,3]]}},{"k":[24452],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[20102],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[27573],"v":[{"k":[22411],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[37096],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[21495],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,2]]}}]}]},{"k":[30340],"v":[{"d":{"df":1,"dc":[[73,1]]}}]},{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[26356],"v":[{"k":[25913],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35813],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[20256],"v":[{"k":[20837],"v":[{"k":[35813],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[21363],"v":[{"k":[20026],"v":[{"k":[35813],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[38500],"v":[{"k":[38750],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26679,20004,26159,26102,31181,37324,20010,20123,20960,27425,21477],"v":[{"k":[20320,35774,27809,65292,30456,30340],"v":[{"k":[30340],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23601],"v":[{"k":[35806],"v":[{"k":[29983],"v":[{"k":[20102],"v":[{"k":[65281],"v":[{"d":{"df":1,"dc":[[7,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[24615],"v":[{"k":[23601],"v":[{"k":[24046],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22278,23601],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[20250],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33021],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[29233],"v":[{"k":[24515],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[30340],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[32477],"v":[{"k":[23545],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[23427],"v":[{"k":[26159],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[26159],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[23485],"v":[{"k":[39640],"v":[{"k":[20013],"v":[{"k":[36739],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[26465],"v":[{"k":[36793],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[22823],"v":[{"k":[20110],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[26159],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[21453],"v":[{"k":[20043],"v":[{"k":[21017],"v":[{"k":[21453],"v":[{"k":[65307],"v":[{"k":[24403],"v":[{"k":[23427],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22411],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[32477],"v":[{"k":[23545],"v":[{"k":[30340],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31181],"v":[{"k":[20351,26041],"v":[{"k":[29992],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[24046],"v":[{"k":[24322],"v":[{"k":[24456],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[20570],"v":[{"k":[21040],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[34987],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[65292],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[24402],"v":[{"k":[21151],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]},"k":[19968,25968,20010],"v":[{"k":[20010,20123],"v":[{"k":[20851,8220],"v":[{"k":[20110],"v":[{"k":[8220],"v":[{"k":[26576],"v":[{"k":[31449],"v":[{"k":[28857],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[26159],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[26469],"v":[{"k":[28304],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[8212],"v":[{"k":[8212],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[51],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[65292],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[33829],"v":[{"k":[38144],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[51],"v":[{"k":[49],"v":[{"k":[48],"v":[{"k":[65292],"v":[{"k":[32852],"v":[{"k":[30431],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[65292],"v":[{"k":[35270],"v":[{"k":[39057],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[49],"v":[{"k":[51],"v":[{"k":[53],"v":[{"k":[65292],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[24341],"v":[{"k":[25806],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[49],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[56],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[31038],"v":[{"k":[21306],"v":[{"k":[36129],"v":[{"k":[29486],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[39033],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[54,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26356],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[20505],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]},{"k":[24773,20889,26041,22330],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[27861],"v":[{"d":{"df":1,"dc":[[53,1]]}}]},{"k":[24335],"v":[{"k":[30340,65292],"v":[{"k":[20248],"v":[{"k":[28857],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[36866],"v":[{"k":[20110],"v":[{"k":[23545],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[8220],"v":[{"k":[26641],"v":[{"k":[8221],"v":[{"k":[12289],"v":[{"k":[8220],"v":[{"k":[22270],"v":[{"k":[8221],"v":[{"k":[12289],"v":[{"k":[36229],"v":[{"k":[22823],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65289],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[30340],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[21644],"v":[{"k":[38745],"v":[{"k":[24577],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[21253],"v":[{"k":[32465],"v":[{"k":[23450],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[37325],"v":[{"k":[26032],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26223],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[32467],"v":[{"k":[21512],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[116,1]]},"k":[31616,27599,26159,38656,25226,20351,30340,35774],"v":[{"k":[35201],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[20102],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21450],"v":[{"k":[29992],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20851],"v":[{"k":[20110],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21450],"v":[{"k":[29992],"v":[{"k":[27861],"v":[{"k":[35831],"v":[{"k":[31227],"v":[{"k":[27493],"v":[{"k":[91],"v":[{"k":[23448],"v":[{"k":[32593],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[39033],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[65288],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[54,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27492,25991],"v":[{"k":[22806],"v":[{"k":[37096],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[25152],"v":[{"k":[38656],"v":[{"k":[30340],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[22359],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26631],"v":[{"k":[35760],"v":[{"k":[31526],"v":[{"k":[21495],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[75,1]]}},{"k":[29992],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[78,4]]}}]}]},{"d":{"df":1,"dc":[[78,2]]}},{"k":[32622],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[25551],"v":[{"k":[36793],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[36319],"v":[{"k":[30528],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[22312],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[20013],"v":[{"k":[21478],"v":[{"k":[22806],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[62,11],[78,4]]},"k":[35789,31867,39292,31995,39069,31579,34920,20363,23454,24110,23646,32452,33539],"v":[{"k":[25351],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[32473],"v":[{"k":[23450],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24050],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[8221],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[8220],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[8221],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22411],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[19978],"v":[{"k":[36848],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[22806],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[36873],"v":[{"k":[26465],"v":[{"k":[20214],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[36941],"v":[{"k":[21382],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36798],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[23376],"v":[{"k":[26174,20027],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[20570],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[19968],"v":[{"k":[20214],"v":[{"k":[20107],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[24456],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[26377],"v":[{"k":[20102],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[22522],"v":[{"k":[30784],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20570],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[24773],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[24471],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20174],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[24320],"v":[{"k":[22987],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29616],"v":[{"k":[26377],"v":[{"k":[20123],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]},{"k":[21161],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[20854,24847],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[21644],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[24605],"v":[{"k":[26159],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[19982],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24615],"v":[{"k":[35753],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[19981,21487],"v":[{"k":[21487],"v":[{"k":[35265],"v":[{"k":[65288],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[20182],"v":[{"k":[21709],"v":[{"k":[24212],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[34987],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"k":[20013],"v":[{"k":[65288],"v":[{"k":[21363],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[65289],"v":[{"k":[20013],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[35859],"v":[{"k":[8220],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[8221],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[20197],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22260],"v":[{"k":[20869],"v":[{"k":[20026],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[35745],"v":[{"k":[21010],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[39069],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[30340],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[20869],"v":[{"k":[65292],"v":[{"k":[32473],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24213],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[39640],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[20986],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22788],"v":[{"k":[20110],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"k":[21306],"v":[{"k":[38388],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[20869],"v":[{"k":[65292],"v":[{"k":[26410],"v":[{"k":[36798],"v":[{"k":[21040],"v":[{"k":[12289],"v":[{"k":[36798],"v":[{"k":[21040],"v":[{"k":[12289],"v":[{"k":[36229],"v":[{"k":[39069],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23646,21151,21319],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[20102],"v":[{"k":[65292],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33021],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[36807],"v":[{"k":[20110],"v":[{"k":[23494],"v":[{"k":[38598],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[21487],"v":[{"k":[35835],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[65292],"v":[{"k":[26080],"v":[{"k":[38656],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[32534],"v":[{"k":[20889],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[23601],"v":[{"k":[33021],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[65292],"v":[{"k":[22823],"v":[{"k":[22823],"v":[{"k":[31616],"v":[{"k":[21270],"v":[{"k":[20102],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[25104],"v":[{"k":[26412],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32423],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[29992],"v":[{"k":[26356],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[37239],"v":[{"k":[28843],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19988],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[30340],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20250],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[31532],"v":[{"k":[19968,20108],"v":[{"k":[20010],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[35805],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]},{"k":[110,101,103,105,111,114,97],"v":[{"k":[111],"v":[{"k":[119],"v":[{"d":{"df":5,"dc":[[23,1],[29,2],[55,1],[65,1],[69,1]]},"k":[108,110],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[61,1],[69,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[92,1]]}}]}]}]},{"k":[101,121,112],"v":[{"k":[112],"v":[{"d":{"df":4,"dc":[[28,1],[55,1],[65,3],[66,1]]}}]},{"d":{"df":2,"dc":[[34,1],[55,1]]},"k":[45],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[56,3],[64,3]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"k":[110,119],"v":[{"k":[100,103],"v":[{"d":{"df":5,"dc":[[34,1],[35,1],[55,2],[99,1],[102,2]]},"k":[115,101],"v":[{"d":{"df":4,"dc":[[34,1],[35,2],[85,1],[102,1]]}},{"k":[114],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[66,1]]}}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,4],[53,4]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,4],[62,4]]}}]}]}]}]},{"k":[114],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}}]}]}]}]},{"d":{"df":6,"dc":[[28,3],[31,2],[42,3],[45,2],[65,3],[81,3]]},"k":[42,47],"v":[{"d":{"df":1,"dc":[[33,2]]},"k":[116,99,23567,20173,97,102,110,20851,19982,24418,98,107],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[33,2]]}}]}]}]}]},{"k":[111,108],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[99],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]},{"k":[36148],"v":[{"k":[22763],"v":[{"k":[65306],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[48,2]]}}]}]}]}]}]},{"k":[28982],"v":[{"k":[34987],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[12290],"v":[{"k":[20107],"v":[{"k":[23454],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[21482],"v":[{"k":[20250],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,4]]}}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[58],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]},{"k":[20110],"v":[{"k":[32500,20851,36923,35299],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[31995],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[31526],"v":[{"k":[65306],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[36753],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65306],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[26512],"v":[{"k":[22120],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[25110],"v":[{"k":[38750],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[24335],"v":[{"k":[21270],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[65306],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[101],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[44,41],"v":[{"d":{"df":2,"dc":[[34,1],[52,1]]}},{"k":[59],"v":[{"d":{"df":2,"dc":[[65,1],[81,1]]}}]}]}]},{"k":[46,99,112],"v":[{"k":[46],"v":[{"d":{"df":21,"dc":[[28,2],[32,25],[34,15],[35,10],[36,3],[37,4],[38,4],[42,2],[47,4],[49,25],[51,10],[52,15],[53,4],[54,4],[55,6],[56,6],[59,1],[62,5],[64,7],[65,2],[81,2]]},"k":[41,44],"v":[{"d":{"df":2,"dc":[[36,2],[65,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[36,1]]}}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]}]},{"k":[115],"v":[{"k":[118],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]}]}]}]},{"k":[102,105,97,114,123,112,115,116,98,118,110,111,121,99,106,109,100,103,120,108],"v":[{"k":[117,105],"v":[{"k":[108],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[28,1]]}}]}]},{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34],"v":[{"d":{"df":2,"dc":[[55,4],[62,7]]},"k":[96],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[32473],"v":[{"k":[20986],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[26465],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[20363],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[29,2]]},"k":[110,116],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[112,110,114,109,34,100],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[29,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[59,1]]}},{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[84,2]]}}]}]}]}]},{"k":[101,105],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[34],"v":[{"k":[96],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,1]]}}]}]}]}]}]}]}]}]}]},{"k":[114,105,97,117,111],"v":[{"k":[105,111],"v":[{"k":[122,99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[30,1]]}}]},{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"k":[100],"v":[{"k":[117],"v":[{"k":[99],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[34],"v":[{"d":{"df":2,"dc":[[56,2],[64,1]]}}]}]}]}]}]}]},{"k":[101,120],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[101],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[61,2]]}}]}]}]},{"k":[114],"v":[{"k":[115,116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]},{"d":{"df":1,"dc":[[98,2]]}}]}]},{"k":[114],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]}]}]}]}]}]},{"k":[97,116,111,99,104,101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[32,4]]}}]}]}]},{"k":[121,114],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]},{"k":[105,111],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34],"v":[{"d":{"df":2,"dc":[[55,1],[62,4]]},"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[111],"v":[{"k":[119],"v":[{"k":[47,44],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[61,4]]}}]}]}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[109],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97,114,119,104],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[97,101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34,97],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[34],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[111],"v":[{"k":[45],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]},{"k":[108,111,34],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[107],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]},{"k":[120,121],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]}]}]}]},{"k":[34],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]},{"d":{"df":1,"dc":[[59,1]]}}]},{"k":[105],"v":[{"k":[110,115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[53,1]]},"k":[46,65289],"v":[{"d":{"df":1,"dc":[[36,1]]}},{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[68,1]]},"k":[41],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]},{"k":[111,117,97],"v":[{"k":[114,116,110],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]},{"k":[34],"v":[{"d":{"df":1,"dc":[[55,2]]}}]},{"k":[45],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[55,1]]},"k":[34],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]}]}]}]},{"k":[109,118],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[105],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[58,1]]}}]}]}]}]}]}]}]}]},{"k":[117,114,99,116],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]},{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[97,108],"v":[{"k":[114],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,3]]}}]}]},{"k":[108],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[69,2]]}}]}]}]}]}]}]},{"k":[111,108],"v":[{"k":[110],"v":[{"k":[100,115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]}]},{"k":[105,111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]},{"k":[117],"v":[{"k":[100],"v":[{"k":[115],"v":[{"k":[34],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[105,97],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[120],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[97,105,101],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[56,7]]},"k":[34],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]}]},{"k":[114,105],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[108],"v":[{"k":[34],"v":[{"d":{"df":1,"dc":[[84,1]]}}]}]}]}]},{"k":[34],"v":[{"k":[125],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]},{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[34],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[69,1]]}}]}]}]}]}]}]},{"d":{"df":10,"dc":[[28,4],[35,1],[42,4],[51,1],[55,19],[62,21],[65,8],[81,8],[94,2],[119,2]]}},{"d":{"df":12,"dc":[[56,4],[59,1],[64,4],[75,1],[77,1],[84,1],[95,1],[100,1],[101,1],[104,1],[115,1],[125,1]]},"k":[46,56,48,51,57,50,53,54,44,49,52,12289,37],"v":[{"d":{"df":7,"dc":[[56,1],[68,1],[98,1],[101,1],[102,1],[104,1],[106,1]]},"k":[48,49,120,55],"v":[{"d":{"df":2,"dc":[[30,1],[46,1]]}},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":1,"dc":[[65,1]]},"k":[65288],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[31616],"v":[{"k":[31216],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[46],"v":[{"k":[48],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]},{"k":[46],"v":[{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]}]},{"d":{"df":2,"dc":[[59,1],[75,1]]},"k":[48,93,37,49],"v":[{"d":{"df":2,"dc":[[33,2],[48,2]]},"k":[112,41,44],"v":[{"k":[120],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]}]},{"d":{"df":1,"dc":[[48,1]]},"k":[96],"v":[{"d":{"df":1,"dc":[[33,1]]}}]},{"d":{"df":2,"dc":[[97,1],[112,1]]}}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}},{"d":{"df":1,"dc":[[85,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[46,52,44,48,50],"v":[{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]},{"d":{"df":6,"dc":[[84,1],[85,2],[93,2],[110,2],[111,1],[118,2]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[56,93],"v":[{"k":[54],"v":[{"k":[55],"v":[{"k":[48],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":6,"dc":[[84,1],[85,2],[93,2],[110,2],[111,1],[118,2]]}}]}]},{"k":[57,52],"v":[{"k":[55],"v":[{"k":[50],"v":[{"k":[50],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[48],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[50,52],"v":[{"k":[56],"v":[{"k":[53],"v":[{"k":[50],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":13,"dc":[[38,1],[54,1],[55,2],[62,2],[63,1],[84,1],[85,2],[88,1],[93,2],[110,2],[111,1],[116,1],[118,2]]}},{"k":[44,46,48,51],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[49],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[51,93],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[93],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[65,2],[81,2]]}}]}]},{"k":[28431,30001,23545,23637,24314,22823],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[21508],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26159],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[27969],"v":[{"k":[31243],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[26080],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26356],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110],"v":[{"k":[35201],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[35201],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[36127],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[28041],"v":[{"k":[21450],"v":[{"k":[21040],"v":[{"k":[26085],"v":[{"k":[26399],"v":[{"k":[31561],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[26368],"v":[{"k":[22909],"v":[{"k":[33021],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[29992],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[24341],"v":[{"k":[23548],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[21319],"v":[{"k":[24207],"v":[{"k":[25110],"v":[{"k":[38477],"v":[{"k":[24207],"v":[{"k":[25490],"v":[{"k":[24067],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[20174],"v":[{"k":[22810],"v":[{"k":[21040],"v":[{"k":[23569],"v":[{"k":[26469],"v":[{"k":[23545],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[23383],"v":[{"k":[27597],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[31561],"v":[{"k":[26469],"v":[{"k":[25490],"v":[{"k":[24067],"v":[{"k":[12290],"v":[{"k":[24635],"v":[{"k":[20043],"v":[{"k":[65292],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[31243],"v":[{"k":[24230],"v":[{"k":[19978],"v":[{"k":[24341],"v":[{"k":[23548],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[35201],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[21051],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[27498],"v":[{"k":[26354],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[24038],"v":[{"k":[22270],"v":[{"k":[36807],"v":[{"k":[20110],"v":[{"k":[25153],"v":[{"k":[24179],"v":[{"k":[21270],"v":[{"k":[25513],"v":[{"k":[30422],"v":[{"k":[20102],"v":[{"k":[24819],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[65292],"v":[{"k":[21491],"v":[{"k":[22270],"v":[{"k":[36807],"v":[{"k":[20110],"v":[{"k":[22840],"v":[{"k":[22823],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[12290],"v":[{"k":[35201],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[27874],"v":[{"k":[21160],"v":[{"k":[30340],"v":[{"k":[21442],"v":[{"k":[32771],"v":[{"k":[21333],"v":[{"k":[20301],"v":[{"k":[65292],"v":[{"k":[20570],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[27874],"v":[{"k":[21160],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[12290],"v":[{"k":[27491],"v":[{"k":[30830],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[26159],"v":[{"k":[32447],"v":[{"k":[32422],"v":[{"k":[21344],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35758],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[25226],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[37327],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[19978],"v":[{"k":[26041],"v":[{"k":[65292],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[37327],"v":[{"k":[36739],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[19979],"v":[{"k":[26041],"v":[{"k":[20250],"v":[{"k":[33719],"v":[{"k":[24471],"v":[{"k":[26356],"v":[{"k":[21152],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[25968],"v":[{"k":[20154],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20064],"v":[{"k":[24815],"v":[{"k":[26159],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[39034],"v":[{"k":[26102],"v":[{"k":[38024],"v":[{"k":[21644],"v":[{"k":[33258],"v":[{"k":[19978],"v":[{"k":[32780],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[21435],"v":[{"k":[35266],"v":[{"k":[23519],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[22312],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[85,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]},{"d":{"df":3,"dc":[[55,1],[61,2],[78,2]]},"k":[111,118,104,119,112,62,100,99,41,105,123,33,101,109,91,102,96,115,116,108,106,97,114,117,98,103,110],"v":[{"k":[116,110,118,114],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[30,2]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[38,1]]}}]},{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]},{"d":{"df":1,"dc":[[65,1]]}}]},{"k":[109,105,97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[36,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]},"k":[58],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]},{"k":[101,114,105],"v":[{"k":[97,114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[31,1]]}}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[102],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[65,2]]}}]}]}]}]}]}]}]},{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[41],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]},{"k":[114,108,97,111],"v":[{"k":[111,105,101],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]},{"k":[99],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[118],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]},{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[99,115,100],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,2],[51,2]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105,116],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108,115],"v":[{"k":[121],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]}]},{"k":[49],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]},{"k":[101,97,111],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[31,1]]}}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]}}]}]}]},{"k":[110],"v":[{"k":[39],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[97,117,111,104,108],"v":[{"k":[116,114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[105,121],"v":[{"k":[101,99],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]},{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[116],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[94,1]]},"k":[41],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[61,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[108,109],"v":[{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[59,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[59,1]]}}]}]}]},{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[85,1]]}}]}]}]}]}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]},{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[35,4]]}},{"k":[115,116,46,110,41,105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[36,2]]}}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]},{"d":{"df":1,"dc":[[55,1]]},"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[68,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,2]]}},{"k":[41],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[56,2]]}}]}]}]}]}]}]}]}]}]},{"k":[100],"v":[{"k":[125],"v":[{"k":[37],"v":[{"k":[41],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]},{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110,120,103,46],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]}]},{"k":[99,112],"v":[{"k":[101],"v":[{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,2]]}}]}]}]},{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[108],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[103],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]},{"k":[118,97],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[99,112],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[45],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[111],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[116,113,101,117],"v":[{"k":[97,114],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]},{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]},{"k":[108],"v":[{"d":{"df":2,"dc":[[55,1],[62,1]]}}]},{"k":[101,114],"v":[{"d":{"df":2,"dc":[[55,1],[66,1]]}},{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46,45],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[104],"v":[{"k":[101,97,111],"v":[{"d":{"df":1,"dc":[[55,2]]},"k":[114],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[117],"v":[{"k":[103],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]},{"k":[105,111,101],"v":[{"k":[107,110],"v":[{"k":[101],"v":[{"d":{"df":2,"dc":[[55,8],[59,1]]}}]},{"k":[101],"v":[{"d":{"df":1,"dc":[[61,1]]},"k":[44,97],"v":[{"d":{"df":1,"dc":[[56,1]]}},{"k":[114],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[103],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[99],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[115,102],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[63,1]]}}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]},{"k":[115],"v":[{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[110,118,120,103,115,108,98],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]},{"k":[111],"v":[{"k":[105],"v":[{"k":[100],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]}]}]}]},{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[69,1]]}},{"k":[115],"v":[{"k":[111],"v":[{"d":{"df":1,"dc":[[94,1]]}}]}]},{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]},{"k":[111,105],"v":[{"k":[119],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[56,2]]},"k":[46],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]},{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[106,1]]}}]}]}]}]},{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[56,1]]}}]}]}]}]},{"k":[97,117],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]},{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[61,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[118],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[105,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[61,1],[78,1]]},"k":[111,114,101,58],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[32,1]]},"k":[46,105,44],"v":[{"d":{"df":1,"dc":[[31,1]]}},{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[35,1]]}}]}]},{"d":{"df":1,"dc":[[63,1]]}}]}]}]},{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":4,"dc":[[35,5],[51,4],[65,2],[81,2]]}}]}]}]}]}]},{"k":[97],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[61,2],[78,2]]}}]},{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[32,1]]}}]}]},{"d":{"df":15,"dc":[[55,1],[56,3],[59,2],[62,2],[64,7],[66,1],[75,2],[82,1],[94,3],[95,1],[113,1],[116,2],[119,3],[124,1],[128,2]]},"k":[44,46,96,41,51,34,93,65292],"v":[{"d":{"df":16,"dc":[[32,3],[35,7],[36,3],[38,1],[49,3],[51,7],[53,3],[54,1],[56,1],[59,10],[61,2],[75,10],[78,2],[95,8],[101,1],[115,6]]}},{"d":{"df":2,"dc":[[88,1],[96,1]]},"k":[53,51,56,52],"v":[{"d":{"df":2,"dc":[[90,1],[114,2]]},"k":[41,44],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]},{"d":{"df":2,"dc":[[59,2],[75,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,4],[53,4]]}}]},{"k":[44,41],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"k":[39],"v":[{"d":{"df":2,"dc":[[85,1],[110,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]},{"d":{"df":2,"dc":[[55,3],[62,1]]},"k":[46,44],"v":[{"d":{"df":1,"dc":[[55,1]]}},{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[55,1],[56,1]]}}]},{"k":[58],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[58],"v":[{"k":[50],"v":[{"k":[50],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[41],"v":[{"d":{"df":1,"dc":[[55,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[44],"v":[{"d":{"df":4,"dc":[[59,5],[61,2],[75,5],[78,2]]}}]},{"k":[19981,20250,21017],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]},{"k":[26174],"v":[{"k":[31034],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[30340],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]}]},{"d":{"df":2,"dc":[[102,1],[126,1]]},"k":[48,56,51,50,55,52,53,57,54,49,44],"v":[{"k":[44,46],"v":[{"d":{"df":4,"dc":[[32,1],[49,1],[85,1],[110,1]]}},{"k":[56],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[46,57,54,50],"v":[{"k":[55,49,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}}]},{"k":[44,93],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"d":{"df":2,"dc":[[56,2],[64,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[53],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[51],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[54],"v":[{"k":[53],"v":[{"k":[56],"v":[{"k":[51],"v":[{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[53],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[52,49],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]},{"k":[51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]},{"k":[46,44,41],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]}]},{"d":{"df":4,"dc":[[36,1],[53,1],[55,2],[62,2]]}},{"k":[39],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[44,46],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"k":[52,49,51],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[46],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[44,46],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"k":[52,55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,3],[53,3]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[46,49],"v":[{"k":[49,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[52],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[56,57,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44,93],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}},{"d":{"df":2,"dc":[[56,3],[64,3]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[46,44],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"d":{"df":1,"dc":[[77,1]]},"k":[54,48,53,51,50,55,49,57,46,93],"v":[{"k":[44,46],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]}},{"k":[52,53],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}},{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[48,46,54,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[33,1],[48,1]]}}]},{"k":[56,55,54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[56],"v":[{"k":[56],"v":[{"k":[53],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[61,2],[78,2],[85,1],[110,1]]}}]},{"k":[46],"v":[{"k":[56,52,55],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[46],"v":[{"k":[49,53],"v":[{"k":[44,93],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,4],[64,4]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]},{"k":[46,57,51],"v":[{"k":[53,56],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[93],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,1],[64,1]]}}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[93],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[48],"v":[{"k":[54],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[55],"v":[{"k":[55],"v":[{"k":[54],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]},{"k":[46,50],"v":[{"k":[56,55,57,49,54,52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]},{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44],"v":[{"d":{"df":4,"dc":[[36,1],[53,1],[56,1],[64,1]]}}]}]},{"k":[51],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]},{"k":[51],"v":[{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]},{"d":{"df":12,"dc":[[35,1],[51,1],[59,2],[62,1],[63,14],[65,1],[66,1],[75,2],[77,20],[81,2],[85,1],[110,1]]},"k":[46,53,51,41,54,55,48,50,101,44,52,56,34,116,93,65292,12289,57,49],"v":[{"d":{"df":5,"dc":[[55,1],[63,1],[68,1],[98,1],[106,1]]},"k":[50,120,48],"v":[{"d":{"df":2,"dc":[[32,1],[49,1]]},"k":[46],"v":[{"k":[48],"v":[{"d":{"df":1,"dc":[[76,1]]}}]}]},{"d":{"df":1,"dc":[[65,1]]},"k":[65288],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[31616],"v":[{"k":[31216],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[109,1]]},"k":[46],"v":[{"d":{"df":1,"dc":[[86,1]]},"k":[49],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[44],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]},{"k":[46,48],"v":[{"k":[49],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[93],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,1],[64,1]]}}]}]}]},{"k":[51],"v":[{"k":[52],"v":[{"k":[53],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[46,57,48],"v":[{"k":[57,51],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,2],[64,2]]}}]},{"k":[93],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[57],"v":[{"k":[52],"v":[{"k":[54],"v":[{"k":[48],"v":[{"k":[53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[57],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[50],"v":[{"k":[57],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[46,49],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]},{"k":[49],"v":[{"k":[48],"v":[{"k":[49],"v":[{"k":[49],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]},{"k":[50,44,112,48,93,37],"v":[{"k":[57],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[51],"v":[{"k":[57],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]},{"d":{"df":4,"dc":[[36,1],[53,1],[55,3],[62,3]]}},{"k":[120],"v":[{"k":[34],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]},{"d":{"df":1,"dc":[[82,1]]},"k":[48,46,44],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]},{"d":{"df":1,"dc":[[66,1]]}},{"d":{"df":2,"dc":[[97,1],[112,1]]}}]},{"d":{"df":2,"dc":[[88,1],[116,1]]}},{"d":{"df":1,"dc":[[90,1]]}}]},{"k":[49,44],"v":[{"k":[48],"v":[{"k":[57],"v":[{"k":[54],"v":[{"k":[55],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]},{"d":{"df":2,"dc":[[55,2],[62,2]]}}]},{"k":[50],"v":[{"k":[59],"v":[{"d":{"df":2,"dc":[[36,2],[53,2]]}}]}]},{"d":{"df":15,"dc":[[36,2],[53,2],[55,2],[56,1],[59,10],[62,2],[63,6],[64,1],[75,10],[84,1],[85,2],[93,2],[110,2],[111,1],[118,2]]}},{"k":[53],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[38,1],[54,1]]}}]}]}]},{"k":[50],"v":[{"k":[49],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[56,1]]}},{"k":[104],"v":[{"d":{"df":1,"dc":[[56,2]]}}]},{"k":[44,40],"v":[{"d":{"df":4,"dc":[[59,1],[75,1],[94,1],[119,1]]}},{"k":[101],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[65,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25105],"v":[{"k":[20204],"v":[{"k":[30528],"v":[{"k":[21147],"v":[{"k":[21152],"v":[{"k":[24378],"v":[{"k":[20102],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[21465],"v":[{"k":[20107],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[35762],"v":[{"k":[36848],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32972],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[25925],"v":[{"k":[20107],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487,22823,19968],"v":[{"k":[20197],"v":[{"k":[26681,28155],"v":[{"k":[25454],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[33394],"v":[{"k":[35843],"v":[{"k":[28176],"v":[{"k":[21464],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[26368],"v":[{"k":[26263],"v":[{"k":[21040],"v":[{"k":[26368],"v":[{"k":[27973],"v":[{"k":[26469],"v":[{"k":[20381],"v":[{"k":[29031],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[30340],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[25490],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"k":[20999],"v":[{"k":[35760],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[35768],"v":[{"k":[22810],"v":[{"k":[22270],"v":[{"k":[23618],"v":[{"k":[21644],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[38590],"v":[{"k":[20197],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21152],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[35013],"v":[{"k":[39280],"v":[{"k":[26469],"v":[{"k":[24378],"v":[{"k":[35843],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[26576],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[21160],"v":[{"k":[25928],"v":[{"k":[12289],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12289],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[31561],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[31361],"v":[{"k":[20986],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25159],"v":[{"k":[21306],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[36866],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[35013],"v":[{"k":[39280],"v":[{"k":[20250],"v":[{"k":[35753],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[20998],"v":[{"k":[24515],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[22402],"v":[{"k":[30452],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[29305],"v":[{"k":[21035],"v":[{"k":[38271],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33324],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[19981],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19977],"v":[{"k":[32500],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[19982],"v":[{"k":[19977],"v":[{"k":[32500],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[19981],"v":[{"k":[22826],"v":[{"k":[31934],"v":[{"k":[20934],"v":[{"k":[65292],"v":[{"k":[29978],"v":[{"k":[33267],"v":[{"k":[36824],"v":[{"k":[19981],"v":[{"k":[24471],"v":[{"k":[19981],"v":[{"k":[29468],"v":[{"k":[27979],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"k":[25165],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[39030],"v":[{"k":[31471],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]}]},{"k":[48,46],"v":[{"k":[93],"v":[{"d":{"df":2,"dc":[[92,1],[117,1]]}}]},{"k":[57],"v":[{"k":[57],"v":[{"k":[55],"v":[{"d":{"df":2,"dc":[[94,2],[119,2]]},"k":[34,59],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}},{"k":[34],"v":[{"d":{"df":2,"dc":[[94,1],[119,1]]}}]}]}]}]}]}]}]},{"k":[51,50,52,49,53,56,48,44,93],"v":[{"k":[46],"v":[{"k":[55],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[93],"v":[{"k":[44],"v":[{"d":{"df":4,"dc":[[34,1],[52,1],[56,1],[64,1]]}}]}]}]}]},{"k":[44,46],"v":[{"d":{"df":2,"dc":[[55,2],[62,2]]}},{"k":[49,53],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,3],[64,3]]}}]},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]},{"k":[46],"v":[{"k":[52],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,2],[64,2]]}}]}]}]},{"k":[46,56],"v":[{"k":[50],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]},"k":[44],"v":[{"d":{"df":2,"dc":[[56,3],[64,3]]}}]}]},{"k":[53],"v":[{"k":[50],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]}]},{"k":[46],"v":[{"k":[56],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]},{"k":[56],"v":[{"k":[44,93],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}},{"k":[44],"v":[{"d":{"df":2,"dc":[[56,1],[64,1]]}}]}]}]},{"k":[44,176],"v":[{"d":{"df":5,"dc":[[59,1],[75,1],[83,1],[92,1],[117,1]]}},{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[19981],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[85,2],[110,2]]}},{"d":{"df":2,"dc":[[94,1],[119,1]]}}]},{"d":{"df":2,"dc":[[34,1],[52,1]]}},{"d":{"df":8,"dc":[[35,5],[51,5],[56,3],[59,12],[61,6],[75,12],[78,6],[102,2]]}},{"k":[59,58],"v":[{"d":{"df":3,"dc":[[35,2],[61,2],[78,2]]}},{"d":{"df":1,"dc":[[55,1]]}}]},{"k":[123,46],"v":[{"k":[109,120],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[125],"v":[{"k":[105,110],"v":[{"k":[110,100],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]},{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]},{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[58],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[125],"v":[{"d":{"df":2,"dc":[[37,1],[47,1]]}}]}]}]}]}]}]},{"k":[103],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[40,106],"v":[{"k":[39],"v":[{"k":[100],"v":[{"k":[101,97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[113],"v":[{"k":[61],"v":[{"k":[39],"v":[{"d":{"df":2,"dc":[[35,1],[51,1]]}}]}]}]}]}]}]}]}]},{"k":[116],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[41],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[102],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":2,"dc":[[58,1],[71,1]]},"k":[40],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":2,"dc":[[58,2],[71,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[47],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[106],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":2,"dc":[[36,1],[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"d":{"df":2,"dc":[[35,2],[51,2]]}},{"d":{"df":2,"dc":[[35,1],[51,1]]}},{"k":[96],"v":[{"k":[96],"v":[{"k":[96],"v":[{"d":{"df":2,"dc":[[37,6],[47,6]]}}]}]}]},{"k":[91],"v":[{"k":[105,22270],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[37,1]]}}]}]}]}]},{"k":[29255],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108,104,119],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[95],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]},{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[95],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]}]}]}]},{"k":[104],"v":[{"k":[105,97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]},{"k":[116],"v":[{"d":{"df":1,"dc":[[38,1]]}}]}]}]}]},{"k":[27714],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]},{"k":[26415],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]},{"k":[20445],"v":[{"k":[29616],"v":[{"k":[26377],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[31561],"v":[{"k":[36164],"v":[{"k":[26009],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38750,26102,20102,20854,25928,20004],"v":[{"k":[24120],"v":[{"k":[22823],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[20320],"v":[{"k":[36935],"v":[{"k":[21040],"v":[{"k":[36807],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[24456],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[21035],"v":[{"k":[20154],"v":[{"k":[22312],"v":[{"k":[27492],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[20063],"v":[{"k":[36935],"v":[{"k":[21040],"v":[{"k":[24182],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[24341],"v":[{"k":[25806],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[20851],"v":[{"k":[38190],"v":[{"k":[23383],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[20320],"v":[{"k":[33258],"v":[{"k":[21161],"v":[{"k":[22320],"v":[{"k":[22312],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20381],"v":[{"k":[36182],"v":[{"k":[31038],"v":[{"k":[21306],"v":[{"k":[30340],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20505,65292,24182],"v":[{"k":[65292],"v":[{"k":[24320,25105],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[30011],"v":[{"k":[24067],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[8221],"v":[{"k":[25152],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[8220],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[37325],"v":[{"k":[32622],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21508],"v":[{"k":[33258],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[20043],"v":[{"k":[21644],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[22270],"v":[{"k":[26469],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[12290],"v":[{"k":[39038],"v":[{"k":[21517],"v":[{"k":[24605],"v":[{"k":[20041],"v":[{"k":[65292],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[8220],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[8221],"v":[{"k":[22312],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[32780],"v":[{"k":[20174],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[24635],"v":[{"k":[21644],"v":[{"k":[23601],"v":[{"k":[33021],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[24635],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[20026],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19981],"v":[{"k":[33021],"v":[{"k":[28385],"v":[{"k":[36275],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[26399],"v":[{"k":[26395],"v":[{"k":[45],"v":[{"k":[45],"v":[{"k":[31354],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[19981],"v":[{"k":[24212],"v":[{"k":[34987],"v":[{"k":[20854],"v":[{"k":[24038],"v":[{"k":[21491],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]},"k":[25968,36825],"v":[{"k":[25454],"v":[{"k":[34920],"v":[{"k":[20043],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[28789],"v":[{"k":[27963],"v":[{"k":[22320],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"k":[36724],"v":[{"k":[21644],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27573,20123],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[26377],"v":[{"k":[20102],"v":[{"k":[35832],"v":[{"k":[20010],"v":[{"k":[33021],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"k":[25509],"v":[{"k":[19979],"v":[{"k":[26469],"v":[{"k":[35201],"v":[{"k":[20026],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[21709],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22522],"v":[{"k":[30784],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21152],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[8221],"v":[{"k":[8220],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[8221],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[20013],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[36866],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[35201],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22320],"v":[{"k":[21033],"v":[{"k":[29992],"v":[{"k":[35821],"v":[{"k":[20041],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[19982],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25552],"v":[{"k":[39640],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[25928],"v":[{"k":[29575],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[34],"v":[{"k":[28023],"v":[{"k":[27915],"v":[{"k":[34],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12289],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[8220],"v":[{"k":[27801],"v":[{"k":[28448],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31181],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27492,20026],"v":[{"k":[65292],"v":[{"k":[22312,20174],"v":[{"k":[20570],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[21069],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[30830],"v":[{"k":[20445],"v":[{"k":[29616],"v":[{"k":[26377],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[31561],"v":[{"k":[36164],"v":[{"k":[26009],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23581],"v":[{"k":[35797],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[25110],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[30340],"v":[{"k":[36164],"v":[{"k":[26009],"v":[{"k":[21253],"v":[{"k":[25324],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[30456],"v":[{"k":[36739],"v":[{"k":[20110],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[32043],"v":[{"k":[33394],"v":[{"k":[32780],"v":[{"k":[35328],"v":[{"k":[65292],"v":[{"k":[27225],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[31881],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[32511],"v":[{"k":[33394],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[26377],"v":[{"k":[21033],"v":[{"k":[20110],"v":[{"k":[25552],"v":[{"k":[21319],"v":[{"k":[39135],"v":[{"k":[27442],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19988],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[20351],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[28201],"v":[{"k":[26262],"v":[{"k":[12289],"v":[{"k":[24184],"v":[{"k":[31119],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[24863],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[24773],"v":[{"k":[24863],"v":[{"k":[19982],"v":[{"k":[21507],"v":[{"k":[29980],"v":[{"k":[21697],"v":[{"k":[26102],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[30340],"v":[{"k":[24863],"v":[{"k":[35273],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[26041],"v":[{"k":[38754],"v":[{"k":[65292],"v":[{"k":[29980],"v":[{"k":[21697],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[30340],"v":[{"k":[38754],"v":[{"k":[21521],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[22823],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[26159],"v":[{"k":[20799],"v":[{"k":[31461],"v":[{"k":[21644],"v":[{"k":[22899],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[36825],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[26126],"v":[{"k":[24555],"v":[{"k":[12289],"v":[{"k":[21487],"v":[{"k":[29233],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"k":[24038],"v":[{"k":[20391],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[33394],"v":[{"k":[26356],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[26576],"v":[{"k":[31181],"v":[{"k":[21830],"v":[{"k":[21153],"v":[{"k":[12289],"v":[{"k":[30007],"v":[{"k":[24615],"v":[{"k":[32676],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[24038],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[33394],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[20351],"v":[{"k":[20154],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[29702],"v":[{"k":[24615],"v":[{"k":[21644],"v":[{"k":[20919],"v":[{"k":[38745],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[24863],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25163,36136,25991,31687,36523,25351],"v":[{"k":[20876],"v":[{"k":[30340],"v":[{"k":[25991,8220],"v":[{"k":[31456],"v":[{"d":{"df":1,"dc":[[40,1]]}}]},{"k":[24212],"v":[{"k":[29992],"v":[{"k":[31687],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]}]}]}]}]},{"k":[19978],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[30001],"v":[{"k":[20110],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[34987],"v":[{"k":[31227],"v":[{"k":[38500],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[21363],"v":[{"k":[20351],"v":[{"k":[20043],"v":[{"k":[21518],"v":[{"k":[35813],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[34987],"v":[{"k":[37325],"v":[{"k":[26032],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[25152],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[33410],"v":[{"k":[28857],"v":[{"k":[20063],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[19981],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340,20027,20171],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[32479],"v":[{"k":[19968],"v":[{"k":[35813],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[20316],"v":[{"k":[39118],"v":[{"k":[26684],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[26159],"v":[{"k":[22823],"v":[{"k":[30053],"v":[{"k":[27010],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32461],"v":[{"k":[36825],"v":[{"k":[20960],"v":[{"k":[31181],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[33539],"v":[{"k":[30068],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[20132],"v":[{"k":[21449],"v":[{"k":[65288],"v":[{"k":[21363],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[32454],"v":[{"k":[33410],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[21508],"v":[{"k":[26377],"v":[{"k":[21508],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[20559],"v":[{"k":[22909],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36890],"v":[{"k":[36807],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[23567],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[26469],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27809],"v":[{"k":[26377],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[23553],"v":[{"k":[35013],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[8221],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[19994],"v":[{"k":[21153],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21335],"v":[{"k":[38754],"v":[{"k":[21521],"v":[{"k":[37027],"v":[{"k":[20123],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25628,26032,25152,25353,30340,23450,20808,34987,19968,20107,22522,32452,35774,65292,12290,20540,22768,32500,21518,31532,25351,26174,25340,23454,22312,21672,24320,26377,37197,20102,36825,19981,29983,20110,35843,25171,65306,24050],"v":[{"k":[32034],"v":[{"k":[20851],"v":[{"k":[38190],"v":[{"k":[23383],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]},{"k":[24314],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]},{"k":[26377],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21644],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20551],"v":[{"k":[22914],"v":[{"k":[20320],"v":[{"k":[19981],"v":[{"k":[24819],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]},{"d":{"df":4,"dc":[[43,1],[51,1],[75,1],[110,1]]},"k":[20107,26679,32467,25968,32500,24773,31532,20540,25991,35268],"v":[{"k":[20214],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[24335],"v":[{"k":[31616],"v":[{"k":[20171],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]},{"k":[26500],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[23384],"v":[{"k":[25918],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]},{"k":[24230],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[21517],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[20917],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65307],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[19968],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20316,65292],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[24182],"v":[{"k":[29992],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]},{"k":[26412],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[21017],"v":[{"k":[31245],"v":[{"k":[26377],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]},{"k":[20041],"v":[{"k":[26377,26679],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[29238],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[65288],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]},{"k":[31227],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20877],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[20250],"v":[{"k":[21457],"v":[{"k":[29616],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[8220],"v":[{"k":[19981],"v":[{"k":[35265],"v":[{"k":[8221],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33324],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[21333],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[20214],"v":[{"k":[20998],"v":[{"k":[20026],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[19978],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[37117],"v":[{"k":[20250],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[21644],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[32622],"v":[{"k":[26679,12290,25968,65292,30340],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[26126],"v":[{"k":[26263],"v":[{"k":[12289],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23427],"v":[{"k":[32473],"v":[{"k":[23450],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[32452],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20250],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[20174],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[20173],"v":[{"k":[28982],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[20808],"v":[{"k":[32423],"v":[{"k":[39640],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[21069],"v":[{"k":[32773],"v":[{"k":[20250],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[32780],"v":[{"k":[21518],"v":[{"k":[32773],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[20102],"v":[{"k":[20123],"v":[{"k":[40635],"v":[{"k":[28902],"v":[{"k":[65306],"v":[{"k":[20551],"v":[{"k":[22914],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487,38656,24456,25903,8220,25968,96,38500,36825,26377,20363,22312,25105,91,20540,39292,31995,32780],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[28145],"v":[{"k":[33394],"v":[{"k":[27169],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[30475],"v":[{"k":[21040],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[22320],"v":[{"k":[26041],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]},{"k":[25345],"v":[{"k":[19981],"v":[{"k":[20889],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[26159],"v":[{"k":[20381],"v":[{"k":[25176],"v":[{"k":[20110],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[26469],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[46],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[99,97],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[40],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[41],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20102],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[36825],"v":[{"k":[20123],"v":[{"k":[35201],"v":[{"k":[32032],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[19981],"v":[{"k":[23569],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20813],"v":[{"k":[21435],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[30340],"v":[{"k":[27493],"v":[{"k":[39588],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[37325,23545,22312,20063,24341,23558,20351],"v":[{"k":[26032],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[20102],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21644],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[20570],"v":[{"k":[20102],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[12290],"v":[{"k":[20197],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[33394],"v":[{"k":[20026],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[32771],"v":[{"k":[37327],"v":[{"k":[20102],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[24230],"v":[{"k":[12289],"v":[{"k":[19982],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[24230],"v":[{"k":[12289],"v":[{"k":[30456],"v":[{"k":[37051],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[21644],"v":[{"k":[35856],"v":[{"k":[24230],"v":[{"k":[31561],"v":[{"k":[22240],"v":[{"k":[32032],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[30830],"v":[{"k":[20445],"v":[{"k":[33394],"v":[{"k":[35273],"v":[{"k":[36776],"v":[{"k":[35782],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[20154],"v":[{"k":[22763],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[28165],"v":[{"k":[26970],"v":[{"k":[22320],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[20102],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[23545],"v":[{"k":[23383],"v":[{"k":[20307],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[65292],"v":[{"k":[25351],"v":[{"k":[21521],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[31661],"v":[{"k":[22836],"v":[{"k":[65292],"v":[{"k":[36319],"v":[{"k":[38543],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[33394],"v":[{"k":[31561],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20248],"v":[{"k":[38597],"v":[{"k":[21448],"v":[{"k":[28165],"v":[{"k":[26224],"v":[{"k":[12290],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[25913],"v":[{"k":[36827],"v":[{"k":[20102],"v":[{"k":[23500],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[65292],"v":[{"k":[30830],"v":[{"k":[20445],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[19982],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21407],"v":[{"k":[20808],"v":[{"k":[30340],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]},{"k":[20570],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[25552],"v":[{"k":[39640],"v":[{"k":[21487],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[20154],"v":[{"k":[22763],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20837],"v":[{"k":[20102],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[91],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31995],"v":[{"k":[21015],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]},{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}},{"k":[22270],"v":[{"k":[30340],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[19978],"v":[{"k":[19968],"v":[{"k":[23567],"v":[{"k":[33410],"v":[{"k":[25552],"v":[{"k":[21040],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[25110],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[23427],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[30340],"v":[{"k":[21069],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[20869],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[65292],"v":[{"k":[21518],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[22806],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[23601],"v":[{"k":[24418],"v":[{"k":[25104],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22278],"v":[{"k":[29615],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]},{"k":[38750],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[20013],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[54,1],[81,1]]},"k":[26681],"v":[{"k":[25454],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[26377],"v":[{"k":[20123],"v":[{"k":[35768],"v":[{"k":[24046],"v":[{"k":[24322],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[32447],"v":[{"k":[24615],"v":[{"k":[34920],"v":[{"k":[8220],"v":[{"k":[12289],"v":[{"k":[8220],"v":[{"k":[26641],"v":[{"k":[8220],"v":[{"k":[12289],"v":[{"k":[8220],"v":[{"k":[22270],"v":[{"k":[8220],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"k":[20010],"v":[{"k":[20849],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[65288],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[65289],"v":[{"k":[8220],"v":[{"k":[30340],"v":[{"k":[38598],"v":[{"k":[21512],"v":[{"k":[12290],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[21547],"v":[{"k":[26377],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[8220],"v":[{"k":[21644],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[21333],"v":[{"k":[19968],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"k":[19968],"v":[{"k":[32500],"v":[{"k":[65289],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65288],"v":[{"k":[22810],"v":[{"k":[32500],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[26126],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[24230],"v":[{"k":[21517],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[24182],"v":[{"k":[38750],"v":[{"k":[24378],"v":[{"k":[21046],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[19968],"v":[{"k":[34892],"v":[{"k":[65288],"v":[{"k":[21015],"v":[{"k":[65289],"v":[{"k":[21040],"v":[{"k":[24213],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[19981],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[32500,65292,23545],"v":[{"k":[24230],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[24212],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65307],"v":[{"k":[32780],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[25104],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[29616],"v":[{"k":[24322,22797],"v":[{"k":[27493],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[21518],"v":[{"k":[19981],"v":[{"k":[31649],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[21482],"v":[{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26434],"v":[{"k":[30340],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]},{"k":[26356],"v":[{"k":[26032],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[19978],"v":[{"k":[38754],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[20013],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[19981],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[27491],"v":[{"k":[24120],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35810],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]},{"k":[21551],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]},{"k":[39640],"v":[{"k":[20142],"v":[{"k":[65288],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[65288],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[65289],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[30340],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[31227],"v":[{"k":[21040],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[20250],"v":[{"k":[36827],"v":[{"k":[20837],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"k":[20197],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[35813],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[31561],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[35299],"v":[{"k":[36825],"v":[{"k":[27425],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[20102],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[20540],"v":[{"k":[24471],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[30340],"v":[{"k":[26032],"v":[{"k":[29305],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[32477],"v":[{"k":[22823],"v":[{"k":[22810],"v":[{"k":[25968],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[30528],"v":[{"k":[20026],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[20570],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26679],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[20877],"v":[{"k":[25903,25512],"v":[{"k":[25345],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[28982],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[20173],"v":[{"k":[28982],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[26159],"v":[{"k":[20250],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25104],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[20808],"v":[{"k":[32423],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159],"v":[{"k":[25552],"v":[{"k":[39640],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[25972],"v":[{"k":[20102],"v":[{"k":[19978],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[46],"v":[{"k":[63],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[58],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21360],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[96],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19981],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25110],"v":[{"k":[24223],"v":[{"k":[24323],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24314],"v":[{"k":[19968,22270],"v":[{"k":[20010],"v":[{"k":[26368,20363],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[21487],"v":[{"k":[22797],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]},{"k":[23376],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[23558],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[20182],"v":[{"k":[20154],"v":[{"k":[26356],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[22797],"v":[{"k":[29616],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[12290],"v":[{"k":[65288],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[65292],"v":[{"k":[21407],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[34987],"v":[{"k":[24223],"v":[{"k":[24323],"v":[{"k":[12290],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[40,1],[45,1],[47,1],[48,1],[62,3],[119,1]]},"k":[32773,35831],"v":[{"d":{"df":6,"dc":[[40,1],[42,1],[45,2],[51,3],[62,2],[64,2]]},"k":[20063,20808,65292,25353,65306],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35774],"v":[{"k":[32622],"v":[{"k":[23436],"v":[{"k":[20854],"v":[{"k":[23427],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31354],"v":[{"k":[30340],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21518],"v":[{"k":[22635],"v":[{"k":[20837],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20570],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[27714],"v":[{"k":[26032],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]},{"k":[23376,22914],"v":[{"k":[24212],"v":[{"k":[23613],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20197],"v":[{"k":[26368],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[22797],"v":[{"k":[29616],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[21435],"v":[{"k":[38500],"v":[{"k":[19981],"v":[{"k":[24517],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21644],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35753],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[20154],"v":[{"k":[26356],"v":[{"k":[24555],"v":[{"k":[36895],"v":[{"k":[22320],"v":[{"k":[23450],"v":[{"k":[20301],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[35753],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[26356],"v":[{"k":[24555],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[12290],"v":[{"k":[26356],"v":[{"k":[35814],"v":[{"k":[32454],"v":[{"k":[30340],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[35831],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65306,65292,26576],"v":[{"d":{"df":2,"dc":[[51,4],[75,2]]}},{"k":[91,22312],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[20010],"v":[{"k":[29980],"v":[{"k":[21697],"v":[{"k":[24215],"v":[{"k":[21508],"v":[{"k":[31867],"v":[{"k":[29980],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26029],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]},{"k":[21578],"v":[{"d":{"df":1,"dc":[[40,1]]}}]},{"k":[26524,20309,19978,19979,26377],"v":[{"d":{"df":1,"dc":[[75,3]]},"k":[19981,27809,21482,26159,20320,22270,20026,20027,20445,38656,24819,25105,35201,25968,35774,26377,20351,20043,21322,24076],"v":[{"k":[31526,26159,25351],"v":[{"k":[21512],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[25110],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[39044],"v":[{"k":[26399],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[24456],"v":[{"k":[26377],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[40,1]]}},{"k":[23450],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[33021,26377],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[31572],"v":[{"k":[22797],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21457],"v":[{"k":[36865],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[33267],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[32452],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31867,22352],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[20551],"v":[{"k":[22914],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[26377],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26631],"v":[{"k":[31995],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24819],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[20197],"v":[{"k":[20943],"v":[{"k":[23569],"v":[{"k":[21253],"v":[{"k":[20307],"v":[{"k":[31215],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[96],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[65292],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[20013],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159,35273,21457],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]},{"k":[24471],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[30340],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[30772],"v":[{"k":[22351],"v":[{"k":[20102],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[22312],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22359],"v":[{"k":[22806],"v":[{"k":[38754],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[38459],"v":[{"k":[27490],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[35813],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29616],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22359],"v":[{"k":[24182],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[34987],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[20808],"v":[{"k":[26816],"v":[{"k":[26597],"v":[{"k":[35813],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[35821],"v":[{"k":[27861],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[19981],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[19981],"v":[{"k":[31561],"v":[{"k":[20110],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,2]]}},{"k":[39064],"v":[{"k":[20445],"v":[{"k":[23384],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]},{"k":[23384],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]},{"k":[35201],"v":[{"k":[26377,23545],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[39035],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26377],"v":[{"k":[21518],"v":[{"k":[32512],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[20182,21319,23558],"v":[{"k":[20204],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[32423],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[22270],"v":[{"k":[24418],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[20026],"v":[{"k":[20219],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[38656,24819,24076],"v":[{"k":[35201],"v":[{"k":[23545],"v":[{"k":[26085],"v":[{"k":[26399],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[65288],"v":[{"k":[106],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24314],"v":[{"k":[31435],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[27178],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[26159],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26395],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[22312],"v":[{"k":[27178],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[21644],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[19978],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[22312],"v":[{"k":[31515],"v":[{"k":[21345],"v":[{"k":[23572],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[21602],"v":[{"k":[65311],"v":[{"k":[31572],"v":[{"k":[26696],"v":[{"k":[20063],"v":[{"k":[24456],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[35201],"v":[{"k":[25226],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[20540],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[35774,21152,21644],"v":[{"k":[32622],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[36733],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36739],"v":[{"k":[38271],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31354],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[30011],"v":[{"k":[24067],"v":[{"k":[19978],"v":[{"k":[20063],"v":[{"k":[20250],"v":[{"k":[35753],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[35273],"v":[{"k":[24471],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20026],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]},{"k":[32622],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[64,2]]}}]}]},{"k":[31867,22810],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[24819],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21040],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[37327],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[24635],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[36129],"v":[{"k":[29486],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[21592],"v":[{"k":[23545],"v":[{"k":[24635],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[39069],"v":[{"k":[30340],"v":[{"k":[36129],"v":[{"k":[29486],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[32773],"v":[{"k":[22312,26377],"v":[{"d":{"df":1,"dc":[[81,1]]}},{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[21069],"v":[{"k":[26159],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[96],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[24452],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[39033],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[26159],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[22312],"v":[{"k":[26576],"v":[{"k":[20123],"v":[{"k":[20998],"v":[{"k":[36776],"v":[{"k":[29575],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20869],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[23567],"v":[{"k":[20110],"v":[{"k":[22806],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[12290],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26395],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20063],"v":[{"k":[19981],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351,21306],"v":[{"k":[29992],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]},{"k":[20998],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"k":[21738],"v":[{"k":[37324],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[25152],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[24605],"v":[{"k":[36335],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"k":[65288],"v":[{"k":[105],"v":[{"k":[65289],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[65288],"v":[{"k":[105],"v":[{"k":[105],"v":[{"k":[65289],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21040],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65306,22270],"v":[{"d":{"df":1,"dc":[[71,1]]}},{"k":[31034,65292,20154],"v":[{"k":[20363],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[12300,26576],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[12301],"v":[{"k":[12300],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[12301],"v":[{"k":[12300],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[12301],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[24182],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[22826],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[27969],"v":[{"k":[22833],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20174],"v":[{"k":[12300],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[12301],"v":[{"k":[21040],"v":[{"k":[12300],"v":[{"k":[21672],"v":[{"k":[35810],"v":[{"k":[12301],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[20943],"v":[{"k":[23569],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[37325],"v":[{"k":[28857],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[20026],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[21672],"v":[{"k":[35810],"v":[{"k":[37327],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[20943],"v":[{"k":[23569],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[21672],"v":[{"k":[35810],"v":[{"k":[30340],"v":[{"k":[20837],"v":[{"k":[21475],"v":[{"k":[19981],"v":[{"k":[22815],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[8],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24188],"v":[{"k":[20799],"v":[{"k":[22253],"v":[{"k":[19978],"v":[{"k":[21608],"v":[{"k":[36164],"v":[{"k":[37329],"v":[{"k":[27969],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[20013],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[20102],"v":[{"k":[39044],"v":[{"k":[31639],"v":[{"k":[21644],"v":[{"k":[24320],"v":[{"k":[38144],"v":[{"k":[12290],"v":[{"k":[21442],"v":[{"k":[19982],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30340],"v":[{"k":[20845],"v":[{"k":[20010],"v":[{"k":[26041],"v":[{"k":[38754],"v":[{"k":[26159],"v":[{"k":[39135],"v":[{"k":[21697],"v":[{"k":[12289],"v":[{"k":[29609],"v":[{"k":[20855],"v":[{"k":[12289],"v":[{"k":[32472],"v":[{"k":[26412],"v":[{"k":[12289],"v":[{"k":[21307],"v":[{"k":[30103],"v":[{"k":[12289],"v":[{"k":[38376],"v":[{"k":[31080],"v":[{"k":[12289],"v":[{"k":[26381],"v":[{"k":[39280],"v":[{"k":[12290],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21475],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21452],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[20391],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[30007],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20391],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[22899],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[26159],"v":[{"k":[21333],"v":[{"k":[32431],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[31867],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[36127],"v":[{"k":[25968],"v":[{"k":[12290],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[65292],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"k":[23558],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24207],"v":[{"k":[21015],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[26356],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351,24517],"v":[{"k":[29992],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]},{"k":[26495,24335],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19979],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[25353,36890,19988,19981,27809],"v":[{"k":[29031],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[35814],"v":[{"k":[32454],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]},{"k":[36807],"v":[{"d":{"df":1,"dc":[[42,1]]}}]},{"k":[25351,65292],"v":[{"k":[23450],"v":[{"k":[20102],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[38024],"v":[{"k":[23545],"v":[{"k":[26377],"v":[{"k":[26356],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[26080],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[24230],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[39640],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[24230],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[23558],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20316],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25903,26159],"v":[{"k":[25345],"v":[{"k":[32431],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[22235],"v":[{"k":[20010],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[31526],"v":[{"k":[30340],"v":[{"k":[21491],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[26159],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[37117],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[12290],"v":[{"k":[35814],"v":[{"k":[24773],"v":[{"k":[35831],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26377],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35810],"v":[{"k":[31867],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]},{"k":[38382,25171,26694,35821,65292,20215,12290,22270,31561,21487,24037],"v":[{"k":[31572],"v":[{"k":[24179],"v":[{"k":[21488],"v":[{"k":[19978],"v":[{"k":[25552],"v":[{"k":[38382],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]},{"k":[21253],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26500],"v":[{"k":[24314],"v":[{"k":[65292],"v":[{"k":[26412],"v":[{"k":[25991],"v":[{"k":[23558],"v":[{"k":[20250],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26550],"v":[{"k":[30340],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[65292],"v":[{"k":[106],"v":[{"k":[97],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[12289],"v":[{"k":[112],"v":[{"k":[121],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[12289],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35328],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]},{"k":[115,20882,29616],"v":[{"k":[118],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]},{"k":[21495],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[20173],"v":[{"k":[19981],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[20110],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]},{"d":{"df":2,"dc":[[51,1],[74,1]]},"k":[24403],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[34920],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[21547],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[12290],"v":[{"k":[36825,26377],"v":[{"k":[20123],"v":[{"k":[30340],"v":[{"k":[22320],"v":[{"k":[26041],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[32447],"v":[{"k":[23485],"v":[{"k":[12289],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20102],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23601],"v":[{"k":[33267],"v":[{"k":[23569],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20570],"v":[{"k":[21040],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20107],"v":[{"k":[24773],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33021],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[22320],"v":[{"k":[26041],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20855],"v":[{"k":[24322],"v":[{"k":[27493],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21518],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[25216,20860],"v":[{"k":[26415],"v":[{"k":[31867],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]},{"k":[23481],"v":[{"k":[24615],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[20182,20540,23450,20313,20013,23454,27425],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[38382,27880,22823,30340],"v":[{"k":[39064],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21457],"v":[{"k":[36865],"v":[{"k":[33521],"v":[{"k":[25991],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[33267],"v":[{"k":[37038],"v":[{"k":[20214],"v":[{"k":[32452],"v":[{"d":{"df":1,"dc":[[40,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24847],"v":[{"k":[20107],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]},{"k":[37096],"v":[{"k":[20998],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[20027],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]},{"k":[22914],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[20041],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[33258,30340],"v":[{"k":[21160],"v":[{"k":[32447],"v":[{"k":[24615],"v":[{"k":[35745],"v":[{"k":[31639],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,2]]}}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[26377],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[20381],"v":[{"k":[27425],"v":[{"k":[39034],"v":[{"k":[26102],"v":[{"k":[38024],"v":[{"k":[25490],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292,23384],"v":[{"k":[91,19979,96],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[24038],"v":[{"k":[36793],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[30340],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[24050],"v":[{"k":[19981],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25110],"v":[{"k":[24223],"v":[{"k":[24323],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[118],"v":[{"k":[111],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[22240],"v":[{"k":[26524],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[25237],"v":[{"k":[25918],"v":[{"k":[37327],"v":[{"k":[21644],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[29575],"v":[{"k":[26159],"v":[{"k":[27491],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[35828],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[29575],"v":[{"k":[39640],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[26159],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[24191],"v":[{"k":[21578],"v":[{"k":[25237],"v":[{"k":[25918],"v":[{"k":[37327],"v":[{"k":[22810],"v":[{"k":[36896],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26377],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[30340],"v":[{"k":[27491],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[26377],"v":[{"k":[36275],"v":[{"k":[22815],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[30001],"v":[{"k":[21435],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[25237],"v":[{"k":[25918],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[21435],"v":[{"k":[35266],"v":[{"k":[23519],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[91],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[28304],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[24050],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[49,1]]},"k":[20320,21069,22270,36825,20854,8220],"v":[{"k":[26377],"v":[{"k":[8220],"v":[{"k":[19981],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[25104],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[26679],"v":[{"k":[8221],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[8220],"v":[{"k":[19981],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[20987],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[25152],"v":[{"k":[23646],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[12290],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"k":[19981],"v":[{"k":[35201],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[37117],"v":[{"k":[19981],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[35748],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[36755],"v":[{"k":[20837],"v":[{"k":[26469],"v":[{"k":[33258],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20182],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[25968],"v":[{"k":[20540],"v":[{"k":[21450],"v":[{"k":[21487],"v":[{"k":[36716],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[21644],"v":[{"k":[8220],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[36716],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[21644],"v":[{"k":[8220],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[8221],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[30693],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[31216],"v":[{"k":[21628],"v":[{"k":[8220],"v":[{"k":[21518],"v":[{"k":[32773],"v":[{"k":[8221],"v":[{"k":[20026],"v":[{"k":[8220],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[8221],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26041],"v":[{"d":{"df":1,"dc":[[44,1]]},"k":[23454],"v":[{"k":[20363],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[22270,30340],"v":[{"k":[34920],"v":[{"k":[31867,25152],"v":[{"k":[22411],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]},{"k":[25551],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22823],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[34920],"v":[{"k":[8221],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[65292],"v":[{"k":[19978],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[37117],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[26469],"v":[{"k":[23481],"v":[{"k":[32435],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25226],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21160,25968],"v":[{"k":[20316],"v":[{"k":[21644],"v":[{"k":[21160],"v":[{"k":[20316],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[20256],"v":[{"k":[36755],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[30340],"v":[{"k":[23384],"v":[{"k":[20648],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[21069],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21306],"v":[{"d":{"df":1,"dc":[[44,1]]},"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[38598],"v":[{"d":{"df":1,"dc":[[41,1]]}}]}]}]}]}]}]}]},{"k":[22914,35774],"v":[{"k":[20320,26159,25968],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[96],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[109],"v":[{"k":[96],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[96],"v":[{"k":[121],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[31561],"v":[{"k":[21253],"v":[{"k":[31649],"v":[{"k":[29702],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[8220],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[8220],"v":[{"k":[65292],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[120],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[23548],"v":[{"k":[20986],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[39029,20027],"v":[{"k":[38754],"v":[{"k":[20013],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[39029],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[39029],"v":[{"k":[37117],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39064],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]},{"k":[24615,23450,27530],"v":[{"k":[21482],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]},{"k":[32452],"v":[{"k":[21512],"v":[{"k":[20197],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20570],"v":[{"k":[20986],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[34920],"v":[{"k":[26684],"v":[{"k":[12289],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[32447],"v":[{"k":[31561],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65306],"v":[{"k":[22270],"v":[{"k":[26631],"v":[{"k":[12289],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[32447],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[22359],"v":[{"k":[12289],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[34920],"v":[{"k":[26684],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35013],"v":[{"d":{"df":1,"dc":[[42,2]]},"k":[26041],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351,22312],"v":[{"k":[29992],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[21629],"v":[{"k":[20196],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]},{"k":[22238],"v":[{"k":[35843],"v":[{"k":[20989],"v":[{"k":[25968],"v":[{"k":[20013],"v":[{"k":[33719],"v":[{"k":[24471],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21517],"v":[{"k":[12289],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[21518],"v":[{"k":[22312],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20179],"v":[{"k":[24211],"v":[{"k":[20013],"v":[{"k":[32034],"v":[{"k":[24341],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[20854],"v":[{"k":[23427],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[21518],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[28014],"v":[{"k":[23618],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38656,20998,34892,21015,29031],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":2,"dc":[[42,1],[81,2]]},"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[118],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[22909],"v":[{"k":[22788],"v":[{"k":[26159],"v":[{"k":[20551],"v":[{"k":[22914],"v":[{"k":[20320],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20064],"v":[{"k":[24815],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[26356],"v":[{"k":[26131],"v":[{"k":[20110],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[21644],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[28982],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21407],"v":[{"k":[29702],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25226],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24378],"v":[{"k":[35843],"v":[{"k":[30340],"v":[{"k":[26368],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[65288],"v":[{"k":[19981],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[26159],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[65289],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[26368],"v":[{"k":[31361],"v":[{"k":[20986],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920,29255,24038,20363,24418,30340],"v":[{"k":[21644,23481,30340,45,23454,39068],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]},{"k":[22120],"v":[{"k":[21450],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]},{"k":[22270],"v":[{"k":[24418],"v":[{"k":[26102],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[21518],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[22312],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[24320],"v":[{"k":[20851],"v":[{"k":[26102],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[98],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[72,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[33394],"v":[{"k":[35201],"v":[{"k":[21563],"v":[{"k":[21512],"v":[{"k":[24120],"v":[{"k":[35782],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]},{"k":[23454],"v":[{"k":[38469],"v":[{"k":[23384],"v":[{"k":[25918],"v":[{"k":[22320],"v":[{"k":[22336],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]},{"k":[20391],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]},{"d":{"df":1,"dc":[[52,1]]},"k":[24320,26159,19968,30340,20108,19977,27880,35201],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[21482],"v":[{"k":[20250],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[23545],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[21306],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[27880],"v":[{"k":[37322],"v":[{"k":[12289],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[12289],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[31561],"v":[{"k":[26469],"v":[{"k":[26631],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[35760],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25110],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[35813],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12289],"v":[{"k":[21364],"v":[{"k":[26159],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[30340],"v":[{"k":[38053],"v":[{"k":[21273],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33324,58],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[21491],"v":[{"k":[19978],"v":[{"k":[35282],"v":[{"k":[12289],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[24213],"v":[{"k":[37096],"v":[{"k":[12289],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[27178],"v":[{"k":[25490],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[32437],"v":[{"k":[25490],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"k":[12290],"v":[{"k":[36824],"v":[{"k":[35201],"v":[{"k":[32508],"v":[{"k":[21512],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[26159],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[21738],"v":[{"k":[31181],"v":[{"k":[25670],"v":[{"k":[25918],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[32437],"v":[{"k":[21521],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[32039],"v":[{"k":[24352],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[21306],"v":[{"k":[37327],"v":[{"k":[36807],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[12289],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[25670],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[19979],"v":[{"k":[26041],"v":[{"k":[12290],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[26159],"v":[{"k":[20960],"v":[{"k":[31181],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[30340],"v":[{"k":[25670],"v":[{"k":[25918],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[52,1]]}}]},{"k":[39068],"v":[{"k":[33394],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[26377],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"k":[31181],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12289],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[25152],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[58],"v":[{"d":{"df":1,"dc":[[52,1]]}}]},{"k":[58],"v":[{"d":{"df":1,"dc":[[52,1]]}}]},{"k":[24847],"v":[{"k":[20107],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]},{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[35270],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[20123],"v":[{"k":[21452],"v":[{"k":[36724],"v":[{"k":[22270],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20102],"v":[{"k":[22810],"v":[{"k":[31181],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[35201],"v":[{"k":[26377],"v":[{"k":[25152],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31867,20803,30340,65288,22823],"v":[{"k":[21035],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32032],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[26102,38468],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[24102],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[34987],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24418,22823],"v":[{"k":[29366],"v":[{"d":{"df":1,"dc":[[119,1]]}}]},{"k":[23567],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]},{"k":[115],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[65289],"v":[{"k":[25351],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[8220],"v":[{"k":[28857],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[12290],"v":[{"k":[26377],"v":[{"k":[19977],"v":[{"k":[31867],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[21487],"v":[{"k":[36873],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23567],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":3,"dc":[[121,1],[122,1],[128,1]]}}]}]}]}]}]},{"k":[20379,31034],"v":[{"k":[30340,20102,19968],"v":[{"k":[25353,25968],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[26469],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[24517],"v":[{"k":[39035],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[22810,36724,20016,26356],"v":[{"k":[31181],"v":[{"k":[23433,26032],"v":[{"k":[35013],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[20219],"v":[{"k":[24847],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[23494],"v":[{"k":[38598],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[33021],"v":[{"k":[28165],"v":[{"k":[26224],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[12289],"v":[{"k":[20934],"v":[{"k":[30830],"v":[{"k":[34920],"v":[{"k":[24847],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"d":{"df":1,"dc":[[49,3]]}}]},{"k":[23500],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[65292],"v":[{"k":[21253],"v":[{"k":[25324],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22909],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[32452,26694],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"d":{"df":1,"dc":[[77,1]]},"k":[65288],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26368],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[24335],"v":[{"k":[22320],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[35814],"v":[{"k":[32454],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24515],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[26680],"v":[{"k":[24515],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[26579],"v":[{"d":{"df":1,"dc":[[45,1]]},"k":[22120,27169,20195],"v":[{"d":{"df":1,"dc":[[45,2]]},"k":[65292,21644,12290,26469,21487,65288,26102,93],"v":[{"k":[27880,20174,38656,25110,25105],"v":[{"k":[24847],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]},{"k":[32780],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"k":[21482],"v":[{"k":[39035],"v":[{"k":[22312],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32773],"v":[{"k":[21333],"v":[{"k":[29420],"v":[{"k":[32500],"v":[{"k":[25252],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[26041],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"d":{"df":1,"dc":[[45,2]]}},{"d":{"df":1,"dc":[[45,2]]}},{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25913],"v":[{"k":[21892],"v":[{"k":[12290],"v":[{"k":[22823],"v":[{"k":[30053],"v":[{"k":[24471],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[36816],"v":[{"k":[34892],"v":[{"k":[22312],"v":[{"k":[20302],"v":[{"k":[31471],"v":[{"k":[23433],"v":[{"k":[21331],"v":[{"k":[26426],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33021],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]},{"k":[65292],"v":[{"k":[33039],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[25506],"v":[{"k":[27979],"v":[{"k":[24182],"v":[{"k":[21482],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[35270],"v":[{"k":[22270],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[21464],"v":[{"k":[21160],"v":[{"k":[37117],"v":[{"k":[24341],"v":[{"k":[36215],"v":[{"k":[30011],"v":[{"k":[24067],"v":[{"k":[23436],"v":[{"k":[20840],"v":[{"k":[37325],"v":[{"k":[32472],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[33021],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25552],"v":[{"k":[39640],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[24103],"v":[{"k":[29575],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[39057],"v":[{"k":[32321],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[12290],"v":[{"k":[20197],"v":[{"k":[24448],"v":[{"k":[36825],"v":[{"k":[31867],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[52],"v":[{"k":[46],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[50],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[65292,21017,30340],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[30340],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[20013],"v":[{"k":[23601],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[20877],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[26080],"v":[{"k":[38656],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[27169],"v":[{"k":[22359],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[26102],"v":[{"k":[20505],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[25226],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[30721],"v":[{"k":[20063],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[36827],"v":[{"k":[26469],"v":[{"k":[65292],"v":[{"k":[38500],"v":[{"k":[27492],"v":[{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[26377],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20381],"v":[{"k":[36182],"v":[{"k":[30340],"v":[{"k":[25913],"v":[{"k":[21160],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[62,4],[81,4],[110,1]]},"k":[24517,36716,21478,21517,25442,29992],"v":[{"k":[39035],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]},{"k":[25442],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[40],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[30446],"v":[{"k":[21069],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[33021],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[22312],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31354],"v":[{"k":[38388],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[34892],"v":[{"k":[31526],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[25442],"v":[{"k":[34892],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]},{"k":[26469],"v":[{"k":[25511],"v":[{"k":[21046],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[30001],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]},{"k":[20876,65306,24847],"v":[{"k":[24517],"v":[{"k":[39035],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[42,2]]}}]}]}]}]}]},{"k":[24403,36825],"v":[{"k":[21069],"v":[{"k":[26576],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[20381],"v":[{"k":[28982],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20381],"v":[{"k":[36182],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[24182],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[65306,65292,32500,20107,36825,21306],"v":[{"k":[22312,29702,22914,96,35813],"v":[{"d":{"df":1,"dc":[[53,1]]}},{"k":[35770],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[26524],"v":[{"k":[19981],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]},{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21482],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[36739],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[20307],"v":[{"k":[31215],"v":[{"k":[32780],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26159],"v":[{"k":[20840],"v":[{"k":[37327],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20851],"v":[{"k":[27880],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27599,25442,36923,36825,26032],"v":[{"k":[20010],"v":[{"k":[22806],"v":[{"k":[37096],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"k":[21517],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34892],"v":[{"k":[20173],"v":[{"k":[26159],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[36753],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[20808],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[37324],"v":[{"k":[26159],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[22359],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[30418],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[20013],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[24207],"v":[{"k":[21495],"v":[{"k":[65288],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[65289],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39033],"v":[{"d":{"df":2,"dc":[[72,1],[73,1]]}}]},{"k":[20214],"v":[{"k":[20107],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[27425],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]},{"k":[21035],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[31354],"v":[{"k":[8221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[19982],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19979,21475],"v":[{"k":[26469],"v":[{"k":[30340,25105],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[23601],"v":[{"k":[36319],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[23558],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[23433],"v":[{"k":[35013],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[30446],"v":[{"k":[24405],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27880],"v":[{"k":[20876],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[35201],"v":[{"k":[27880,32473,20877],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[27880,65292],"v":[{"k":[24847],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[30340],"v":[{"k":[20307],"v":[{"k":[31215],"v":[{"k":[26159],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351,36825,25955],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[22312],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]},{"k":[37324],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]},{"k":[28857],"v":[{"k":[22270],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[26377],"v":[{"k":[21147],"v":[{"k":[22320],"v":[{"k":[35777],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20986],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[65292],"v":[{"k":[26368],"v":[{"k":[23567,22823],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[21333],"v":[{"k":[29420],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[96],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[96],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[22312,24378,21487,36824,25552,20063,21457,20197,30475,24076,36890],"v":[{"k":[31034,35774],"v":[{"k":[20363],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[8221],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[30340],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[24403],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[12290],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[22312],"v":[{"k":[20320],"v":[{"k":[30340],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35745],"v":[{"k":[26032],"v":[{"k":[29256],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[26080],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[32771],"v":[{"k":[37327],"v":[{"k":[20381],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[33394],"v":[{"k":[20540],"v":[{"k":[37117],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[21453],"v":[{"k":[22797],"v":[{"k":[27979],"v":[{"k":[35797],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[36776],"v":[{"k":[35782],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[28165],"v":[{"k":[26970],"v":[{"k":[22320],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[8203],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28872],"v":[{"k":[27426],"v":[{"k":[36814],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[20204],"v":[{"k":[91],"v":[{"k":[21453],"v":[{"k":[39304],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[41],"v":[{"k":[32473],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[20307],"v":[{"k":[39564],"v":[{"k":[21644],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[20570],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[35774,20351,29992],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[32452],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[22810],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[21487],"v":[{"k":[36873],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20379],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[25903,25552],"v":[{"k":[25345],"v":[{"k":[20102],"v":[{"k":[36923],"v":[{"k":[36753],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[31526],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[20379],"v":[{"k":[20102],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[26469],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[20027],"v":[{"k":[21160],"v":[{"k":[25511],"v":[{"k":[21046],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"k":[24067],"v":[{"k":[23616],"v":[{"k":[31574],"v":[{"k":[30053],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[25302],"v":[{"k":[21160],"v":[{"k":[12289],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22312],"v":[{"k":[30011],"v":[{"k":[24067],"v":[{"k":[36793],"v":[{"k":[32536],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[24341],"v":[{"k":[23548],"v":[{"k":[32447],"v":[{"k":[21644],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[20173],"v":[{"k":[21487],"v":[{"k":[32852],"v":[{"k":[21160],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[20851],"v":[{"k":[32852],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29616],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[24456],"v":[{"k":[22823],"v":[{"k":[19968],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26368],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[20026],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[26469],"v":[{"k":[30475],"v":[{"k":[30475],"v":[{"k":[26032],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[27973],"v":[{"k":[33394],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[21644],"v":[{"k":[28145],"v":[{"k":[33394],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[31038],"v":[{"k":[21306],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[20102],"v":[{"k":[24456],"v":[{"k":[22810],"v":[{"k":[37239],"v":[{"k":[28843],"v":[{"k":[30340],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[24448],"v":[{"k":[24448],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[32780],"v":[{"k":[21462],"v":[{"k":[24039],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23545],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[20316],"v":[{"k":[20102],"v":[{"k":[20840],"v":[{"k":[38754],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[65292],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[20102],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[30690],"v":[{"k":[37327],"v":[{"k":[36335],"v":[{"k":[24452],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[12289],"v":[{"k":[20063],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[20102],"v":[{"k":[38170],"v":[{"k":[28857],"v":[{"k":[65288],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[12289],"v":[{"k":[36827],"v":[{"k":[24230],"v":[{"k":[26465],"v":[{"k":[65288],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[22278],"v":[{"k":[35282],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26395],"v":[{"k":[22914],"v":[{"k":[27492],"v":[{"k":[24378],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[32780],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[20307],"v":[{"k":[39564],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[20851],"v":[{"k":[27880],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[38754],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24120],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[26469],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[26377],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[26126],"v":[{"k":[30830],"v":[{"k":[30340],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[22312],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[21306],"v":[{"k":[38388],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[20869],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20027],"v":[{"k":[21160],"v":[{"k":[22320],"v":[{"k":[21435],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110,31532,20004,24212,25991,36825,20195,27599,35843],"v":[{"k":[20351,37197,26377,24403,22270,20854,31867,19968,25240,25968,24320],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]},{"k":[32622],"v":[{"k":[39033],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]},{"k":[20123],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[36275],"v":[{"k":[20197],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[20960],"v":[{"k":[30334],"v":[{"k":[20960],"v":[{"k":[21315],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[22320],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21069],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20020],"v":[{"k":[26102],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[20889],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21487],"v":[{"k":[28378],"v":[{"k":[21160],"v":[{"k":[32763],"v":[{"k":[39029],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20182],"v":[{"k":[8220],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[36716],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[22312],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[25353],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[29305],"v":[{"k":[24615],"v":[{"k":[26377],"v":[{"k":[21161],"v":[{"k":[20110],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65306],"v":[{"k":[25226],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[25490],"v":[{"k":[21040],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[65292],"v":[{"k":[23588],"v":[{"k":[20854],"v":[{"k":[26159],"v":[{"k":[24403],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[20849],"v":[{"k":[21516],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[26102],"v":[{"k":[12290],"v":[{"k":[35265],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[12289],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[22343],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[32553],"v":[{"k":[25918],"v":[{"k":[65292],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36724],"v":[{"k":[31561],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[20102],"v":[{"k":[20840],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[20307],"v":[{"k":[39564],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21457],"v":[{"k":[32773],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[22235],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[25353],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[20808],"v":[{"k":[32423],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36215],"v":[{"k":[26469],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26412],"v":[{"k":[22359],"v":[{"k":[20013],"v":[{"k":[20010],"v":[{"k":[21035],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[23383],"v":[{"k":[20307],"v":[{"k":[12289],"v":[{"k":[39640],"v":[{"k":[23485],"v":[{"k":[12289],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[12289],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]},{"k":[30721],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[20102],"v":[{"k":[37325],"v":[{"k":[20889],"v":[{"k":[65292],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[37325],"v":[{"k":[26032],"v":[{"k":[35745],"v":[{"k":[31639],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20102],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[24320,32452,33258,25552,21306,23450,34920,28385,25351,31649,20570,35774,37197,35843,24378,24471,26174,30528,21319],"v":[{"k":[21457],"v":[{"d":{"df":1,"dc":[[42,1]]}}]},{"k":[21512],"v":[{"k":[20986],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[24517],"v":[{"k":[39035],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[21644],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21160],"v":[{"k":[26684,24179],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]},{"k":[22343],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[25104],"v":[{"k":[33509],"v":[{"k":[24178],"v":[{"k":[22359],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20379],"v":[{"k":[36890],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20998],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]},{"k":[20041],"v":[{"k":[27599,65292],"v":[{"k":[22359],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]},{"k":[36825],"v":[{"k":[26679],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[65292,25105],"v":[{"k":[27492],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[20204],"v":[{"k":[35201],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[36275],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[19968,24341,65288],"v":[{"k":[20010],"v":[{"k":[8220],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[8221],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[20013],"v":[{"k":[26159],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[33021],"v":[{"k":[20351],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[33021],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[29992],"v":[{"k":[36884],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[31354],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[36825],"v":[{"k":[37324],"v":[{"k":[21644],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[29702],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[22797],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"k":[24635],"v":[{"k":[20307],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[24863],"v":[{"k":[35273],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[12290],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[25972],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[21046],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[65292],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[36825],"v":[{"k":[20040],"v":[{"k":[20570],"v":[{"k":[65288],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"k":[19979],"v":[{"k":[25991],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[30418],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[12290,27599],"v":[{"d":{"df":1,"dc":[[75,1]]}},{"k":[20010],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[23454],"v":[{"k":[29616],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[32423],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[21015,22914],"v":[{"k":[31867,22312,21517,24341,25152,65292,34987],"v":[{"k":[22411],"v":[{"k":[30340,12290],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[21518],"v":[{"k":[32512],"v":[{"k":[37117],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]},{"k":[20540],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20026],"v":[{"k":[65306],"v":[{"k":[39],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[12289],"v":[{"k":[39],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"k":[12289],"v":[{"k":[39],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20256],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[31216],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20250],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23433],"v":[{"k":[25918],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[20309],"v":[{"k":[38543],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[32780],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[32047],"v":[{"k":[31215],"v":[{"k":[30340],"v":[{"k":[24635],"v":[{"k":[25968],"v":[{"k":[19981],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[65292],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20986],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[22312],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"d":{"df":3,"dc":[[51,3],[54,3],[78,1]]},"k":[31867,26368,20132,35774,93,20013,30340,23450,65292,12290,26469,36827,65306],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[21518],"v":[{"k":[32512],"v":[{"k":[37117],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[42,1]]}}]}]}]}]}]}]}]}]},{"k":[22810],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[25918],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[20114],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[41],"v":[{"d":{"df":3,"dc":[[53,1],[54,1],[81,3]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487,30452,65306],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[26377],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]},{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"k":[65288],"v":[{"k":[21407],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[20173],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[24456],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[23436],"v":[{"k":[20840],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[12290],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[31616],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20041],"v":[{"k":[20102],"v":[{"k":[25226],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[42],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[42],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[42],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[19978],"v":[{"k":[42],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36890,22312,21487],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[54,1]]}}]},{"k":[27599],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[19978],"v":[{"k":[38754],"v":[{"k":[65292],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[21046],"v":[{"k":[20316],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[32472],"v":[{"k":[22270],"v":[{"k":[26495],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21457],"v":[{"k":[25381],"v":[{"k":[24819],"v":[{"k":[35937],"v":[{"k":[21147],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[54,1]]}},{"k":[37197,23454],"v":[{"k":[32622],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26377],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[31561],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[19978],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[32473],"v":[{"k":[20986],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26102],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34892],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[36890],"v":[{"k":[36947],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"k":[35814],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[36807,24120],"v":[{"d":{"df":3,"dc":[[42,1],[53,1],[114,1]]},"k":[39292,35843],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[21333],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]},{"k":[26469,32780],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]},{"k":[35328],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]},{"k":[22411,20284],"v":[{"d":{"df":1,"dc":[[42,1]]},"k":[30340,12290,26041,65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[33021],"v":[{"k":[22312],"v":[{"k":[25968],"v":[{"k":[36724],"v":[{"k":[19978],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[39035],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[101,26102],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[38388],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[27861],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[32452],"v":[{"k":[21512],"v":[{"k":[20986],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21482],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20102],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[26356],"v":[{"k":[20005],"v":[{"k":[26684],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[26816],"v":[{"k":[26597],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[20320],"v":[{"k":[25552],"v":[{"k":[21069],"v":[{"k":[26816],"v":[{"k":[27979],"v":[{"k":[21040],"v":[{"k":[26410],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30465],"v":[{"k":[30053],"v":[{"k":[19981],"v":[{"k":[20889],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]},{"k":[22320],"v":[{"k":[65292],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[43,6]]},"k":[21021,32780,12300,36825],"v":[{"k":[22987],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]},{"k":[20063],"v":[{"k":[23601],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"k":[19978],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[35775],"v":[{"k":[38382],"v":[{"k":[12301],"v":[{"k":[21040],"v":[{"k":[12300],"v":[{"k":[21672],"v":[{"k":[35810],"v":[{"k":[12301],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[30340],"v":[{"k":[27969],"v":[{"k":[22833],"v":[{"k":[29575],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[22823],"v":[{"k":[20110],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[35282],"v":[{"k":[24230],"v":[{"k":[19978],"v":[{"k":[26469],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35748],"v":[{"k":[20026],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20869],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[30340,26159,25552,12290],"v":[{"d":{"df":1,"dc":[[43,1]]}},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[35813],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[24211],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[24037],"v":[{"k":[31243],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[21442],"v":[{"k":[32771],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[30340],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20379],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[73,1]]}}]}]},{"k":[38754],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25214],"v":[{"k":[21040],"v":[{"k":[21508],"v":[{"k":[20010],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[38142],"v":[{"k":[25509],"v":[{"k":[12290],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[19979],"v":[{"k":[26041],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24405,21069],"v":[{"k":[19979],"v":[{"k":[30340,26159],"v":[{"d":{"df":2,"dc":[[43,1],[73,1]]}},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[21442],"v":[{"k":[32771],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[21024],"v":[{"k":[38500],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21482,24182],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[23545],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[38750],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[37117],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20026,21487],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]},{"k":[25351,12290],"v":[{"k":[23450],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[120,1]]}}]}]},{"k":[33021],"v":[{"k":[30340,19968],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]},{"k":[26679],"v":[{"k":[30340],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[20989],"v":[{"k":[25968],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[19981],"v":[{"k":[36807],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[27704],"v":[{"k":[36828],"v":[{"k":[20026],"v":[{"k":[27492],"v":[{"k":[26102],"v":[{"k":[20256],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35265],"v":[{"k":[91],"v":[{"k":[22312],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]}]}]}]}]}]}]},{"k":[33616],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[43,1]]}}]}]},{"k":[28304],"v":[{"k":[21015],"v":[{"k":[34920],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]},{"k":[20851,21516,35265],"v":[{"k":[30340],"v":[{"k":[36164,37197,23450,23646],"v":[{"k":[28304],"v":[{"k":[65292],"v":[{"k":[21253],"v":[{"k":[25324],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]},{"k":[32622],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[36724,21051,25991],"v":[{"k":[32447],"v":[{"k":[20004],"v":[{"k":[31471],"v":[{"k":[30340],"v":[{"k":[31661],"v":[{"k":[22836],"v":[{"k":[65292],"v":[{"k":[36724],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[38271],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[23383],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[33258],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20041],"v":[{"k":[26377],"v":[{"k":[25152],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[31867],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[20013],"v":[{"k":[26356],"v":[{"k":[21152],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24615],"v":[{"k":[34987],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[20102,65306],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]},{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[21363],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[20540],"v":[{"k":[20026],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65281],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[26412],"v":[{"k":[65292,35201,24320],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]}]}]}]}]}]},{"k":[27714],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[35],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[50],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[37],"v":[{"k":[101],"v":[{"k":[55],"v":[{"k":[37],"v":[{"k":[56],"v":[{"k":[57],"v":[{"k":[37],"v":[{"k":[56],"v":[{"k":[56],"v":[{"k":[37],"v":[{"k":[101],"v":[{"k":[54],"v":[{"k":[37],"v":[{"k":[57],"v":[{"k":[99],"v":[{"k":[37],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[37],"v":[{"k":[101],"v":[{"k":[56],"v":[{"k":[37],"v":[{"k":[97],"v":[{"k":[54],"v":[{"k":[37],"v":[{"k":[56],"v":[{"k":[49],"v":[{"k":[37],"v":[{"k":[101],"v":[{"k":[54],"v":[{"k":[37],"v":[{"k":[98],"v":[{"k":[49],"v":[{"k":[37],"v":[{"k":[56],"v":[{"k":[50],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22987],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[22320],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"k":[31561,93],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"d":{"df":1,"dc":[[44,1]]}}]}]},{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[63],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[110],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[61],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[112],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[115],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[65292],"v":[{"k":[35813],"v":[{"k":[25554],"v":[{"k":[20214],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[20320],"v":[{"k":[20445],"v":[{"k":[23384],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[24110],"v":[{"k":[20320],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21270],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35272],"v":[{"k":[22120],"v":[{"k":[31471,20860,12290],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[24211],"v":[{"k":[22823],"v":[{"k":[22810],"v":[{"k":[20250],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]},{"k":[23481],"v":[{"k":[24615],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[25105],"v":[{"k":[20204],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[32487],"v":[{"k":[32493],"v":[{"k":[32500],"v":[{"k":[25252],"v":[{"k":[21644],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34892],"v":[{"k":[28210,25968,19968,22686],"v":[{"k":[26579],"v":[{"k":[12290],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26469],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[24448],"v":[{"k":[24448],"v":[{"k":[26159],"v":[{"k":[21487],"v":[{"k":[26367],"v":[{"k":[25442],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[30456],"v":[{"k":[36817],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[21644],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[21448],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[24046],"v":[{"k":[24322],"v":[{"k":[12290],"v":[{"k":[20110],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[21462],"v":[{"k":[33293],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[25104],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[19981],"v":[{"k":[26131],"v":[{"k":[26377],"v":[{"k":[26631],"v":[{"k":[20934],"v":[{"k":[31572],"v":[{"k":[26696],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[20123],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[36816],"v":[{"k":[31639],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[37327],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19981],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24067],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]},{"k":[25968,35265,32771],"v":[{"k":[93,12290],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[30334],"v":[{"k":[24230],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]}}]},{"d":{"df":12,"dc":[[45,1],[51,1],[59,1],[62,2],[64,2],[75,4],[81,6],[111,2],[116,1],[117,1],[127,1],[130,1]]},"k":[36793],"v":[{"k":[26694],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[23618],"v":[{"k":[24211],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]},{"k":[33324,25991,20010,20123,34892,30452,26679],"v":[{"k":[26469],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[99,101],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}},{"d":{"df":1,"dc":[[81,1]]},"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[20869],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[12290],"v":[{"k":[27599],"v":[{"k":[34892],"v":[{"k":[30340],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[30001],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38750,23613],"v":[{"k":[24120],"v":[{"k":[37325],"v":[{"k":[35270],"v":[{"k":[26080],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[35753],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[20154],"v":[{"k":[22763],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[24179],"v":[{"k":[31561],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20256],"v":[{"k":[36882],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[20063],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[33021],"v":[{"k":[20197],"v":[{"k":[26497],"v":[{"k":[20302],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[25104],"v":[{"k":[26412],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[32780],"v":[{"k":[26377],"v":[{"k":[21033],"v":[{"k":[20110],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[26356],"v":[{"k":[24895],"v":[{"k":[24847],"v":[{"k":[20026],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[20154],"v":[{"k":[22763],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[33021],"v":[{"k":[22320],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]},{"k":[36866,22810,35814,26032],"v":[{"k":[21512],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[65288],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[26159],"v":[{"k":[30001],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[22823],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[65289],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[28909],"v":[{"k":[21147],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[22320],"v":[{"k":[29702],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[25110],"v":[{"k":[24179],"v":[{"k":[34892],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[35268],"v":[{"k":[27169],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21033],"v":[{"k":[20110],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[26576],"v":[{"k":[20123],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39044,32452],"v":[{"k":[35272],"v":[{"k":[24067],"v":[{"k":[23616],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[20214],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]},{"k":[32454],"v":[{"k":[30340],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[35831],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[73,2]]}}]}]}]}]}]}]}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"k":[26377,20307],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[21183],"v":[{"k":[65306],"v":[{"k":[23427],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23384],"v":[{"k":[21344],"v":[{"k":[29992],"v":[{"k":[26356],"v":[{"k":[20302],"v":[{"k":[65288],"v":[{"k":[36825],"v":[{"k":[23545],"v":[{"k":[31227],"v":[{"k":[21160],"v":[{"k":[31471],"v":[{"k":[23588],"v":[{"k":[20854],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27983],"v":[{"k":[35272],"v":[{"k":[22120],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[32553],"v":[{"k":[25918],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[26102],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[27169],"v":[{"k":[31946],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487,26469],"v":[{"k":[20197],"v":[{"k":[30475],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]},{"k":[35828],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[52],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"k":[37327,25454,32452],"v":[{"k":[22810],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[20869],"v":[{"k":[23384],"v":[{"k":[21344],"v":[{"k":[29992],"v":[{"k":[36229],"v":[{"k":[20986],"v":[{"k":[25163],"v":[{"k":[26426],"v":[{"k":[25215],"v":[{"k":[21463],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[37327,21517,22312,22270,39033,30340,21487,21644,26368,25490,36716,38598,21040,28857],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[65288],"v":[{"k":[32463],"v":[{"k":[39564],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[21517],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[20256],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[24418],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,3]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[35270,21508,21160],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]},{"k":[31181],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[24577],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]},{"k":[35270,20197],"v":[{"k":[21270],"v":[{"k":[26159,22312],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21040],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[65288],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[32534],"v":[{"k":[30721],"v":[{"k":[65292],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[36890],"v":[{"k":[36947],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36807],"v":[{"k":[21435],"v":[{"k":[30340],"v":[{"k":[20960],"v":[{"k":[24180],"v":[{"k":[20013],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"k":[38271],"v":[{"k":[36275],"v":[{"k":[30340],"v":[{"k":[21457],"v":[{"k":[23637],"v":[{"k":[12290],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20135],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[26399],"v":[{"k":[24453],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[26159],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[22312],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[12289],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[12289],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[31561],"v":[{"k":[26041],"v":[{"k":[38754],"v":[{"k":[26377],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[39640],"v":[{"k":[32423],"v":[{"k":[30340],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34987],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[22797],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[22823],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[24517],"v":[{"k":[20026],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[19968],"v":[{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32500,20854],"v":[{"k":[24230],"v":[{"d":{"df":1,"dc":[[54,1]]}}]},{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[20998],"v":[{"k":[31163],"v":[{"k":[24320],"v":[{"k":[26469],"v":[{"k":[12290],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24120],"v":[{"k":[21464],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[24120],"v":[{"k":[19981],"v":[{"k":[21464],"v":[{"k":[12290],"v":[{"k":[20998],"v":[{"k":[24320],"v":[{"k":[26131],"v":[{"k":[20110],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[31649],"v":[{"k":[29702],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23567],"v":[{"k":[20540],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[39,51],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]},{"k":[48],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24207],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[25442],"v":[{"k":[22522,30340,22120],"v":[{"k":[30784],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[36827],"v":[{"k":[38454],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[62,3]]}}]}]},{"d":{"df":2,"dc":[[64,1],[77,1]]}},{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[116,1]]},"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]},{"k":[20013],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[20197,20026,21462,30452,35270,35775],"v":[{"k":[26681,35774,21516,34987,22810,31616,22312,25552,25351,21482,36890],"v":[{"k":[25454],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36873],"v":[{"k":[29992],"v":[{"k":[21482],"v":[{"k":[29992],"v":[{"k":[21040],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[45,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[20840,20026,25991],"v":[{"k":[23616],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[33394],"v":[{"k":[30424],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[19987],"v":[{"k":[23646],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[33394],"v":[{"k":[30424],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}},{"k":[23383],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[26102],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"d":{"df":2,"dc":[[54,1],[64,1]]}}]}]}]}]}]},{"k":[38142,19981,20351],"v":[{"k":[24335],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[35821],"v":[{"k":[27861],"v":[{"k":[31958],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21516],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[29992],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[37325],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[65292],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"k":[35265],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20889],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"d":{"df":1,"dc":[[64,1]]},"k":[26381,21508],"v":[{"k":[21153],"v":[{"k":[31471],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[91],"v":[{"k":[23448],"v":[{"k":[26041],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[37324],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20010],"v":[{"k":[23567],"v":[{"k":[25130],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[22312],"v":[{"k":[26381],"v":[{"k":[21153],"v":[{"k":[31471],"v":[{"k":[39044],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[20986],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22788],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]},{"k":[21319],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[38750],"v":[{"k":[21516],"v":[{"k":[23618],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[65292],"v":[{"k":[24378],"v":[{"k":[28872],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[24320],"v":[{"k":[21551],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20026],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[26631],"v":[{"k":[20102],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25351],"v":[{"k":[23450],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[30340],"v":[{"k":[38271],"v":[{"k":[23485],"v":[{"k":[27604],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36807],"v":[{"k":[19968,23558],"v":[{"k":[20010],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[24320],"v":[{"k":[21551],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[12290],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[36229],"v":[{"k":[20986],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[25130],"v":[{"k":[26029],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[25442],"v":[{"k":[34892],"v":[{"k":[12290],"v":[{"k":[23494],"v":[{"k":[38598],"v":[{"k":[30340],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65292],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[26377],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[32654],"v":[{"k":[35266],"v":[{"k":[30340],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[25490],"v":[{"k":[24067],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39292],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[112,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]}},{"k":[20540],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[25509],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[25506],"v":[{"k":[32034],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[65292],"v":[{"k":[21152],"v":[{"k":[28145],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20027],"v":[{"k":[26088],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38382],"v":[{"k":[24615],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[38556,24847],"v":[{"k":[30861],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]},{"k":[20041],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[23450],"v":[{"k":[20102],"v":[{"k":[26080],"v":[{"k":[38556],"v":[{"k":[30861],"v":[{"k":[23500],"v":[{"k":[20114],"v":[{"k":[32852],"v":[{"k":[32593],"v":[{"k":[24212],"v":[{"k":[29992],"v":[{"k":[35268],"v":[{"k":[33539],"v":[{"k":[38598],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[119],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[45],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[119],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[51],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[119],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[47],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[65292],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20174],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[35268],"v":[{"k":[33539],"v":[{"k":[65292],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[30450],"v":[{"k":[20154],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[26391],"v":[{"k":[35835],"v":[{"k":[35774],"v":[{"k":[22791],"v":[{"k":[30340],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[19979],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20154],"v":[{"k":[32676],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35748],"v":[{"k":[20851,25353,25226,20540,20250,65292,30340,26377,35774,20027,19981],"v":[{"k":[38381],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]},{"k":[29031],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[21487],"v":[{"k":[36716],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[20063],"v":[{"k":[34987],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[25104],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[25353],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]},{"k":[12290],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[34987],"v":[{"k":[23433],"v":[{"k":[25918],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[33258,35797],"v":[{"k":[21160],"v":[{"k":[25506],"v":[{"k":[27979],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[28982],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[19981],"v":[{"k":[20934],"v":[{"k":[30830],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[32773],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[24378],"v":[{"k":[21046],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]},"k":[35268,20027],"v":[{"k":[21017],"v":[{"k":[19981],"v":[{"k":[33021],"v":[{"k":[28385],"v":[{"k":[36275],"v":[{"k":[35201],"v":[{"k":[27714],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[26469],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39064],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[32780],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[20248],"v":[{"k":[38597],"v":[{"k":[12289],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[21407],"v":[{"k":[29702],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[26159],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[12290],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35745],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[39064],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"k":[20877],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[96],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[96],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622,20026,23450],"v":[{"k":[20026,22270,26041,26609,65292,12290,25240,21738],"v":[{"d":{"df":2,"dc":[[46,2],[75,1]]},"k":[20197],"v":[{"d":{"df":1,"dc":[[119,1]]}}]},{"k":[29255],"v":[{"k":[39640],"v":[{"k":[23485],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[24335],"v":[{"k":[20030],"v":[{"k":[20363],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]},{"k":[21253,21487],"v":[{"k":[25324],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]},{"k":[20197],"v":[{"k":[26159],"v":[{"k":[35832],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]},{"k":[27604,21487],"v":[{"k":[22914],"v":[{"k":[22312],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[20026],"v":[{"k":[20854],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[32447],"v":[{"k":[23485],"v":[{"k":[12289],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12289],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[12289],"v":[{"k":[19981],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[31561],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21442],"v":[{"k":[32771],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[25163],"v":[{"k":[20876],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[20854],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[114,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20123],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[118,1]]}}]}]}]}]}]}]}]}]}]}]},{"d":{"df":3,"dc":[[54,1],[110,2],[115,2]]}},{"k":[25104],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[22768],"v":[{"k":[26126],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[21551,22987,21457,22836],"v":[{"k":[12290,65292],"v":[{"k":[24320],"v":[{"k":[21551],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12289],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[31561],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[20851],"v":[{"k":[20110],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]},{"k":[25903,65289,65292,35745,35760,19979],"v":[{"k":[25345],"v":[{"k":[20102,23500,27880],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[8221],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[27169],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]},{"k":[20876],"v":[{"k":[29420],"v":[{"k":[31435],"v":[{"k":[30340],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[22120],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[26356,21160],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[24577],"v":[{"k":[30340],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[21253],"v":[{"k":[21644],"v":[{"k":[38745],"v":[{"k":[24577],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[21253],"v":[{"k":[20998],"v":[{"k":[31163],"v":[{"k":[24320],"v":[{"k":[12290],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[21253],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[65289,65292],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[21508],"v":[{"k":[31181],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[37117],"v":[{"k":[20889],"v":[{"k":[65292],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[20889],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31532],"v":[{"k":[19977],"v":[{"k":[21015],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[65292],"v":[{"k":[20808],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[19968],"v":[{"k":[19979],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21517],"v":[{"k":[35789],"v":[{"k":[30340],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20307,30340],"v":[{"k":[39564],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[26102],"v":[{"k":[20505],"v":[{"k":[23545],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[22823],"v":[{"k":[20992],"v":[{"k":[38420],"v":[{"k":[26023],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[26500],"v":[{"k":[20197],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[20196],"v":[{"k":[20154],"v":[{"k":[28608],"v":[{"k":[21160],"v":[{"k":[20154],"v":[{"k":[24515],"v":[{"k":[30340],"v":[{"k":[29305],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292,30340],"v":[{"k":[21518],"v":[{"k":[38754],"v":[{"k":[36319],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[30340],"v":[{"k":[32477],"v":[{"k":[23545],"v":[{"k":[25110],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[22320],"v":[{"k":[22336],"v":[{"k":[12290],"v":[{"k":[24418],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[120],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[119,1]]}}]}]},{"k":[25104],"v":[{"k":[30340,25551,20102,25968],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]},{"k":[36848],"v":[{"k":[30340],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[27969],"v":[{"k":[31243],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[25454],"v":[{"k":[30340],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[24615],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[65292,38450,26469,20013,65306,37117,25351,29992,35774],"v":[{"k":[22312,20197],"v":[{"k":[26391],"v":[{"k":[35835],"v":[{"k":[35774],"v":[{"k":[22791],"v":[{"k":[30340],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[30450],"v":[{"k":[20154],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20540],"v":[{"k":[20026],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21450],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[27490],"v":[{"k":[21516],"v":[{"k":[20010],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[12290],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450,37197],"v":[{"k":[21046],"v":[{"k":[12290],"v":[{"k":[91],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[12290],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[26159],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[110],"v":[{"k":[65289],"v":[{"k":[26469],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[75,1]]}},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[38544],"v":[{"k":[21435],"v":[{"k":[19981],"v":[{"k":[20889],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[12290,20026],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]},{"k":[24418],"v":[{"k":[29366],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26469],"v":[{"k":[34920],"v":[{"k":[24449],"v":[{"k":[38454],"v":[{"k":[26799],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[20849],"v":[{"k":[26377],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[21462],"v":[{"k":[20540],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[100],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[120,1]]}}]}]}]}]},{"k":[20307],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]},{"k":[32622],"v":[{"k":[39033,65292,20026,12290],"v":[{"k":[25351,21253,65292,35843,20013],"v":[{"k":[23450],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25324],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]},{"k":[25913],"v":[{"k":[21464],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[34892],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[121],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[98],"v":[{"k":[121],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25972],"v":[{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[27492],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}},{"d":{"df":1,"dc":[[110,1]]}}]}]},{"k":[21046,20041,20301],"v":[{"k":[27169,25991],"v":[{"k":[26495],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]},{"k":[26412],"v":[{"k":[22359],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[12289],"v":[{"k":[36793],"v":[{"k":[26694],"v":[{"k":[12289],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[12289],"v":[{"k":[26059],"v":[{"k":[36716],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20026,20102],"v":[{"k":[36830,20998],"v":[{"k":[32493],"v":[{"k":[22411],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]},{"k":[27573],"v":[{"k":[22411],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]},{"k":[22270],"v":[{"k":[24418],"v":[{"k":[39068,23610],"v":[{"k":[33394],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21015],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]},{"k":[23544],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[20877],"v":[{"k":[26059],"v":[{"k":[36716],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[20102,22806,27492],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[25972,30452,19978,19968,20108,21160,20197],"v":[{"k":[20307],"v":[{"k":[24615],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[32454],"v":[{"k":[31890],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25509],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]},{"k":[36848],"v":[{"k":[35268,30340],"v":[{"k":[33539],"v":[{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22806],"v":[{"k":[37096],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"k":[22806],"v":[{"k":[37096],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[33021],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[25110],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[26356],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[26041],"v":[{"k":[24211],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36143],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[20102],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[25104],"v":[{"k":[28145],"v":[{"k":[33394],"v":[{"k":[27169],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32500],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[20197],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24577],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[19978],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65289],"v":[{"k":[65292,12290],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[23427],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[25226],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[30340],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36755],"v":[{"k":[20986],"v":[{"k":[32473],"v":[{"k":[21040],"v":[{"k":[21518],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[25105,28023,22914,36824,23427],"v":[{"k":[20204],"v":[{"k":[36825,20026],"v":[{"k":[27425],"v":[{"k":[20063],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[20102],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[20869],"v":[{"k":[30340],"v":[{"k":[21015],"v":[{"k":[34920],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[39034],"v":[{"k":[24207],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25152],"v":[{"k":[26377],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[36824],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[20102],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[22312],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[22320],"v":[{"k":[22270],"v":[{"k":[31561],"v":[{"k":[23569],"v":[{"k":[25968],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013],"v":[{"k":[25165],"v":[{"k":[33021],"v":[{"k":[24320],"v":[{"k":[21551],"v":[{"k":[30340],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[65292],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[21333],"v":[{"k":[36873],"v":[{"k":[25110],"v":[{"k":[22810],"v":[{"k":[36873],"v":[{"k":[27169],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[37327],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[19979],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[20063],"v":[{"k":[26377],"v":[{"k":[20102],"v":[{"k":[22823],"v":[{"k":[24133],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[25552],"v":[{"k":[21319],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[32463],"v":[{"k":[24120],"v":[{"k":[30896],"v":[{"k":[21040],"v":[{"k":[22823],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[23454],"v":[{"k":[26102],"v":[{"k":[26102],"v":[{"k":[24207],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[39640],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[30340],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20960],"v":[{"k":[30334],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[20960],"v":[{"k":[21313],"v":[{"k":[27627],"v":[{"k":[31186],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[19968],"v":[{"k":[27425],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26524],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[26159],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[36824],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25903],"v":[{"k":[25345],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]},{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[20989],"v":[{"k":[25968],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[20026],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20840,25972,25104],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]},{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[27969],"v":[{"k":[31243],"v":[{"k":[35831],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[26144],"v":[{"k":[23556],"v":[{"k":[65292],"v":[{"k":[21442],"v":[{"k":[35265],"v":[{"k":[21518],"v":[{"k":[25991],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20351,20102],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[46,1]]}}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[22312],"v":[{"k":[34892],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159,25552,21487,26377,26032,22312],"v":[{"d":{"df":2,"dc":[[46,1],[51,1]]}},{"k":[20379],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]},{"k":[20197],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[8220],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[22120],"v":[{"k":[8221],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20123],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[22686],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[36148],"v":[{"k":[33457],"v":[{"k":[30340],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[26696],"v":[{"k":[36741],"v":[{"k":[21161],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[65292],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38750],"v":[{"k":[24120],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[32454],"v":[{"k":[33410],"v":[{"k":[20013],"v":[{"k":[20570],"v":[{"k":[20102],"v":[{"k":[25913],"v":[{"k":[36827],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[26356],"v":[{"k":[36731],"v":[{"k":[26494],"v":[{"k":[22320],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[22909],"v":[{"k":[29992],"v":[{"k":[12289],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[28789],"v":[{"k":[27963],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[35762],"v":[{"k":[36848],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32972],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[25925],"v":[{"k":[20107],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20026],"v":[{"k":[25972,26609],"v":[{"k":[20307],"v":[{"k":[24615],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[46],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26465],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[19978],"v":[{"k":[38480],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[24456],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[20063],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[22826],"v":[{"k":[23485],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35774,22768,38142,20915],"v":[{"k":[32622,20026],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[46,1]]}}]},{"d":{"df":1,"dc":[[110,1]]}}]},{"k":[26126],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[24335],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[33719],"v":[{"k":[21462],"v":[{"k":[21069],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[20869],"v":[{"k":[65292],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[31446],"v":[{"k":[30452],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[30001],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25509],"v":[{"k":[23436],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[20043],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[20381],"v":[{"k":[27425],"v":[{"k":[25340],"v":[{"k":[25509],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[46],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[21253],"v":[{"k":[25324],"v":[{"k":[27169],"v":[{"k":[26495],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[20197],"v":[{"k":[26367],"v":[{"k":[25442],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[46,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22686,29305,30340,25903],"v":[{"k":[19968,25903,30340],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[25345],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[65289],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[21019],"v":[{"k":[24314],"v":[{"k":[24102],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[24207],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38543],"v":[{"k":[30528],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[35762],"v":[{"k":[36848],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[28436],"v":[{"k":[21464],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21151],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[109,1]]}}]}]}]}]},{"k":[24615],"v":[{"d":{"df":1,"dc":[[77,1]]},"k":[93],"v":[{"k":[40],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[110],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26631],"v":[{"k":[31614],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35753],"v":[{"k":[20320],"v":[{"k":[22312],"v":[{"k":[31227],"v":[{"k":[21160],"v":[{"k":[31471],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[23616],"v":[{"k":[38480],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[20869],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26377],"v":[{"k":[24456],"v":[{"k":[20248],"v":[{"k":[38597],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25345],"v":[{"k":[20102],"v":[{"k":[33039],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[65292],"v":[{"k":[35299],"v":[{"k":[20915],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[23616],"v":[{"k":[37096],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[29942],"v":[{"k":[39048],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622,28210],"v":[{"k":[21464,25552,24418],"v":[{"k":[37327],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[20379],"v":[{"k":[20102],"v":[{"k":[33021],"v":[{"k":[36215],"v":[{"k":[36807],"v":[{"k":[28388],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29366],"v":[{"k":[65292,21253],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[65292],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[25324],"v":[{"k":[65306],"v":[{"k":[22278],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[22278],"v":[{"k":[35282],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[19977],"v":[{"k":[35282],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[33777],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[22823],"v":[{"k":[22836],"v":[{"k":[38024],"v":[{"k":[24418],"v":[{"k":[12289],"v":[{"k":[31661],"v":[{"k":[22836],"v":[{"k":[24418],"v":[{"k":[65292],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[116],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[39],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[35201],"v":[{"k":[23558],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26579],"v":[{"k":[23436],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[20445],"v":[{"k":[25345],"v":[{"k":[24456],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23384],"v":[{"k":[21344],"v":[{"k":[29992],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[27969],"v":[{"k":[30021],"v":[{"k":[30340],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[31561],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30721,26367],"v":[{"k":[25512,30340,35302,26469,30452],"v":[{"k":[33616],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]},{"k":[39044],"v":[{"k":[35272],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]},{"k":[21457],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[36798],"v":[{"k":[21040],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[30340],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[25509],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[26356],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[30340],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[27492],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[12290,20043],"v":[{"d":{"df":1,"dc":[[81,16]]}},{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]},{"k":[22914],"v":[{"k":[27880,65292,22312],"v":[{"k":[37322],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[22270,22312],"v":[{"k":[34920],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[30007],"v":[{"k":[22899],"v":[{"k":[20154],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[22235],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[25104],"v":[{"k":[24180],"v":[{"k":[30007],"v":[{"k":[24615],"v":[{"k":[8221],"v":[{"k":[21644],"v":[{"k":[8220],"v":[{"k":[30007],"v":[{"k":[23401],"v":[{"k":[8221],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[25104],"v":[{"k":[24180],"v":[{"k":[22899],"v":[{"k":[24615],"v":[{"k":[8221],"v":[{"k":[21644],"v":[{"k":[8220],"v":[{"k":[22899],"v":[{"k":[23401],"v":[{"k":[8221],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[32452],"v":[{"k":[30340],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36825],"v":[{"k":[20010],"v":[{"k":[91],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[45],"v":[{"k":[121],"v":[{"k":[45],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[41],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[31227],"v":[{"k":[21040],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[23427],"v":[{"k":[38750],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[23601],"v":[{"k":[20250],"v":[{"k":[28129],"v":[{"k":[20986],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[28165],"v":[{"k":[26224],"v":[{"k":[30340],"v":[{"k":[31361],"v":[{"k":[20986],"v":[{"k":[32858],"v":[{"k":[28966],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[26641],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[26093],"v":[{"k":[26085],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[26705],"v":[{"k":[22522],"v":[{"k":[31561],"v":[{"k":[26356],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[28129],"v":[{"k":[20986],"v":[{"k":[38750],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[26469],"v":[{"k":[35266],"v":[{"k":[23519],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[32852],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"k":[19988],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[38452],"v":[{"k":[24433],"v":[{"k":[31561],"v":[{"k":[22312],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[65288],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[20013],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"k":[28129],"v":[{"k":[20986],"v":[{"k":[65288],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[29366],"v":[{"k":[24577],"v":[{"k":[20013],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21491],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[24038],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[19978,12290,38754,36733,25991,30340],"v":[{"d":{"df":1,"dc":[[47,1]]}},{"d":{"df":1,"dc":[[47,1]]}},{"k":[65292,26159,31034,23545,36825,35814,24038],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23601,23637],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[20960],"v":[{"k":[31181],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65292],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[20854],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23558],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[30690],"v":[{"k":[37327],"v":[{"k":[29233],"v":[{"k":[24515],"v":[{"k":[24418],"v":[{"k":[29366],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]},"k":[30417,19978,19968,19981],"v":[{"k":[21548],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[24320],"v":[{"k":[20851],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[36848],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[26368,27178],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[20026],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[12289],"v":[{"k":[32437],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[26368],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20877],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[28436],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"k":[22914],"v":[{"k":[20309],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[54,1]]}},{"k":[20010],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[26465],"v":[{"k":[20214],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32454],"v":[{"k":[35299],"v":[{"k":[37322],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[36793],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[23646,20107],"v":[{"k":[24615],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[20214],"v":[{"k":[21517],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[19981],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[21517],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35813],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]},{"k":[24038],"v":[{"k":[36793],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[116,1]]},"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[23558],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"k":[19981],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[114,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20142],"v":[{"k":[20195,24403,30340,26679,26102],"v":[{"k":[30721],"v":[{"k":[34892],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[21517],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]},{"k":[21069],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[26679,22522],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[30784],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[26032],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[20102],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[28129],"v":[{"k":[20986],"v":[{"k":[42],"v":[{"k":[42],"v":[{"k":[20854],"v":[{"k":[23427],"v":[{"k":[38750],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36798],"v":[{"k":[21040],"v":[{"k":[32858],"v":[{"k":[28966],"v":[{"k":[30446],"v":[{"k":[26631],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,3]]}}]}]},{"k":[28857,26631],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]}]}]},{"k":[31614],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]}]}]}]}]}]}]},{"k":[26524],"v":[{"k":[65306,58,22914],"v":[{"d":{"df":1,"dc":[[47,2]]}},{"d":{"df":1,"dc":[[47,1]]}},{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]},{"k":[21152],"v":[{"d":{"df":1,"dc":[[78,1]]},"k":[31034,37197],"v":[{"k":[20363],"v":[{"d":{"df":1,"dc":[[47,1]]}}]},{"k":[32622],"v":[{"k":[39033],"v":[{"k":[38142],"v":[{"k":[25509],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]},{"k":[22336,29702,22270],"v":[{"k":[20013],"v":[{"k":[96],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[96],"v":[{"k":[21518],"v":[{"k":[38754],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[20018],"v":[{"d":{"df":1,"dc":[[47,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[65288],"v":[{"k":[103],"v":[{"k":[101],"v":[{"k":[111],"v":[{"k":[65289],"v":[{"k":[29305],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65288],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[22987],"v":[{"k":[21270],"v":[{"d":{"df":1,"dc":[[48,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]},{"k":[28857],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]},{"d":{"df":2,"dc":[[64,3],[116,1]]},"k":[20854,35302,19981,27178],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]},{"k":[21457],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]},{"k":[20877],"v":[{"k":[34987,25903],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[65288],"v":[{"k":[24403],"v":[{"k":[28982],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23613],"v":[{"k":[37327],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[20102],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[25913],"v":[{"k":[21160],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20250],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[31687],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[37324],"v":[{"k":[23613],"v":[{"k":[37327],"v":[{"k":[35814],"v":[{"k":[23613],"v":[{"k":[24471],"v":[{"k":[35299],"v":[{"k":[37322],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[25913],"v":[{"k":[21160],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25345],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[20102],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65307],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38656,26377,65292,30340,38388],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[26377],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24847],"v":[{"k":[20041],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,4]]}}]}]}]},{"k":[27492,20182,26377,21448,36824],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[34987],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,3]]}}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[26102],"v":[{"k":[20505],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20250],"v":[{"k":[37197],"v":[{"k":[19981],"v":[{"k":[23545],"v":[{"k":[65292],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[20986],"v":[{"k":[26469],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[19981],"v":[{"k":[30693],"v":[{"k":[36947],"v":[{"k":[21738],"v":[{"k":[37324],"v":[{"k":[38169],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24819],"v":[{"k":[38024],"v":[{"k":[23545],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[65292],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26816],"v":[{"k":[26597],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[26377],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20960],"v":[{"k":[20010],"v":[{"k":[35201],"v":[{"k":[28857],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[36724],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[24212],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]},{"k":[21548],"v":[{"k":[22270,8220],"v":[{"k":[34920],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[24182],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[20214],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[33719,19982,21517,65288,30340,31561,12290,20250,21644,96,19981,26159,22312,32473,65292],"v":[{"k":[21462],"v":[{"k":[27983,21040],"v":[{"k":[35272],"v":[{"k":[22120],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36873],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26356],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[30340],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[12290],"v":[{"k":[19982],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[21644],"v":[{"k":[28129],"v":[{"k":[20986],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[36873],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]},"k":[34892],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]},{"k":[31216],"v":[{"k":[65292],"v":[{"k":[22343],"v":[{"k":[20026],"v":[{"k":[23567],"v":[{"k":[20889],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32465],"v":[{"k":[23450],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36825],"v":[{"k":[37324],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[24320],"v":[{"k":[20851],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65289,22522],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[32553],"v":[{"k":[25918],"v":[{"k":[26102],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[30784],"v":[{"k":[19978],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]},{"d":{"df":1,"dc":[[51,1]]},"k":[19979],"v":[{"k":[38754],"v":[{"k":[20808],"v":[{"k":[26469],"v":[{"k":[30475],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[21518],"v":[{"k":[25171],"v":[{"k":[24320],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30001],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[20063],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[37324],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[35832],"v":[{"k":[22914],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[51,1]]}},{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,2]]}}]},{"k":[21516],"v":[{"k":[12290],"v":[{"k":[21069],"v":[{"k":[32773],"v":[{"k":[26159],"v":[{"k":[24403],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[22312],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[22320],"v":[{"k":[26041],"v":[{"k":[37117],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[21518],"v":[{"k":[32773],"v":[{"k":[26159],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[24403],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[19978],"v":[{"k":[26102],"v":[{"k":[25165],"v":[{"k":[33021],"v":[{"k":[34987],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[12290],"v":[{"k":[20107],"v":[{"k":[23454],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[19978],"v":[{"k":[34987],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[30340],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21464,20026],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,3]]}}]},{"k":[21547,22826,21516,20877,38656,30456],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[20043],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[19981],"v":[{"k":[31561],"v":[{"k":[20110],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30456,36866],"v":[{"k":[21516],"v":[{"k":[12290],"v":[{"k":[23588],"v":[{"k":[20854],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[21069],"v":[{"k":[32773],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[22312],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[24211],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[30830],"v":[{"k":[23450],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21512],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[26041],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[34429],"v":[{"k":[28982],"v":[{"k":[20180],"v":[{"k":[32454],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[33021],"v":[{"k":[30830],"v":[{"k":[23450],"v":[{"k":[21482],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[20045],"v":[{"k":[19968],"v":[{"k":[30475],"v":[{"k":[65292],"v":[{"k":[24456],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[35823],"v":[{"k":[20197],"v":[{"k":[20026],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[19978],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340,26679],"v":[{"d":{"df":1,"dc":[[77,1]]},"k":[39068],"v":[{"k":[33394],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[21644],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24050],"v":[{"k":[32463],"v":[{"k":[20064],"v":[{"k":[24815],"v":[{"k":[23558],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21644],"v":[{"k":[21508],"v":[{"k":[31181],"v":[{"k":[20107],"v":[{"k":[29289],"v":[{"k":[25110],"v":[{"k":[27010],"v":[{"k":[24565],"v":[{"k":[32465],"v":[{"k":[23450],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[25552],"v":[{"k":[21040],"v":[{"k":[26576],"v":[{"k":[20123],"v":[{"k":[20107],"v":[{"k":[29289],"v":[{"k":[26102],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[32463],"v":[{"k":[24120],"v":[{"k":[20250],"v":[{"k":[36805],"v":[{"k":[36895],"v":[{"k":[30340],"v":[{"k":[22312],"v":[{"k":[24515],"v":[{"k":[20013],"v":[{"k":[21305],"v":[{"k":[37197],"v":[{"k":[20854],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[25552],"v":[{"k":[21040],"v":[{"k":[8220],"v":[{"k":[20113],"v":[{"k":[26421],"v":[{"k":[8221],"v":[{"k":[20250],"v":[{"k":[24819],"v":[{"k":[21040],"v":[{"k":[30333],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[8220],"v":[{"k":[29233],"v":[{"k":[24773],"v":[{"k":[8221],"v":[{"k":[20250],"v":[{"k":[24819],"v":[{"k":[21040],"v":[{"k":[31881],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[33258],"v":[{"k":[28982],"v":[{"k":[30340],"v":[{"k":[12289],"v":[{"k":[19982],"v":[{"k":[35821],"v":[{"k":[20041],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[34987],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[34],"v":[{"k":[35821],"v":[{"k":[20041],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"k":[33394],"v":[{"k":[34],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[30340],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25903,25512],"v":[{"k":[25345],"v":[{"d":{"df":1,"dc":[[81,1]]}}]},{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[35201],"v":[{"k":[26159],"v":[{"k":[30334],"v":[{"k":[20998],"v":[{"k":[27604],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20851],"v":[{"k":[65306],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[23545],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35835],"v":[{"d":{"df":1,"dc":[[48,1]]}}]},{"k":[30830,30456],"v":[{"k":[30340,65306],"v":[{"k":[20570],"v":[{"k":[27861],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[34987],"v":[{"k":[38144],"v":[{"k":[27585],"v":[{"k":[20043],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25105],"v":[{"k":[26368],"v":[{"k":[27427],"v":[{"k":[36175],"v":[{"k":[30340],"v":[{"k":[31185],"v":[{"k":[25216],"v":[{"k":[20844],"v":[{"k":[21496],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[20851],"v":[{"k":[65306],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[20174],"v":[{"k":[20302],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]},{"k":[27585],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23481],"v":[{"k":[22120],"v":[{"k":[37325],"v":[{"k":[26032],"v":[{"k":[34987],"v":[{"k":[28155],"v":[{"k":[21152],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[27425],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38144,21069,21450,23567,21160,19979],"v":[{"k":[27585],"v":[{"k":[23454],"v":[{"k":[20363],"v":[{"k":[37322],"v":[{"k":[25918],"v":[{"k":[36164],"v":[{"k":[28304],"v":[{"k":[65292],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[20869],"v":[{"k":[23384],"v":[{"k":[27844],"v":[{"k":[28431],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[48,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[21644],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22914,25512],"v":[{"k":[20309],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[33616],"v":[{"k":[30340],"v":[{"k":[26032],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[31243],"v":[{"k":[24207],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[24211],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[22312],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24577],"v":[{"k":[24211],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[24320],"v":[{"k":[25918],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[30340],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[19982],"v":[{"k":[91],"v":[{"k":[22312],"v":[{"k":[24494],"v":[{"k":[20449],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[20013],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]},{"k":[26631],"v":[{"k":[36724],"v":[{"d":{"df":1,"dc":[[49,1]]},"k":[22768],"v":[{"k":[26126],"v":[{"k":[20026],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[20250],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35282,25509],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013,65288],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[49,1]]}}]},{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[65289],"v":[{"k":[29305],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26679,30340,20351],"v":[{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[65288],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[12289],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[12289],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[12289],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[12289],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[46],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26679],"v":[{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[53,1]]},"k":[26159],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[32437],"v":[{"k":[35266],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]},{"d":{"df":2,"dc":[[49,1],[64,1]]},"k":[12290,12289,21644,37117,65292,26174,24120,65288,38656,32447,20195,34920,22312,19978,65289,65306,65311,23485,25968,39640,26159],"v":[{"d":{"df":2,"dc":[[49,1],[64,3]]},"k":[22914],"v":[{"k":[26524],"v":[{"k":[24819],"v":[{"k":[35201],"v":[{"k":[25226],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[20986],"v":[{"k":[26469],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20511],"v":[{"k":[21161],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[121],"v":[{"d":{"df":1,"dc":[[49,1]]}}]},{"d":{"df":3,"dc":[[49,2],[119,1],[127,1]]}},{"k":[30001],"v":[{"k":[36724],"v":[{"k":[32447],"v":[{"k":[12289],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[12289],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[12289],"v":[{"k":[36724],"v":[{"k":[26631],"v":[{"k":[39064],"v":[{"k":[22235],"v":[{"k":[20010],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[25104],"v":[{"k":[12290],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[36824],"v":[{"k":[20250],"v":[{"k":[26377],"v":[{"k":[32593],"v":[{"k":[26684],"v":[{"k":[32447],"v":[{"k":[26469],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[21644],"v":[{"k":[35745],"v":[{"k":[31639],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36890,22810,21462,31867,25968,31532],"v":[{"k":[24120],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[20110],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[31532],"v":[{"k":[20108],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20540],"v":[{"k":[36724],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[20116],"v":[{"k":[21015,34892],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[22312],"v":[{"k":[22270,24038,19978],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[24213],"v":[{"k":[37096],"v":[{"k":[65292],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[20391,21491],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]},{"k":[20004],"v":[{"k":[20391],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]},{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]},{"k":[29992,24120],"v":[{"k":[26469],"v":[{"k":[26631],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[25351],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[35266],"v":[{"k":[23519],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[35282],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[8220],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[26469],"v":[{"k":[26631],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[32771],"v":[{"k":[23519],"v":[{"k":[26576],"v":[{"k":[19968],"v":[{"k":[31867],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[30340],"v":[{"k":[25351],"v":[{"k":[26631],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[8220],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[8221],"v":[{"k":[21644],"v":[{"k":[8220],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[37329],"v":[{"k":[39069],"v":[{"k":[8221],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27700],"v":[{"k":[24179],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[65289],"v":[{"k":[36328],"v":[{"k":[24230],"v":[{"k":[24456],"v":[{"k":[22823],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[25165],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[32553],"v":[{"k":[25918],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[28789],"v":[{"k":[27963],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[49,1]]}},{"k":[34920],"v":[{"k":[19996],"v":[{"k":[20140],"v":[{"k":[26376],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[27668],"v":[{"k":[28201],"v":[{"k":[65292],"v":[{"k":[21491],"v":[{"k":[20391],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"k":[19996,26102],"v":[{"k":[20140],"v":[{"k":[38477],"v":[{"k":[27700],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[38388],"v":[{"k":[12290],"v":[{"k":[20004],"v":[{"k":[32452],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[36215],"v":[{"k":[65292],"v":[{"k":[21453],"v":[{"k":[26144],"v":[{"k":[20102],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[27668],"v":[{"k":[28201],"v":[{"k":[21644],"v":[{"k":[38477],"v":[{"k":[27700],"v":[{"k":[37327],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292,12290,30340],"v":[{"k":[21518],"v":[{"k":[38754],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[65307],"v":[{"k":[22312],"v":[{"k":[22320],"v":[{"k":[22270],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"k":[22320],"v":[{"k":[22270],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[65307],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[12289],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[31561],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[20197],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[39640],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[12289,65292,20043],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65288],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[31561],"v":[{"k":[65288],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20214],"v":[{"k":[20107],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21017],"v":[{"k":[27599],"v":[{"k":[20004],"v":[{"k":[21015],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[21015],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[19978],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38388],"v":[{"k":[22635,30340],"v":[{"k":[20805],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[32441],"v":[{"k":[29702],"v":[{"k":[65292],"v":[{"k":[24418],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38754],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20307],"v":[{"k":[31215],"v":[{"k":[12290],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[32780],"v":[{"k":[35328],"v":[{"k":[65292],"v":[{"k":[34987],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[24341],"v":[{"k":[36215],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[23545],"v":[{"k":[24635],"v":[{"k":[20540],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[30340],"v":[{"k":[27880],"v":[{"k":[24847],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[20256],"v":[{"k":[36798],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[30830],"v":[{"k":[20999],"v":[{"k":[30340],"v":[{"k":[21333],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20026],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[38598],"v":[{"k":[21512],"v":[{"k":[12290,65292],"v":[{"k":[19982],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22810],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[20102],"v":[{"k":[31532],"v":[{"k":[19977],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[21363],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[21644],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[27604],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[26469],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[35268],"v":[{"k":[24459],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[22312],"v":[{"k":[19981],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[35782],"v":[{"k":[21035],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[25110],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[35266],"v":[{"k":[23519],"v":[{"k":[20182],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[21457],"v":[{"k":[29616],"v":[{"k":[26576],"v":[{"k":[31181],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[26597],"v":[{"k":[25214],"v":[{"k":[24322],"v":[{"k":[24120],"v":[{"k":[20540],"v":[{"k":[25110],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[20063],"v":[{"k":[24456],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[29677],"v":[{"k":[32423],"v":[{"k":[23398],"v":[{"k":[29983],"v":[{"k":[36523],"v":[{"k":[39640],"v":[{"k":[21644],"v":[{"k":[20307],"v":[{"k":[37325],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[29366],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}},{"d":{"df":1,"dc":[[64,2]]}},{"k":[24230],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]},{"k":[25454],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[20174],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]},{"k":[24230],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]},{"k":[32463],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[32428],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[23450],"v":[{"k":[20301],"v":[{"k":[65292],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34920],"v":[{"k":[26126],"v":[{"k":[35813],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[22810],"v":[{"k":[23569],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36890],"v":[{"k":[30340,26679],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,3]]}}]}]}]}]},{"k":[38144,20135,111,110,25968,21517,32500,34920],"v":[{"k":[21806],"v":[{"k":[22320],"v":[{"k":[28857],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]},{"k":[21697],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[8221],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"k":[121],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]}]}]}]}]},{"k":[114],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[111],"v":[{"k":[116],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[25454],"v":[{"k":[21644],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,3]]}}]},{"k":[24230],"v":[{"d":{"df":1,"dc":[[64,2]]},"k":[50,51,49],"v":[{"k":[8221],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[8221],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[8221],"v":[{"k":[12289],"v":[{"k":[8220],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[53],"v":[{"k":[8221],"v":[{"k":[12289],"v":[{"k":[8220],"v":[{"k":[21517],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[183],"v":[{"k":[36798],"v":[{"k":[8221],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]},{"k":[24230],"v":[{"d":{"df":1,"dc":[[49,1]]},"k":[26631],"v":[{"k":[31614],"v":[{"d":{"df":1,"dc":[[49,1]]}}]}]}]},{"k":[39,32032],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[49,1]]}}]},{"k":[20043,30340],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65292],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[21644],"v":[{"k":[39640],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"d":{"df":1,"dc":[[49,1]]}}]},{"k":[20316],"v":[{"k":[39118,26102],"v":[{"k":[26684],"v":[{"k":[35268],"v":[{"k":[33539],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]},{"k":[65292],"v":[{"k":[24212],"v":[{"k":[23613],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27491],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[20070],"v":[{"k":[38754],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[65292],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[36739],"v":[{"k":[20026],"v":[{"k":[38543],"v":[{"k":[24847],"v":[{"k":[30340],"v":[{"k":[20010],"v":[{"k":[20154],"v":[{"k":[21338],"v":[{"k":[23458],"v":[{"k":[39118],"v":[{"k":[26684],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27861],"v":[{"k":[20027],"v":[{"k":[35201],"v":[{"k":[21442],"v":[{"k":[29031],"v":[{"k":[91],"v":[{"k":[20013],"v":[{"k":[25991],"v":[{"k":[25216],"v":[{"k":[26415],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[20316],"v":[{"k":[35268],"v":[{"k":[33539],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[103],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[98],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[114],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[121],"v":[{"k":[102],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[45],"v":[{"k":[103],"v":[{"k":[117],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[22312],"v":[{"k":[20889],"v":[{"k":[20316],"v":[{"k":[21069],"v":[{"k":[20808],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[19968],"v":[{"k":[36941],"v":[{"k":[35813],"v":[{"k":[35821],"v":[{"k":[27861],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857,22797,26500,20889],"v":[{"d":{"df":1,"dc":[[50,1]]}},{"k":[36755],"v":[{"k":[20837],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}},{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[33853],"v":[{"k":[30340],"v":[{"k":[21477],"v":[{"k":[23376],"v":[{"k":[35821],"v":[{"k":[27668],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[38472],"v":[{"k":[36848],"v":[{"k":[21644],"v":[{"k":[32943],"v":[{"k":[23450],"v":[{"k":[35821],"v":[{"k":[27668],"v":[{"k":[65292],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24863],"v":[{"k":[21497],"v":[{"k":[35821],"v":[{"k":[27668],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23376],"v":[{"k":[20869],"v":[{"k":[37096],"v":[{"k":[30340],"v":[{"k":[24182],"v":[{"k":[21015],"v":[{"k":[35789],"v":[{"k":[65292],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[29992],"v":[{"k":[20840],"v":[{"k":[35282],"v":[{"k":[39039],"v":[{"k":[21495],"v":[{"k":[40],"v":[{"k":[12289],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38548,27573,31163,21106,32452],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19981],"v":[{"k":[29992],"v":[{"k":[36887],"v":[{"k":[21495],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[20351],"v":[{"k":[24182],"v":[{"k":[21015],"v":[{"k":[35789],"v":[{"k":[26159],"v":[{"k":[33521],"v":[{"k":[35821],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[22914],"v":[{"k":[27492],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22411],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[32452],"v":[{"k":[20214],"v":[{"k":[26377],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[27169],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39118],"v":[{"k":[26684],"v":[{"k":[12290],"v":[{"k":[27605],"v":[{"k":[31455],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[36816],"v":[{"k":[34892],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[26368],"v":[{"k":[24120],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[22823],"v":[{"k":[22810],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]},{"k":[26609],"v":[{"k":[29366],"v":[{"d":{"df":1,"dc":[[121,1]]},"k":[22270],"v":[{"d":{"df":1,"dc":[[121,1]]},"k":[20063,36890],"v":[{"k":[34987],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[32858],"v":[{"k":[38598],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[24403],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24207],"v":[{"k":[21015],"v":[{"k":[24182],"v":[{"k":[25490],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[24182],"v":[{"k":[22312],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[36724],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[19979],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[30456],"v":[{"k":[24403],"v":[{"k":[20110],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[24102],"v":[{"k":[26377],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25110],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24120],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23558],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[25110],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[30340],"v":[{"k":[20960],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[32452],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[20687],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[30340],"v":[{"k":[38271],"v":[{"k":[24230],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[34987],"v":[{"k":[20998],"v":[{"k":[37197],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21333],"v":[{"k":[29420],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[33394],"v":[{"k":[31995],"v":[{"k":[30340],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[39281],"v":[{"k":[21644],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[32452],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30456],"v":[{"k":[20114],"v":[{"k":[38388],"v":[{"k":[38548],"v":[{"k":[24182],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[121,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35823],"v":[{"k":[65306],"v":[{"k":[25105],"v":[{"k":[26368],"v":[{"k":[27427],"v":[{"k":[36175],"v":[{"k":[30340],"v":[{"k":[31185],"v":[{"k":[25216],"v":[{"k":[20844],"v":[{"k":[21496],"v":[{"k":[26377],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35759],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]},{"k":[37324],"v":[{"k":[21644],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[50,1]]}}]}]}]}]}]}]},{"k":[21046],"v":[{"k":[21488,12290],"v":[{"k":[25171],"v":[{"k":[21360],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]},{"k":[23427],"v":[{"k":[26082],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26631],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[29702],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[36339],"v":[{"k":[36716],"v":[{"k":[21040],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[30334],"v":[{"k":[24230],"v":[{"k":[25628],"v":[{"k":[32034],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26377,20351,38656,24102,20197],"v":[{"k":[30340,25968],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[37117],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[26469],"v":[{"k":[30340],"v":[{"k":[24378],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[35753],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26356],"v":[{"k":[26377],"v":[{"k":[20449],"v":[{"k":[24515],"v":[{"k":[22320],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[25552],"v":[{"k":[39640],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[24615],"v":[{"k":[21644],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[24037],"v":[{"k":[20855],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20837],"v":[{"k":[30340],"v":[{"k":[21407,25968],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]},{"k":[25454],"v":[{"k":[20540],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]},{"k":[31181],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[20987,30340,38047],"v":[{"k":[21040,22312],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[51,4]]}}]},{"k":[20102],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[65292],"v":[{"k":[20570],"v":[{"k":[20123],"v":[{"k":[20160],"v":[{"k":[20040],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]}]},{"k":[24320,30340],"v":[{"k":[22987],"v":[{"k":[27839],"v":[{"k":[39034],"v":[{"k":[26102],"v":[{"k":[38024],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[24378],"v":[{"k":[35843],"v":[{"k":[20854],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24038],"v":[{"k":[36793],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20313],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[25353],"v":[{"k":[29031],"v":[{"k":[36870],"v":[{"k":[26102],"v":[{"k":[38024],"v":[{"k":[25490],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[25918],"v":[{"k":[22312],"v":[{"k":[24213],"v":[{"k":[37096],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[25152],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545,38656,26377],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[22238],"v":[{"k":[35843],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36755],"v":[{"k":[20986],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"d":{"df":1,"dc":[[75,1]]}}]},{"k":[31034,26126],"v":[{"d":{"df":3,"dc":[[64,1],[78,1],[81,2]]},"k":[32452,22312,36755,19981,26102,20351,24341,36825,23558,25226,31354],"v":[{"k":[20214],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[20869],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65307],"v":[{"k":[32780],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20837],"v":[{"k":[26469],"v":[{"k":[33258],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]}]}]},{"k":[24819,20351],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[29992],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[8221],"v":[{"k":[8220],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[8221],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38388],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[40664],"v":[{"k":[35748],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[20197],"v":[{"k":[21322],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[24819],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[114,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[24207],"v":[{"k":[21495],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[78,1]]}}]},{"k":[22278],"v":[{"k":[28857],"v":[{"k":[24179],"v":[{"k":[31227],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]},{"k":[24403],"v":[{"k":[21069],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[25104],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[23545],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[36866],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31532],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[65288],"v":[{"k":[21015],"v":[{"k":[65289],"v":[{"k":[24320],"v":[{"k":[22987],"v":[{"k":[23601],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450,28982],"v":[{"k":[20041],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013,21160,65288],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[30011],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[96],"v":[{"k":[99],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[109],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[23884],"v":[{"k":[22871],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[21457],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[32479],"v":[{"k":[19968],"v":[{"k":[31649],"v":[{"k":[29702],"v":[{"k":[20102],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[21160],"v":[{"k":[20316],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[21435],"v":[{"k":[35760],"v":[{"k":[24405],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[36335],"v":[{"k":[24452],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36718,38500],"v":[{"k":[27969],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,1]]},"k":[25110,20869],"v":[{"k":[30452],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[28040,31532,20540],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[39640],"v":[{"k":[20142],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[34892],"v":[{"k":[65289],"v":[{"k":[20026],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[65292],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[34892],"v":[{"k":[65289],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[21462],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[21644],"v":[{"k":[36830],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"d":{"df":1,"dc":[[51,1]]},"k":[22768,26631],"v":[{"k":[26126],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[65288],"v":[{"k":[21015],"v":[{"k":[65289],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[39064],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[21644],"v":[{"k":[31354],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30417],"v":[{"k":[21548],"v":[{"k":[22120],"v":[{"k":[27491],"v":[{"k":[22312],"v":[{"k":[30417],"v":[{"k":[21548],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[96],"v":[{"k":[122,101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]},{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26377],"v":[{"d":{"df":1,"dc":[[51,1]]}}]},{"k":[21619],"v":[{"k":[30528],"v":[{"k":[40736],"v":[{"k":[26631],"v":[{"k":[47],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[19981],"v":[{"k":[22312],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[26159],"v":[{"k":[20174],"v":[{"k":[8220],"v":[{"k":[31354],"v":[{"k":[30333],"v":[{"k":[22788],"v":[{"k":[8221],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[51,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23616],"v":[{"d":{"df":1,"dc":[[52,1]]}}]},{"k":[24335],"v":[{"d":{"df":1,"dc":[[52,1]]},"k":[65292],"v":[{"k":[21017],"v":[{"k":[20570],"v":[{"k":[19981],"v":[{"k":[21040],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[20114],"v":[{"d":{"df":1,"dc":[[52,1]]},"k":[33021],"v":[{"k":[21147],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[25454,12290],"v":[{"k":[22330,21517],"v":[{"k":[26223],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[20363],"v":[{"k":[21487],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[20132],"v":[{"k":[20114],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[65292],"v":[{"k":[28857],"v":[{"k":[20987],"v":[{"k":[25511],"v":[{"k":[21046],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25110],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21015],"v":[{"k":[65307],"v":[{"d":{"df":1,"dc":[[52,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23383],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[21040],"v":[{"k":[30456],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[22914],"v":[{"k":[26524],"v":[{"k":[30830],"v":[{"k":[23454],"v":[{"k":[26377],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[21487],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[79,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33394],"v":[{"k":[20027,65288,26126,30340,24863],"v":[{"k":[39064],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]}]}]}]}]}]}]},{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[36879],"v":[{"k":[26126],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[112],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26263],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[110],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[39281],"v":[{"k":[21644],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[33394],"v":[{"k":[35843],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[104],"v":[{"k":[117],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24773,35821],"v":[{"k":[24863],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]},{"k":[20041],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]},{"k":[30693],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[29289],"v":[{"k":[29702],"v":[{"k":[21644],"v":[{"k":[24515],"v":[{"k":[29702],"v":[{"k":[30456],"v":[{"k":[20114],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[35777],"v":[{"k":[26126],"v":[{"k":[20102],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[24863],"v":[{"k":[30693],"v":[{"k":[21040],"v":[{"k":[30340],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[26377],"v":[{"k":[20919],"v":[{"k":[19982],"v":[{"k":[26262],"v":[{"k":[20043],"v":[{"k":[20998],"v":[{"k":[65292],"v":[{"k":[26085],"v":[{"k":[26412],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[23398],"v":[{"k":[23478],"v":[{"k":[22823],"v":[{"k":[26234],"v":[{"k":[28009],"v":[{"k":[26366],"v":[{"k":[20570],"v":[{"k":[36807],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23454],"v":[{"k":[39564],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[22330],"v":[{"k":[22320],"v":[{"k":[28034],"v":[{"k":[28784],"v":[{"k":[38738],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[22330],"v":[{"k":[22320],"v":[{"k":[28034],"v":[{"k":[32418],"v":[{"k":[27225],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[22330],"v":[{"k":[22320],"v":[{"k":[30340],"v":[{"k":[23458],"v":[{"k":[35266],"v":[{"k":[28201],"v":[{"k":[24230],"v":[{"k":[21171],"v":[{"k":[21160],"v":[{"k":[24378],"v":[{"k":[24230],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[28784],"v":[{"k":[38738],"v":[{"k":[33394],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[22330],"v":[{"k":[22320],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[30340],"v":[{"k":[21592],"v":[{"k":[24037],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[24863],"v":[{"k":[35273],"v":[{"k":[21040],"v":[{"k":[20919],"v":[{"k":[12290],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[30740],"v":[{"k":[31350],"v":[{"k":[21457],"v":[{"k":[29616],"v":[{"k":[65292],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[20919],"v":[{"k":[19982],"v":[{"k":[26262],"v":[{"k":[30340],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[24863],"v":[{"k":[21463],"v":[{"k":[65292],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[36824],"v":[{"k":[26377],"v":[{"k":[36731],"v":[{"k":[19982],"v":[{"k":[37325],"v":[{"k":[12289],"v":[{"k":[36828],"v":[{"k":[19982],"v":[{"k":[36817],"v":[{"k":[12289],"v":[{"k":[27963],"v":[{"k":[27900],"v":[{"k":[19982],"v":[{"k":[24551],"v":[{"k":[37057],"v":[{"k":[31561],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[65292],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[20043],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[24378],"v":[{"k":[22823],"v":[{"k":[20043],"v":[{"k":[22788],"v":[{"k":[22312],"v":[{"k":[20110],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[33394],"v":[{"k":[24425],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[20154],"v":[{"k":[30340],"v":[{"k":[24515],"v":[{"k":[29702],"v":[{"k":[19982],"v":[{"k":[29983],"v":[{"k":[29702],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[24863],"v":[{"k":[21463],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[24341],"v":[{"k":[36215],"v":[{"k":[24773],"v":[{"k":[24863],"v":[{"k":[21453],"v":[{"k":[24212],"v":[{"k":[21644],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[20154],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[32490],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33394,25972],"v":[{"k":[30424],"v":[{"d":{"df":1,"dc":[[53,2]]},"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]},{"k":[20102,26631],"v":[{"d":{"df":1,"dc":[[81,1]]}},{"k":[31614],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[20197],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[38450],"v":[{"k":[27490],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[37325],"v":[{"k":[21472],"v":[{"k":[12290],"v":[{"k":[23427],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[20540],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35273],"v":[{"k":[26144,36890,35774,26679,25928],"v":[{"k":[23556],"v":[{"k":[65288],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36947],"v":[{"k":[65288],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35745],"v":[{"d":{"df":1,"dc":[[77,1]]},"k":[30340],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[20165],"v":[{"k":[26159],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[35753],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30475],"v":[{"k":[65292],"v":[{"k":[26356],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[31526],"v":[{"k":[21512],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[21407],"v":[{"k":[29702],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[26356],"v":[{"k":[24555],"v":[{"k":[36895],"v":[{"k":[22320],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[24819],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[23613],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[28040],"v":[{"k":[38500],"v":[{"k":[19981],"v":[{"k":[33391],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[35823],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[20808],"v":[{"k":[32423],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[26524],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[23613],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[22320],"v":[{"k":[35299],"v":[{"k":[37322],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[35831],"v":[{"k":[23581],"v":[{"k":[35797],"v":[{"k":[25214],"v":[{"k":[21040],"v":[{"k":[19982],"v":[{"k":[35266],"v":[{"k":[20247],"v":[{"k":[30340],"v":[{"k":[20808],"v":[{"k":[20837],"v":[{"k":[20026],"v":[{"k":[20027],"v":[{"k":[21644],"v":[{"k":[25991],"v":[{"k":[21270],"v":[{"k":[32852],"v":[{"k":[24819],"v":[{"k":[30456],"v":[{"k":[21305],"v":[{"k":[37197],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[33394],"v":[{"k":[26041],"v":[{"k":[26696],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[20013],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"k":[29461],"v":[{"k":[29492],"v":[{"k":[26691],"v":[{"k":[12289],"v":[{"k":[39321],"v":[{"k":[34121],"v":[{"k":[12289],"v":[{"k":[27225],"v":[{"k":[23376],"v":[{"k":[12289],"v":[{"k":[33609],"v":[{"k":[33683],"v":[{"k":[22235],"v":[{"k":[31181],"v":[{"k":[27700],"v":[{"k":[26524],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[20102],"v":[{"k":[19982],"v":[{"k":[27700],"v":[{"k":[26524],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[32511],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[27225],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[22312],"v":[{"k":[36776],"v":[{"k":[21035],"v":[{"k":[21644],"v":[{"k":[35760],"v":[{"k":[24518],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[25152],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[27700],"v":[{"k":[26524],"v":[{"k":[26102],"v":[{"k":[23601],"v":[{"k":[36731],"v":[{"k":[32780],"v":[{"k":[26131],"v":[{"k":[20030],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31616,24120,22823,21518,26032],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26356,26609,39292,25240,25955],"v":[{"k":[25913],"v":[{"k":[20840],"v":[{"k":[23616],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[110,1]]},"k":[21487],"v":[{"k":[20197],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"d":{"df":1,"dc":[[115,1]]}}]},{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]},{"k":[28857],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]},{"k":[35265],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[32447],"v":[{"k":[24615],"v":[{"k":[34920],"v":[{"k":[8220],"v":[{"k":[65292],"v":[{"k":[21363],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20540,30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[39,49],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[48],"v":[{"k":[48],"v":[{"k":[19978],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[20915],"v":[{"k":[23450],"v":[{"k":[12290],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[25105,32473,21097,20026],"v":[{"k":[20204],"v":[{"k":[32473],"v":[{"k":[20986],"v":[{"k":[65292,25968],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[20986],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[20313],"v":[{"k":[30340],"v":[{"k":[27809],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30418],"v":[{"k":[65292],"v":[{"k":[32039],"v":[{"k":[36148],"v":[{"k":[30528],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[21097],"v":[{"k":[20313],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[20013],"v":[{"k":[23621],"v":[{"k":[20013],"v":[{"k":[25918],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20102],"v":[{"k":[20351],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]},{"k":[29256],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]},{"k":[35775,12290,30340,25351,26159,65292],"v":[{"k":[38382],"v":[{"k":[21040],"v":[{"k":[12290],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[22120],"v":[{"k":[65292],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[32534],"v":[{"k":[36753],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[12290],"v":[{"k":[19979],"v":[{"k":[36733],"v":[{"k":[19979],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}},{"k":[20540],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20102],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[31649],"v":[{"k":[29992],"v":[{"k":[65311],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[24335],"v":[{"k":[30340,65289,65292],"v":[{"d":{"df":1,"dc":[[53,1]]},"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[25110],"v":[{"k":[32773],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[24207],"v":[{"k":[21495],"v":[{"k":[65288],"v":[{"k":[110],"v":[{"k":[117],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[101],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20174,36755],"v":[{"d":{"df":1,"dc":[[64,1]]}},{"k":[20837],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[23616,37096],"v":[{"k":[35843],"v":[{"k":[33394],"v":[{"k":[30424],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]},{"k":[20195],"v":[{"k":[30721],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[31995,22806,22278,20989],"v":[{"k":[21015],"v":[{"k":[33258],"v":[{"k":[24049],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[33394],"v":[{"k":[30424],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[101,36148],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[33457],"v":[{"k":[22270],"v":[{"k":[26696],"v":[{"k":[36824],"v":[{"k":[33021],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"k":[22312],"v":[{"k":[25253],"v":[{"k":[32440],"v":[{"k":[12289],"v":[{"k":[20070],"v":[{"k":[31821],"v":[{"k":[20043],"v":[{"k":[31867],"v":[{"k":[21482],"v":[{"k":[26377],"v":[{"k":[21333],"v":[{"k":[33394],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[23569],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[21360],"v":[{"k":[21047],"v":[{"k":[21697],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65307],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[23545],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[26356],"v":[{"k":[30452],"v":[{"k":[35266],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[30340],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[21709],"v":[{"k":[24212],"v":[{"k":[20107],"v":[{"k":[20214],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[20250],"v":[{"k":[19981],"v":[{"k":[26029],"v":[{"k":[34987],"v":[{"k":[35302],"v":[{"k":[21457],"v":[{"k":[12290],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20171],"v":[{"k":[32461],"v":[{"k":[35814],"v":[{"k":[24773],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[20013],"v":[{"k":[20250],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"k":[26032],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31614,35760,39064],"v":[{"d":{"df":1,"dc":[[77,1]]},"k":[30340,26159],"v":[{"k":[25991,20301,26059],"v":[{"k":[23383],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[53,2]]}}]}]},{"k":[32622],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"k":[36716],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]},{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[26680],"v":[{"k":[24515],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[20043],"v":[{"k":[19968],"v":[{"k":[65292],"v":[{"k":[28165],"v":[{"k":[26224],"v":[{"k":[32780],"v":[{"k":[26126],"v":[{"k":[30830],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[23545],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26377],"v":[{"k":[26356],"v":[{"k":[20934],"v":[{"k":[30830],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[12290],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26679],"v":[{"k":[24335],"v":[{"k":[21517],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]},{"k":[22359,25991],"v":[{"k":[26159],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]},{"k":[23383],"v":[{"k":[23621],"v":[{"k":[24038,20013],"v":[{"d":{"df":1,"dc":[[75,1]]}},{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[25351,29983,22815,21516,22312],"v":[{"k":[23450],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21040],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[12289],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[65292],"v":[{"k":[35814],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[53,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[8221],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[8221],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[24037],"v":[{"k":[20316],"v":[{"k":[37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[24335],"v":[{"k":[22320],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36941,36148],"v":[{"k":[21382],"v":[{"k":[24182],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"k":[28385],"v":[{"k":[36275],"v":[{"k":[26465],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36817],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[24605],"v":[{"k":[32500],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[65288],"v":[{"k":[105],"v":[{"k":[65289],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[65288],"v":[{"k":[105],"v":[{"k":[105],"v":[{"k":[65289],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21040],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[24418],"v":[{"k":[25104],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26102],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[21487,25903,26159,20250,33021],"v":[{"k":[20197],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[54,2]]}}]}]}]}]},{"k":[25345],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[31181],"v":[{"k":[20250],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[38750],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[26356],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[35802],"v":[{"k":[24847],"v":[{"k":[21644],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[35782],"v":[{"k":[21035],"v":[{"k":[20986],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[12290],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[35753],"v":[{"k":[22823],"v":[{"k":[23478],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[29305],"v":[{"k":[24847],"v":[{"k":[20889],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"d":{"df":2,"dc":[[54,2],[62,1]]},"k":[25991,25968],"v":[{"k":[26412],"v":[{"k":[21487,29255],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[20307],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27573],"v":[{"k":[30340],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[30418],"v":[{"k":[23610],"v":[{"k":[23544],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[29992],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[23601],"v":[{"k":[34892],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26159,27809,21487,19981],"v":[{"k":[8220],"v":[{"k":[19968,19977],"v":[{"k":[32500],"v":[{"k":[8220],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]},{"k":[32500],"v":[{"k":[8220],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[21015],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26377],"v":[{"k":[34987],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[33021],"v":[{"k":[26377],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[36755],"v":[{"k":[20837],"v":[{"k":[25110],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[36755],"v":[{"k":[20986],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[21462],"v":[{"k":[32780],"v":[{"k":[20195],"v":[{"k":[20043],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[26032],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20108,19977,19968],"v":[{"k":[32500,20010],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[121],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[54,1]]}}]},{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[121],"v":[{"k":[109],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010,21015],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[21442],"v":[{"k":[25968],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[20010],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[30340],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[22312],"v":[{"k":[25552,25105],"v":[{"k":[20379],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[24635],"v":[{"k":[32467],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[32493],"v":[{"k":[22411],"v":[{"k":[19982,30340,35270,25968],"v":[{"k":[20998],"v":[{"k":[27573],"v":[{"k":[22411],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[32452],"v":[{"k":[20214],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24847],"v":[{"k":[24605],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[26159],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65307],"v":[{"k":[32780],"v":[{"k":[20998],"v":[{"k":[27573],"v":[{"k":[22411],"v":[{"k":[21017],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[34987],"v":[{"k":[20998],"v":[{"k":[25104],"v":[{"k":[20102],"v":[{"k":[22810],"v":[{"k":[27573],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[26159],"v":[{"k":[31163],"v":[{"k":[25955],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"d":{"df":1,"dc":[[54,1]]},"k":[36890],"v":[{"k":[36807],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[20540],"v":[{"k":[12289],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30830],"v":[{"k":[23450],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[24179,33258],"v":[{"k":[22343],"v":[{"k":[20998],"v":[{"k":[27573],"v":[{"k":[65306],"v":[{"k":[20381],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[20998],"v":[{"k":[27573],"v":[{"k":[65306],"v":[{"k":[20381],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25351,33021],"v":[{"k":[23450],"v":[{"k":[20102],"v":[{"k":[36229,23558],"v":[{"k":[20986],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[33539],"v":[{"k":[22260],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21738],"v":[{"k":[20010],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[20570],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25903],"v":[{"k":[25345],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25104],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25139],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[35813],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25955,32676],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65288],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[24615],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[54,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"d":{"df":3,"dc":[[56,1],[62,8],[64,2]]},"k":[21448,20063,20294,36825],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[23601],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[24341],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[19978],"v":[{"k":[36848],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[26159],"v":[{"k":[20063],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36755],"v":[{"k":[20986],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[21482],"v":[{"k":[22312],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[29615],"v":[{"k":[22659],"v":[{"k":[20013],"v":[{"k":[29983],"v":[{"k":[25928],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[20363],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[108],"v":[{"k":[116],"v":[{"k":[59],"v":[{"k":[104],"v":[{"k":[114],"v":[{"k":[38],"v":[{"k":[103],"v":[{"k":[116],"v":[{"k":[59],"v":[{"d":{"df":1,"dc":[[59,1]]}}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[61,1]]},"k":[91],"v":[{"k":[51],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[120],"v":[{"k":[50],"v":[{"k":[52],"v":[{"k":[48],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[36],"v":[{"k":[123],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[108],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[121],"v":[{"k":[118],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[125],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[45],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[47],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[45],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[38],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[38],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[61],"v":[{"k":[49],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[62,1],[64,2]]},"k":[21151,39,20063,65306,65292,12290,26469,21518,20013,30340,23545,8221,21487],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[121],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[39],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[20250],"v":[{"k":[34987],"v":[{"k":[29983],"v":[{"k":[25104],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20986],"v":[{"k":[26469],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[91],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[120],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[63],"v":[{"k":[99],"v":[{"k":[61],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[120],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[41],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[62,1],[64,1]]},"k":[42],"v":[{"k":[42],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]},{"k":[20063,37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[31867],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[65288],"v":[{"k":[8220],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[20026],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25139],"v":[{"k":[65292],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26159],"v":[{"k":[20854],"v":[{"k":[20182],"v":[{"k":[19981],"v":[{"k":[21487],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[20026],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25139],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[20250],"v":[{"k":[34987],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[62,1],[64,1]]},"k":[21453],"v":[{"k":[20043],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[25226],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[20540],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[21518],"v":[{"k":[20877],"v":[{"k":[20570],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[29616],"v":[{"k":[22312],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[30340],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[22120],"v":[{"k":[26377],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20877],"v":[{"k":[20570],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[35299],"v":[{"k":[26512],"v":[{"k":[22120],"v":[{"k":[30340],"v":[{"k":[34892],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[21644],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25490],"v":[{"k":[36807],"v":[{"k":[24207],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34892],"v":[{"k":[25110],"v":[{"k":[21015],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[20026],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24212],"v":[{"k":[21040],"v":[{"k":[8220,34920],"v":[{"k":[21015],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[21015],"v":[{"k":[23601],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[8220],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34892],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[32780,27599],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[21015],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[22312,21462],"v":[{"k":[23450],"v":[{"k":[20041],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20540],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[35937],"v":[{"k":[22320],"v":[{"k":[26469],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[20844],"v":[{"k":[24335],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[116],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[64,1],[78,1]]},"k":[25968,8220],"v":[{"k":[25454],"v":[{"k":[20998,38598],"v":[{"k":[25104],"v":[{"k":[22810],"v":[{"k":[20221],"v":[{"k":[29992],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[32500],"v":[{"k":[24230],"v":[{"k":[48],"v":[{"k":[8221],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[64,1],[78,2]]},"k":[26576,20110,25143,26356,26469,39068],"v":[{"k":[20123],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[31639],"v":[{"k":[27861],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[32467],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25351],"v":[{"k":[23450],"v":[{"k":[31579],"v":[{"k":[36873],"v":[{"k":[26465],"v":[{"k":[20214],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[26032],"v":[{"k":[21518],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[21462],"v":[{"k":[20195],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[33394],"v":[{"k":[22686,26469],"v":[{"k":[24378],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]},{"k":[21306],"v":[{"k":[20998],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]},{"k":[30340,37027,20215,25910,20854],"v":[{"k":[25968,26102],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[38388],"v":[{"k":[37324],"v":[{"k":[65292],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[26684],"v":[{"k":[22823],"v":[{"k":[20110],"v":[{"k":[31561],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[20837],"v":[{"k":[26159,30340,30456],"v":[{"d":{"df":1,"dc":[[124,1]]}},{"k":[20116],"v":[{"k":[20493],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[23454],"v":[{"k":[38469],"v":[{"k":[19978],"v":[{"k":[22914],"v":[{"k":[21491],"v":[{"k":[20391],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23436],"v":[{"k":[25972],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[34920],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]},{"k":[23454],"v":[{"k":[21482],"v":[{"k":[25552],"v":[{"k":[21319],"v":[{"k":[20102],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]},{"k":[26679],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[20040,21516],"v":[{"k":[36755,23601],"v":[{"k":[20837],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[26469],"v":[{"k":[33258],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[20250],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[26679],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[25442],"v":[{"k":[25104],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[21017],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[22987,26377],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[62,2]]}}]}]},{"k":[30340],"v":[{"k":[22269],"v":[{"k":[38469],"v":[{"k":[21270],"v":[{"k":[26041],"v":[{"k":[26696],"v":[{"k":[65292],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[21442],"v":[{"k":[25968],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[20986],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[32626],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[8203],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[20182,27599,38656,34920,19979,25353],"v":[{"k":[20204],"v":[{"k":[26500],"v":[{"k":[25104],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38142],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[35201],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[31034],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[38754],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[25193],"v":[{"k":[23637],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[21319],"v":[{"k":[32423],"v":[{"k":[21040],"v":[{"k":[26368],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[29256],"v":[{"k":[26412],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27604],"v":[{"k":[20363],"v":[{"k":[20998],"v":[{"k":[37197],"v":[{"k":[23427],"v":[{"k":[20204],"v":[{"k":[22312],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[24359],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[26368,21363,105],"v":[{"k":[21518],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[31163],"v":[{"k":[32676],"v":[{"k":[28857],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]},{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"k":[20986],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[65292],"v":[{"k":[31163],"v":[{"k":[32676],"v":[{"k":[28857],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}},{"k":[22806],"v":[{"k":[65292],"v":[{"k":[91,36824],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[35],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[116],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[115],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[109],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[41],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]},{"k":[65292,24212,32493,20877,30340,21363],"v":[{"d":{"df":1,"dc":[[62,1]]},"k":[23601],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]},{"k":[35813],"v":[{"k":[36319],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]},{"k":[20250],"v":[{"k":[26377],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36827],"v":[{"k":[34892],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[39035],"v":[{"k":[22312],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[65288],"v":[{"k":[91],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[115],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"k":[46],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[103],"v":[{"k":[47],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[46],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[109],"v":[{"k":[108],"v":[{"k":[35],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[41],"v":[{"k":[65289],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[21518],"v":[{"k":[25165],"v":[{"k":[33021],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20307],"v":[{"k":[31215],"v":[{"k":[36275],"v":[{"k":[22815],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21435],"v":[{"k":[38500],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[20250],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[34987],"v":[{"k":[25171],"v":[{"k":[21253],"v":[{"k":[36827],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[20381],"v":[{"k":[36182],"v":[{"k":[12290],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[21069],"v":[{"k":[38754],"v":[{"k":[25552],"v":[{"k":[21040],"v":[{"k":[30340],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[25353],"v":[{"k":[38656],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[110],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[23558],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[34987],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[24341],"v":[{"k":[20837],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21487],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]},{"k":[34987,26356,33258,25214,26681],"v":[{"d":{"df":1,"dc":[[62,1]]}},{"k":[20248],"v":[{"k":[20808],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[21160],"v":[{"k":[23581,20351],"v":[{"k":[35797],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[36275],"v":[{"k":[22815],"v":[{"k":[20934],"v":[{"k":[30830],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[25163],"v":[{"k":[21160],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[20869],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[20173],"v":[{"k":[24212],"v":[{"k":[23567],"v":[{"k":[24515],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[20250],"v":[{"k":[23548],"v":[{"k":[33268],"v":[{"k":[30340],"v":[{"k":[38750],"v":[{"k":[39044],"v":[{"k":[26399],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[20004],"v":[{"k":[32452],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[24046],"v":[{"k":[24322],"v":[{"k":[28982],"v":[{"k":[21518],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[21512],"v":[{"k":[36866],"v":[{"k":[30340],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[21435],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]},{"k":[20174,24471,35774,65292,12290,30340,23601],"v":[{"d":{"df":1,"dc":[[62,1]]}},{"k":[19968],"v":[{"k":[25552],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]},{"k":[24471,32622,20026],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22823],"v":[{"k":[65292],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[22312],"v":[{"k":[26368],"v":[{"k":[19978],"v":[{"k":[26041],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[35206],"v":[{"k":[30422],"v":[{"k":[20303],"v":[{"k":[24050],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20540],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[35813],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[12290],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[35828],"v":[{"k":[65292],"v":[{"k":[25317],"v":[{"k":[26377],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[112,1]]}}]},{"k":[37325,19968],"v":[{"k":[32472],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[20351],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[21516],"v":[{"k":[27493],"v":[{"k":[20110],"v":[{"k":[34987],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[38544],"v":[{"k":[34255],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[65292],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[22686,20943],"v":[{"k":[21152],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]},{"k":[23569],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":2,"dc":[[78,1],[113,1]]}},{"k":[21464,31995,28857],"v":[{"k":[21270],"v":[{"k":[29366],"v":[{"k":[20917],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[23558],"v":[{"k":[22534],"v":[{"k":[31215],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[32452],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]}]},{"k":[21040],"v":[{"k":[39640,20302],"v":[{"d":{"df":1,"dc":[[130,1]]}},{"d":{"df":1,"dc":[[130,1]]}}]}]}]},{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[35774],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[111,1]]}}]}]}]}]}]}]}]},{"k":[20010,25968,31995,28155],"v":[{"d":{"df":1,"dc":[[64,1]]},"k":[20851],"v":[{"k":[31995],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[31526],"v":[{"k":[33021],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[24120],"v":[{"k":[35265],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36866],"v":[{"k":[20110],"v":[{"k":[29992],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[12290],"v":[{"k":[24191],"v":[{"k":[20026],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[34920],"v":[{"k":[26684],"v":[{"k":[36719],"v":[{"k":[20214],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]},{"k":[21152],"v":[{"k":[19968],"v":[{"k":[39033],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20102],"v":[{"k":[8212],"v":[{"k":[8212],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[38632,32467],"v":[{"d":{"df":1,"dc":[[62,1]]}},{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[65289],"v":[{"k":[12290],"v":[{"k":[8220],"v":[{"k":[31867],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[8221],"v":[{"k":[26412],"v":[{"k":[36523],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[20026],"v":[{"k":[23383],"v":[{"k":[38754],"v":[{"k":[25152],"v":[{"k":[25551],"v":[{"k":[36848],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23383],"v":[{"k":[31526],"v":[{"k":[20018],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[20063],"v":[{"k":[34987],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[29992],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20316],"v":[{"k":[31526],"v":[{"k":[33021,12290],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[27491],"v":[{"k":[21017],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[24335],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"k":[24230],"v":[{"k":[19978,65288,21487,30340,31867],"v":[{"k":[36873],"v":[{"k":[20986],"v":[{"k":[22995],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]},{"d":{"df":1,"dc":[[64,1]]}},{"k":[20197],"v":[{"k":[26377],"v":[{"k":[21333],"v":[{"k":[29420],"v":[{"k":[30340],"v":[{"k":[21517],"v":[{"k":[23383],"v":[{"k":[65292],"v":[{"k":[20415],"v":[{"k":[20110],"v":[{"k":[22312],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20013],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23450],"v":[{"k":[20041],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21333],"v":[{"k":[29420],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[22411],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[26159,23567],"v":[{"k":[27880,32570,19981],"v":[{"k":[24847],"v":[{"d":{"df":1,"dc":[[62,1]]}}]},{"k":[28857],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[24120],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[20808],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[25226],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[21040],"v":[{"k":[21508],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[65288],"v":[{"k":[21644],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[36724],"v":[{"k":[65289],"v":[{"k":[20013],"v":[{"k":[12290],"v":[{"k":[27492],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[21033],"v":[{"k":[20110],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20849],"v":[{"k":[20139],"v":[{"k":[19968],"v":[{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[19981],"v":[{"k":[21033],"v":[{"k":[20110],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[21407],"v":[{"k":[22987],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12289],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[23433],"v":[{"k":[25490],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21516],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[21152],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[21028],"v":[{"k":[26029],"v":[{"k":[20986],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[25152],"v":[{"k":[20197],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[32780],"v":[{"k":[35328],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[33324],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[22635],"v":[{"k":[20805],"v":[{"k":[33394],"v":[{"k":[20197],"v":[{"k":[34920],"v":[{"k":[26126],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[118,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20110],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[38750,20869,25968],"v":[{"d":{"df":2,"dc":[[62,1],[64,1]]}},{"k":[32622],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[25454],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]},{"k":[24207],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]},{"k":[28388],"v":[{"k":[22120],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]},{"k":[20808],"v":[{"k":[35201,65292,26159],"v":[{"k":[27880],"v":[{"k":[20876],"v":[{"k":[22806],"v":[{"k":[37096],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[22120],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[62,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[20174,26102,25105],"v":[{"k":[24038],"v":[{"k":[21521],"v":[{"k":[21491],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[32039],"v":[{"k":[38752],"v":[{"k":[25918],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]},{"k":[38388],"v":[{"k":[36724],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[22914],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[33324],"v":[{"k":[32477],"v":[{"k":[23545],"v":[{"k":[24179],"v":[{"k":[22343],"v":[{"k":[20998],"v":[{"k":[21106],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26159],"v":[{"k":[36873],"v":[{"k":[21462],"v":[{"k":[24180],"v":[{"k":[12289],"v":[{"k":[26376],"v":[{"k":[12289],"v":[{"k":[26085],"v":[{"k":[12289],"v":[{"k":[25972],"v":[{"k":[28857],"v":[{"k":[36825],"v":[{"k":[31867],"v":[{"k":[26356],"v":[{"k":[26377],"v":[{"k":[24847],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[33021],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[23618],"v":[{"k":[32423],"v":[{"k":[30340],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20204],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[29233],"v":[{"k":[24515],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]},{"k":[40664],"v":[{"k":[35748],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[30340],"v":[{"k":[25913],"v":[{"k":[21160],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26126],"v":[{"k":[19968,22810,30340],"v":[{"k":[20010],"v":[{"d":{"df":2,"dc":[[64,2],[78,1]]}}]},{"k":[20010],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[22522],"v":[{"k":[26412],"v":[{"k":[32467],"v":[{"k":[26500],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[20882],"v":[{"k":[21495],"v":[{"k":[24038],"v":[{"k":[36793],"v":[{"k":[26159],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[12289],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[31561],"v":[{"k":[29305],"v":[{"k":[23450],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32780,21333],"v":[{"k":[35328],"v":[{"k":[20043],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[26684],"v":[{"k":[30340],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[23454],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[32473],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[34892],"v":[{"k":[19978],"v":[{"k":[32437],"v":[{"k":[21521],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[26412],"v":[{"k":[29255],"v":[{"k":[27573],"v":[{"k":[35774],"v":[{"k":[23450],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[35265],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25353,26159,21487],"v":[{"k":[26368],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[65306],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32500,26412,34987,22278],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[12290],"v":[{"k":[20174],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[34892],"v":[{"k":[24320],"v":[{"k":[22987],"v":[{"k":[65292],"v":[{"k":[25165],"v":[{"k":[26159],"v":[{"k":[27491],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25991],"v":[{"k":[26368],"v":[{"k":[21021],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22359],"v":[{"k":[20013],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[46],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[24403],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[26159],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]},{"k":[36825,19979],"v":[{"k":[20010],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[38754],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]},{"k":[32435],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[22810,23478],"v":[{"k":[25968],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[21435],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22312],"v":[{"k":[26032],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[39029],"v":[{"k":[38754],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[24320],"v":[{"k":[21551],"v":[{"k":[33039],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[30475],"v":[{"k":[21040],"v":[{"k":[35813],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35299,65292],"v":[{"k":[20102,12290],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[27010],"v":[{"k":[24565],"v":[{"k":[21518],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36825],"v":[{"k":[37324],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[32447],"v":[{"k":[23485],"v":[{"k":[65288],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[20026],"v":[{"k":[20363],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22240,36825],"v":[{"k":[27492],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]},{"k":[26102],"v":[{"k":[20505],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[20250],"v":[{"k":[33258],"v":[{"k":[21160],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[26524],"v":[{"k":[26377],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[35805],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26144,21644,26174],"v":[{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,2]]}}]}]},{"k":[31532],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[31034],"v":[{"k":[22312],"v":[{"k":[25552],"v":[{"k":[31034],"v":[{"k":[26694],"v":[{"k":[65288],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[112],"v":[{"k":[65289],"v":[{"k":[20013],"v":[{"k":[65311],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24577,30011,20316],"v":[{"k":[26356,21465,25490],"v":[{"k":[26032],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26102],"v":[{"k":[26377],"v":[{"k":[29992],"v":[{"k":[22788],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[26032],"v":[{"k":[32769],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20107],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[24207],"v":[{"k":[22270,26609],"v":[{"d":{"df":1,"dc":[[77,1]]},"k":[23637],"v":[{"k":[29616],"v":[{"k":[20102],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[38543],"v":[{"k":[30528],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[22312],"v":[{"k":[25490],"v":[{"k":[21517],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[34893],"v":[{"k":[21464],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[20960],"v":[{"k":[34892],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[23601],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[109,1]]},"k":[26159],"v":[{"d":{"df":1,"dc":[[109,1]]}}]}]}]}]}]}]},{"d":{"df":1,"dc":[[71,1]]},"k":[23545],"v":[{"k":[20110],"v":[{"k":[20154],"v":[{"k":[31867],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[30340],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[24615],"v":[{"k":[19981],"v":[{"k":[35328],"v":[{"k":[32780],"v":[{"k":[21947],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[20043],"v":[{"k":[21069],"v":[{"k":[30340],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20250],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[21644],"v":[{"k":[36807],"v":[{"k":[28193],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21464],"v":[{"k":[25442],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[32852],"v":[{"k":[31995],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[20986],"v":[{"k":[29616],"v":[{"k":[21644],"v":[{"k":[21464],"v":[{"k":[25442],"v":[{"k":[26174],"v":[{"k":[24471],"v":[{"k":[19981],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[29983],"v":[{"k":[30828],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[27425],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[26356],"v":[{"k":[26159],"v":[{"k":[22823],"v":[{"k":[24133],"v":[{"k":[24230],"v":[{"k":[22686],"v":[{"k":[24378],"v":[{"k":[20102],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[30340],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[21465],"v":[{"k":[20107],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65292],"v":[{"k":[12290],"v":[{"k":[24076],"v":[{"k":[26395],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[21457],"v":[{"k":[25381],"v":[{"k":[21160],"v":[{"k":[30011],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[30340],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[20316],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[20511],"v":[{"k":[21161],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[21465],"v":[{"k":[20107],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[24110],"v":[{"k":[21161],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[26356],"v":[{"k":[23481],"v":[{"k":[26131],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[32972],"v":[{"k":[21518],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[30340],"v":[{"k":[25925],"v":[{"k":[20107],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31867],"v":[{"k":[22411],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]},{"k":[23556],"v":[{"k":[21040],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[36724,20010],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[97],"v":[{"k":[120],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[65289],"v":[{"k":[29305],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26609],"v":[{"k":[23376],"v":[{"k":[30340],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[19981],"v":[{"k":[23567],"v":[{"k":[20110],"v":[{"k":[26609],"v":[{"k":[38388],"v":[{"k":[38388],"v":[{"k":[38553],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20493],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[65288,26609],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[29305],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[23646],"v":[{"k":[24615],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29366],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[108,1]]}}]}]}]}]}]}]},{"k":[23545],"v":[{"k":[26368,36825],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65288],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[107],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20221],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[37197],"v":[{"k":[33394],"v":[{"k":[26041],"v":[{"k":[26696],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[26469],"v":[{"k":[30475],"v":[{"k":[24456],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[65292],"v":[{"k":[21491],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[37197],"v":[{"k":[33394],"v":[{"k":[26356],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[29980],"v":[{"k":[21697],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[31561],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[20250],"v":[{"k":[37319],"v":[{"k":[29992],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[12290],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[30340],"v":[{"k":[26144],"v":[{"k":[23556],"v":[{"k":[35268],"v":[{"k":[21017],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[65292],"v":[{"k":[22823],"v":[{"k":[20307],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65306],"v":[{"k":[22914,25968,101],"v":[{"k":[20309],"v":[{"k":[25226,35753],"v":[{"k":[31532],"v":[{"k":[19977,20108],"v":[{"k":[21015,34892],"v":[{"k":[35774,26144],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[23556],"v":[{"k":[20026],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65311],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]},{"k":[21015],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[20026],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65311],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]},{"k":[31532],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"k":[25454],"v":[{"k":[37324],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65292],"v":[{"k":[37027],"v":[{"k":[20040],"v":[{"k":[24590],"v":[{"k":[20040],"v":[{"k":[32473],"v":[{"k":[20986],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[65311],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[110],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[100],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]},{"k":[65306],"v":[{"d":{"df":1,"dc":[[64,6]]},"k":[21487],"v":[{"k":[20197],"v":[{"k":[26597],"v":[{"k":[26597],"v":[{"k":[26377],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[25340],"v":[{"k":[38169],"v":[{"k":[65292],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[65292],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[21517],"v":[{"k":[26159],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[39],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[102],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[27873],"v":[{"k":[23610,22270],"v":[{"k":[23544],"v":[{"k":[65306],"v":[{"k":[53],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]},{"d":{"df":1,"dc":[[127,1]]},"k":[26159,30340],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[19982],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[31867],"v":[{"k":[20284],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[65288],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]},{"k":[32032],"v":[{"k":[21040,12290],"v":[{"d":{"df":1,"dc":[[64,1]]}},{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[20855],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[25104],"v":[{"d":{"df":1,"dc":[[64,1]]}}]},{"k":[24335],"v":[{"k":[65288,12290],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"k":[25968],"v":[{"k":[32452],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[26159],"v":[{"k":[20010],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[26684],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[64,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[64,1]]}}]}]},{"k":[21495],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[64,3]]}}]}]},{"k":[27493],"v":[{"k":[25968,21152],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21152],"v":[{"k":[36733],"v":[{"k":[19982],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]},{"k":[36733],"v":[{"d":{"df":1,"dc":[[71,1]]},"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]},{"k":[20837],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[71,1]]},"k":[21644,65292],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[39033],"v":[{"k":[23601],"v":[{"k":[34892],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]},{"k":[32780],"v":[{"k":[19981],"v":[{"k":[29992],"v":[{"k":[32771],"v":[{"k":[34385],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21040],"v":[{"k":[24213],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[20102],"v":[{"k":[37027],"v":[{"k":[20123],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39537],"v":[{"k":[21160],"v":[{"k":[65292],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[39537],"v":[{"k":[21160],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23637],"v":[{"k":[29616],"v":[{"k":[30340],"v":[{"k":[25913],"v":[{"k":[21464],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[20063],"v":[{"k":[21464],"v":[{"k":[24471],"v":[{"k":[24322],"v":[{"k":[24120],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[71,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[26234],"v":[{"k":[33021],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]},{"k":[21153,27880],"v":[{"k":[24517],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[91],"v":[{"k":[25991],"v":[{"k":[26723],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[58],"v":[{"k":[47],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[109],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[112],"v":[{"k":[114],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[46],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[117],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[109],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[99],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[47],"v":[{"k":[102],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[101],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[107],"v":[{"k":[47],"v":[{"k":[101],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[41],"v":[{"k":[30340],"v":[{"k":[12300],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[24615],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[12301],"v":[{"k":[20197],"v":[{"k":[20102],"v":[{"k":[35299],"v":[{"k":[21508],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[30340],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[72,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24847],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[25442],"v":[{"k":[20026],"v":[{"k":[26368],"v":[{"k":[26032],"v":[{"k":[29256],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]},{"k":[20449],"v":[{"k":[23567],"v":[{"k":[31243],"v":[{"k":[24207],"v":[{"k":[25903],"v":[{"k":[25345],"v":[{"k":[24494],"v":[{"k":[20449],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,2]]},"k":[27809],"v":[{"k":[26377],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[73,1]]}}]}]}]}]},{"k":[21153],"v":[{"k":[31471],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"d":{"df":1,"dc":[[74,1]]},"k":[21487,26041],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27969],"v":[{"k":[34892],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]},{"k":[26696],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]}]}]}]},{"k":[22659],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"d":{"df":1,"dc":[[74,1]]}}]}]}]}]},{"k":[25991],"v":[{"k":[26412],"v":[{"k":[26631,30340],"v":[{"k":[31614],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[20307],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[65306],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[108],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[119],"v":[{"k":[101],"v":[{"k":[105],"v":[{"k":[103],"v":[{"k":[104],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[122],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[102],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[116],"v":[{"k":[102],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35797],"v":[{"k":[22312],"v":[{"k":[19979],"v":[{"k":[38754],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[20013],"v":[{"k":[20462],"v":[{"k":[25913],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[111],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[96],"v":[{"k":[21644],"v":[{"k":[96],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[110],"v":[{"k":[99],"v":[{"k":[101],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25913],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"k":[20123],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[33021],"v":[{"k":[26377],"v":[{"k":[36275],"v":[{"k":[22815],"v":[{"k":[38271],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23545],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[26059],"v":[{"k":[36716],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[75,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28982],"v":[{"k":[36825,39292],"v":[{"k":[21644],"v":[{"d":{"df":1,"dc":[[75,1]]}}]},{"k":[22270],"v":[{"k":[33021],"v":[{"k":[24555],"v":[{"k":[36895],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[22320],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[20363],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[34987],"v":[{"k":[24191],"v":[{"k":[27867],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[21508],"v":[{"k":[20010],"v":[{"k":[39046],"v":[{"k":[22495],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[21450],"v":[{"k":[20854],"v":[{"k":[21464],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[19968],"v":[{"k":[30452],"v":[{"k":[26159],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[21463],"v":[{"k":[20105],"v":[{"k":[35758],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[22312],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[21450],"v":[{"k":[20854],"v":[{"k":[21464],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[26102],"v":[{"k":[19968],"v":[{"k":[23450],"v":[{"k":[35201],"v":[{"k":[35880],"v":[{"k":[24910],"v":[{"k":[24182],"v":[{"k":[36991],"v":[{"k":[20813],"v":[{"k":[36208],"v":[{"k":[36827],"v":[{"k":[35823],"v":[{"k":[21306],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32456],"v":[{"k":[33268],"v":[{"k":[21147],"v":[{"k":[20110],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[21019],"v":[{"k":[36896],"v":[{"k":[28789],"v":[{"k":[27963],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"k":[26368],"v":[{"k":[26032],"v":[{"k":[25512],"v":[{"k":[20986],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35937],"v":[{"k":[19968],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[21160],"v":[{"k":[24577],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[21019],"v":[{"k":[36896],"v":[{"k":[20986],"v":[{"k":[22810],"v":[{"k":[20040],"v":[{"k":[20196],"v":[{"k":[20154],"v":[{"k":[31216],"v":[{"k":[22855],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[20316],"v":[{"k":[21697],"v":[{"k":[65281],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26469],"v":[{"k":[20102],"v":[{"k":[36866],"v":[{"k":[20110],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36724],"v":[{"k":[12290],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[40664],"v":[{"k":[35748],"v":[{"k":[35774],"v":[{"k":[35745],"v":[{"k":[26356],"v":[{"k":[31361],"v":[{"k":[20986],"v":[{"k":[37325],"v":[{"k":[35201],"v":[{"k":[30340],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[25552],"v":[{"k":[20379],"v":[{"k":[20102],"v":[{"k":[26356],"v":[{"k":[28789],"v":[{"k":[27963],"v":[{"k":[30340],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[21270],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[26681],"v":[{"k":[25454],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[38656],"v":[{"k":[27714],"v":[{"k":[23450],"v":[{"k":[21046],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[20869],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[19979],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[34920],"v":[{"k":[30424],"v":[{"d":{"df":2,"dc":[[77,1],[79,1]]},"k":[20063,30340,65288],"v":[{"k":[34987],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[25320],"v":[{"k":[21495],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[25110],"v":[{"k":[36895],"v":[{"k":[24230],"v":[{"k":[34920],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[31867],"v":[{"k":[20284],"v":[{"k":[20110],"v":[{"k":[25320],"v":[{"k":[21495],"v":[{"k":[47],"v":[{"k":[36895],"v":[{"k":[24230],"v":[{"k":[35745],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[35835],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[25311],"v":[{"k":[29289],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[12290],"v":[{"k":[20202],"v":[{"k":[34920],"v":[{"k":[30424],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[21010],"v":[{"k":[20998],"v":[{"k":[25351],"v":[{"k":[31034],"v":[{"k":[20540],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[26631],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[25351],"v":[{"k":[31034],"v":[{"k":[32500],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[25351],"v":[{"k":[38024],"v":[{"k":[35282],"v":[{"k":[24230],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[79,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[79,1]]}}]}]}]}]},{"k":[96],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[117],"v":[{"k":[103],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]},{"k":[24418],"v":[{"k":[22278],"v":[{"k":[35282],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[35282,28857,29615],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24102],"v":[{"k":[26469],"v":[{"k":[26356],"v":[{"k":[32654],"v":[{"k":[35266],"v":[{"k":[32780],"v":[{"k":[26580],"v":[{"k":[21644],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[36171],"v":[{"k":[20104],"v":[{"k":[26356],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[21019],"v":[{"k":[36896],"v":[{"k":[21147],"v":[{"k":[12290],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]},{"k":[22270],"v":[{"d":{"df":1,"dc":[[113,1]]},"k":[21516],"v":[{"k":[26679],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21344],"v":[{"k":[24635],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[30456],"v":[{"k":[27604],"v":[{"k":[20110],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[31354],"v":[{"k":[20313],"v":[{"k":[30340],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[39069],"v":[{"k":[22806],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[31561],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[32780],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[113,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24577],"v":[{"k":[31649],"v":[{"k":[29702],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[33021],"v":[{"k":[25552],"v":[{"k":[21319],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[30697],"v":[{"k":[24418],"v":[{"k":[28210,30340],"v":[{"k":[26579],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[28436],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[26694],"v":[{"k":[36873],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[20026],"v":[{"k":[35813],"v":[{"k":[24103],"v":[{"k":[37325],"v":[{"k":[32472],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[19981],"v":[{"k":[26159],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[37117],"v":[{"k":[36890],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[19988],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[29702],"v":[{"k":[24819],"v":[{"k":[12290],"v":[{"k":[33039],"v":[{"k":[30697],"v":[{"k":[24418],"v":[{"k":[28210],"v":[{"k":[26579],"v":[{"k":[24456],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[28385],"v":[{"k":[36275],"v":[{"k":[20102],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[21644],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[27491],"v":[{"k":[30830],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32791],"v":[{"k":[12289],"v":[{"k":[20869],"v":[{"k":[23384],"v":[{"k":[21344],"v":[{"k":[29992],"v":[{"k":[12289],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[37117],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[20102],"v":[{"k":[28145],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[20248],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[24471],"v":[{"k":[30334],"v":[{"k":[19975],"v":[{"k":[37327],"v":[{"k":[32423],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20063],"v":[{"k":[33021],"v":[{"k":[20570],"v":[{"k":[21040],"v":[{"k":[23454],"v":[{"k":[26102],"v":[{"k":[30340],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[65288],"v":[{"k":[27599],"v":[{"k":[27425],"v":[{"k":[26356],"v":[{"k":[26032],"v":[{"k":[32791],"v":[{"k":[26102],"v":[{"k":[23569],"v":[{"k":[20110],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24378],"v":[{"k":[20102],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[33021],"v":[{"k":[21147],"v":[{"k":[65292],"v":[{"k":[35753],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[65306],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[36807],"v":[{"k":[28388],"v":[{"k":[65288],"v":[{"k":[102],"v":[{"k":[105],"v":[{"k":[108],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[25490],"v":[{"k":[24207],"v":[{"k":[65288],"v":[{"k":[115],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[32858],"v":[{"k":[21512],"v":[{"k":[65288],"v":[{"k":[97],"v":[{"k":[103],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[30452],"v":[{"k":[26041],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[104],"v":[{"k":[105],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[109],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[32858],"v":[{"k":[31867],"v":[{"k":[65288],"v":[{"k":[99],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[103],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[22238],"v":[{"k":[24402],"v":[{"k":[32447],"v":[{"k":[35745],"v":[{"k":[31639],"v":[{"k":[65288],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[115],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[65289],"v":[{"k":[31561],"v":[{"k":[12290],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[32773],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[32479],"v":[{"k":[19968],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[24335],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[26469],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26041],"v":[{"k":[20415],"v":[{"k":[22320],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25805],"v":[{"k":[20316],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[38469],"v":[{"k":[21270],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]},{"k":[65292,12290,8203],"v":[{"k":[36890,37325],"v":[{"k":[36807],"v":[{"k":[31867],"v":[{"k":[20284],"v":[{"k":[25346],"v":[{"k":[36733],"v":[{"k":[20027],"v":[{"k":[39064],"v":[{"k":[30340],"v":[{"k":[26041],"v":[{"k":[24335],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26032],"v":[{"k":[21021],"v":[{"k":[22987],"v":[{"k":[21270],"v":[{"k":[21518],"v":[{"k":[23601],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[20102],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[30340],"v":[{"k":[20999],"v":[{"k":[25442],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[77,1]]}},{"d":{"df":1,"dc":[[126,1]]}}]},{"k":[25968],"v":[{"k":[25346],"v":[{"k":[36733],"v":[{"k":[35821],"v":[{"k":[35328],"v":[{"k":[21253],"v":[{"k":[23545],"v":[{"k":[35937],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]},{"k":[32463,19981,34987],"v":[{"k":[21457,19981],"v":[{"k":[23637],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[21487],"v":[{"k":[35270],"v":[{"k":[21270],"v":[{"k":[24211],"v":[{"k":[20102],"v":[{"k":[65292],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[32493],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[23433],"v":[{"k":[20840],"v":[{"k":[39640],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[37325],"v":[{"k":[26500],"v":[{"k":[21644],"v":[{"k":[26032],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,2]]},"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,11]]}}]}]}]}]}]}]}]}]},{"k":[25512,36866],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290,65292],"v":[{"d":{"df":1,"dc":[[81,1]]},"k":[22240],"v":[{"k":[20026],"v":[{"k":[36825],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25509],"v":[{"k":[21475],"v":[{"k":[20854],"v":[{"k":[23454],"v":[{"k":[24182],"v":[{"k":[19981],"v":[{"k":[30495],"v":[{"k":[27491],"v":[{"k":[24517],"v":[{"k":[35201],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[24456],"v":[{"k":[38590],"v":[{"k":[20445],"v":[{"k":[35777],"v":[{"k":[21521],"v":[{"k":[21518],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[12290],"v":[{"k":[29992],"v":[{"k":[25143],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32780,20351],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]},{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]},{"k":[24323],"v":[{"k":[29992],"v":[{"k":[65292],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[81,3]]}}]}]}]}]}]}]}]},{"k":[36848],"v":[{"k":[20449],"v":[{"k":[24687],"v":[{"k":[12290],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]},{"k":[39064],"v":[{"k":[37197,65306],"v":[{"k":[33394],"v":[{"d":{"df":1,"dc":[[77,1]]}}]},{"d":{"df":1,"dc":[[81,1]]}}]}]},{"k":[33457],"v":[{"k":[22270],"v":[{"k":[26696],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]},{"k":[35874],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]},{"k":[20026],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20250],"v":[{"k":[20197],"v":[{"k":[26356],"v":[{"k":[22823],"v":[{"k":[30340],"v":[{"k":[28909],"v":[{"k":[24773],"v":[{"k":[25237],"v":[{"k":[20837],"v":[{"k":[21040],"v":[{"k":[26410],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[24320],"v":[{"k":[21457],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[77,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25341],"v":[{"k":[30340,26576],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"k":[20010],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[20250],"v":[{"k":[19981],"v":[{"k":[26029],"v":[{"k":[35843],"v":[{"k":[29992],"v":[{"k":[27492],"v":[{"k":[20989],"v":[{"k":[25968],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23637],"v":[{"k":[23454],"v":[{"k":[29616],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]},{"k":[37327,26356],"v":[{"k":[22312],"v":[{"k":[36825],"v":[{"k":[37324],"v":[{"k":[21333],"v":[{"k":[29420],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[21518],"v":[{"k":[38754],"v":[{"k":[20063],"v":[{"k":[20250],"v":[{"k":[29992],"v":[{"k":[21040],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]},{"k":[23544],"v":[{"k":[35774,25913],"v":[{"k":[22823],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]},{"k":[21464],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[33021],"v":[{"k":[33258],"v":[{"k":[36866],"v":[{"k":[24212],"v":[{"k":[24471],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28982],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[20013],"v":[{"k":[21407],"v":[{"k":[29983],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23601],"v":[{"k":[20026],"v":[{"k":[23427],"v":[{"k":[21152],"v":[{"k":[19978],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[65306],"v":[{"k":[29992],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32622],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]},{"d":{"df":2,"dc":[[81,1],[82,1]]},"k":[8220,27492],"v":[{"k":[20687],"v":[{"k":[32032],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[8221],"v":[{"k":[30340],"v":[{"k":[36716],"v":[{"k":[25442],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[24471],"v":[{"k":[21040],"v":[{"k":[20102],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[24212],"v":[{"k":[35813],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[32780],"v":[{"k":[33021],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[22278],"v":[{"k":[28857],"v":[{"k":[12290],"v":[{"k":[96],"v":[{"k":[109],"v":[{"k":[121],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[46],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[118],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[116],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[120],"v":[{"k":[101],"v":[{"k":[108],"v":[{"k":[40],"v":[{"k":[39],"v":[{"k":[103],"v":[{"k":[114],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[39],"v":[{"k":[44],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[65292],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[22522],"v":[{"k":[26412],"v":[{"k":[21151],"v":[{"k":[33021],"v":[{"k":[23601],"v":[{"k":[23436],"v":[{"k":[25104],"v":[{"k":[20102],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[24819],"v":[{"k":[35201],"v":[{"k":[26356],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[24471],"v":[{"k":[23454],"v":[{"k":[26102],"v":[{"k":[30475],"v":[{"k":[21040],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[34987],"v":[{"k":[25302],"v":[{"k":[25341],"v":[{"k":[30340],"v":[{"k":[28857],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32467],"v":[{"k":[19968],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[20840],"v":[{"k":[37096],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[78,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26007],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[80,1]]},"k":[21448,22810,30340],"v":[{"k":[21483],"v":[{"k":[20498],"v":[{"k":[19977],"v":[{"k":[35282],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[23558],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21576],"v":[{"k":[29616],"v":[{"k":[20026],"v":[{"k":[20960],"v":[{"k":[20010],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[65292],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[65292],"v":[{"k":[20174],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[21040],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[33258],"v":[{"k":[19978],"v":[{"k":[32780],"v":[{"k":[19979],"v":[{"k":[36880],"v":[{"k":[28176],"v":[{"k":[19979],"v":[{"k":[38477],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[38454],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[24635],"v":[{"k":[35745],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[20110],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[31616],"v":[{"k":[21270],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[21333],"v":[{"k":[21521],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[19994],"v":[{"k":[21153],"v":[{"k":[21508],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[20002],"v":[{"k":[22833],"v":[{"k":[25110],"v":[{"k":[22686],"v":[{"k":[21152],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[19982],"v":[{"k":[19978],"v":[{"k":[19968],"v":[{"k":[29615],"v":[{"k":[33410],"v":[{"k":[30340],"v":[{"k":[24046],"v":[{"k":[24322],"v":[{"k":[12290],"v":[{"k":[28431],"v":[{"k":[26007],"v":[{"k":[22270],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[30830],"v":[{"k":[23450],"v":[{"k":[32452],"v":[{"k":[32455],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[21806],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[23384],"v":[{"k":[22312],"v":[{"k":[30340],"v":[{"k":[38382],"v":[{"k":[39064],"v":[{"k":[21644],"v":[{"k":[29942],"v":[{"k":[39048],"v":[{"k":[20063],"v":[{"k":[24456],"v":[{"k":[26377],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[80,1]]}}]}]}]}]}]}]}]},{"k":[32423],"v":[{"k":[25351],"v":[{"k":[21335],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[28982],"v":[{"k":[24102,25903],"v":[{"k":[26469],"v":[{"k":[20102],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[38750],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[25913],"v":[{"k":[21160],"v":[{"k":[65292],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[29305],"v":[{"k":[21035],"v":[{"k":[20851],"v":[{"k":[27880],"v":[{"k":[12290],"v":[{"k":[27492],"v":[{"k":[22806],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[96],"v":[{"k":[118],"v":[{"k":[53],"v":[{"k":[96],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25345],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[24050],"v":[{"k":[19981],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[36182],"v":[{"k":[35843],"v":[{"k":[25972],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]},{"k":[38500],"v":[{"k":[20102],"v":[{"k":[20869],"v":[{"k":[32622],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[24433],"v":[{"k":[21709],"v":[{"k":[21040],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[22320],"v":[{"k":[26041],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]},{"k":[22238],"v":[{"k":[30340,20013],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[30340],"v":[{"k":[22768],"v":[{"k":[26126],"v":[{"k":[12290],"v":[{"k":[65288],"v":[{"k":[21407],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[20889],"v":[{"k":[27861],"v":[{"k":[20173],"v":[{"k":[20860],"v":[{"k":[23481],"v":[{"k":[65292],"v":[{"k":[20294],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[24456],"v":[{"k":[22797],"v":[{"k":[26434],"v":[{"k":[30340],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[19981],"v":[{"k":[23436],"v":[{"k":[20840],"v":[{"k":[19968],"v":[{"k":[33268],"v":[{"k":[12290],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270,30340],"v":[{"k":[65288,26679,20013,20027,38500,26159,30340],"v":[{"k":[96],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[110],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]},{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]},{"k":[25240],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30456],"v":[{"k":[38543],"v":[{"k":[30528],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[25512],"v":[{"k":[31227],"v":[{"k":[30340],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[25110],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[12290],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[30340],"v":[{"k":[20108],"v":[{"k":[32500],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[26576],"v":[{"k":[32593],"v":[{"k":[31449],"v":[{"k":[35775],"v":[{"k":[38382],"v":[{"k":[20154],"v":[{"k":[25968],"v":[{"k":[25110],"v":[{"k":[21830],"v":[{"k":[21697],"v":[{"k":[38144],"v":[{"k":[37327],"v":[{"k":[20215],"v":[{"k":[26684],"v":[{"k":[30340],"v":[{"k":[27874],"v":[{"k":[21160],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20102],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[26576],"v":[{"k":[20010],"v":[{"k":[20107],"v":[{"k":[24773],"v":[{"k":[21457],"v":[{"k":[23637],"v":[{"k":[30340],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24207],"v":[{"k":[21015],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[27573],"v":[{"k":[30340],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[21830],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[21738],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[21830],"v":[{"k":[21697],"v":[{"k":[30340],"v":[{"k":[38144],"v":[{"k":[37327],"v":[{"k":[26368],"v":[{"k":[22909],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[23558],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[29992],"v":[{"k":[32447],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[36215],"v":[{"k":[26469],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[25104],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[12290],"v":[{"k":[20026],"v":[{"k":[20102],"v":[{"k":[36861],"v":[{"k":[27714],"v":[{"k":[32654],"v":[{"k":[35266],"v":[{"k":[25110],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[22914],"v":[{"k":[19978],"v":[{"k":[22270],"v":[{"k":[23558],"v":[{"k":[28857],"v":[{"k":[19982],"v":[{"k":[28857],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[29992],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[22270],"v":[{"k":[21448],"v":[{"k":[21483],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[26679],"v":[{"k":[26465],"v":[{"k":[22270],"v":[{"k":[26679],"v":[{"k":[26465],"v":[{"k":[12290],"v":[{"k":[26679],"v":[{"k":[26465],"v":[{"k":[22270],"v":[{"k":[19982],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[29992],"v":[{"k":[27861],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[26159],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[36830],"v":[{"k":[32447],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]},{"k":[26679],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]},{"k":[26085],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[117],"v":[{"k":[110],"v":[{"k":[98],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"d":{"df":1,"dc":[[129,1]]},"k":[65288,20027,30340,26679,12290],"v":[{"k":[96],"v":[{"k":[112],"v":[{"k":[105],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]},{"k":[35201],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[34920,23637],"v":[{"k":[29616],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"k":[24635],"v":[{"k":[21644],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[30340],"v":[{"k":[24359],"v":[{"k":[24230],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[25968],"v":[{"k":[37327],"v":[{"k":[30340],"v":[{"k":[27604],"v":[{"k":[20363],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29616],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[30456],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[24635],"v":[{"k":[25968],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[24773],"v":[{"k":[20917],"v":[{"k":[12290],"v":[{"k":[22270],"v":[{"k":[20013],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[65288],"v":[{"k":[25159],"v":[{"k":[21306],"v":[{"k":[65289],"v":[{"k":[30340],"v":[{"k":[24359],"v":[{"k":[38271],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[35813],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[30340],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[20998],"v":[{"k":[22359],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[24635],"v":[{"k":[21644],"v":[{"k":[20026],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[37197,21322,20351],"v":[{"k":[32622],"v":[{"k":[21644],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[12289],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30053],"v":[{"k":[26377],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20877],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[37197],"v":[{"k":[32622],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26159],"v":[{"k":[25226],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[21517],"v":[{"k":[31216],"v":[{"k":[21644],"v":[{"k":[20540],"v":[{"k":[37117],"v":[{"k":[20889],"v":[{"k":[22312],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013],"v":[{"k":[12290],"v":[{"k":[20197],"v":[{"k":[19979],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[26368],"v":[{"k":[31616],"v":[{"k":[21333],"v":[{"k":[30340],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[20363],"v":[{"k":[23376],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24452],"v":[{"d":{"df":1,"dc":[[115,1]]},"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]},{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[129,1]]}}]}]}]}]},{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]},{"d":{"df":1,"dc":[[129,1]]}}]}]},{"k":[24050,12290],"v":[{"k":[32463],"v":[{"k":[19981],"v":[{"k":[25512],"v":[{"k":[33616],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"k":[35831],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21491],"v":[{"k":[36793],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[81,2]]}}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[81,2]]}}]},{"k":[36798],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[82,1]]},"k":[65288,30340,23545],"v":[{"k":[96,114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65306],"v":[{"d":{"df":1,"dc":[[81,1]]}}]}]}]}]}]}]}]}]},{"k":[97],"v":[{"k":[100],"v":[{"k":[97],"v":[{"k":[114],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]},{"k":[27599,20351],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[37117],"v":[{"k":[26377],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20174],"v":[{"k":[20013],"v":[{"k":[24515],"v":[{"k":[21521],"v":[{"k":[22806],"v":[{"k":[21457],"v":[{"k":[23556],"v":[{"k":[30340],"v":[{"k":[36724],"v":[{"k":[32447],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[30340],"v":[{"k":[36724],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[22841],"v":[{"k":[35282],"v":[{"k":[30456],"v":[{"k":[31561],"v":[{"k":[65292],"v":[{"k":[21516],"v":[{"k":[26102],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[26377],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[65292],"v":[{"k":[23558],"v":[{"k":[36724],"v":[{"k":[21040],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[29992],"v":[{"k":[32593],"v":[{"k":[26684],"v":[{"k":[32447],"v":[{"k":[38142],"v":[{"k":[25509],"v":[{"k":[20316],"v":[{"k":[20026],"v":[{"k":[36741],"v":[{"k":[21161],"v":[{"k":[20803],"v":[{"k":[32032],"v":[{"k":[65292],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[22312],"v":[{"k":[20854],"v":[{"k":[21508],"v":[{"k":[33258],"v":[{"k":[30340],"v":[{"k":[36724],"v":[{"k":[32447],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[25104],"v":[{"k":[19968],"v":[{"k":[26465],"v":[{"k":[22810],"v":[{"k":[36793],"v":[{"k":[24418],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]},{"k":[20110],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[30456],"v":[{"k":[20284],"v":[{"k":[30340],"v":[{"k":[20540],"v":[{"k":[12289],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[26159],"v":[{"k":[21542],"v":[{"k":[26377],"v":[{"k":[24322],"v":[{"k":[24120],"v":[{"k":[20540],"v":[{"k":[37117],"v":[{"k":[24456],"v":[{"k":[26377],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[21738],"v":[{"k":[20123],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[22312],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38598],"v":[{"k":[20869],"v":[{"k":[24471],"v":[{"k":[20998],"v":[{"k":[36739],"v":[{"k":[39640],"v":[{"k":[25110],"v":[{"k":[36739],"v":[{"k":[20302],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[24615],"v":[{"k":[33021],"v":[{"k":[65288],"v":[{"k":[35265],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"k":[21516],"v":[{"k":[26679],"v":[{"k":[65292],"v":[{"k":[38647],"v":[{"k":[36798],"v":[{"k":[22270],"v":[{"k":[20063],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[25490],"v":[{"k":[21517],"v":[{"k":[12289],"v":[{"k":[35780],"v":[{"k":[20272],"v":[{"k":[12289],"v":[{"k":[35780],"v":[{"k":[35770],"v":[{"k":[31561],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[82,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31350],"v":[{"k":[34920],"v":[{"k":[26126],"v":[{"k":[65292],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[26377],"v":[{"k":[22266],"v":[{"k":[23450],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[30340],"v":[{"k":[35789],"v":[{"k":[65292],"v":[{"k":[21305],"v":[{"k":[37197],"v":[{"k":[20854],"v":[{"k":[20855],"v":[{"k":[26377],"v":[{"k":[35821],"v":[{"k":[20041],"v":[{"k":[20849],"v":[{"k":[40483],"v":[{"k":[30340],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[33021],"v":[{"k":[26377],"v":[{"k":[25928],"v":[{"k":[30340],"v":[{"k":[21152],"v":[{"k":[36895],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[65292],"v":[{"k":[21453],"v":[{"k":[20043],"v":[{"k":[21017],"v":[{"k":[20250],"v":[{"k":[38459],"v":[{"k":[30861],"v":[{"k":[35748],"v":[{"k":[30693],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26377],"v":[{"k":[36259],"v":[{"k":[30340],"v":[{"k":[29616],"v":[{"k":[35937],"v":[{"k":[31216],"v":[{"k":[20026],"v":[{"k":[34],"v":[{"k":[26031],"v":[{"k":[29305],"v":[{"k":[40065],"v":[{"k":[26222],"v":[{"k":[25928],"v":[{"k":[24212],"v":[{"k":[34],"v":[{"k":[12290],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20570],"v":[{"k":[20010],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[35797],"v":[{"k":[39564],"v":[{"k":[65292],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[22312],"v":[{"k":[19978],"v":[{"k":[22270],"v":[{"k":[20004],"v":[{"k":[34892],"v":[{"k":[25991],"v":[{"k":[23383],"v":[{"k":[20013],"v":[{"k":[25214],"v":[{"k":[21040],"v":[{"k":[8220],"v":[{"k":[40644],"v":[{"k":[8221],"v":[{"k":[23383],"v":[{"k":[12290],"v":[{"k":[36825],"v":[{"k":[20010],"v":[{"k":[36807],"v":[{"k":[31243],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[31532],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[30340],"v":[{"k":[8220],"v":[{"k":[40644],"v":[{"k":[8221],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[34987],"v":[{"k":[24555],"v":[{"k":[36895],"v":[{"k":[23450],"v":[{"k":[20301],"v":[{"k":[21040],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[12290],"v":[{"k":[32780],"v":[{"k":[22312],"v":[{"k":[31532],"v":[{"k":[20108],"v":[{"k":[34892],"v":[{"k":[23547],"v":[{"k":[25214],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[20505],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[33021],"v":[{"k":[26377],"v":[{"k":[20154],"v":[{"k":[26368],"v":[{"k":[26089],"v":[{"k":[23450],"v":[{"k":[20301],"v":[{"k":[21040],"v":[{"k":[30340],"v":[{"k":[20250],"v":[{"k":[26159],"v":[{"k":[8220],"v":[{"k":[32043],"v":[{"k":[8221],"v":[{"k":[23383],"v":[{"k":[65292],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[27492],"v":[{"k":[22788],"v":[{"k":[8220],"v":[{"k":[32043],"v":[{"k":[8221],"v":[{"k":[23383],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[20102],"v":[{"k":[40644],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[23601],"v":[{"k":[38459],"v":[{"k":[30861],"v":[{"k":[20102],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[23547],"v":[{"k":[25214],"v":[{"k":[30340],"v":[{"k":[36895],"v":[{"k":[24230],"v":[{"k":[21644],"v":[{"k":[20934],"v":[{"k":[30830],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20363],"v":[{"k":[22914],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[22825],"v":[{"k":[27668],"v":[{"k":[28201],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"k":[34013],"v":[{"k":[33394],"v":[{"k":[21644],"v":[{"k":[32418],"v":[{"k":[33394],"v":[{"k":[26131],"v":[{"k":[20110],"v":[{"k":[29702],"v":[{"k":[35299],"v":[{"k":[65292],"v":[{"k":[26080],"v":[{"k":[38656],"v":[{"k":[20219],"v":[{"k":[20309],"v":[{"k":[35299],"v":[{"k":[37322],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[26131],"v":[{"k":[20110],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[83,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":6,"dc":[[121,1],[122,1],[123,2],[124,2],[128,1],[130,1]]},"k":[116],"v":[{"k":[104],"v":[{"k":[101],"v":[{"d":{"df":1,"dc":[[100,1]]}}]}]}]},{"k":[29366,26465,23376],"v":[{"k":[22270],"v":[{"k":[65288,26679,26159,30340],"v":[{"k":[25110],"v":[{"k":[31216],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[26609],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[38271],"v":[{"k":[24230],"v":[{"k":[26469],"v":[{"k":[34920],"v":[{"k":[29616],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"d":{"df":2,"dc":[[110,1],[116,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]},{"k":[26368],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[65292],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[25110],"v":[{"k":[22402],"v":[{"k":[30452],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]},{"k":[26679,30340,22278,36879,23485,38388],"v":[{"k":[24335],"v":[{"d":{"df":1,"dc":[[110,1]]}}]},{"k":[26679,39068,25551],"v":[{"k":[24335],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]},{"k":[33394],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65307],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]},{"k":[36793],"v":[{"k":[39068],"v":[{"k":[33394],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[119],"v":[{"k":[105],"v":[{"k":[100],"v":[{"k":[116],"v":[{"k":[104],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12289],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65307],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[35282],"v":[{"k":[30340],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[98],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[100],"v":[{"k":[101],"v":[{"k":[114],"v":[{"k":[114],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[105],"v":[{"k":[117],"v":[{"k":[115],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65307],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26126],"v":[{"k":[24230],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[111],"v":[{"k":[112],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[105],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[65307],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24230],"v":[{"k":[21644,21487],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]},{"k":[20197],"v":[{"k":[36890],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]},{"k":[36317],"v":[{"d":{"df":1,"dc":[[110,1]]},"k":[20998],"v":[{"k":[20026],"v":[{"k":[20004],"v":[{"k":[31181],"v":[{"k":[65292],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[26159],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[22312],"v":[{"k":[21516],"v":[{"k":[19968],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[19979],"v":[{"k":[30340],"v":[{"k":[36317],"v":[{"k":[31163],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30340],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"k":[26469],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24433],"v":[{"k":[65288],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[98],"v":[{"k":[108],"v":[{"k":[117],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[99],"v":[{"k":[111],"v":[{"k":[108],"v":[{"k":[111],"v":[{"k":[114],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[120],"v":[{"k":[96],"v":[{"k":[12289],"v":[{"k":[96],"v":[{"k":[115],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[100],"v":[{"k":[111],"v":[{"k":[119],"v":[{"k":[111],"v":[{"k":[102],"v":[{"k":[102],"v":[{"k":[115],"v":[{"k":[101],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[96],"v":[{"k":[65289],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[25968,65292,39033,24207],"v":[{"k":[25454],"v":[{"k":[65292,39033],"v":[{"k":[50],"v":[{"k":[48],"v":[{"k":[37],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]},{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[39033],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"d":{"df":1,"dc":[[115,1]]}}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22240,20197],"v":[{"k":[20026],"v":[{"k":[22826],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20250],"v":[{"k":[20351],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[21644],"v":[{"k":[20998],"v":[{"k":[36776],"v":[{"k":[21464],"v":[{"k":[24471],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[22256],"v":[{"k":[38590],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20813],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[38590],"v":[{"k":[20197],"v":[{"k":[36776],"v":[{"k":[35782],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]},{"k":[30446],"v":[{"k":[36827],"v":[{"k":[34892],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[27178],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[20250],"v":[{"k":[26080],"v":[{"k":[27861],"v":[{"k":[23436],"v":[{"k":[20840],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[23436],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[65292],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[21482],"v":[{"k":[33021],"v":[{"k":[20542],"v":[{"k":[26012],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[65292],"v":[{"k":[24433],"v":[{"k":[21709],"v":[{"k":[32654],"v":[{"k":[35266],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[24403],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[36807],"v":[{"k":[38271],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[29992],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[33719],"v":[{"k":[24471],"v":[{"k":[26356],"v":[{"k":[22909],"v":[{"k":[30340],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21015],"v":[{"k":[12289],"v":[{"k":[29305],"v":[{"k":[24449],"v":[{"k":[21450],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[20540],"v":[{"k":[65292],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[19981],"v":[{"k":[38169],"v":[{"k":[30340],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[20102],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[25552],"v":[{"k":[20132],"v":[{"k":[30340],"v":[{"k":[26085],"v":[{"k":[26399],"v":[{"k":[12289],"v":[{"k":[20855],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[27668],"v":[{"k":[27873],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[35828],"v":[{"k":[26126],"v":[{"k":[20102],"v":[{"k":[25552],"v":[{"k":[20132],"v":[{"k":[30340],"v":[{"k":[20195],"v":[{"k":[30721],"v":[{"k":[37327],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[127,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21046],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[30340],"v":[{"k":[26368],"v":[{"k":[22823],"v":[{"k":[23485],"v":[{"k":[24230],"v":[{"k":[12290],"v":[{"k":[23545],"v":[{"k":[20110],"v":[{"k":[19968],"v":[{"k":[20123],"v":[{"k":[29305],"v":[{"k":[21035],"v":[{"k":[23567],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[65292],"v":[{"k":[25105],"v":[{"k":[20204],"v":[{"k":[20063],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[20026],"v":[{"k":[26609],"v":[{"k":[26465],"v":[{"k":[25351],"v":[{"k":[23450],"v":[{"k":[26368],"v":[{"k":[23567],"v":[{"k":[39640],"v":[{"k":[24230],"v":[{"d":{"df":1,"dc":[[110,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"d":{"df":1,"dc":[[110,1]]}},{"k":[21472,31215],"v":[{"k":[26609,25240,38754],"v":[{"k":[29366],"v":[{"d":{"df":1,"dc":[[122,1]]},"k":[22270],"v":[{"d":{"df":2,"dc":[[111,1],[122,1]]},"k":[26159],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25193],"v":[{"k":[23637],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[22312],"v":[{"k":[20110],"v":[{"k":[65292],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20540],"v":[{"k":[20026],"v":[{"k":[24182],"v":[{"k":[34892],"v":[{"k":[25490],"v":[{"k":[21015],"v":[{"k":[65292],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[22270],"v":[{"k":[21017],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20010],"v":[{"k":[21472],"v":[{"k":[21152],"v":[{"k":[36215],"v":[{"k":[26469],"v":[{"k":[30340],"v":[{"k":[12290],"v":[{"k":[23427],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[27599],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[30340],"v":[{"k":[24635],"v":[{"k":[37327],"v":[{"k":[65292],"v":[{"k":[20197],"v":[{"k":[21450],"v":[{"k":[35813],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[30340],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[23567],"v":[{"k":[20998],"v":[{"k":[31867],"v":[{"k":[30340],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[21450],"v":[{"k":[21344],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[22240],"v":[{"k":[27492],"v":[{"k":[65292],"v":[{"k":[38750],"v":[{"k":[24120],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[22788],"v":[{"k":[29702],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[19982],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[118,1]]}}]}]},{"k":[31215],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[126,1]]},"k":[30340],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]},{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[29305],"v":[{"k":[27530],"v":[{"k":[30340],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[21306],"v":[{"k":[38388],"v":[{"k":[20869],"v":[{"k":[30340],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[12290],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[21644],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[22312],"v":[{"k":[20110],"v":[{"k":[65292],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"k":[36215],"v":[{"k":[28857],"v":[{"k":[37117],"v":[{"k":[26159],"v":[{"k":[22522],"v":[{"k":[20110],"v":[{"k":[21069],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[32472],"v":[{"k":[21046],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[20063],"v":[{"k":[23601],"v":[{"k":[26159],"v":[{"k":[27599],"v":[{"k":[24230],"v":[{"k":[37327],"v":[{"k":[19968],"v":[{"k":[34892],"v":[{"k":[23601],"v":[{"k":[35201],"v":[{"k":[22635],"v":[{"k":[28385],"v":[{"k":[34892],"v":[{"k":[19982],"v":[{"k":[34892],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[126,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[19969],"v":[{"k":[26684],"v":[{"k":[23572],"v":[{"k":[22270],"v":[{"k":[65288,21448],"v":[{"k":[29611],"v":[{"k":[29808],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"d":{"df":1,"dc":[[112,1]]}}]}]}]}]},{"k":[31216],"v":[{"k":[29611],"v":[{"k":[29808],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[29992],"v":[{"k":[24359],"v":[{"k":[24230],"v":[{"k":[30456],"v":[{"k":[21516],"v":[{"k":[20294],"v":[{"k":[21322],"v":[{"k":[24452],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[25159],"v":[{"k":[24418],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[21508],"v":[{"k":[20010],"v":[{"k":[31867],"v":[{"k":[30446],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[112,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22495],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270,25240],"v":[{"d":{"df":1,"dc":[[114,1]]},"k":[23558],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[21040],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[36724],"v":[{"k":[30340],"v":[{"k":[31354],"v":[{"k":[38388],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"k":[32972],"v":[{"k":[26223],"v":[{"k":[33394],"v":[{"k":[65292],"v":[{"k":[29992],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[12290],"v":[{"k":[30456],"v":[{"k":[27604],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[25928],"v":[{"k":[26524],"v":[{"k":[26356],"v":[{"k":[21152],"v":[{"k":[39281],"v":[{"k":[28385],"v":[{"k":[20016],"v":[{"k":[23500],"v":[{"k":[65292],"v":[{"k":[22312],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[19981],"v":[{"k":[22810],"v":[{"k":[30340],"v":[{"k":[22330],"v":[{"k":[26223],"v":[{"k":[19979],"v":[{"k":[23588],"v":[{"k":[20854],"v":[{"k":[36866],"v":[{"k":[29992],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[114,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]},{"k":[21345],"v":[{"k":[23572],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013,19979],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]}]}]},{"k":[30340],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]},{"k":[25968],"v":[{"k":[25454],"v":[{"d":{"df":1,"dc":[[116,1]]}}]}]},{"k":[26799],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[117,1]]},"k":[21448],"v":[{"k":[31216],"v":[{"k":[26041],"v":[{"k":[27874],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[23427],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[21644],"v":[{"k":[22402],"v":[{"k":[30452],"v":[{"k":[30340],"v":[{"k":[32447],"v":[{"k":[26469],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[26222],"v":[{"k":[36890],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[21017],"v":[{"k":[30452],"v":[{"k":[25509],"v":[{"k":[23558],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[28857],"v":[{"k":[36830],"v":[{"k":[25509],"v":[{"k":[36215],"v":[{"k":[26469],"v":[{"k":[12290],"v":[{"k":[38454],"v":[{"k":[26799],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[33021],"v":[{"k":[22815],"v":[{"k":[24456],"v":[{"k":[22909],"v":[{"k":[22320],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[31361],"v":[{"k":[21464],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[117,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[91,39292],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[93],"v":[{"k":[40],"v":[{"k":[46],"v":[{"k":[47],"v":[{"k":[122],"v":[{"k":[104],"v":[{"k":[47],"v":[{"k":[97],"v":[{"k":[112],"v":[{"k":[112],"v":[{"k":[108],"v":[{"k":[105],"v":[{"k":[99],"v":[{"k":[97],"v":[{"k":[116],"v":[{"k":[105],"v":[{"k":[111],"v":[{"k":[110],"v":[{"k":[47],"v":[{"k":[99],"v":[{"k":[104],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[116],"v":[{"k":[45],"v":[{"k":[116],"v":[{"k":[121],"v":[{"k":[112],"v":[{"k":[101],"v":[{"k":[115],"v":[{"k":[47],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[47],"v":[{"k":[115],"v":[{"k":[116],"v":[{"k":[97],"v":[{"k":[99],"v":[{"k":[107],"v":[{"k":[101],"v":[{"k":[100],"v":[{"k":[45],"v":[{"k":[98],"v":[{"k":[97],"v":[{"k":[114],"v":[{"k":[41],"v":[{"k":[31867],"v":[{"k":[20284],"v":[{"k":[65292],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[29992],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[118,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[22270],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[21333],"v":[{"k":[20010],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21040],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[30340],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[22810],"v":[{"k":[20010],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[21040],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[29677],"v":[{"k":[32423],"v":[{"k":[20307],"v":[{"k":[32946],"v":[{"k":[35838],"v":[{"k":[36873],"v":[{"k":[35838],"v":[{"k":[30340],"v":[{"k":[21508],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20154],"v":[{"k":[25968],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[65292],"v":[{"k":[20320],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[25110],"v":[{"k":[39292],"v":[{"k":[22270],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[12290],"v":[{"k":[20294],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[36827],"v":[{"k":[19968],"v":[{"k":[27493],"v":[{"k":[21306],"v":[{"k":[20998],"v":[{"k":[30007],"v":[{"k":[29983],"v":[{"k":[21644],"v":[{"k":[22899],"v":[{"k":[29983],"v":[{"k":[21442],"v":[{"k":[19982],"v":[{"k":[21040],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20154],"v":[{"k":[25968],"v":[{"k":[20998],"v":[{"k":[21035],"v":[{"k":[26159],"v":[{"k":[22810],"v":[{"k":[23569],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[23601],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[25226],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[30340],"v":[{"k":[30007],"v":[{"k":[29983],"v":[{"k":[25968],"v":[{"k":[21644],"v":[{"k":[22899],"v":[{"k":[29983],"v":[{"k":[25968],"v":[{"k":[37117],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20986],"v":[{"k":[26469],"v":[{"k":[12290],"v":[{"k":[22914],"v":[{"k":[22270],"v":[{"k":[36873],"v":[{"k":[29992],"v":[{"k":[22534],"v":[{"k":[21472],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[20165],"v":[{"k":[33021],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[30340],"v":[{"k":[24635],"v":[{"k":[20154],"v":[{"k":[25968],"v":[{"k":[65292],"v":[{"k":[36824],"v":[{"k":[33021],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[20986],"v":[{"k":[27599],"v":[{"k":[20010],"v":[{"k":[39033],"v":[{"k":[30446],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[37096],"v":[{"k":[20998],"v":[{"k":[19982],"v":[{"k":[25972],"v":[{"k":[20307],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[122,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28857],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[130,1]]},"k":[65292,26679,22312,20250,30340],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[24120],"v":[{"k":[35265],"v":[{"k":[30340],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[12290],"v":[{"k":[25955],"v":[{"k":[28857],"v":[{"k":[22270],"v":[{"k":[30001],"v":[{"k":[35768],"v":[{"k":[22810],"v":[{"k":[8220],"v":[{"k":[28857],"v":[{"k":[8221],"v":[{"k":[32452],"v":[{"k":[25104],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[20123],"v":[{"k":[28857],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[20013],"v":[{"k":[30340],"v":[{"k":[20301],"v":[{"k":[32622],"v":[{"k":[65288],"v":[{"k":[27604],"v":[{"k":[22914],"v":[{"k":[22312],"v":[{"k":[31515],"v":[{"k":[21345],"v":[{"k":[23572],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[19979],"v":[{"k":[65292],"v":[{"k":[34920],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[24335],"v":[{"k":[35774],"v":[{"k":[32622],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]},{"k":[30452],"v":[{"k":[35282],"v":[{"k":[22352],"v":[{"k":[26631],"v":[{"k":[31995],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[20004],"v":[{"k":[20010],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[65288],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[26174],"v":[{"k":[31034],"v":[{"k":[19981],"v":[{"k":[21516],"v":[{"k":[31867],"v":[{"k":[22411],"v":[{"k":[30340],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[65292],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[21363],"v":[{"k":[21464],"v":[{"k":[37327],"v":[{"k":[20043],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[20851],"v":[{"k":[31995],"v":[{"k":[12290],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[26377],"v":[{"k":[27491],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[12289],"v":[{"k":[36127],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[12289],"v":[{"k":[19981],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[19977],"v":[{"k":[31181],"v":[{"k":[30456],"v":[{"k":[20851],"v":[{"k":[24615],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]},{"k":[24452],"v":[{"k":[21363],"v":[{"k":[21487],"v":[{"k":[12290],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[30690],"v":[{"k":[37327],"v":[{"k":[22270],"v":[{"k":[24418],"v":[{"k":[30340],"v":[{"k":[22909],"v":[{"k":[22788],"v":[{"k":[26159],"v":[{"k":[65292],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[19981],"v":[{"k":[20250],"v":[{"k":[22240],"v":[{"k":[20026],"v":[{"k":[32553],"v":[{"k":[25918],"v":[{"k":[32780],"v":[{"k":[20135],"v":[{"k":[29983],"v":[{"k":[38191],"v":[{"k":[40831],"v":[{"k":[25110],"v":[{"k":[27169],"v":[{"k":[31946],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[36890],"v":[{"k":[24120],"v":[{"k":[32780],"v":[{"k":[35328],"v":[{"k":[27604],"v":[{"k":[22270],"v":[{"k":[29255],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[30340],"v":[{"k":[25991],"v":[{"k":[20214],"v":[{"k":[22823],"v":[{"k":[23567],"v":[{"k":[26356],"v":[{"k":[23567],"v":[{"k":[12290],"v":[{"k":[36335],"v":[{"k":[24452],"v":[{"k":[30340],"v":[{"k":[26597],"v":[{"k":[30475],"v":[{"k":[26041],"v":[{"k":[27861],"v":[{"k":[20026],"v":[{"k":[65292],"v":[{"k":[25171],"v":[{"k":[24320],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"d":{"df":1,"dc":[[119,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[28369],"v":[{"k":[26354],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"d":{"df":1,"dc":[[120,1]]},"k":[20063],"v":[{"k":[26159],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[21464],"v":[{"k":[24418],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[31181],"v":[{"k":[26356],"v":[{"k":[26580],"v":[{"k":[21644],"v":[{"k":[30340],"v":[{"k":[26679],"v":[{"k":[24335],"v":[{"k":[20063],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[31181],"v":[{"k":[19981],"v":[{"k":[38169],"v":[{"k":[30340],"v":[{"k":[35270],"v":[{"k":[35273],"v":[{"k":[36873],"v":[{"k":[25321],"v":[{"k":[12290],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[26102],"v":[{"k":[65292],"v":[{"k":[21482],"v":[{"k":[38656],"v":[{"k":[35201],"v":[{"k":[23558],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[30340],"v":[{"d":{"df":1,"dc":[[120,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[31215],"v":[{"k":[22270],"v":[{"k":[21448,30340],"v":[{"k":[21483],"v":[{"k":[21306],"v":[{"k":[22495],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[19982],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[22270],"v":[{"k":[24456],"v":[{"k":[30456],"v":[{"k":[36817],"v":[{"k":[65292],"v":[{"k":[37117],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[29992],"v":[{"k":[26469],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[38543],"v":[{"k":[30528],"v":[{"k":[36830],"v":[{"k":[32493],"v":[{"k":[26102],"v":[{"k":[38388],"v":[{"k":[30340],"v":[{"k":[25512],"v":[{"k":[31227],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[21464],"v":[{"k":[21270],"v":[{"k":[36235],"v":[{"k":[21183],"v":[{"k":[12290],"v":[{"k":[21306],"v":[{"k":[21035],"v":[{"k":[22312],"v":[{"k":[20110],"v":[{"k":[65292],"v":[{"k":[38754],"v":[{"k":[31215],"v":[{"k":[22270],"v":[{"k":[22312],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[19982],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[36724],"v":[{"k":[65288],"v":[{"k":[120],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20351],"v":[{"k":[29992],"v":[{"k":[24314],"v":[{"k":[35758],"v":[{"d":{"df":1,"dc":[[123,1]]}}]}]}]}]}]}]}]},{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[26159],"v":[{"k":[22402],"v":[{"k":[30452],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[27178],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[30340],"v":[{"k":[26609],"v":[{"k":[26159],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[21448],"v":[{"k":[31216],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[12290],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[19982],"v":[{"k":[27178],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[36798],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[24418],"v":[{"k":[24335],"v":[{"k":[26159],"v":[{"k":[19968],"v":[{"k":[26679],"v":[{"k":[30340],"v":[{"k":[65292],"v":[{"k":[19981],"v":[{"k":[36807],"v":[{"k":[65292],"v":[{"k":[24403],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[26631],"v":[{"k":[31614],"v":[{"k":[24456],"v":[{"k":[38271],"v":[{"k":[25110],"v":[{"k":[32773],"v":[{"k":[26377],"v":[{"k":[36229],"v":[{"k":[36807],"v":[{"d":{"df":1,"dc":[[124,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20197],"v":[{"k":[19978],"v":[{"k":[30340],"v":[{"k":[25240],"v":[{"k":[32447],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[38169],"v":[{"k":[35823],"v":[{"k":[30340],"v":[{"k":[31034],"v":[{"k":[20363],"v":[{"k":[65292],"v":[{"k":[32447],"v":[{"k":[37117],"v":[{"k":[25240],"v":[{"k":[21472],"v":[{"k":[22312],"v":[{"k":[19968],"v":[{"k":[36215],"v":[{"k":[24182],"v":[{"k":[19988],"v":[{"k":[21448],"v":[{"k":[27809],"v":[{"k":[26377],"v":[{"k":[26126],"v":[{"k":[26174],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[25972],"v":[{"k":[24352],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[23601],"v":[{"k":[20250],"v":[{"k":[28151],"v":[{"k":[20081],"v":[{"k":[24182],"v":[{"k":[38590],"v":[{"k":[20197],"v":[{"k":[38405],"v":[{"k":[35835],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[125,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"d":{"df":1,"dc":[[128,1]]},"k":[22270],"v":[{"d":{"df":1,"dc":[[128,1]]},"k":[22810,19968,21487],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[23637],"v":[{"k":[31034],"v":[{"k":[21253],"v":[{"k":[21547],"v":[{"k":[30456],"v":[{"k":[21453],"v":[{"k":[21547],"v":[{"k":[20041],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[22270],"v":[{"k":[34920],"v":[{"k":[30340],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[36724],"v":[{"k":[26174],"v":[{"k":[31034],"v":[{"k":[27491],"v":[{"k":[22312],"v":[{"k":[27604],"v":[{"k":[36739],"v":[{"k":[30340],"v":[{"k":[31867],"v":[{"k":[21035],"v":[{"k":[65292],"v":[{"k":[32780],"v":[{"k":[21478],"v":[{"k":[19968],"v":[{"k":[36724],"v":[{"k":[20195],"v":[{"k":[34920],"v":[{"k":[23545],"v":[{"k":[24212],"v":[{"k":[30340],"v":[{"k":[21051],"v":[{"k":[24230],"v":[{"k":[20540],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[33324],"v":[{"k":[29992],"v":[{"k":[20110],"v":[{"k":[27491],"v":[{"k":[36127],"v":[{"k":[20004],"v":[{"k":[20221],"v":[{"k":[30456],"v":[{"k":[21453],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[12290],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19968],"v":[{"k":[21608],"v":[{"k":[20869],"v":[{"k":[20010],"v":[{"k":[20154],"v":[{"k":[25910],"v":[{"k":[20837],"v":[{"k":[21644],"v":[{"k":[25903],"v":[{"k":[20986],"v":[{"k":[30340],"v":[{"k":[32479],"v":[{"k":[35745],"v":[{"k":[65292],"v":[{"k":[20854],"v":[{"k":[20013],"v":[{"k":[25910],"v":[{"k":[20837],"v":[{"k":[20026],"v":[{"k":[27491],"v":[{"k":[25968],"v":[{"k":[65292],"v":[{"k":[25903],"v":[{"k":[20986],"v":[{"k":[20026],"v":[{"k":[36127],"v":[{"k":[25968],"v":[{"k":[12290],"v":[{"k":[20351],"v":[{"k":[29992],"v":[{"k":[21452],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[21487],"v":[{"k":[20197],"v":[{"k":[24456],"v":[{"k":[26126],"v":[{"k":[30830],"v":[{"k":[30340],"v":[{"k":[23545],"v":[{"k":[25910],"v":[{"k":[20837],"v":[{"k":[21644],"v":[{"k":[25903],"v":[{"k":[20986],"v":[{"k":[20570],"v":[{"k":[20986],"v":[{"k":[23545],"v":[{"k":[27604],"v":[{"k":[65292],"v":[{"k":[24182],"v":[{"k":[33021],"v":[{"k":[20174],"v":[{"k":[21333],"v":[{"k":[20010],"v":[{"k":[31995],"v":[{"k":[21015],"v":[{"k":[20013],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[25910],"v":[{"k":[20837],"v":[{"k":[21644],"v":[{"k":[25903],"v":[{"k":[20986],"v":[{"k":[30340],"v":[{"k":[25968],"v":[{"k":[20540],"v":[{"k":[21450],"v":[{"k":[27874],"v":[{"k":[21160],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[20998],"v":[{"k":[20026],"v":[{"k":[22402],"v":[{"k":[30452],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"k":[30340],"v":[{"k":[21452],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[22914],"v":[{"k":[19978],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[21644],"v":[{"k":[27700],"v":[{"k":[24179],"v":[{"k":[26041],"v":[{"k":[21521],"v":[{"k":[30340],"v":[{"k":[21452],"v":[{"k":[21521],"v":[{"k":[26609],"v":[{"k":[29366],"v":[{"k":[22270],"v":[{"k":[65288],"v":[{"k":[21448],"v":[{"k":[21483],"v":[{"k":[27491],"v":[{"k":[36127],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[22914],"v":[{"k":[19979],"v":[{"k":[22270],"v":[{"k":[65289],"v":[{"k":[65292],"v":[{"k":[20363],"v":[{"k":[22914],"v":[{"k":[19968],"v":[{"k":[20010],"v":[{"k":[23458],"v":[{"k":[25143],"v":[{"k":[28385],"v":[{"k":[24847],"v":[{"k":[24230],"v":[{"k":[30340],"v":[{"k":[35843],"v":[{"k":[26597],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[26512],"v":[{"k":[20013],"v":[{"k":[65292],"v":[{"k":[26377],"v":[{"k":[27491],"v":[{"k":[38754],"v":[{"k":[35780],"v":[{"k":[20215],"v":[{"k":[21644],"v":[{"k":[36127],"v":[{"k":[38754],"v":[{"k":[35780],"v":[{"k":[20215],"v":[{"k":[65292],"v":[{"k":[36825],"v":[{"k":[24456],"v":[{"k":[36866],"v":[{"k":[21512],"v":[{"k":[29992],"v":[{"k":[27491],"v":[{"k":[36127],"v":[{"k":[26465],"v":[{"k":[24418],"v":[{"k":[22270],"v":[{"k":[65292],"v":[{"k":[25152],"v":[{"k":[26377],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[22312],"v":[{"k":[20013],"v":[{"k":[38388],"v":[{"k":[23545],"v":[{"k":[40784],"v":[{"k":[65292],"v":[{"k":[27491],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[35780],"v":[{"k":[20215],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[22312],"v":[{"k":[21491],"v":[{"k":[20391],"v":[{"k":[65292],"v":[{"k":[36127],"v":[{"k":[38754],"v":[{"k":[30340],"v":[{"k":[35780],"v":[{"k":[20215],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[20998],"v":[{"k":[24067],"v":[{"k":[22312],"v":[{"k":[24038],"v":[{"k":[20391],"v":[{"k":[12290],"v":[{"d":{"df":1,"dc":[[128,1]]}}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]}]},{"k":[30456],"v":[{"k":[20851],"v":[{"k":[65306],"v":[{"k":[25968],"v":[{"k":[25454],"v":[{"k":[28857],"v":[{"k":[20174],"v":[{"k":[39640],"v":[{"d":{"df":1,"dc":[[130,1]]}}]}]}]}]}]}]}]}]}]}}}}}],"databaseVersion":1.5,"engineVersion":1.5,"filename":"content.db","_persistenceAdapter":null,"_persistenceMethod":null,"_throttledSaves":true}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/08bb349.css b/handbook/_nuxt/css/08bb349.css
deleted file mode 100644
index db81112..0000000
--- a/handbook/_nuxt/css/08bb349.css
+++ /dev/null
@@ -1,3 +0,0 @@
-/*! 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-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-red-100{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgba(254,202,202,var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgba(167,243,208,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity))}.bg-orange-200{--tw-bg-opacity:1;background-color:rgba(254,215,170,var(--tw-bg-opacity))}.bg-blue-gray-400{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity))}.border-blue-400{--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-gray-400{--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity))}.rounded-lg{border-radius:.5rem}.border-0{border-width:0}.border{border-width:1px}.border-l-4{border-left-width:4px}.inline-block{display:inline-block}.table{display:table}.contents{display:contents}.h-6{height:1.5rem}.h-8{height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.mr-4{margin-right:1rem}.mr-7{margin-right:1.75rem}.mt-10{margin-top:2.5rem}.static{position:static}.resize{resize:both}*{--tw-shadow:0 0 transparent}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.shadow-lg,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 transparent}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-blue-gray-400{--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.align-middle{vertical-align:middle}.w-6{width:1.5rem}.w-8{width:2rem}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/647e5e1.css b/handbook/_nuxt/css/647e5e1.css
new file mode 100644
index 0000000..1699e62
--- /dev/null
+++ b/handbook/_nuxt/css/647e5e1.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-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input:-ms-input-placeholder,textarea:-ms-input-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{padding:0;line-height:inherit;color:inherit}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.bg-red-100{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity))}.bg-red-200{--tw-bg-opacity:1;background-color:rgba(254,202,202,var(--tw-bg-opacity))}.bg-green-100{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity))}.bg-green-200{--tw-bg-opacity:1;background-color:rgba(167,243,208,var(--tw-bg-opacity))}.bg-blue-100{--tw-bg-opacity:1;background-color:rgba(219,234,254,var(--tw-bg-opacity))}.bg-blue-200{--tw-bg-opacity:1;background-color:rgba(191,219,254,var(--tw-bg-opacity))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity))}.bg-orange-200{--tw-bg-opacity:1;background-color:rgba(254,215,170,var(--tw-bg-opacity))}.bg-blue-gray-400{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity))}.border-blue-400{--tw-border-opacity:1;border-color:rgba(96,165,250,var(--tw-border-opacity))}.border-blue-gray-200{--tw-border-opacity:1;border-color:rgba(226,232,240,var(--tw-border-opacity))}.border-blue-gray-400{--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity))}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border-0{border-width:0}.border{border-width:1px}.border-l-4{border-left-width:4px}.inline-block{display:inline-block}.flex{display:flex}.table{display:table}.h-6{height:1.5rem}.h-8{height:2rem}.text-sm{font-size:.875rem;line-height:1.25rem}.mr-4{margin-right:1rem}.mr-7{margin-right:1.75rem}.mt-10{margin-top:2.5rem}.p-4{padding:1rem}.static{position:static}.resize{resize:both}*{--tw-shadow:0 0 transparent}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06)}.shadow,.shadow-lg{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.shadow-none{--tw-shadow:0 0 transparent;box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}*{--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,0.5);--tw-ring-offset-shadow:0 0 transparent;--tw-ring-shadow:0 0 transparent}.text-blue-gray-400{--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.align-middle{vertical-align:middle}.w-6{width:1.5rem}.w-8{width:2rem}.transform{--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;transform:translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transition{transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@-webkit-keyframes spin{to{transform:rotate(1turn)}}@keyframes spin{to{transform:rotate(1turn)}}@-webkit-keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@-webkit-keyframes pulse{50%{opacity:.5}}@keyframes pulse{50%{opacity:.5}}@-webkit-keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes bounce{0%,to{transform:translateY(-25%);-webkit-animation-timing-function:cubic-bezier(.8,0,1,1);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;-webkit-animation-timing-function:cubic-bezier(0,0,.2,1);animation-timing-function:cubic-bezier(0,0,.2,1)}}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/792c393.css b/handbook/_nuxt/css/792c393.css
deleted file mode 100644
index b6921ba..0000000
--- a/handbook/_nuxt/css/792c393.css
+++ /dev/null
@@ -1 +0,0 @@
-.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 transparent),var(--tw-shadow);color:currentColor}.md-alert-info .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(96,165,250,var(--tw-text-opacity))}.md-alert-info .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(29,78,216,var(--tw-text-opacity))}.md-alert-success[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(52,211,153,var(--tw-border-opacity))}.md-alert-success code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(167,243,208,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-success .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(52,211,153,var(--tw-text-opacity))}.md-alert-success .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(4,120,87,var(--tw-text-opacity))}.md-alert-warning[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(251,146,60,var(--tw-border-opacity))}.md-alert-warning code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,215,170,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-warning .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(251,146,60,var(--tw-text-opacity))}.md-alert-warning .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(194,65,12,var(--tw-text-opacity))}.md-alert-danger[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(248,113,113,var(--tw-border-opacity))}.md-alert-danger code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,202,202,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-danger .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(248,113,113,var(--tw-text-opacity))}.md-alert-danger .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(185,28,28,var(--tw-text-opacity))}.clipboard[data-v-479657ca]{position:absolute;right:0;bottom:0;--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity));margin-bottom:.75rem;margin-right:1.75rem;--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity));border-radius:.5rem;border-width:1px;padding:.5rem;cursor:pointer}.clipboard[data-v-479657ca]:hover{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity));--tw-bg-opacity:0.25}.clipboard[data-v-479657ca]{width:30px;height:30px}.clipboard svg[data-v-479657ca]{width:100%;height:100%}&:hover .clipboard[data-v-479657ca]{display:block}.md-live{overflow:hidden;border-radius:.5rem;margin-top:2.5rem;margin-bottom:5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);display:flex}.md-live.layout-lr{flex-direction:row}.md-live.layout-rl{flex-direction:row-reverse}.md-live.layout-tb{flex-direction:column}.md-live.layout-bt{flex-direction:column-reverse}.md-live.layout-lr,.md-live.layout-rl{align-items:stretch}.md-live.layout-lr .md-live-editor-container,.md-live.layout-rl .md-live-editor-container{height:100%}.md-live.layout-lr .md-live-editor,.md-live.layout-rl .md-live-editor{flex:1 1 0%}.md-live.layout-lr .md-live-preview,.md-live.layout-rl .md-live-preview{flex:1 1 0%;height:auto}.md-live-editor{position:relative}.md-live-editor ::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3)!important}.md-live-editor .md-live-editor-container{background:#263238;max-height:500px;overflow-y:auto;font-size:13px;padding:10px}.md-live-editor pre{color:#c3cee3}.md-live-editor .md-live-tag{position:absolute;right:0;top:0;text-transform:uppercase;margin-top:.75rem;margin-right:1.75rem;color:#f7fafc;z-index:10}.md-live-editor .clipboard{display:none}.md-live-editor:hover .clipboard{display:block}.md-live-preview{height:300px;overflow:hidden}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;line-height:1.5}.prism-editor__textarea:focus{outline:none}.md-code-block{position:relative}.nuxt-content-highlight{line-height:1em;font-size:13px}.nuxt-content-highlight code[class*=language-],.nuxt-content-highlight pre[class*=language-]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#c3cee3;background:#263238;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;text-align:left}.nuxt-content-highlight .filename{position:absolute;right:0;top:0;z-index:10;font-family:DM Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;line-height:1.25rem;letter-spacing:-.025em;line-height:1;margin-top:.75rem;margin-right:1rem;--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.nuxt-content-highlight .clipboard{display:none}.nuxt-content-highlight:hover .clipboard{display:block}.post-contributors{margin-bottom:50px;padding-top:10px;border-top:1px solid #ddd}.post-contributors a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-contributors .post-contributors-list{margin-top:20px}.post-contributors .post-contributor{display:inline-block;margin-right:15px;border:1px solid #eee;border-radius:.5rem;--tw-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}.post-contributors .post-contributor,.post-contributors .post-contributor:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.post-contributors .post-contributor:hover{text-decoration:none;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.post-contributors .post-contributor img{width:40px;height:40px;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.post-contributors .post-contributor img,.post-contributors .post-contributor span{display:inline-block}.post-contributors .post-contributor span{margin:0 8px 0 5px;position:relative;top:2px}.post-edit{margin:20px 0}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/89761e6.css b/handbook/_nuxt/css/89761e6.css
new file mode 100644
index 0000000..c128b5f
--- /dev/null
+++ b/handbook/_nuxt/css/89761e6.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 transparent),var(--tw-shadow);color:currentColor}.md-alert-info .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(96,165,250,var(--tw-text-opacity))}.md-alert-info .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(29,78,216,var(--tw-text-opacity))}.md-alert-success[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(209,250,229,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(52,211,153,var(--tw-border-opacity))}.md-alert-success code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(167,243,208,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-success .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(52,211,153,var(--tw-text-opacity))}.md-alert-success .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(4,120,87,var(--tw-text-opacity))}.md-alert-warning[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(255,237,213,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(251,146,60,var(--tw-border-opacity))}.md-alert-warning code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,215,170,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-warning .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(251,146,60,var(--tw-text-opacity))}.md-alert-warning .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(194,65,12,var(--tw-text-opacity))}.md-alert-danger[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,226,226,var(--tw-bg-opacity));--tw-border-opacity:1;border-color:rgba(248,113,113,var(--tw-border-opacity))}.md-alert-danger code[data-v-a47f983e]{--tw-bg-opacity:1;background-color:rgba(254,202,202,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 transparent),var(--tw-shadow);color:currentColor}.md-alert-danger .md-alert-icon[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(248,113,113,var(--tw-text-opacity))}.md-alert-danger .md-alert-content[data-v-a47f983e]{--tw-text-opacity:1;color:rgba(185,28,28,var(--tw-text-opacity))}.clipboard[data-v-479657ca]{position:absolute;right:0;bottom:0;--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity));margin-bottom:.75rem;margin-right:1.75rem;--tw-border-opacity:1;border-color:rgba(148,163,184,var(--tw-border-opacity));border-radius:.5rem;border-width:1px;padding:.5rem;cursor:pointer}.clipboard[data-v-479657ca]:hover{--tw-bg-opacity:1;background-color:rgba(148,163,184,var(--tw-bg-opacity));--tw-bg-opacity:0.25}.clipboard[data-v-479657ca]{width:30px;height:30px}.clipboard svg[data-v-479657ca]{width:100%;height:100%}&:hover .clipboard[data-v-479657ca]{display:block}.md-live{overflow:hidden;border-radius:.5rem;margin-top:2.5rem;margin-bottom:5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);display:flex;flex-direction:column-reverse}@media (min-width:768px){.md-live.layout-lr{flex-direction:row}.md-live.layout-rl{flex-direction:row-reverse}.md-live.layout-tb{flex-direction:column}.md-live.layout-bt{flex-direction:column-reverse}.md-live.layout-lr,.md-live.layout-rl{align-items:stretch}.md-live.layout-lr .md-live-editor-container,.md-live.layout-rl .md-live-editor-container{height:100%}.md-live.layout-lr .md-live-editor,.md-live.layout-rl .md-live-editor{flex:1 1 0%}.md-live.layout-lr .md-live-preview,.md-live.layout-rl .md-live-preview{flex:1 1 0%;height:auto}}.md-live-editor{position:relative}.md-live-editor ::-webkit-scrollbar-thumb{background:hsla(0,0%,100%,.3)!important}.md-live-editor .md-live-editor-container{background:#263238;max-height:500px;overflow-y:auto;font-size:13px;padding:10px}@media (max-width:768px){.md-live-editor .md-live-editor-container{max-height:300px}}.md-live-editor pre{color:#c3cee3}.md-live-editor .md-live-tag{position:absolute;right:0;top:0;text-transform:uppercase;margin-top:.75rem;margin-right:1.75rem;color:#f7fafc;z-index:10}.md-live-editor .clipboard{display:none}.md-live-editor:hover .clipboard{display:block}.md-live-preview{height:300px;overflow:hidden}.prism-editor-wrapper .prism-editor__editor,.prism-editor-wrapper .prism-editor__textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;line-height:1.5}.prism-editor__textarea:focus{outline:none}.md-code-block{position:relative}.nuxt-content-highlight{line-height:1em;font-size:13px}.nuxt-content-highlight code[class*=language-],.nuxt-content-highlight pre[class*=language-]{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;color:#c3cee3;background:#263238;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;text-align:left}.nuxt-content-highlight .filename{position:absolute;right:0;top:0;z-index:10;font-family:DM Mono,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;line-height:1.25rem;letter-spacing:-.025em;line-height:1;margin-top:.75rem;margin-right:1rem;--tw-text-opacity:1;color:rgba(148,163,184,var(--tw-text-opacity))}.nuxt-content-highlight .clipboard{display:none}.nuxt-content-highlight:hover .clipboard{display:block}.post-contributors{margin-bottom:50px;padding-top:10px;border-top:1px solid #ddd;--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity))}.post-contributors a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-contributors .post-contributors-list{margin-top:20px}.post-contributors .post-contributor{display:inline-block;margin-right:15px;--tw-border-opacity:1;border-color:rgba(226,232,240,var(--tw-border-opacity));border-width:1px;border-radius:.5rem}.post-contributors .post-contributor:hover{text-decoration:none;--tw-border-opacity:1;border-color:rgba(203,213,225,var(--tw-border-opacity))}.post-contributors .post-contributor img{width:40px;height:40px;border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.post-contributors .post-contributor img,.post-contributors .post-contributor span{display:inline-block}.post-contributors .post-contributor span{margin:0 8px 0 5px;position:relative;top:2px}.post-edit{margin:20px 0}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/cff74c8.css b/handbook/_nuxt/css/cff74c8.css
deleted file mode 100644
index 0837eeb..0000000
--- a/handbook/_nuxt/css/cff74c8.css
+++ /dev/null
@@ -1 +0,0 @@
-.__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-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.page-content .nav-item{margin:0}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item a.nav-link{cursor:pointer}.page-content .nav-item .nav-link.nuxt-link-active{font-weight:700;color:#337ab7}.bd-sidebar{position:sticky;z-index:1000;top:0;left:0;height:calc(100vh - 50px);padding:0;overflow-y:auto;border-right:1px solid #eee}.bd-sidenav{display:none}.page-content{padding-bottom:0}.page-content .bd-docs-nav{margin-top:10px;margin-bottom:20px}.page-content .nav{display:block}.page-content ul.nav{padding-left:0}.page-content .nav>li>a:focus,.page-content .nav>li>a:hover{background-color:#f6f8fc}.page-content .nav .b-icon.bi{font-size:90%;opacity:.6;position:relative;top:-2px}.page-content .glyphicon{padding:5px;color:#cfd9e2;cursor:pointer;transform:scale(.8);top:2px;left:-4px;margin:-5px 0}.page-content .level0>li>.nav-link{margin-top:5px;padding:6px 0 6px 20px;font-weight:700;--tw-text-opacity:1;color:rgba(30,41,59,var(--tw-text-opacity))}.page-content .level1{margin-top:4px;font-size:14px}.page-content .level1 .nav-link{padding:6px 0 6px 35px}.page-content .level2 .nav-link{padding:5px 0 5px 50px}.page-content .level3{margin-top:1px}.page-content .level3 .nav-link{padding:5px 0 5px 60px}svg.icon-external-link{display:initial;vertical-align:initial}body{font-family:Open Sans,PingFang SC,Helvetica,Arial,sans-serif}.page-main{overflow-x:hidden}.handbook-content{padding-left:0;padding-right:0}.bd-content{padding-left:50px}.post-content{margin:0 auto;max-width:960px}.post-inner{margin:20px 0 80px;--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h1{margin:40px 0 30px;font-size:36px;--tw-text-opacity:1;color:rgba(30,41,59,var(--tw-text-opacity));font-weight:500}.post-inner h2{margin:50px 0 20px;padding-bottom:15px;font-size:26px;--tw-text-opacity:1;color:rgba(15,23,42,var(--tw-text-opacity));border-bottom:1px solid #eee}.post-inner h1+h2{margin-top:30px}.post-inner h3{margin:30px 0 20px;font-size:22px;--tw-text-opacity:1;color:rgba(15,23,42,var(--tw-text-opacity))}.post-inner h4{margin:25px 0 20px;font-size:18px}.post-inner h4,.post-inner h5{color:#666}.post-inner h5{font-size:16px}.post-inner h6{font-size:14px;color:#222}.post-inner .permalink{display:none}.post-inner h1:hover .permalink,.post-inner h2:hover .permalink,.post-inner h3:hover .permalink,.post-inner h4:hover .permalink,.post-inner h5:hover .permalink,.post-inner h6:hover .permalink{display:inline-block}.post-inner blockquote{margin:15px 0;padding:20px 15px;--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));border-radius:.5rem;border-left-width:4px}.post-inner blockquote code{--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 transparent),var(--tw-shadow);color:currentColor}.post-inner blockquote :first-child{margin-top:0}.post-inner blockquote :last-child{margin-bottom:0}.post-inner pre{margin:20px 0;border-radius:5px;border:none;padding:10px}.post-inner pre code{background:none}.post-inner iframe{border:none;margin:10px 0}.post-inner ol,.post-inner ul{padding-left:20px}.post-inner li,.post-inner p{line-height:1.8em;font-size:16px}.post-inner p{margin:20px 0}.post-inner img{border-radius:.5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.post-inner a{color:#337ab7}.post-inner .table-of-contents{position:fixed;left:77%;width:21%;top:65px;background-color:transparent;padding:10px;height:auto}@media (max-width:768px){.post-inner .table-of-contents{position:relative;width:100%;left:0;top:0;padding:10px 20px;margin:0 0 20px}}.post-inner .table-of-contents .toc-container-header{font-size:14px;font-weight:700}.post-inner .table-of-contents ul{padding-left:0;margin-bottom:0}.post-inner .table-of-contents ul li{list-style:none;font-size:14px}.post-inner .table-of-contents ul li.toc3{padding-left:10px;font-size:12px}.post-inner .table-of-contents a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity));transition:.5s}.post-inner .table-of-contents a:hover{color:#555}
\ No newline at end of file
diff --git a/handbook/_nuxt/css/d986efb.css b/handbook/_nuxt/css/d986efb.css
new file mode 100644
index 0000000..fde56fb
--- /dev/null
+++ b/handbook/_nuxt/css/d986efb.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-error-page .description{color:#7f828b;line-height:21px;margin-bottom:10px}.__nuxt-error-page a{color:#7f828b!important;text-decoration:none}.__nuxt-error-page .logo{position:fixed;left:12px;bottom:12px}.nuxt-progress{position:fixed;top:0;left:0;right:0;height:2px;width:0;opacity:1;transition:width .1s,opacity .4s;background-color:#000;z-index:999999}.nuxt-progress.nuxt-progress-notransition{transition:none}.nuxt-progress-failed{background-color:red}.page-content .nav-item{margin:0}.page-content .nav-item .nav-link{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.page-content .nav-item a.nav-link{cursor:pointer}.page-content .nav-item .nav-link.nuxt-link-active{font-weight:700;color:#337ab7}.bd-sidebar{position:sticky;z-index:1000;top:0;left:0;padding:0;overflow:visible;border-right:1px solid #eee;border-bottom:none;max-width:350px}.bd-sidebar .open-sidebar{display:none}.bd-sidebar .bd-docs-nav{overflow-x:hidden;overflow-y:auto;height:calc(100vh - 50px)}.bd-sidebar .sidebar-search{padding:15px 20px;border-bottom:1px solid #eee}.bd-sidebar .sidebar-search .algolia-autocomplete{width:100%}.bd-sidebar .sidebar-search input{border-radius:.75rem;border-width:0;padding:1rem;--tw-shadow:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow);width:100%}.bd-sidebar .sidebar-search .search-icon{position:absolute;right:30px;top:28px}@media (max-width:768px){.bd-sidebar.closed{left:-280px;--tw-shadow:0 0 transparent}.bd-sidebar,.bd-sidebar.closed{box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar{position:fixed;left:0;width:280px;top:50px;bottom:0;background-color:#fff;--tw-shadow:0 25px 50px -12px rgba(0,0,0,0.25);border-right:none;overflow:visible;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.bd-sidebar .bd-docs-nav{width:280px}.bd-sidebar .open-sidebar{display:block;position:absolute;left:280px;bottom:60px;width:40px;height:40px;padding:5px;color:#000;z-index:1200;background:#eee;border-top-right-radius:1rem;border-bottom-right-radius:1rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.bd-sidebar .open-sidebar svg{width:100%;height:100%}}.bd-sidenav{display:none}.page-content{padding-bottom:0}.page-content .bd-docs-nav{margin-top:10px;margin-bottom:20px}.page-content .nav{display:block}.page-content ul.nav{padding-left:0}.page-content .nav>li>a:focus,.page-content .nav>li>a:hover{background-color:#f6f8fc}.page-content .nav .b-icon.bi{font-size:90%;opacity:.6;position:relative;top:-2px}.page-content .glyphicon{padding:5px;color:#cfd9e2;cursor:pointer;transform:scale(.8);top:2px;left:-4px;margin:-5px 0}.page-content .level0>li>.nav-link{margin-top:5px;padding:6px 0 6px 20px;font-weight:700;--tw-text-opacity:1;color:rgba(30,41,59,var(--tw-text-opacity))}.page-content .level1{margin-top:4px;font-size:14px}.page-content .level1 .nav-link{padding:6px 0 6px 35px}.page-content .level2 .nav-link{padding:5px 0 5px 50px}.page-content .level3{margin-top:1px}.page-content .level3 .nav-link{padding:5px 0 5px 60px}svg.icon-external-link{display:initial;vertical-align:initial}body{font-family:Open Sans,PingFang SC,Helvetica,Arial,sans-serif}.page-main{overflow-x:hidden}.handbook-content{padding-left:0;padding-right:0}.bd-content{padding-left:50px}@media (max-width:768px){.bd-content{padding-left:30px;padding-right:30px}}.post-content{margin:0 auto;max-width:960px}.post-inner{margin:20px 0 80px;--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h1,.post-inner h2,.post-inner h3,.post-inner h4,.post-inner h5,.post-inner h6{font-weight:500}.post-inner h1:hover .permalink,.post-inner h2:hover .permalink,.post-inner h3:hover .permalink,.post-inner h4:hover .permalink,.post-inner h5:hover .permalink,.post-inner h6:hover .permalink{display:inline-block}.post-inner h1{margin:40px 0 30px;font-size:36px;font-weight:700;--tw-text-opacity:1;color:rgba(51,65,85,var(--tw-text-opacity))}.post-inner h2{margin:100px 0 20px;padding-bottom:20px;font-size:26px;--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity));border-bottom:1px solid #eee}.post-inner h1+h2{margin-top:40px}.post-inner h3{margin:80px 0 30px;font-size:24px}.post-inner h3,.post-inner h4{--tw-text-opacity:1;color:rgba(71,85,105,var(--tw-text-opacity))}.post-inner h4{margin:25px 0 20px;font-size:18px}.post-inner h5{font-size:16px}.post-inner h5,.post-inner h6{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity))}.post-inner h6{font-size:14px}.post-inner .permalink{display:none}.post-inner blockquote{margin:15px 0;padding:20px 15px;--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));border-radius:.5rem;border-left-width:4px}.post-inner blockquote code{--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 transparent),var(--tw-shadow);color:currentColor}.post-inner blockquote :first-child{margin-top:0}.post-inner blockquote :last-child{margin-bottom:0}.post-inner pre{margin:20px 0;border-radius:5px;border:none;padding:10px}.post-inner pre code{background:none}.post-inner iframe{border:none;margin:10px 0}.post-inner ol,.post-inner ul{padding-left:20px}.post-inner li,.post-inner p{line-height:1.7em;font-size:16px}.post-inner p{margin:15px 0}.post-inner img{border-radius:.5rem;--tw-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent),var(--tw-ring-shadow,0 0 transparent),var(--tw-shadow)}.post-inner a{color:#337ab7}.post-inner .table-of-contents{position:fixed;left:77%;width:21%;top:65px;background-color:transparent;padding:10px;height:auto}@media (max-width:768px){.post-inner .table-of-contents{position:relative;width:100%;left:0;top:0;padding:0;margin:0 0 10px}}.post-inner .table-of-contents .toc-container-header{font-size:16px;font-weight:700}.post-inner .table-of-contents ul{padding-left:0;margin-bottom:0}.post-inner .table-of-contents ul li{list-style:none;font-size:14px}.post-inner .table-of-contents ul li.toc2{font-size:15px}.post-inner .table-of-contents ul li.toc3{font-size:14px;padding-left:15px}.post-inner .table-of-contents ul li.toc3+.toc2{margin-top:15px}.post-inner .table-of-contents a{--tw-text-opacity:1;color:rgba(100,116,139,var(--tw-text-opacity));transition:.5s}.post-inner .table-of-contents a:hover{color:#555}
\ No newline at end of file
diff --git a/handbook/_nuxt/js/029fdc8dbf2da11901b1.js b/handbook/_nuxt/js/029fdc8dbf2da11901b1.js
new file mode 100644
index 0000000..25e8aff
--- /dev/null
+++ b/handbook/_nuxt/js/029fdc8dbf2da11901b1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{349: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 configurations will mostly not change at runtime.\n\n## Define `data` under `series`\n\nIf data is defined under `series`, for example:\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\nDefine `data` under `series` is suitable for customization for some special data structures such as \"tree\", \"graph\" and large data.\nHowever, 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.\n\n## Define `data` in `dataset`\n\nHere are the advantages if you define `data` in `dataset`:\n\n- Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.\n- Divide data from other configurations. The data often change but others not. It is\n Easy to manage separately.\n- 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.\n- 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.\n\nHere is a simple `dataset` example:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide a set of data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare an x-axis (category axis).\n // The category map the first row in the dataset by default.\n xAxis: { type: 'category' },\n // Declare a y-axis (value axis).\n yAxis: {},\n // Declare several 'bar' series,\n // every series will auto-map to each rows by default.\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\nOr try to use the \"array of classes\" format:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // Define the dimension of array. In cartesian coordinate system,\n // if the type of x-axis is category, map the first dimension to\n // x-axis by default, the second dimension to y-axis.\n // You can also specify 'series.encode' to complete the map\n // without specify dimensions. Please see below.\n\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n## Map from Data to Chart\n\nThe ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.\n\nIn short, you can set these configs of mapping:\n\n- Specify 'column' or 'row' of `dataset` to map the `series`. You can use [series.seriesLayoutBy](${optionPath}#series.seriesLayoutBy) to configure it. The default is to map according to the column.\n- Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to `axis`, `tooltip`, `label` and `visualMap`. To configure the mapping, please use [series.encode](${optionPath}#series.encode) and [visualMap](${optionPath}#visualMap). The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in `dataset.source`; three-column chart mapping with each row in `dataset.source` one by one.\n\nThe details of the configuration are shown below:\n\n## Map Row or Column of `dataset` to `series`\n\nAfter having the dataset, you can configure flexibly: how the data map to the axis and graph series.\n\nYou can use `seriesLayoutBy` to change the understanding of row and column of the chart. `seriesLayoutBy` can be:\n\n- 'column': Default, the series are placed above the column of `dataset`.\n- 'row': The series is placed above the row of `dataset`.\n\nCheck this case:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // These series will show in the first coordinate, each series map a row in dataset.\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // These series will show in the second coordinate, each series map a column in dataset.\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n```\n\nThe effect of configuration is shown in [this case](${exampleEditorPath}dataset-series-layout-by).\n\n## Dimension\n\nMost of the data described in commonly used charts is a \"two-dimensional table\" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a \"dimension\" and each row was called \"item\", vice versa.\n\nThe dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, `'score'`, `'amount'`, `'product'` are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in `dataset.source`. You can also use `dataset.sourceHeader: true` to declare that the first column (row) represents the dimension name.\n\nTry to use single `dataset.dimensions` or some `series.dimensions` to define the dimensions, therefore you can specify the name and type together.\n\n```js\nvar option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // can be abbreviated as 'string', to indicate dimension name 。\n 'amount',\n // Specify dimensions in 'type'.\n { name: 'product', type: 'ordinal' }\n ],\n source: []\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: []\n },\n series: {\n type: 'line',\n // series.dimensions will cover the config in dataset.dimension\n dimensions: [\n null, // use null if you do not want dimension name.\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n```\n\nIn most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.\n\nDimension type can be the following values:\n\n- `'number'`: Default, normal data.\n- `'ordinal'`: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.\n- `'time'`: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as `'time'`. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'`. If the dimension is used as time axis ([axis.type](${optionPath}#xAxis.type) =`'time'`), the dimension type will also be`'time'`. See [data](${optionPath}#series.data) for more time type support.\n- `'float'`: Use `TypedArray` to optimize the performance in `'float'` dimension.\n- `'int'`: Use `TypedArray` to optimize the performance in `'int'` dimension.\n\n## Map from Data to Charts (series.encode)\n\nAfter understand the concept of dimension, you can use [series.encode](${optionPath}#series.encode) to make a mapping:\n\n```js live\nvar option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // Map \"amount\" column to x-axis.\n x: 'amount',\n // Map \"product\" row to y-axis.\n y: 'product'\n }\n }\n ]\n};\n```\n\nThe basic structure of `series.encode` declaration:\n\n- To the left of the colon: Specific name of axis or label.\n- To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).\n\nGenerally, the following info is not necessary to be defined. Fill in as needed.\n\nAttribute suggested by `series.encode`\n\n```js\n// Supported in every coordinate and series:\nencode: {\n // Display the value of dimension named \"product\" and \"score\" in tooltip.\n tooltip: ['product', 'score']\n // Connect dimension name of \"Dimension 1\" and \"Dimension 3\" as the series name. (Avoid to repeat longer names in series.name)\n seriesName: [1, 3],\n // Means to use the value in \"Dimension 2\" as the id. It makes the new and old data correspond by id\n\t// when using setOption to update data, so that it can show animation properly.\n itemId: 2,\n // The itemName will show in the legend of Pie Charts.\n itemName: 3\n}\n\n// Grid/cartesian coordinate unique configs:\nencode: {\n // Map \"Dimension 1\", \"Dimension 5\" and \"dimension named 'score'\" to x-axis:\n x: [1, 5, 'score'],\n // Map \"Dimension 0\" to y-axis:\n y: 0\n}\n\n// singleAxis unique configs:\nencode: {\n single: 3\n}\n\n// Polar coordinate unique configs:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// Geo-coordinate unique configs:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some charts without coordinate like pie chart, funnel chart:\nencode: {\n value: 3\n}\n```\n\nThis is a richer [example](${exampleEditorPath}dataset-encode1) of `series.encode`.\n\n## Default series.encode\n\nIt is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if `series.encode` is not specified. The default rule is:\n\n- In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.\n- Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).\n\nWhile the default rule cannot fulfill the requirements, you can configure `encode` by yourself, which is not complicate. Here is an [example](${exampleEditorPath}dataset-default).\n\n## Some Normal Settings of series.encode\n\nQ: How to set the 3rd column as x-axis, 5th column as y-axis?\n\nA:\n\n```js\noption = {\n series: {\n // dimensionIndex count from 0, so the 3rd line is dimensions[2].\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n```\n\nQ: How to set the 3rd row as x-axis, 5th row as y-axis?\n\nA:\n\n```js\noption = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n```\n\nQ: How to set the 2nd column as a label?\n\nA:\nWe now support to trace value from specific dimension for [label.formatter](${optionPath}#series.label.formatter):\n\n```js\nseries: {\n label: {\n // `'{@score}'` means the value in the dimension named \"score\".\n // `'{@[4]}'` means the value in dimension 4.\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n```\n\nQ: How to show the 2nd and 3rd column in the tooltip?\n\nA:\n\n```js\noption = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n```\n\nQ: How to define the dimension name if is not included in the dataset?\n\nA:\n\n```js\nvar option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n```\n\nQ: How to map the 3rd column to the size of the scatter chart?\n\nA:\n\n```js live\nvar option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // means the 3rd column\n min: 2, // lower bound\n max: 15, // higher bound\n inRange: {\n // Size of the bubble.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n```\n\nQ: I specified a mapping in encode, why it is not worked?\n\nA: Check your spelling, such as misspell the dimension name `'Life Expectancy'` to `'Life Expectency'` in encode.\n\n## Visual Channel Mapping\n\nWe can map visual channel by using [visualMap](${optionPath}#visualMap). Check details in the [visualMap](${optionPath}#visualMap) document. Here is an [example](${exampleEditorPath}dataset-encode0).\n\n## Formats of Charts\n\nIn most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to `dataset.source` and avoid some steps of data processing.\n\n> You can switch .csv file to JSON using tools like [dsv](https://github.com/d3/d3-dsv) or [PapaParse](https://github.com/mholt/PapaParse).\n\nAs the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.\n\nExpect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support [seriesLayoutBy](${optionPath}#series.seriesLayoutBy) in this format right now.\n\n```js\ndataset: [\n {\n // column by column key-value array is a normal format\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // row by row key-value\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n```\n\n## How to Reference Several Datasets\n\nECharts support to define several datasets at the same moment. Series can assign the one to reference by [series.datasetIndex](${optionPath}#series.datasetIndex). For example:\n\n```js\nvar option = {\n dataset: [\n {\n // 1st Dataset\n source: []\n },\n {\n // 2nd Dataset\n source: []\n },\n {\n // 3rd Dataset。\n source: []\n }\n ],\n series: [\n {\n // Use 2nd dataset\n datasetIndex: 2\n },\n {\n // Use 1st dataset\n datasetIndex: 1\n }\n ]\n};\n```\n\n## series.data in ECharts 3\n\nECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the [series.data](${optionPath}#series.data), then use [series.data](${optionPath}#series.data) but not `dataset`.\n\n```js\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\nIn fact, [series.data](${optionPath}#series.data) is an important setting method which will always exist. Some special non-table format chart like [treemap](${optionPath}#series-treemap), [graph](${optionPath}#series-graph) and [lines](${optionPath}#series-lines) still cannot be edit in dataset, you still need to use [series.data](${optionPath}#series.data). In another way, for render huge amount of data (over a million), you need to use [appendData](${mainSitePath}api.html#echartsInstance.appendData) which is not supported by `dataset`.\n\n## Others\n\nThe following charts now support dataset:\n`line`, `bar`, `pie`, `scatter`, `effectScatter`, `parallel`, `candlestick`, `map`, `funnel`, `custom`.\nECharts will support more charts in the future.\n\nIn the end, here is an [example](${exampleEditorPath}dataset-link) of several charts shared one `dataset` with linkage interaction.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/08435746bb3f8ba825bd.js b/handbook/_nuxt/js/08435746bb3f8ba825bd.js
new file mode 100644
index 0000000..a7c4fdd
--- /dev/null
+++ b/handbook/_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 l=Array.isArray;function c(t){return null!==t&&"object"==typeof t}function f(t){return"string"==typeof t}var h=Object.prototype.toString;function m(t){return"[object Object]"===h.call(t)}function _(t){return null==t}function v(t){return"function"==typeof t}function d(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];var n=null,r=null;return 1===t.length?c(t[0])||l(t[0])?r=t[0]:"string"==typeof t[0]&&(n=t[0]):2===t.length&&("string"==typeof t[0]&&(n=t[0]),(c(t[1])||l(t[1]))&&(r=t[1])),{locale:n,params:r}}function y(t){return JSON.parse(JSON.stringify(t))}function w(t,e){return!!~t.indexOf(e)}var k=Object.prototype.hasOwnProperty;function F(t,e){return k.call(t,e)}function M(t){for(var e=arguments,output=Object(t),i=1;i<arguments.length;i++){var source=e[i];if(null!=source){var n=void 0;for(n in source)F(source,n)&&(c(source[n])?output[n]=M(output[n],source[n]):output[n]=source[n])}}return output}function O(a,b){if(a===b)return!0;var t=c(a),e=c(b);if(!t||!e)return!t&&!e&&String(a)===String(b);try{var n=l(a),r=l(b);if(n&&r)return a.length===b.length&&a.every((function(t,i){return O(t,b[i])}));if(n||r)return!1;var o=Object.keys(a),f=Object.keys(b);return o.length===f.length&&o.every((function(t){return O(a[t],b[t])}))}catch(t){return!1}}function T(t){return null!=t&&Object.keys(t).forEach((function(e){"string"==typeof t[e]&&(t[e]=t[e].replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"))})),t}var $={beforeCreate:function(){var t=this.$options;if(t.i18n=t.i18n||(t.__i18n?{}:null),t.i18n)if(t.i18n instanceof at){if(t.__i18n)try{var e=t.i18n&&t.i18n.messages?t.i18n.messages:{};t.__i18n.forEach((function(t){e=M(e,JSON.parse(t))})),Object.keys(e).forEach((function(n){t.i18n.mergeLocaleMessage(n,e[n])}))}catch(t){0}this._i18n=t.i18n,this._i18nWatcher=this._i18n.watchI18nData()}else if(m(t.i18n)){var n=this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof at?this.$root.$i18n:null;if(n&&(t.i18n.root=this.$root,t.i18n.formatter=n.formatter,t.i18n.fallbackLocale=n.fallbackLocale,t.i18n.formatFallbackMessages=n.formatFallbackMessages,t.i18n.silentTranslationWarn=n.silentTranslationWarn,t.i18n.silentFallbackWarn=n.silentFallbackWarn,t.i18n.pluralizationRules=n.pluralizationRules,t.i18n.preserveDirectiveContent=n.preserveDirectiveContent),t.__i18n)try{var r=t.i18n&&t.i18n.messages?t.i18n.messages:{};t.__i18n.forEach((function(t){r=M(r,JSON.parse(t))})),t.i18n.messages=r}catch(t){0}var o=t.i18n.sharedMessages;o&&m(o)&&(t.i18n.messages=M(t.i18n.messages,o)),this._i18n=new at(t.i18n),this._i18nWatcher=this._i18n.watchI18nData(),(void 0===t.i18n.sync||t.i18n.sync)&&(this._localeWatcher=this.$i18n.watchLocale()),n&&n.onComponentInstanceCreated(this._i18n)}else 0;else this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof at?this._i18n=this.$root.$i18n:t.parent&&t.parent.$i18n&&t.parent.$i18n instanceof at&&(this._i18n=t.parent.$i18n)},beforeMount:function(){var t=this.$options;t.i18n=t.i18n||(t.__i18n?{}:null),t.i18n?(t.i18n instanceof at||m(t.i18n))&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0):(this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof at||t.parent&&t.parent.$i18n&&t.parent.$i18n instanceof at)&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0)},mounted:function(){this!==this.$root&&this.$options.__INTLIFY_META__&&this.$el&&this.$el.setAttribute("data-intlify",this.$options.__INTLIFY_META__)},beforeDestroy:function(){if(this._i18n){var t=this;this.$nextTick((function(){t._subscribing&&(t._i18n.unsubscribeDataChanging(t),delete t._subscribing),t._i18nWatcher&&(t._i18nWatcher(),t._i18n.destroyVM(),delete t._i18nWatcher),t._localeWatcher&&(t._localeWatcher(),delete t._localeWatcher)}))}}},C={name:"i18n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},path:{type:String,required:!0},locale:{type:String},places:{type:[Array,Object]}},render:function(t,e){var data=e.data,n=e.parent,r=e.props,o=e.slots,l=n.$i18n;if(l){var path=r.path,c=r.locale,f=r.places,h=o(),m=l.i(path,c,function(t){var e;for(e in t)if("default"!==e)return!1;return Boolean(e)}(h)||f?function(t,e){var n=e?function(t){0;return Array.isArray(t)?t.reduce(L,{}):Object.assign({},t)}(e):{};if(!t)return n;var r=(t=t.filter((function(t){return t.tag||""!==t.text.trim()}))).every(S);0;return t.reduce(r?j:L,n)}(h.default,f):h),_=r.tag&&!0!==r.tag||!1===r.tag?r.tag:"span";return _?t(_,data,m):m}}};function j(t,e){return e.data&&e.data.attrs&&e.data.attrs.place&&(t[e.data.attrs.place]=e),t}function L(t,e,n){return t[n]=e,t}function S(t){return Boolean(t.data&&t.data.attrs&&t.data.attrs.place)}var x,D={name:"i18n-n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},value:{type:Number,required:!0},format:{type:[String,Object]},locale:{type:String}},render:function(t,e){var n=e.props,o=e.parent,data=e.data,l=o.$i18n;if(!l)return null;var h=null,m=null;f(n.format)?h=n.format:c(n.format)&&(n.format.key&&(h=n.format.key),m=Object.keys(n.format).reduce((function(t,e){var o;return w(r,e)?Object.assign({},t,((o={})[e]=n.format[e],o)):t}),null));var _=n.locale||l.locale,v=l._ntp(n.value,_,h,m),d=v.map((function(t,e){var n,slot=data.scopedSlots&&data.scopedSlots[t.type];return slot?slot(((n={})[t.type]=t.value,n.index=e,n.parts=v,n)):t.value})),y=n.tag&&!0!==n.tag||!1===n.tag?n.tag:"span";return y?t(y,{attrs:data.attrs,class:data.class,staticClass:data.staticClass},d):d}};function I(t,e,n){N(t,n)&&A(t,e,n)}function W(t,e,n,r){if(N(t,n)){var o=n.context.$i18n;(function(t,e){var n=e.context;return t._locale===n.$i18n.locale})(t,n)&&O(e.value,e.oldValue)&&O(t._localeMessage,o.getLocaleMessage(o.locale))||A(t,e,n)}}function E(t,e,n,r){if(n.context){var l=n.context.$i18n||{};e.modifiers.preserve||l.preserveDirectiveContent||(t.textContent=""),t._vt=void 0,delete t._vt,t._locale=void 0,delete t._locale,t._localeMessage=void 0,delete t._localeMessage}else o("Vue instance does not exists in VNode context")}function N(t,e){var n=e.context;return n?!!n.$i18n||(o("VueI18n instance does not exists in Vue instance"),!1):(o("Vue instance does not exists in VNode context"),!1)}function A(t,e,n){var r,l,c=function(t){var path,e,n,r;f(t)?path=t:m(t)&&(path=t.path,e=t.locale,n=t.args,r=t.choice);return{path:path,locale:e,args:n,choice:r}}(e.value),path=c.path,h=c.locale,_=c.args,v=c.choice;if(path||h||_)if(path){var d=n.context;t._vt=t.textContent=null!=v?(r=d.$i18n).tc.apply(r,[path,v].concat(P(h,_))):(l=d.$i18n).t.apply(l,[path].concat(P(h,_))),t._locale=d.$i18n.locale,t._localeMessage=d.$i18n.getLocaleMessage(d.$i18n.locale)}else o("`path` is required in v-t directive");else o("value type not supported")}function P(t,e){var n=[];return t&&n.push(t),e&&(Array.isArray(e)||m(e))&&n.push(e),n}function H(t){H.installed=!0;(x=t).version&&Number(x.version.split(".")[0]);(function(t){t.prototype.hasOwnProperty("$i18n")||Object.defineProperty(t.prototype,"$i18n",{get:function(){return this._i18n}}),t.prototype.$t=function(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];var r=this.$i18n;return r._t.apply(r,[t,r.locale,r._getMessages(),this].concat(e))},t.prototype.$tc=function(t,e){for(var n=[],r=arguments.length-2;r-- >0;)n[r]=arguments[r+2];var o=this.$i18n;return o._tc.apply(o,[t,o.locale,o._getMessages(),this,e].concat(n))},t.prototype.$te=function(t,e){var n=this.$i18n;return n._te(t,n.locale,n._getMessages(),e)},t.prototype.$d=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this.$i18n).d.apply(e,[t].concat(n))},t.prototype.$n=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this.$i18n).n.apply(e,[t].concat(n))}})(x),x.mixin($),x.directive("t",{bind:I,update:W,unbind:E}),x.component(C.name,C),x.component(D.name,D),x.config.optionMergeStrategies.i18n=function(t,e){return void 0===e?t:e}}var R=function(){this._caches=Object.create(null)};R.prototype.interpolate=function(t,e){if(!e)return[t];var n=this._caches[t];return n||(n=function(t){var e=[],n=0,text="";for(;n<t.length;){var r=t[n++];if("{"===r){text&&e.push({type:"text",value:text}),text="";var sub="";for(r=t[n++];void 0!==r&&"}"!==r;)sub+=r,r=t[n++];var o="}"===r,l=V.test(sub)?"list":o&&z.test(sub)?"named":"unknown";e.push({value:sub,type:l})}else"%"===r?"{"!==t[n]&&(text+=r):text+=r}return text&&e.push({type:"text",value:text}),e}(t),this._caches[t]=n),function(t,e){var n=[],r=0,o=Array.isArray(e)?"list":c(e)?"named":"unknown";if("unknown"===o)return n;for(;r<t.length;){var l=t[r];switch(l.type){case"text":n.push(l.value);break;case"list":n.push(e[parseInt(l.value,10)]);break;case"named":"named"===o&&n.push(e[l.value]);break;case"unknown":0}r++}return n}(n,e)};var V=/^(?:\d)+/,z=/^(?:\w)+/;var B=[];B[0]={ws:[0],ident:[3,0],"[":[4],eof:[7]},B[1]={ws:[1],".":[2],"[":[4],eof:[7]},B[2]={ws:[2],ident:[3,0],0:[3,0],number:[3,0]},B[3]={ident:[3,0],0:[3,0],number:[3,0],ws:[1,1],".":[2,1],"[":[4,1],eof:[7,1]},B[4]={"'":[5,0],'"':[6,0],"[":[4,2],"]":[1,3],eof:8,else:[4,0]},B[5]={"'":[4,0],eof:8,else:[5,0]},B[6]={'"':[4,0],eof:8,else:[6,0]};var U=/^\s?(?:true|false|-?[\d.]+|'[^']*'|"[^"]*")\s?$/;function J(t){if(null==t)return"eof";switch(t.charCodeAt(0)){case 91:case 93:case 46:case 34:case 39:return t;case 95:case 36:case 45:return"ident";case 9:case 10:case 13:case 160:case 65279:case 8232:case 8233:return"ws"}return"ident"}function X(path){var t,a,e,n=path.trim();return("0"!==path.charAt(0)||!isNaN(path))&&(e=n,U.test(e)?(a=(t=n).charCodeAt(0))!==t.charCodeAt(t.length-1)||34!==a&&39!==a?t:t.slice(1,-1):"*"+n)}var Y=function(){this._cache=Object.create(null)};Y.prototype.parsePath=function(path){var t=this._cache[path];return t||(t=function(path){var t,e,n,r,o,l,c,f=[],h=-1,m=0,_=0,v=[];function d(){var t=path[h+1];if(5===m&&"'"===t||6===m&&'"'===t)return h++,n="\\"+t,v[0](),!0}for(v[1]=function(){void 0!==e&&(f.push(e),e=void 0)},v[0]=function(){void 0===e?e=n:e+=n},v[2]=function(){v[0](),_++},v[3]=function(){if(_>0)_--,m=4,v[0]();else{if(_=0,void 0===e)return!1;if(!1===(e=X(e)))return!1;v[1]()}};null!==m;)if(h++,"\\"!==(t=path[h])||!d()){if(r=J(t),8===(o=(c=B[m])[r]||c.else||8))return;if(m=o[0],(l=v[o[1]])&&(n=void 0===(n=o[2])?t:n,!1===l()))return;if(7===m)return f}}(path))&&(this._cache[path]=t),t||[]},Y.prototype.getPathValue=function(t,path){if(!c(t))return null;var e=this.parsePath(path);if(0===e.length)return null;for(var n=e.length,r=t,i=0;i<n;){var o=r[e[i]];if(null==o)return null;r=o,i++}return r};var G,Z=/<\/?[\w\s="/.':;#-\/]+>/,K=/(?:@(?:\.[a-z]+)?:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g,Q=/^@(?:\.([a-z]+))?:/,tt=/[()]/g,et={upper:function(t){return t.toLocaleUpperCase()},lower:function(t){return t.toLocaleLowerCase()},capitalize:function(t){return""+t.charAt(0).toLocaleUpperCase()+t.substr(1)}},nt=new R,at=function(t){var e=this;void 0===t&&(t={}),!x&&"undefined"!=typeof window&&window.Vue&&H(window.Vue);var n=t.locale||"en-US",r=!1!==t.fallbackLocale&&(t.fallbackLocale||"en-US"),o=t.messages||{},l=t.dateTimeFormats||{},c=t.numberFormats||{};this._vm=null,this._formatter=t.formatter||nt,this._modifiers=t.modifiers||{},this._missing=t.missing||null,this._root=t.root||null,this._sync=void 0===t.sync||!!t.sync,this._fallbackRoot=void 0===t.fallbackRoot||!!t.fallbackRoot,this._formatFallbackMessages=void 0!==t.formatFallbackMessages&&!!t.formatFallbackMessages,this._silentTranslationWarn=void 0!==t.silentTranslationWarn&&t.silentTranslationWarn,this._silentFallbackWarn=void 0!==t.silentFallbackWarn&&!!t.silentFallbackWarn,this._dateTimeFormatters={},this._numberFormatters={},this._path=new Y,this._dataListeners=new Set,this._componentInstanceCreatedListener=t.componentInstanceCreatedListener||null,this._preserveDirectiveContent=void 0!==t.preserveDirectiveContent&&!!t.preserveDirectiveContent,this.pluralizationRules=t.pluralizationRules||{},this._warnHtmlInMessage=t.warnHtmlInMessage||"off",this._postTranslation=t.postTranslation||null,this._escapeParameterHtml=t.escapeParameterHtml||!1,this.getChoiceIndex=function(t,n){var r=Object.getPrototypeOf(e);if(r&&r.getChoiceIndex)return r.getChoiceIndex.call(e,t,n);var o,l;return e.locale in e.pluralizationRules?e.pluralizationRules[e.locale].apply(e,[t,n]):(o=t,l=n,o=Math.abs(o),2===l?o?o>1?1:0:1:o?Math.min(o,2):0)},this._exist=function(t,n){return!(!t||!n)&&(!_(e._path.getPathValue(t,n))||!!t[n])},"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||Object.keys(o).forEach((function(t){e._checkLocaleMessage(t,e._warnHtmlInMessage,o[t])})),this._initVM({locale:n,fallbackLocale:r,messages:o,dateTimeFormats:l,numberFormats:c})},it={vm:{configurable:!0},messages:{configurable:!0},dateTimeFormats:{configurable:!0},numberFormats:{configurable:!0},availableLocales:{configurable:!0},locale:{configurable:!0},fallbackLocale:{configurable:!0},formatFallbackMessages:{configurable:!0},missing:{configurable:!0},formatter:{configurable:!0},silentTranslationWarn:{configurable:!0},silentFallbackWarn:{configurable:!0},preserveDirectiveContent:{configurable:!0},warnHtmlInMessage:{configurable:!0},postTranslation:{configurable:!0}};at.prototype._checkLocaleMessage=function(t,e,n){var r=function(t,e,n,c){if(m(n))Object.keys(n).forEach((function(o){var l=n[o];m(l)?(c.push(o),c.push("."),r(t,e,l,c),c.pop(),c.pop()):(c.push(o),r(t,e,l,c),c.pop())}));else if(l(n))n.forEach((function(n,o){m(n)?(c.push("["+o+"]"),c.push("."),r(t,e,n,c),c.pop(),c.pop()):(c.push("["+o+"]"),r(t,e,n,c),c.pop())}));else if(f(n)){if(Z.test(n)){var h="Detected HTML in message '"+n+"' of keypath '"+c.join("")+"' at '"+e+"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp";"warn"===t?o(h):"error"===t&&function(t,e){"undefined"!=typeof console&&(console.error("[vue-i18n] "+t),e&&console.error(e.stack))}(h)}}};r(e,t,n,[])},at.prototype._initVM=function(data){var t=x.config.silent;x.config.silent=!0,this._vm=new x({data:data}),x.config.silent=t},at.prototype.destroyVM=function(){this._vm.$destroy()},at.prototype.subscribeDataChanging=function(t){this._dataListeners.add(t)},at.prototype.unsubscribeDataChanging=function(t){!function(t,e){if(t.delete(e));}(this._dataListeners,t)},at.prototype.watchI18nData=function(){var t=this;return this._vm.$watch("$data",(function(){t._dataListeners.forEach((function(t){x.nextTick((function(){t&&t.$forceUpdate()}))}))}),{deep:!0})},at.prototype.watchLocale=function(){if(!this._sync||!this._root)return null;var t=this._vm;return this._root.$i18n.vm.$watch("locale",(function(e){t.$set(t,"locale",e),t.$forceUpdate()}),{immediate:!0})},at.prototype.onComponentInstanceCreated=function(t){this._componentInstanceCreatedListener&&this._componentInstanceCreatedListener(t,this)},it.vm.get=function(){return this._vm},it.messages.get=function(){return y(this._getMessages())},it.dateTimeFormats.get=function(){return y(this._getDateTimeFormats())},it.numberFormats.get=function(){return y(this._getNumberFormats())},it.availableLocales.get=function(){return Object.keys(this.messages).sort()},it.locale.get=function(){return this._vm.locale},it.locale.set=function(t){this._vm.$set(this._vm,"locale",t)},it.fallbackLocale.get=function(){return this._vm.fallbackLocale},it.fallbackLocale.set=function(t){this._localeChainCache={},this._vm.$set(this._vm,"fallbackLocale",t)},it.formatFallbackMessages.get=function(){return this._formatFallbackMessages},it.formatFallbackMessages.set=function(t){this._formatFallbackMessages=t},it.missing.get=function(){return this._missing},it.missing.set=function(t){this._missing=t},it.formatter.get=function(){return this._formatter},it.formatter.set=function(t){this._formatter=t},it.silentTranslationWarn.get=function(){return this._silentTranslationWarn},it.silentTranslationWarn.set=function(t){this._silentTranslationWarn=t},it.silentFallbackWarn.get=function(){return this._silentFallbackWarn},it.silentFallbackWarn.set=function(t){this._silentFallbackWarn=t},it.preserveDirectiveContent.get=function(){return this._preserveDirectiveContent},it.preserveDirectiveContent.set=function(t){this._preserveDirectiveContent=t},it.warnHtmlInMessage.get=function(){return this._warnHtmlInMessage},it.warnHtmlInMessage.set=function(t){var e=this,n=this._warnHtmlInMessage;if(this._warnHtmlInMessage=t,n!==t&&("warn"===t||"error"===t)){var r=this._getMessages();Object.keys(r).forEach((function(t){e._checkLocaleMessage(t,e._warnHtmlInMessage,r[t])}))}},it.postTranslation.get=function(){return this._postTranslation},it.postTranslation.set=function(t){this._postTranslation=t},at.prototype._getMessages=function(){return this._vm.messages},at.prototype._getDateTimeFormats=function(){return this._vm.dateTimeFormats},at.prototype._getNumberFormats=function(){return this._vm.numberFormats},at.prototype._warnDefault=function(t,e,n,r,o,l){if(!_(n))return n;if(this._missing){var c=this._missing.apply(null,[t,e,r,o]);if(f(c))return c}else 0;if(this._formatFallbackMessages){var h=d.apply(void 0,o);return this._render(e,l,h.params,e)}return e},at.prototype._isFallbackRoot=function(t){return!t&&!_(this._root)&&this._fallbackRoot},at.prototype._isSilentFallbackWarn=function(t){return this._silentFallbackWarn instanceof RegExp?this._silentFallbackWarn.test(t):this._silentFallbackWarn},at.prototype._isSilentFallback=function(t,e){return this._isSilentFallbackWarn(e)&&(this._isFallbackRoot()||t!==this.fallbackLocale)},at.prototype._isSilentTranslationWarn=function(t){return this._silentTranslationWarn instanceof RegExp?this._silentTranslationWarn.test(t):this._silentTranslationWarn},at.prototype._interpolate=function(t,e,n,r,o,c,h){if(!e)return null;var d,y=this._path.getPathValue(e,n);if(l(y)||m(y))return y;if(_(y)){if(!m(e))return null;if(!f(d=e[n])&&!v(d))return null}else{if(!f(y)&&!v(y))return null;d=y}return f(d)&&(d.indexOf("@:")>=0||d.indexOf("@.")>=0)&&(d=this._link(t,e,d,r,"raw",c,h)),this._render(d,o,c,n)},at.prototype._link=function(t,e,n,r,o,c,f){var h=n,m=h.match(K);for(var _ in m)if(m.hasOwnProperty(_)){var link=m[_],v=link.match(Q),d=v[0],y=v[1],k=link.replace(d,"").replace(tt,"");if(w(f,k))return h;f.push(k);var F=this._interpolate(t,e,k,r,"raw"===o?"string":o,"raw"===o?void 0:c,f);if(this._isFallbackRoot(F)){if(!this._root)throw Error("unexpected error");var M=this._root.$i18n;F=M._translate(M._getMessages(),M.locale,M.fallbackLocale,k,r,o,c)}F=this._warnDefault(t,k,F,r,l(c)?c:[c],o),this._modifiers.hasOwnProperty(y)?F=this._modifiers[y](F):et.hasOwnProperty(y)&&(F=et[y](F)),f.pop(),h=F?h.replace(link,F):h}return h},at.prototype._createMessageContext=function(t){var e=l(t)?t:[],n=c(t)?t:{};return{list:function(t){return e[t]},named:function(t){return n[t]}}},at.prototype._render=function(t,e,n,path){if(v(t))return t(this._createMessageContext(n));var r=this._formatter.interpolate(t,n,path);return r||(r=nt.interpolate(t,n,path)),"string"!==e||f(r)?r:r.join("")},at.prototype._appendItemToChain=function(t,e,n){var r=!1;return w(t,e)||(r=!0,e&&(r="!"!==e[e.length-1],e=e.replace(/!/g,""),t.push(e),n&&n[e]&&(r=n[e]))),r},at.prototype._appendLocaleToChain=function(t,e,n){var r,o=e.split("-");do{var l=o.join("-");r=this._appendItemToChain(t,l,n),o.splice(-1,1)}while(o.length&&!0===r);return r},at.prototype._appendBlockToChain=function(t,e,n){for(var r=!0,i=0;i<e.length&&"boolean"==typeof r;i++){var o=e[i];f(o)&&(r=this._appendLocaleToChain(t,o,n))}return r},at.prototype._getLocaleChain=function(t,e){if(""===t)return[];this._localeChainCache||(this._localeChainCache={});var n=this._localeChainCache[t];if(!n){e||(e=this.fallbackLocale),n=[];for(var r,o=[t];l(o);)o=this._appendBlockToChain(n,o,e);(o=f(r=l(e)?e:c(e)?e.default?e.default:null:e)?[r]:r)&&this._appendBlockToChain(n,o,null),this._localeChainCache[t]=n}return n},at.prototype._translate=function(t,e,n,r,o,l,c){for(var f,h=this._getLocaleChain(e,n),i=0;i<h.length;i++){var m=h[i];if(!_(f=this._interpolate(m,t[m],r,o,l,c,[r])))return f}return null},at.prototype._t=function(t,e,n,r){for(var o,l=[],c=arguments.length-4;c-- >0;)l[c]=arguments[c+4];if(!t)return"";var f=d.apply(void 0,l);this._escapeParameterHtml&&(f.params=T(f.params));var h=f.locale||e,m=this._translate(n,h,this.fallbackLocale,t,r,"string",f.params);if(this._isFallbackRoot(m)){if(!this._root)throw Error("unexpected error");return(o=this._root).$t.apply(o,[t].concat(l))}return m=this._warnDefault(h,t,m,r,l,"string"),this._postTranslation&&null!=m&&(m=this._postTranslation(m,t)),m},at.prototype.t=function(t){for(var e,n=[],r=arguments.length-1;r-- >0;)n[r]=arguments[r+1];return(e=this)._t.apply(e,[t,this.locale,this._getMessages(),null].concat(n))},at.prototype._i=function(t,e,n,r,o){var l=this._translate(n,e,this.fallbackLocale,t,r,"raw",o);if(this._isFallbackRoot(l)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.i(t,e,o)}return this._warnDefault(e,t,l,r,[o],"raw")},at.prototype.i=function(t,e,n){return t?(f(e)||(e=this.locale),this._i(t,e,this._getMessages(),null,n)):""},at.prototype._tc=function(t,e,n,r,o){for(var l,c=[],f=arguments.length-5;f-- >0;)c[f]=arguments[f+5];if(!t)return"";void 0===o&&(o=1);var h={count:o,n:o},m=d.apply(void 0,c);return m.params=Object.assign(h,m.params),c=null===m.locale?[m.params]:[m.locale,m.params],this.fetchChoice((l=this)._t.apply(l,[t,e,n,r].concat(c)),o)},at.prototype.fetchChoice=function(t,e){if(!t||!f(t))return null;var n=t.split("|");return n[e=this.getChoiceIndex(e,n.length)]?n[e].trim():t},at.prototype.tc=function(t,e){for(var n,r=[],o=arguments.length-2;o-- >0;)r[o]=arguments[o+2];return(n=this)._tc.apply(n,[t,this.locale,this._getMessages(),null,e].concat(r))},at.prototype._te=function(t,e,n){for(var r=[],o=arguments.length-3;o-- >0;)r[o]=arguments[o+3];var l=d.apply(void 0,r).locale||e;return this._exist(n[l],t)},at.prototype.te=function(t,e){return this._te(t,this.locale,this._getMessages(),e)},at.prototype.getLocaleMessage=function(t){return y(this._vm.messages[t]||{})},at.prototype.setLocaleMessage=function(t,e){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(t,this._warnHtmlInMessage,e),this._vm.$set(this._vm.messages,t,e)},at.prototype.mergeLocaleMessage=function(t,e){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(t,this._warnHtmlInMessage,e),this._vm.$set(this._vm.messages,t,M(void 0!==this._vm.messages[t]&&Object.keys(this._vm.messages[t]).length?this._vm.messages[t]:{},e))},at.prototype.getDateTimeFormat=function(t){return y(this._vm.dateTimeFormats[t]||{})},at.prototype.setDateTimeFormat=function(t,e){this._vm.$set(this._vm.dateTimeFormats,t,e),this._clearDateTimeFormat(t,e)},at.prototype.mergeDateTimeFormat=function(t,e){this._vm.$set(this._vm.dateTimeFormats,t,M(this._vm.dateTimeFormats[t]||{},e)),this._clearDateTimeFormat(t,e)},at.prototype._clearDateTimeFormat=function(t,e){for(var n in e){var r=t+"__"+n;this._dateTimeFormatters.hasOwnProperty(r)&&delete this._dateTimeFormatters[r]}},at.prototype._localizeDateTime=function(t,e,n,r,o){for(var l=e,c=r[l],f=this._getLocaleChain(e,n),i=0;i<f.length;i++){var h=f[i];if(l=h,!_(c=r[h])&&!_(c[o]))break}if(_(c)||_(c[o]))return null;var m=c[o],v=l+"__"+o,d=this._dateTimeFormatters[v];return d||(d=this._dateTimeFormatters[v]=new Intl.DateTimeFormat(l,m)),d.format(t)},at.prototype._d=function(t,e,n){if(!n)return new Intl.DateTimeFormat(e).format(t);var r=this._localizeDateTime(t,e,this.fallbackLocale,this._getDateTimeFormats(),n);if(this._isFallbackRoot(r)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.d(t,n,e)}return r||""},at.prototype.d=function(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];var r=this.locale,o=null;return 1===e.length?f(e[0])?o=e[0]:c(e[0])&&(e[0].locale&&(r=e[0].locale),e[0].key&&(o=e[0].key)):2===e.length&&(f(e[0])&&(o=e[0]),f(e[1])&&(r=e[1])),this._d(t,r,o)},at.prototype.getNumberFormat=function(t){return y(this._vm.numberFormats[t]||{})},at.prototype.setNumberFormat=function(t,e){this._vm.$set(this._vm.numberFormats,t,e),this._clearNumberFormat(t,e)},at.prototype.mergeNumberFormat=function(t,e){this._vm.$set(this._vm.numberFormats,t,M(this._vm.numberFormats[t]||{},e)),this._clearNumberFormat(t,e)},at.prototype._clearNumberFormat=function(t,e){for(var n in e){var r=t+"__"+n;this._numberFormatters.hasOwnProperty(r)&&delete this._numberFormatters[r]}},at.prototype._getNumberFormatter=function(t,e,n,r,o,l){for(var c=e,f=r[c],h=this._getLocaleChain(e,n),i=0;i<h.length;i++){var m=h[i];if(c=m,!_(f=r[m])&&!_(f[o]))break}if(_(f)||_(f[o]))return null;var v,d=f[o];if(l)v=new Intl.NumberFormat(c,Object.assign({},d,l));else{var y=c+"__"+o;(v=this._numberFormatters[y])||(v=this._numberFormatters[y]=new Intl.NumberFormat(c,d))}return v},at.prototype._n=function(t,e,n,r){if(!at.availabilities.numberFormat)return"";if(!n)return(r?new Intl.NumberFormat(e,r):new Intl.NumberFormat(e)).format(t);var o=this._getNumberFormatter(t,e,this.fallbackLocale,this._getNumberFormats(),n,r),l=o&&o.format(t);if(this._isFallbackRoot(l)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.n(t,Object.assign({},{key:n,locale:e},r))}return l||""},at.prototype.n=function(t){for(var e=[],n=arguments.length-1;n-- >0;)e[n]=arguments[n+1];var o=this.locale,l=null,h=null;return 1===e.length?f(e[0])?l=e[0]:c(e[0])&&(e[0].locale&&(o=e[0].locale),e[0].key&&(l=e[0].key),h=Object.keys(e[0]).reduce((function(t,n){var o;return w(r,n)?Object.assign({},t,((o={})[n]=e[0][n],o)):t}),null)):2===e.length&&(f(e[0])&&(l=e[0]),f(e[1])&&(o=e[1])),this._n(t,o,l,h)},at.prototype._ntp=function(t,e,n,r){if(!at.availabilities.numberFormat)return[];if(!n)return(r?new Intl.NumberFormat(e,r):new Intl.NumberFormat(e)).formatToParts(t);var o=this._getNumberFormatter(t,e,this.fallbackLocale,this._getNumberFormats(),n,r),l=o&&o.formatToParts(t);if(this._isFallbackRoot(l)){if(!this._root)throw Error("unexpected error");return this._root.$i18n._ntp(t,e,n,r)}return l||[]},Object.defineProperties(at.prototype,it),Object.defineProperty(at,"availabilities",{get:function(){if(!G){var t="undefined"!=typeof Intl;G={dateTimeFormat:t&&void 0!==Intl.DateTimeFormat,numberFormat:t&&void 0!==Intl.NumberFormat}}return G}}),at.install=H,at.version="8.24.4",e.a=at},131:function(t,e,n){"use strict";e.a=function(t,e){return e=e||{},new Promise((function(n,r){var s=new XMLHttpRequest,o=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return o},entries:function(){return u},get:function(t){return i[t.toLowerCase()]},has:function(t){return t.toLowerCase()in i}}}};for(var l in s.open(e.method||"get",t,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(t,e,n){o.push(e=e.toLowerCase()),u.push([e,n]),i[e]=i[e]?i[e]+","+n:n})),n(a())},s.onerror=r,s.withCredentials="include"==e.credentials,e.headers)s.setRequestHeader(l,e.headers[l]);s.send(e.body||null)}))}},132:function(t,e,n){"use strict";var r=function(t){return function(t){return!!t&&"object"==typeof t}(t)&&!function(t){var e=Object.prototype.toString.call(t);return"[object RegExp]"===e||"[object Date]"===e||function(t){return t.$$typeof===o}(t)}(t)};var o="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function l(t,e){return!1!==e.clone&&e.isMergeableObject(t)?_((n=t,Array.isArray(n)?[]:{}),t,e):t;var n}function c(t,source,e){return t.concat(source).map((function(element){return l(element,e)}))}function f(t){return Object.keys(t).concat(function(t){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t).filter((function(symbol){return t.propertyIsEnumerable(symbol)})):[]}(t))}function h(object,t){try{return t in object}catch(t){return!1}}function m(t,source,e){var n={};return e.isMergeableObject(t)&&f(t).forEach((function(r){n[r]=l(t[r],e)})),f(source).forEach((function(r){(function(t,e){return h(t,e)&&!(Object.hasOwnProperty.call(t,e)&&Object.propertyIsEnumerable.call(t,e))})(t,r)||(h(t,r)&&e.isMergeableObject(source[r])?n[r]=function(t,e){if(!e.customMerge)return _;var n=e.customMerge(t);return"function"==typeof n?n:_}(r,e)(t[r],source[r],e):n[r]=l(source[r],e))})),n}function _(t,source,e){(e=e||{}).arrayMerge=e.arrayMerge||c,e.isMergeableObject=e.isMergeableObject||r,e.cloneUnlessOtherwiseSpecified=l;var n=Array.isArray(source);return n===Array.isArray(t)?n?e.arrayMerge(t,source,e):m(t,source,e):l(source,e)}_.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce((function(t,n){return _(t,n,e)}),{})};var v=_;t.exports=v},133:function(t,e){var n="complete",r="canceled";function o(element,t,e){element.self===element?element.scrollTo(t,e):(element.scrollLeft=t,element.scrollTop=e)}function animate(t){var e=t._scrollSettings;if(e){var r=e.maxSynchronousAlignments,l=function(t,e){var n,r,o,l,c,f,h,m=t.align,_=t.target.getBoundingClientRect(),v=m&&null!=m.left?m.left:.5,d=m&&null!=m.top?m.top:.5,y=m&&null!=m.leftOffset?m.leftOffset:0,w=m&&null!=m.topOffset?m.topOffset:0,k=v,F=d;if(t.isWindow(e))f=Math.min(_.width,e.innerWidth),h=Math.min(_.height,e.innerHeight),r=_.left+e.pageXOffset-e.innerWidth*k+f*k,o=_.top+e.pageYOffset-e.innerHeight*F+h*F,o-=w,l=(r-=y)-e.pageXOffset,c=o-e.pageYOffset;else{f=_.width,h=_.height,n=e.getBoundingClientRect();var M=_.left-(n.left-e.scrollLeft),O=_.top-(n.top-e.scrollTop);r=M+f*k-e.clientWidth*k,o=O+h*F-e.clientHeight*F,r-=y,o-=w,r=Math.max(Math.min(r,e.scrollWidth-e.clientWidth),0),o=Math.max(Math.min(o,e.scrollHeight-e.clientHeight),0),l=r-e.scrollLeft,c=o-e.scrollTop}return{x:r,y:o,differenceX:l,differenceY:c}}(e,t),time=Date.now()-e.startTime,c=Math.min(1/e.time*time,1);if(e.endIterations>=r)return o(t,l.x,l.y),t._scrollSettings=null,e.end(n);var f=1-e.ease(c);if(o(t,l.x-l.differenceX*f,l.y-l.differenceY*f),time>=e.time)return e.endIterations++,animate(t);!function(t){if("requestAnimationFrame"in window)return window.requestAnimationFrame(t);setTimeout(t,16)}(animate.bind(null,t))}}function l(t){return t.self===t}function c(t,e,n,o){var c,f=!e._scrollSettings,h=e._scrollSettings,m=Date.now(),_={passive:!0};function v(t){e._scrollSettings=null,e.parentElement&&e.parentElement._scrollSettings&&e.parentElement._scrollSettings.end(t),n.debug&&console.log("Scrolling ended with type",t,"for",e),o(t),c&&(e.removeEventListener("touchstart",c,_),e.removeEventListener("wheel",c,_))}h&&h.end(r);var d=n.maxSynchronousAlignments;return null==d&&(d=3),e._scrollSettings={startTime:m,endIterations:0,target:t,time:n.time,ease:n.ease,align:n.align,isWindow:n.isWindow||l,maxSynchronousAlignments:d,end:v},"cancellable"in n&&!n.cancellable||(c=v.bind(null,r),e.addEventListener("touchstart",c,_),e.addEventListener("wheel",c,_)),f&&animate(e),c}function f(element){return"pageXOffset"in element||(element.scrollHeight!==element.clientHeight||element.scrollWidth!==element.clientWidth)&&"hidden"!==getComputedStyle(element).overflow}function h(){return!0}function m(t){if(t.assignedSlot)return m(t.assignedSlot);if(t.parentElement)return"BODY"===t.parentElement.tagName?t.parentElement.ownerDocument.defaultView||t.parentElement.ownerDocument.ownerWindow:t.parentElement;if(t.getRootNode){var e=t.getRootNode();if(11===e.nodeType)return e.host}}t.exports=function(t,e,r){if(t){"function"==typeof e&&(r=e,e=null),e||(e={}),e.time=isNaN(e.time)?1e3:e.time,e.ease=e.ease||function(t){return 1-Math.pow(1-t,t/2)};var o,l=m(t),_=1,v=e.validTarget||h,d=e.isScrollable;for(e.debug&&(console.log("About to scroll to",t),l||console.error("Target did not have a parent, is it mounted in the DOM?"));l;)if(e.debug&&console.log("Scrolling parent node",l),v(l,_)&&(d?d(l,f):f(l))&&(_++,o=c(t,l,e,y)),!(l=m(l))){y(n);break}return o}function y(t){--_||r&&r(t)}}},174:function(t,e,n){t.exports={}},45:function(t,e,n){"use strict";var r={name:"NoSsr",functional:!0,props:{placeholder:String,placeholderTag:{type:String,default:"div"}},render:function(t,e){var n=e.parent,r=e.slots,o=e.props,l=r(),c=l.default;void 0===c&&(c=[]);var f=l.placeholder;return n._isMounted?c:(n.$once("hook:mounted",(function(){n.$forceUpdate()})),o.placeholderTag&&(o.placeholder||f)?t(o.placeholderTag,{class:["no-ssr-placeholder"]},o.placeholder||f):c.length>0?c.map((function(){return t(!1)})):t(!1))}};t.exports=r},46:function(t,e,n){"use strict";function r(t,e,n){"object"==typeof n.value&&(n.value=o(n.value)),n.enumerable&&!n.get&&!n.set&&n.configurable&&n.writable&&"__proto__"!==e?t[e]=n.value:Object.defineProperty(t,e,n)}function o(t){if("object"!=typeof t)return t;var e,n,l,i=0,c=Object.prototype.toString.call(t);if("[object Object]"===c?l=Object.create(t.__proto__||null):"[object Array]"===c?l=Array(t.length):"[object Set]"===c?(l=new Set,t.forEach((function(t){l.add(o(t))}))):"[object Map]"===c?(l=new Map,t.forEach((function(t,e){l.set(o(e),o(t))}))):"[object Date]"===c?l=new Date(+t):"[object RegExp]"===c?l=new RegExp(t.source,t.flags):"[object DataView]"===c?l=new t.constructor(o(t.buffer)):"[object ArrayBuffer]"===c?l=t.slice(0):"Array]"===c.slice(-6)&&(l=new t.constructor(t)),l){for(n=Object.getOwnPropertySymbols(t);i<n.length;i++)r(l,n[i],Object.getOwnPropertyDescriptor(t,n[i]));for(i=0,n=Object.getOwnPropertyNames(t);i<n.length;i++)Object.hasOwnProperty.call(l,e=n[i])&&l[e]===t[e]||r(l,e,Object.getOwnPropertyDescriptor(t,e))}return l||t}n.d(e,"a",(function(){return o}))},98:function(t,e,n){"use strict";var r={name:"ClientOnly",functional:!0,props:{placeholder:String,placeholderTag:{type:String,default:"div"}},render:function(t,e){var n=e.parent,r=e.slots,o=e.props,l=r(),c=l.default;void 0===c&&(c=[]);var f=l.placeholder;return n._isMounted?c:(n.$once("hook:mounted",(function(){n.$forceUpdate()})),o.placeholderTag&&(o.placeholder||f)?t(o.placeholderTag,{class:["client-only-placeholder"]},o.placeholder||f):c.length>0?c.map((function(){return t(!1)})):t(!1))}};t.exports=r}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/09401beda4bef47430f5.js b/handbook/_nuxt/js/09401beda4bef47430f5.js
new file mode 100644
index 0000000..fca73bf
--- /dev/null
+++ b/handbook/_nuxt/js/09401beda4bef47430f5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[29],{323:function(e,n,t){"use strict";t.r(n),n.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## NPM Installation of ECharts\n\nYou can install ECharts via npm using the following command\n\n```shell\nnpm install echarts --save\n```\n\n## Introduce ECharts\n\n```js\nimport * as echarts from 'echarts';\n\n// initialize the echarts instance\nvar myChart = echarts.init(document.getElementById('main'));\n// Draw the chart\nmyChart.setOption({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n```\n\n## Importing Required Charts and Components to Have Minimal Bundle.\n\nThe above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.\n\n```js\n// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffix\nimport { BarChart } from 'echarts/charts';\n// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// The next step is the same as before, initialize the chart and set the configuration items\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n```\n\n> Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import `CanvasRenderer` or `SVGRenderer` as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the `CanvasRenderer` module, which is not needed.\n\nThe \"Full Code\" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.\n\n## Minimal Option Type in TypeScript\n\nFor developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal `EChartsOption` type. This stricter type can effectively help you check for missing components or charts.\n\n```ts\nimport * as echarts from 'echarts/core';\nimport {\n BarChart,\n // The series types are defined with the SeriesOption suffix\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // The component types are defined with the suffix ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Combine an Option type with only required components and charts via ComposeOption\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/0bba3e665320160fe0ec.js b/handbook/_nuxt/js/0bba3e665320160fe0ec.js
new file mode 100644
index 0000000..1ecfde2
--- /dev/null
+++ b/handbook/_nuxt/js/0bba3e665320160fe0ec.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[76],{370: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 type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n```\n\n如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。\n\n## 在圆环图中间显示高亮扇形对应的文字\n\n上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 `label`(默认用扇形颜色显示数据的 `name`),显示在圆环图中间。在默认情况下不显示系列的 `label`,在高亮时显示。具体的代码如下:\n\n```js live\noption = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n```\n\n其中,`avoidLabelOverlap` 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 `true`,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 `false`。\n\n这样,圆环图中间会显示高亮数据的 `name` 值。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/0dfcea8fbe16d514d8d7.js b/handbook/_nuxt/js/0dfcea8fbe16d514d8d7.js
new file mode 100644
index 0000000..4ba144a
--- /dev/null
+++ b/handbook/_nuxt/js/0dfcea8fbe16d514d8d7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{306: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` represents the addition of `345` to `900`, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.\n\n```js live\nvar data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];\nvar help = [];\nvar positive = [];\nvar negative = [];\nfor (var i = 0, sum = 0; i < data.length; ++i) {\n if (data[i] >= 0) {\n positive.push(data[i]);\n negative.push('-');\n } else {\n positive.push('-');\n negative.push(-data[i]);\n }\n\n if (i === 0) {\n help.push(0);\n } else {\n sum += data[i - 1];\n if (data[i] < 0) {\n help.push(sum + data[i]);\n } else {\n help.push(sum);\n }\n }\n}\n\noption = {\n title: {\n text: 'Waterfall'\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'category',\n splitLine: { show: false },\n data: (function() {\n var list = [];\n for (var i = 1; i <= 11; i++) {\n list.push('Oct/' + i);\n }\n return list;\n })()\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n type: 'bar',\n stack: 'all',\n itemStyle: {\n normal: {\n barBorderColor: 'rgba(0,0,0,0)',\n color: 'rgba(0,0,0,0)'\n },\n emphasis: {\n barBorderColor: 'rgba(0,0,0,0)',\n color: 'rgba(0,0,0,0)'\n }\n },\n data: help\n },\n {\n name: 'positive',\n type: 'bar',\n stack: 'all',\n data: positive\n },\n {\n name: 'negative',\n type: 'bar',\n stack: 'all',\n data: negative,\n itemStyle: {\n color: '#f33'\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/0f6ae1f3ae0558dca3c6.js b/handbook/_nuxt/js/0f6ae1f3ae0558dca3c6.js
new file mode 100644
index 0000000..a9c1292
--- /dev/null
+++ b/handbook/_nuxt/js/0f6ae1f3ae0558dca3c6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[106],{400: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、面积图要用填充区域来展示数据,当图表上有多个图层时,要尽量确保数据不要重叠。如果无法避免重叠,可以通过将颜色和透明度设置为适当的值,使重叠的数据图可以变得可读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>\n\n2、面积图适合用来展示二到三组数据,建议最多不要展示超过四组数据系列,否则就如下方错误示例,数据系列过多而导致无法辨识数据,因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>\n\n3、当数据值相距很远时,区域是模糊不清的,此时 \b 不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别,乍一看,很可能会误以为图表上显示三种不同的颜色。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/102a2d6d4a3ace01dcb8.js b/handbook/_nuxt/js/102a2d6d4a3ace01dcb8.js
new file mode 100644
index 0000000..7afb704
--- /dev/null
+++ b/handbook/_nuxt/js/102a2d6d4a3ace01dcb8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[19],{313: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 element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.\n\nThe bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.\n\n```js live\noption = {\n title: {\n text: 'A Case of Doughnut Chart',\n left: 'center',\n top: 'center'\n },\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'A'\n },\n {\n value: 234,\n name: 'B'\n },\n {\n value: 1548,\n name: 'C'\n }\n ],\n radius: ['40%', '70%']\n }\n ]\n};\n```\n\nIf we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.\n\n## Show Text In Middle Of Doughnut From Highlighted Sector\n\nThe previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix `label` in the middle of the chart while hiding `label` in default.\n\n```js live\noption = {\n legend: {\n orient: 'vertical',\n x: 'left',\n data: ['A', 'B', 'C', 'D', 'E']\n },\n series: [\n {\n type: 'pie',\n radius: ['50%', '70%'],\n avoidLabelOverlap: false,\n label: {\n show: false,\n position: 'center',\n emphasis: {\n show: true\n }\n },\n labelLine: {\n show: false\n },\n emphasis: {\n label: {\n show: true,\n fontSize: '30',\n fontWeight: 'bold'\n }\n },\n data: [\n { value: 335, name: 'A' },\n { value: 310, name: 'B' },\n { value: 234, name: 'C' },\n { value: 135, name: 'D' },\n { value: 1548, name: 'E' }\n ]\n }\n ]\n};\n```\n\nIn this case, `avoidLabelOverlap` is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of `avoidLabelOverlap` is `true`. We want the label to be fixed in the middle so that we need to define it as `false`.\n\nTherefore, the middle of doughnut chart will show the `name` of the highlighted sector.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/115b812c3a35ca66e69e.js b/handbook/_nuxt/js/115b812c3a35ca66e69e.js
new file mode 100644
index 0000000..3876d83
--- /dev/null
+++ b/handbook/_nuxt/js/115b812c3a35ca66e69e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{340: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 several series and you want to analyze the part-to-whole relationship for every single one, which reflects the contribution of partial quantity to the total, you can use the stacked area chart. For instance, the contribution of one seller to the total sales.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">\n</iframe>\n\nHere are two different kinds of stacked area chart:\n\n+ <b>Traditional stacked chart</b>: Use the original value to stack, show the change in the whole process.\n+ <b>Percentage stacked chart</b>: The percentage stacked chart shows how did the relationship between series changed with time. The cumulative total is not the focus as this kind of chart. The important is to show the series distribution as the whole.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n## Suggestion for Using Stacked Area Chart\n\n1. The area chart can\'t display data in many series that are closed to each others. It will make the chart hard to read: \n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n</iframe>\n\nWith the same series, stacked bar chart works better:\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n<div class="article-look-outside">\n\t<div class="article-look-inside" style="padding-bottom:50%">\n\t <iframe class="article-look-content"\n\t src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n\t </iframe>\n\t</div>\n</div>\n\n2. Although the stacked bar chart is good dealing with several series, try not to include more than 7 in one chart.\n\n3. Because the stacked bar chart provides the relation between part and whole, you should not include negative value in series.\n\n4. We suggest putting larger values on the top side of the chart, you will get a better display effect.\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/142f38fb609b75e729dc.js b/handbook/_nuxt/js/142f38fb609b75e729dc.js
new file mode 100644
index 0000000..221f141
--- /dev/null
+++ b/handbook/_nuxt/js/142f38fb609b75e729dc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[78],{372: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, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n```\n\n## 笛卡尔坐标系下的散点图\n\n在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 `data` 中,而非坐标轴中。\n\n```js live\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n```\n\n## 散点图样式设置\n\n### 图形的形状\n\n图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。\n\nECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应`'circle'`、`'rect'`、`'roundRect'`、`'triangle'`、`'diamond'`、`'pin'`、`'arrow'`。使用内置形状时,只要将 `symbol` 属性指定为形状名称对应的字符串即可。\n\n如果想要将图形指定为任意的图片,以 `'image://'` 开头,后面跟图片的绝对或相对地址。形如:`'image://http://example.com/xxx.png'` 或 `'image://./xxx.png'`。\n\n除此之外,还支持 SVG 的路径作为矢量图形,将 `symbol` 设置为以 `'path://'` 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 `SVG` 文件,找到形如 `<path d=\"M… L…\"></path>` 的路径,将 `d` 的值添加在 `'path://'` 后即可。\n\n下面,我们展示一个将图形设置为矢量爱心形状的方式。\n\n首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:\n\n```xml\n<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n```\n\n在 ECharts 的 `symbol` 配置项中,我们使用 `d` 的值作为路径。\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, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n```\n\n这样,就能得到爱心形状的图形作为点的形状了。\n\n### 图形的大小\n\n图形大小可以使用 [`series.symbolSize`](${optionPath}series-scatter.symbolSize) 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。\n\n除此之外,它还可以是一个回调函数,其参数格式为:\n\n```ts\n(value: Array | number, params: Object) => number | Array;\n```\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, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1478fcfc2724c8aa7ccc.js b/handbook/_nuxt/js/1478fcfc2724c8aa7ccc.js
new file mode 100644
index 0000000..dacfed7
--- /dev/null
+++ b/handbook/_nuxt/js/1478fcfc2724c8aa7ccc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[71],{365: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` 将横坐标设为类目型,并指定了对应的值;通过 `type` 将 `yAxis` 的类型设定为数值型。在 `series` 中,我们将系列类型设为 `line`,并且通过 `data` 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。\n\n> 这里 `xAxis` 和 `yAxis` 的 `type` 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 `xAxis` 指定了类目型的 `data`,所以 `ECharts` 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 `type`。在实际的应用中,如果是 `'value'` 类型,也可以省略不写。\n\n## 笛卡尔坐标系中的折线图\n\n如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 `series` 的 `data` 每个数据用一个包含两个元素的数组表示就行了。\n\n```js live\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n```\n\n## 折线图样式设置\n\n### 折线的样式\n\n折线图中折线的样式可以通过 `lineStyle` 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 [`series.lineStyle`](${optionPath}series-line.lineStyle) 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n```\n\n这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。\n\n### 数据点的样式\n\n数据点的样式可以通过 [`series.itemStyle`](${optionPath}series-line.itemStyle) 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。\n\n## 在数据点处显示数值\n\n在系列中,这数据点的标签通过 [`series.label`](${optionPath}series-line.label) 属性指定。如果将 `label` 下的 `show` 指定为`true`,则表示该数值默认时就显示;如果为 `false`,而 [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) 为 `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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n```\n\n## 空数据\n\n在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。\n\n在 ECharts 中,我们使用字符串 `'-'` 表示空数据,这对其他系列的数据也是适用的。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n```\n\n> 注意区别这个例子中,“空”数据与取值为 0 的数据。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/15427b3ebf3c8375d91f.js b/handbook/_nuxt/js/15427b3ebf3c8375d91f.js
new file mode 100644
index 0000000..768628a
--- /dev/null
+++ b/handbook/_nuxt/js/15427b3ebf3c8375d91f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[66],{360: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```\n\n在这个例子中,横坐标是类目型的,因此需要在 `xAxis` 中指定对应的值;而纵坐标是数值型的,可以根据 `series` 中的 `data`,自动生成对应的坐标范围。\n\n## 多系列的柱状图\n\n我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 `series` 多添加一项就可以了——\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n```\n\n## 柱状图样式设置\n\n### 柱条样式\n\n柱条的样式可以通过 [`series.itemStyle`](${optionPath}series-bar.itemStyle) 设置,包括:\n\n- 柱条的颜色(`color`);\n- 柱条的描边颜色(`borderColor`)、宽度(`borderWidth`)、样式(`borderType`);\n- 柱条圆角的半径(`barBorderRadius`);\n- 柱条透明度(`opacity`);\n- 阴影(`shadowBlur`、`shadowColor`、`shadowOffsetX`、`shadowOffsetY`)。\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n在这个例子中,我们通过设置柱状图对应 `series` 的`itemStyle`,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 [`series.itemStyle`](${optionPath}series-bar.itemStyle)。\n\n### 柱条宽度和高度\n\n柱条宽度可以通过 [`barWidth`](${optionPath}#series-bar.barWidth) 设置。比如在下面的例子中,将 `barWidth` 设为 `'20%'`,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n另外,还可以设置 [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 [`barMinHeight`](${optionPath}series-bar.barMinHeight),当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。\n\n### 柱条间距\n\n柱条间距分为两种,一种是不同系列在同一类目下的距离 [`barWidth`](${optionPath}series-bar.barWidth),另一种是类目与类目的距离 [`barCategoryGap`](${optionPath}series-bar.barCategoryGap)。\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n```\n\n在这个例子中,`barGap` 被设为 `'20%'`,这意味着每个类目(比如 `A`)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 `barCategoryGap` 是 `'40%'`,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。\n\n通常而言,设置 `barGap` 及 `barCategoryGap` 后,就不需要设置 `barWidth` 了,这时候的宽度会自动调整。如果有需要的话,可以设置 `barMaxWidth` 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。\n\n> 在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。\n\n### 为柱条添加背景色\n\n有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 [`showBackground`](${optionPath}series-bar.showBackground) 开启,并且可以通过 [`backgroundStyle`](${optionPath}series-bar.backgroundStyle) 配置。\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/164135d1bac6aa80040d.js b/handbook/_nuxt/js/164135d1bac6aa80040d.js
new file mode 100644
index 0000000..beea48f
--- /dev/null
+++ b/handbook/_nuxt/js/164135d1bac6aa80040d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[63],{357: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/echarts](https://www.jsdelivr.com/package/npm/echarts) select `dist/echarts.js`, click and save it as `echarts.js` file.\n\n> More information about these files can be found in the next tutorial [Installation](${lang}/basics/download).\n\n## Including ECharts\n\nCreate a new `index.html` file in the directory where you just saved `echarts.js`, with the following content:\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src=\"echarts.js\"><\/script>\n </head>\n</html>\n```\n\nWhen you open this `index.html`, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.\n\n## Plotting a Simple Chart\n\nBefore drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the `</head>` tag introduced earlier.\n\n```html\n<body>\n <! -- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n```\n\nThen you can initialize an echarts instance with the [echarts.init](${mainSitePath}/api.html#echarts.init) method and set the echarts instance with [setOption](${mainSitePath}/api.html# echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src=\"echarts.min.js\"><\/script>\n </head>\n <body>\n \x3c!-- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n // Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n <\/script>\n </body>\n</html>\n```\n\nAnd this is your first chart with Apache ECharts!\n\n<md-example src=\"doc-example/getting-started&reset=1&edit=1\"></md-example>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/18f1e609700a7bacff20.js b/handbook/_nuxt/js/18f1e609700a7bacff20.js
new file mode 100644
index 0000000..341f86e
--- /dev/null
+++ b/handbook/_nuxt/js/18f1e609700a7bacff20.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[50],{344: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 distribution. The chart above shows the distribution of the height and weight of students in a class.\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\nThe scatter chart can reflect the correlation(relation between variables) of a different type. It can be positively correlated, negatively correlated and uncorrelated.\n\n- Positively Correlated: When one value increases, the other value increases.\n\n- Negatively Correlated: When one value increases, the other value decreases.\n\n- Uncorrelated: Two values have no obvious relation and have no influence on each other.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/scatter/scatter5.jpg">\n</img>\n\nTo be mentioned, the scatter chart can effectively illustrate the correlation between the two variables. However, it cannot strongly prove there exist causality. For example, AD serving and Visits are positively correlated, but we cannot prove that more AD serving must lead to more Visits. However, we have enough reason to increase the AD serving and observe the outcome after we find out the positive correlation between them.\n\n## Suggestion for Using Scatter Chart\n\n1. If no correlation was shown in the scatter chart, then the scatter chart is not the best choice.\n\n2. If the package included a different series, you can use different colors for each series. As an example, add the legend to mark male as blue, female as red. You can not only distinguish the height and weight of different genders but also add an auxiliary line for the average of each series to improve the understanding of the distribution. In this case, females have more amount higher than the average value than lower.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM">\n</iframe>\n\nThe trend line is useful when observing the relationship between two variables. The shape of the trend line can explain the relation type of two variables as well as make a prediction. It is better to include only two trend lines to avoid interference with the reading.\n\n3. The scatter points can present a good appearance only with adequate and relevant data. It is meaningless to draw a chart with very little and unrelated values.\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1973e756ccd8175e73c2.js b/handbook/_nuxt/js/1973e756ccd8175e73c2.js
deleted file mode 100644
index 641c1fd..0000000
--- a/handbook/_nuxt/js/1973e756ccd8175e73c2.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{262:function(t,e,n){"use strict";n.r(e);var r=n(2),o=(n(20),n(0).default.extend({mounted:function(){this.$router.push("get-started")},asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:case"end":return t.stop()}}),t)})))()}})),c=n(7),component=Object(c.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nuxt-link",{attrs:{to:"zh/get-started"}},[t._v("中文")]),t._v(" "),n("nuxt-link",{attrs:{to:"en/get-started"}},[t._v("English")])],1)}),[],!1,null,null,null);e.default=component.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1d26a9072b8ef0439053.js b/handbook/_nuxt/js/1d26a9072b8ef0439053.js
new file mode 100644
index 0000000..fe1e0c4
--- /dev/null
+++ b/handbook/_nuxt/js/1d26a9072b8ef0439053.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[21],{315: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 following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:\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, 182, 191, 234, 290, 330, 310]\n }\n ]\n};\n```\n\n## Scatter Chart in Cartesian Coordinate System\n\nIn the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in `data`, but not in `xAxis` and `yAxis`.\n\n```js live\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n type: 'scatter',\n data: [\n [10, 5],\n [0, 8],\n [6, 10],\n [2, 12],\n [8, 9]\n ]\n }\n ]\n};\n```\n\n## Customized Scatter Chart\n\n### Symbol Style\n\nSymbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.\n\nThe built-in shape in ECharts included: `'circle'`, `'rect'`(rectangle), `'roundRect'`(rounded rectangle), `'triangle'`, `'diamond'`, `'pin'` and `'arrow'`. To use built-in shapes, you need to state the `symbol` to the corresponding string.\n\nIf you want to define the shape as any image, try to use `'image'` following by the path, eg. `'image://http://example.com/xxx.png'` or `'image://./xxx.png'`.\n\nECharts `symbol` also supports SVG vector graphics. You can define `symbol` as an SVG file path that starts with `'path://'` to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.\n\nMethod to find the SVG path: Open an `SVG` path; Find the path similar as `<path d=\"M… L…\"></path>`; Add `d`'s value after `'path://'`. Let's check how to define an item to vector shape of heart.\n\nFirstly, we need an `SVG` file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:\n\n```xml\n<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\" viewBox=\"0 0 51.997 51.997\" style=\"enable-background:new 0 0 51.997 51.997;\" xml:space=\"preserve\">\n <path d=\"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\"/>\n</svg>\n```\n\nIn ECharts, define config `symbol` as a path of d:\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, 182, 191, 234, 290, 330, 310],\n symbolSize: 20,\n symbol:\n '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'\n }\n ]\n};\n```\n\nIn this way, we have a heart vector of the item.\n\n### Symbol Size\n\nThe size of symbol is defined by [`series.symbolSize`](${optionPath}series-scatter.symbolSize). It can be s pixel value of the item size, or an array included two numbers, to define the width and height.\n\nBesides, it can be defined as a call back function. Here is an example of the format:\n\n```ts\n(value: Array | number, params: Object) => number | Array;\n```\n\nThe first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.\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, 182, 191, 234, 290, 330, 310],\n symbolSize: function(value) {\n return value / 10;\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1e3d8d997af80ac3c555.js b/handbook/_nuxt/js/1e3d8d997af80ac3c555.js
new file mode 100644
index 0000000..c2a9da8
--- /dev/null
+++ b/handbook/_nuxt/js/1e3d8d997af80ac3c555.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[89],{383: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/issues) 中搜索关键字\n- 使用搜索引擎搜索关键字\n\n### 创建一个最简单可复现的例子\n\n使用 [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM)、[Codesandbox](https://codesandbox.io/s/mystifying-bash-2uthz) 或者 [makeapie.com](https://www.makeapie.com/) 创建一个例子,这将使得他人更方便地复现你的问题。\n\n例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example)。\n\n### 判断是否是 bug\n\n#### 报告 bug 或请求新功能\n\n如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 [issue 模板](https://ecomfe.github.io/echarts-issue-helper/) 中新建一个 issue 并按照提示详细描述。\n\n#### 咨询类问题\n\n如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。\n\n如果没能得到答复,也可以发送邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。\n\n## 非技术类问题\n\n其他问题可以发送英文邮件至邮件组 [dev@echarts.apache.org](mailto:dev@echarts.apache.org)。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1e5a7f7d63a9e92373b8.js b/handbook/_nuxt/js/1e5a7f7d63a9e92373b8.js
new file mode 100644
index 0000000..2eec53c
--- /dev/null
+++ b/handbook/_nuxt/js/1e5a7f7d63a9e92373b8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[77],{371: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 {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/1f920b728680adf1bc5d.js b/handbook/_nuxt/js/1f920b728680adf1bc5d.js
new file mode 100644
index 0000000..f16cd03
--- /dev/null
+++ b/handbook/_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/handbook/_nuxt/js/2324884562014a2cee61.js b/handbook/_nuxt/js/2324884562014a2cee61.js
new file mode 100644
index 0000000..9980795
--- /dev/null
+++ b/handbook/_nuxt/js/2324884562014a2cee61.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[120],{414:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/23bc4e94e46ee3710490.js b/handbook/_nuxt/js/23bc4e94e46ee3710490.js
new file mode 100644
index 0000000..8c56a33
--- /dev/null
+++ b/handbook/_nuxt/js/23bc4e94e46ee3710490.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, we recommend installing the [prettier VSCode plugin](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), which will automatically format the code for you when you save it.\n\nIf you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent `prettier` from formatting the code inside the block\n\n```markdown\n\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n```\n\nIf you find blocks of code that are not formatted, check first for syntax errors in the code.\n\n## Built-in Variables\n\n- `optionPath`\n- `mainSitePath`\n- `exampleViewPath`\n- `exampleEditorPath`\n\nUsage:\n\n```\n${xxxxx}\n```\n\n## Embedding Code\n\n### Basic Usage\n\n\x3c!-- prettier-ignore-start --\x3e\n\n```markdown\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\n\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### Recommended Way of Writing Code\n\nIn order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.\n\nFor example, the comment `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### Live Preview and Editing\n\n> Currently only preview of Option code is supported\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\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\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\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```\n\n### More Preview Layouts\n\n#### Left to Right\n\n\x3c!-- prettier-ignore-start --\x3e\n\n```markdown\n```js live {layout: 'lr'}\noption = {\n ...\n};\n\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'lr'}\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```\n\n#### Right to left\n\n\x3c!-- prettier-ignore-start --\x3e\n\n```markdown\n```js live {layout: 'rl'}\noption = {\n ...\n};\n\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'rl'}\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```\n\n#### Down to Up\n\n\x3c!-- prettier-ignore-start --\x3e\n\n```markdown\n```js live {layout: 'bt'}\noption = {\n ...\n};\n\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'bt'}\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```\n\n### Highlighting Lines of Code and Adding Filenames\n\nUse.\n\n\x3c!-- prettier-ignore-start --\x3e\n\n```markdown\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n```\n\n\x3c!-- prettier-ignore-end --\x3e\n\nEffects.\n\n```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## Embedding Images\n\nSource images are stored under `static/images/`.\n\n```markdown\n![image description](images/demo.png)\n```\n\n### Set the Image Height and Width\n\nFor the temporary style of the current page, you can just write html.\n\n```markdown\n<img data-src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## Add Example Iframe\n\n`src` is the string after `?c=` in the https://echarts.apache.org/examples/en/editor.html?c=line-simple address\n\nUse:\n\n```markdown\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n```\n\nResult:\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\"></md-example>\n\n## Add Link to Option Item\n\nUse:\n\n```markdown\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n```\n\nResult:\n<md-option link=\"series-bar.itemStyle.color\"></md-option>\n\n## More Component Usage\n\nThe documentation supports the use of globally registered `markdown` components. In addition to the `md-example` component just described, the following components are also available\n\n### md-alert\n\nPrompt components\n\n```markdown\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/252403819a1920f74467.js b/handbook/_nuxt/js/252403819a1920f74467.js
new file mode 100644
index 0000000..647146c
--- /dev/null
+++ b/handbook/_nuxt/js/252403819a1920f74467.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[92],{386: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 return [\n {\n value: Math.random(),\n name: 'A'\n },\n {\n value: Math.random(),\n name: 'B'\n },\n {\n value: Math.random(),\n name: 'C'\n }\n ];\n}\noption = {\n series: [\n {\n type: 'pie',\n radius: [0, '50%'],\n data: makeRandomData()\n }\n ]\n};\n\nsetInterval(() => {\n myChart.setOption({\n series: {\n data: makeRandomData()\n }\n });\n}, 2000);\n```\n\n而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。\n\n这会有多酷呢?我们一起来感受一下!\n\n### 跨系列的形变动画\n\n在设置`universalTransition: true`开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。\n\n如下,饼图和柱状图之间的切换:\n\n```js live {layout: 'bt'}\nconst dataset = {\n dimensions: ['name', 'score'],\n source: [\n ['Hannah Krause', 314],\n ['Zhao Qian', 351],\n ['Jasmin Krause ', 287],\n ['Li Lei', 219],\n ['Karle Neumann', 253],\n ['Mia Neumann', 165],\n ['Böhm Fuchs', 318],\n ['Han Meimei', 366]\n ]\n};\nconst pieOption = {\n dataset: [dataset],\n series: [\n {\n type: 'pie',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n radius: [0, '50%'],\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\nconst barOption = {\n dataset: [dataset],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n // 通过 id 关联需要过渡动画的系列\n id: 'Score',\n // 每个数据都是用不同的颜色\n colorBy: 'data',\n encode: { x: 'name', y: 'score' },\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\n\noption = barOption;\n\nsetInterval(() => {\n option = option === pieOption ? barOption : pieOption;\n // 使用 notMerge 的形式可以移除坐标轴\n myChart.setOption(option, true);\n}, 2000);\n```\n\n更多的常见基础图表之间的过渡:\n\n![](images/5-2-0/universal-transition.gif)\n\n这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:\n\n![](images/5-2-0/universal-transition-2.gif)\n\n或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。\n\n![](images/5-2-0/universal-transition-3.gif)\n\n> 注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。\n\n### 数据的分裂和合并动画\n\n除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。\n\n为了能够表达数据之间可能存在的多对多联系,在 5.2.0 中我们新引入了一个数据组`groupId`的概念,我们可以通过 [series.dataGroupId](${optionPath}series-bar.dataGroupId) 设置整个系列所属的组,或者更细粒度的通过 [series.data.groupId](${optionPath}series-bar.dataGroupId) 设置每个数据所属的组。如果你使用了`dataset`管理数据则更方便了,可以使用`encode.itemGroupId`来指定一个维度编码成`groupId`。\n\n比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个`groupId`,然后跟下钻前的数据对应起来:\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Animals', 'Fruits', 'Cars']\n },\n yAxis: {},\n dataGroupId: '',\n animationDurationUpdate: 500,\n series: {\n type: 'bar',\n id: 'sales',\n data: [\n {\n value: 5,\n groupId: 'animals'\n },\n {\n value: 2,\n groupId: 'fruits'\n },\n {\n value: 4,\n groupId: 'cars'\n }\n ],\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n }\n};\n\nconst drilldownData = [\n {\n dataGroupId: 'animals',\n data: [\n ['Cats', 4],\n ['Dogs', 2],\n ['Cows', 1],\n ['Sheep', 2],\n ['Pigs', 1]\n ]\n },\n {\n dataGroupId: 'fruits',\n data: [\n ['Apples', 4],\n ['Oranges', 2]\n ]\n },\n {\n dataGroupId: 'cars',\n data: [\n ['Toyota', 4],\n ['Opel', 2],\n ['Volkswagen', 2]\n ]\n }\n];\n\nmyChart.on('click', event => {\n if (event.data) {\n const subData = drilldownData.find(data => {\n return data.dataGroupId === event.data.groupId;\n });\n if (!subData) {\n return;\n }\n myChart.setOption({\n xAxis: {\n data: subData.data.map(item => {\n return item[0];\n })\n },\n series: {\n type: 'bar',\n id: 'sales',\n dataGroupId: subData.dataGroupId,\n data: subData.data.map(item => {\n return item[1];\n }),\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n },\n graphic: [\n {\n type: 'text',\n left: 50,\n top: 20,\n style: {\n text: 'Back',\n fontSize: 18\n },\n onclick: function() {\n myChart.setOption(option, true);\n }\n }\n ]\n });\n }\n});\n```\n\n通过`groupId`,我们还可以实现更丰富的聚合,下钻动画。\n\n数据的聚合:\n\n![](images/5-2-0/group-transition.gif)\n\n单系列下钻成两个系列:\n\n![](images/5-2-0/group-transition-2.gif)\n\n全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。\n\n看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。\n\n## 调色盘的取色策略\n\n在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的`colorBy`配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:\n\n- `'series'` 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。\n- `'data'` 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。\n\n在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定`'series'`的策略,而饼图则是固定`'data'`的策略。\n\n而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:\n\n```js live {layout: 'lr'}\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n colorBy: 'data'\n }\n ]\n};\n```\n\n或者在饼图中统一使用一个颜色:\n\n```js live {layout: 'lr'}\noption = {\n series: {\n type: 'pie',\n colorBy: 'series',\n radius: [0, '50%'],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n};\n```\n\n这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。\n\n## 极坐标柱状图的标签\n\n这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:\n\n```js live {layout: 'lr'}\noption = {\n angleAxis: {\n show: false,\n max: 10\n },\n radiusAxis: {\n show: false,\n type: 'category',\n data: ['AAA', 'BBB', 'CCC', 'DDD']\n },\n polar: {},\n series: [\n {\n type: 'bar',\n data: [3, 4, 5, 6],\n colorBy: 'data',\n roundCap: true,\n label: {\n show: true,\n // 试试改成 'insideStart'\n position: 'start',\n formatter: '{b}'\n },\n coordinateSystem: 'polar'\n }\n ]\n};\n```\n\n更多标签位置的配置:\n\n![](images/5-2-0/polar-bar-label.jpg)\n\n这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。\n\n## 空数据的饼图样式\n\n在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。\n\n为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过`emptyCircleStyle`配置这个占位圆的样式。\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'pie',\n data: [],\n // showEmptyCircle: false,\n emptyCircleStyle: {\n // 将样式改为空心圆\n color: 'transparent',\n borderColor: '#ddd',\n borderWidth: 1\n }\n }\n ]\n};\n```\n\n如果不想要显示这个灰色的圆,也可以设置`showEmptyCircle: false`关闭。\n\n## 高维数据的性能增强\n\n我们从 4.0 开始引入了 [dataset](${optionPath}dataset) 用来管理图表的数据,通常情况下`dataset`提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景([#11907](https://github.com/apache/echarts/issues/11907)),甚至可能会卡住。\n\n```js\nconst indices = Array.from(Array(1000), (_, i) => {\n return `index${i}`;\n});\nconst option = {\n xAxis: { type: 'category' },\n yAxis: {},\n dataset: {\n // dimension: ['date', ...indices],\n source: Array.from(Array(10), (_, i) => {\n return {\n date: i,\n ...indices.reduce((item, next) => {\n item[next] = Math.random() * 100;\n return item;\n }, {})\n };\n })\n },\n series: indices.map(index => {\n return { type: 'line', name: index };\n })\n};\n```\n\n产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存`1000 x 1000`个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。\n\n在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。\n\n这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。\n\n## 自定义系列的类型优化\n\n自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法`renderItem`的类型,对于`renderItem`的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:\n\n```ts\nseries = {\n type: 'custom',\n renderItem(params) {\n return {\n type: 'group',\n // group 类型使用 children 存储其它类型的子元素\n children: [\n {\n type: 'circle',\n // circle 拥有下面这些可以配置的 shape 属性\n shape: { r: 10, cx: 0, cy: 0 },\n // 可以配置的样式\n style: { fill: 'red' }\n },\n {\n type: 'rect',\n // rect 拥有下面这些可以配置的 shape 属性\n shape: { x: 0, y: 0, width: 100, height: 100 }\n },\n {\n type: 'path',\n // 自定义路径图形\n shape: { d: '...' }\n }\n ]\n };\n }\n};\n```\n\n## 小结\n\n以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。\n\n如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 [GitHub Milestone](https://github.com/apache/echarts/milestones) 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 [Wiki](https://github.com/apache/echarts/wiki) 中了解更多)。\n\n### 版本更新记录\n\n#### 非兼容改动\n\n- [Fix][pie] 负值会被作为非法值过滤。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n\n#### 所有改动\n\n- **[Feature] 新增全局过渡动画。[#15208](https://github.com/apache/echarts/issues/15208) ([pissang](https://github.com/pissang))**\n- [Feature][color] 新增`series.colorBy`配置不同粒度的取色。[#13788](https://github.com/apache/echarts/issues/13788) ([Ovilia](https://github.com/Ovilia))\n- [Feature][label] 极坐标系柱状图支持标签显示。[#15182](https://github.com/apache/echarts/pull/15182) ([Ovilia](https://github.com/Ovilia))\n- [Feature][effectscatter] 新增`rippleEffect.number`配置涟漪数目。[#15335](https://github.com/apache/echarts/issues/15335) ([plainheart](https://github.com/plainheart))\n- [Feature][gauge] 新增`pointer.showAbove`配置指针和标签的显示层级。[#15337](https://github.com/apache/echarts/issues/15337) ([AmosChenYQ](https://github.com/AmosChenYQ)) [#15326](https://github.com/apache/echarts/issues/15326) ([susiwen8](https://github.com/susiwen8))\n- [Feature][emphasis] `emphasis.color`支持设置为`'inherit'`关闭高亮。[#15172](https://github.com/apache/echarts/issues/15172) ([Foreverwzh](https://github.com/Foreverwzh))\n- [Feature][pie] 无数据的时候默认显示灰色的占位圆。[#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n- [Fix][dataset] 优化高维数据`dataset`的性能。[#15355](https://github.com/apache/echarts/issues/15355) ([pissang](https://github.com/pissang))\n- [Fix][axis] 优化时间轴刻度标签的格式化显示。[#15465](https://github.com/apache/echarts/issues/15465) ([leavest](https://github.com/leavest)) [#15434](https://github.com/apache/echarts/issues/15434) ([zhiyuc123](https://github.com/zhiyuc123))\n- [Fix][custom] 优化旧代码对于`font`的兼容性。[#15454](https://github.com/apache/echarts/issues/15454) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。[#15417](https://github.com/apache/echarts/issues/15417) ([pissang](https://github.com/pissang))\n- [Fix][line] 优化有无穷大数据时的渐变色显示。 [#15416](https://github.com/apache/echarts/issues/15416) ([plainheart](https://github.com/plainheart))\n- [Fix][date] 优化`date`数据的解析。[#15410](https://github.com/apache/echarts/issues/15410) ([quillblue](https://github.com/quillblue))\n- [Fix][line] 修复渲染出错。[#788](https://github.com/ecomfe/zrender/issues/788) ([pissang](https://github.com/pissang))\n- [Fix][candlestick] 修复样式可能在`setOption`后丢失的问题。[#15368](https://github.com/apache/echarts/issues/15368) ([pissang](https://github.com/pissang))\n- [Fix][sankey] 修复垂直布局时的渐变色边。[#15363](https://github.com/apache/echarts/issues/15363) ([susiwen8](https://github.com/susiwen8))\n- [Fix][tooltip] 修复在设置`tooltip.position`后`formatter`返回 DOM 对象会被解析成字符串的问题。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][tooltip] `formatter`返回`null`时清空内容。[#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][bar] 标签位置设置为`'middle'`时应该显示在图形中间。[#15309](https://github.com/apache/echarts/issues/15309) ([Ovilia](https://github.com/Ovilia))\n- [Fix][marker] 修复可能会在极坐标柱状图报`'clampData' is undefined`的错误。[#15297](https://github.com/apache/echarts/issues/15297) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。[#15283](https://github.com/apache/echarts/issues/15283) ([villebro](https://github.com/villebro))\n- [Fix][tree] 修复更新数据时边可能会不被移除的问题。[#15251](https://github.com/apache/echarts/issues/15251) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie/sunburst] 修复`borderRadius`被设置为`null`或者`undefined`时无法重置的问题。[#15243](https://github.com/apache/echarts/issues/15243) ([plainheart](https://github.com/plainheart))\n- [Fix][canvas] 修复`fillStyle`被设置为`'none'`或者`null`时 FireFox 浏览器下会报警告的问题。 [#784](https://github.com/ecomfe/zrender/issues/784) ([plainheart](https://github.com/plainheart))\n- [Fix][highlight] 修复`chart.dispatchAction`高亮多个系列可能会不正确的问题。[#15207](https://github.com/apache/echarts/issues/15207) ([ssthouse](https://github.com/ssthouse))\n- [Fix][sankey] 修复使用`series.nodes`作为数据时拖拽功能失效的问题。[#15199](https://github.com/apache/echarts/issues/15199) ([DuLinRain](https://github.com/DuLinRain))\n- [Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。[#767](https://github.com/ecomfe/zrender/pull/767) ([plainheart](https://github.com/plainheart))\n- [Fix][legend] 修复`text.lineHeight`不生效。[#773](https://github.com/ecomfe/zrender/issues/773) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie] 将默认的`borderJoin`设置为`round`。[#15145](https://github.com/apache/echarts/issues/15145) ([plainheart](https://github.com/plainheart))\n- [Fix][radar] 将默认的`borderJoin`设置为`round`。[#15381](https://github.com/apache/echarts/issues/15381) ([Ovilia](https://github.com/Ovilia))\n- [Fix][treemap] 修复设置`label.show`为`false`会报错。[#15141](https://github.com/apache/echarts/issues/15141) ([susiwen8](https://github.com/susiwen8))\n- [Fix][pictorialbar] 修复零数据标签的显示问题。[#15132](https://github.com/apache/echarts/issues/15132) ([ssthouse](https://github.com/ssthouse))\n- [Fix][lines] 修复调用`chart.clear()`可能会无法清除线条的问题。[#15088](https://github.com/apache/echarts/issues/15088) ([plainheart](https://github.com/plainheart))\n- [Fix][endlabel] 修复端点标签只设置`emphasis.show`为`true`时可能无法显示的问题。[#15072](https://github.com/apache/echarts/issues/15072) ([Ovilia](https://github.com/Ovilia))\n- [Fix][svg] 修复矩形路径没有合并的问题。[#767](https://github.com/ecomfe/zrender/issues/767) ([plainheart](https://github.com/plainheart))\n- [Fix][treemap] 在回调函数参数中添加`treeAncestors`属性。[#14976](https://github.com/apache/echarts/issues/14976) ([pissang](https://github.com/pissang))\n- [Fix][tree] 修复调用`setOption`两次更新数据时可能报错的问题。[#14930](https://github.com/apache/echarts/issues/14930) ([Map1en](https://github.com/Map1en))\n- [Fix][radar] 修复图形边框被缩放的问题。[#15396](https://github.com/apache/echarts/issues/15396) ([pissang](https://github.com/pissang))\n- [Fix][marker] 修复`symbolOffset`和`symbolKeepAspect`配置项不生效的问题。[#14737](https://github.com/apache/echarts/issues/14737) ([plainheart](https://github.com/plainheart))\n- [Fix][gauge] 支持进度条和指针的点击事件。[#14688](https://github.com/apache/echarts/issues/14688) ([yufeng04](https://github.com/yufeng04))\n- [Fix][tooltip] 优化箭头的边框宽度,跟配置同步。[#14393](https://github.com/apache/echarts/issues/14393) ([g7i](https://github.com/g7i))\n- [Fix][geo] 修复地理坐标组件从`show: false`配置为`show: true`后依旧不显示的问题。[#15361](https://github.com/apache/echarts/issues/15361) ([pissang](https://github.com/pissang))\n- [Fix][type] 优化自定义系列`renderItem`的类型推断。\n- [Fix][type] 优化`echarts.init`的配置项类型。[#15487](https://github.com/apache/echarts/issues/15487) ([John60676](https://github.com/John60676))\n- [Fix][type] 修复类型中`polarIndex`配置项丢失的问题。[#15281](https://github.com/apache/echarts/issues/15281) ([Map1en](https://github.com/Map1en))\n- [Fix][type] 优化 SVG 数据源的类型。[#15263](https://github.com/apache/echarts/issues/15263) ([leosxie](https://github.com/leosxie))\n- [Fix][type] 优化饼图和地图系列中的数据类型。[#15144](https://github.com/apache/echarts/issues/15144) ([plainheart](https://github.com/plainheart))\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/256bfc09f2265157a68d.js b/handbook/_nuxt/js/256bfc09f2265157a68d.js
new file mode 100644
index 0000000..75aa968
--- /dev/null
+++ b/handbook/_nuxt/js/256bfc09f2265157a68d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[52],{346: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 common usage scenarios, here is the example to initialize a chart and change the size.\n\n## Initialization\n\n### Define a Parent Container in HTML\n\nIn general, you need to define a `<div>` node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring `opts.width` or `opts.height`, the size of the chart will default to the size of the node.\n\n```html\n<div id="main" style="width: 600px;height:400px;"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n<\/script>\n```\n\nTo be noticed, before calling `echarts.init`, you need to make sure the container already has width and height.\n\n### Specify the chart size\n\nIf the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.\n\n```html\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'), null, {\n width: 600,\n height: 400\n });\n<\/script>\n```\n\n## Reactive of the Container Size\n\n### Listen to the Container Size to Change the Chart Size\n\nIn some cases, we want to accordingly change the chart size while the size of containers changed.\n\nFor instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.\n\nYou can listen to `window.onresize` of the site to catch the event that the browser is resized. Then use [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) to resize the chart.\n\n```html\n<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n window.onresize = function() {\n myChart.resize();\n };\n<\/script>\n```\n\n### State a Specific Chart Size\n\nExcept for calling `resize()` without parameters, you can state the height and width to implement the chart size different from the size of the container.\n\n```js\nmyChart.resize({\n width: 800,\n height: 400\n});\n```\n\n> Tips: Pay attention to how the API defined while reading the documentation. `resize()` API was sometimes mistaken for the form like `myCharts.resize(800, 400)` which do not exist.\n\n### Dispose and Rebuild of the Container Node\n\nWe assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.\n\nEssentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.\n\nThe correct way is, call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to dispose the instance after the container was disposed, and call [echarts.init](${mainSitePath}/api.html#echarts.init) to initialize after the container was added again.\n\n> Tips: Call [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) to release resources while disposing the node to avoid memory leaks.\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/257ccac711f94ae08444.js b/handbook/_nuxt/js/257ccac711f94ae08444.js
new file mode 100644
index 0000000..1ce03d7
--- /dev/null
+++ b/handbook/_nuxt/js/257ccac711f94ae08444.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[45],{339: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 displaying the trend of developing things, the line chart can be used to compare several different datasets. As shown below, we use a line chart to compare the sales of three different commodities and analyze which one is the best.\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xSkBiMSU4M&v=1">>\n </iframe>\n\nA line chart is drawn by connecting data points with lines. For the beauty of special effects, you can also connect points with curves as shown in the chart above. This chart is also called a curve chart or spline chart. The usage of the spline chart is the same as the line chart. The only difference is that the connection between data points is a curve but not a straight line.\n\n## Suggestion for Using Line Chart\n\n1. To make sure the data readability, use solid lines in charts if you can separate the data line and axis.\n\n2. Do not draw more than 4 lines in a chart. As shown below, lines are entangled together without obvious contrast that makes the whole chart confusing and difficult to read.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1">\n</iframe>\n\n3. Don\'t use decorates to separate charts. The legend is helpful, but sometimes distracting users:\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1">\n</iframe>\n\n4. When displaying the data of the line chart, avoid deliberately distorting the trend. The meaningful volatility analysis chart should make the height of the item be two-thirds of the height of the y-axis.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/line/line01.jpg"></img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/25b8c557199d36fc6dd9.js b/handbook/_nuxt/js/25b8c557199d36fc6dd9.js
new file mode 100644
index 0000000..9140fbf
--- /dev/null
+++ b/handbook/_nuxt/js/25b8c557199d36fc6dd9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[113],{407: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 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n }\n // ...\n};\n```\n\n当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n },\n dataZoom: [\n // ...\n ]\n // ...\n};\n```\n\n在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 [offset](${optionPath}xAxis.offset) 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: '销售数量'\n // ...\n },\n {\n type: 'value',\n name: '销售金额'\n // ...\n }\n ]\n // ...\n};\n```\n\n## 轴线\n\nECharts 提供了轴线 [axisLine](${optionPath}xAxis.axisLine) 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。\n\n```js\noption = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## 刻度\n\nECharts 提供了轴线 [axisTick](${optionPath}xAxis.axisTick) 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。\n\n```js\noption = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## 刻度标签\n\nECharts 提供了轴线 [axisLabel](${optionPath}xAxis.axisLabel) 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。\n\n```js\noption = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} 元',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n```\n\n## 示例\n\n图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。\n\n```js live\noption = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n data: [\n '1月',\n '2月',\n '3月',\n '4月',\n '5月',\n '6月',\n '7月',\n '8月',\n '9月',\n '10月',\n '11月',\n '12月'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: '降水量',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: '温度',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: '降水量',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: '温度',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n```\n\n这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步[官网](${optionPath}xAxis)。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/268d769798e4b768f97f.js b/handbook/_nuxt/js/268d769798e4b768f97f.js
new file mode 100644
index 0000000..9eac0ea
--- /dev/null
+++ b/handbook/_nuxt/js/268d769798e4b768f97f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[17],{311: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 characterize the connection type of the step line chart. It has three available values: `'start'`, `'end'`, and `'middle'`. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.\n\n```js live\noption = {\n legend: {},\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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n```\n\n> Please focus on the difference of line between three separate types.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/2d6025ca0948f00762f7.js b/handbook/_nuxt/js/2d6025ca0948f00762f7.js
new file mode 100644
index 0000000..c649904
--- /dev/null
+++ b/handbook/_nuxt/js/2d6025ca0948f00762f7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[95],{389: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 版本,ECharts VSCode 插件等工具\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/2dac21140e9a711dbc9d.js b/handbook/_nuxt/js/2dac21140e9a711dbc9d.js
new file mode 100644
index 0000000..e5d0012
--- /dev/null
+++ b/handbook/_nuxt/js/2dac21140e9a711dbc9d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[36],{330: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 Response of Color\n\nColor perception is a complicated result of the interaction between physiological and psychological effects. To prove that humans can perceive colors by warm and cool, Hiroshi Ohchi, a Japanese graphic designer has done an experiment to paint the wall of two workplaces in gray-cyan and red-orange. With the same objective ambient temperature and labor intensity, staffs in the gray-cyan workplace are easier to feel cool. Further research found that except for the feeling of warm and cool by observing colors, there are also light and dark, far and near, lively and melancholic. Colors will cause emotional fluctuations that affect human behavior based on human instinct.\n\nIn the field of visualization, if we choose the color that coincides with the characteristic of data and the sympathetic response of emotions.\n\nHere is an example of the selling percentage of a certain dessert shop.\n\n<img max-width="830" width="50%" height="100%"\nsrc="images/design/color/color01.png">\n</img>\n\nWe provided two charts with the same style but different color schemes. The right side one obviously performs better for the dessert data displaying.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/color/color02.png">\n</img>\n\nCompared with blue and purple, color likes orange, yellow, pink and green are preferred choices to inspire the appetite, happiness and warmness which matched the motion of eating sweets. In the other hand, most of the customer group for desserts is woman and children. Lively and cute chart colors in the left chart might be the better choice compared with the calm and rational colors of the chart.\n\n##Semantic Response of Color\n\nDifferent colors can help us to identify and classify different ideas because we are familiar with combining things and concepts with colors. We subconsciously think of white when we referring to "clouds", pink when we referring to "love". Those colors that are naturally consistent with semantics are called "semantic-resonant color".\n\nThe researchers noticed that matching the semantic-resonant color for words contained specific color can increase the speed of the cognitive process and vice versa. This funny phenomenon is called the "Stroop Effect". In a comparative test (as shown below), the text "YELLOW" in the first line is easier to be positioned compared with the text "YELLOW" in the second line. In the second line, the text "PURPLE" have the font color of yellow, which makes it being noticed earlier sometimes. The font color here interfered with our speed of finding the right answer.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/color/color03.png">\n</img>\n\nUsing semantic-resonant color effectively, we use the same color as the meaning of the data to improve the cognition efficiency of the visualization. For instance, you might use blue to display the data of "OCEAN", yellow to display the data of "DESERT".\n\nThe visual effects should be explained as easily as possible. Try to find out the color scheme that matches the preconceived and cultural association of the user. The following chart shows the sales info of kiwifruit, banana, orange and strawberry and chose the same color as the fruit itself. Therefore, we can easily identify and remember the fruit corresponding to each column.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW">\n</iframe>\n\n## Common Sense Consistency of Color\n\nIn terms of visualization, the color used is directly related to factors such as data type, display environment, target client, and social background. You cannot separate color as an individual factor to design. Please restrain your free creative passion before selecting the color scheme and check if it is a special type of data. For example, colors like green and red in a stock chart have their customary meaning. Therefore, the consistency between the choice of color and common knowledge makes the user understand and distinguish the chart efficiently.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG">\n</iframe>\n\nHere is another example of the outdoor temperature, the red and blue bars make the chart easy to distinguish without explanation.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1">\n</iframe>\n\n## Divide Data by Colors\n\nWe usually use the line chart to analyze the trend. We can actively configure an interval when sometimes we need to clearly know whether a specific data is in some domain. If you set 25%-75% as our planned sales, try to set different colors for each interval in this domain to efficiently identify the interval for each value: whether it is not reaching the goal, reaching the goal, or exceeding the goal.\n\nTherefore, color can be used as an effective tool to improve the readability of the chart.\n\n<img max-width="830" width="80%" height="100%"\nsrc="images/design/color/color04.png">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/2e9721418ef592e1b5c4.js b/handbook/_nuxt/js/2e9721418ef592e1b5c4.js
new file mode 100644
index 0000000..8b8fc1a
--- /dev/null
+++ b/handbook/_nuxt/js/2e9721418ef592e1b5c4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{302: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 race\n2. Set `yAxis.inverse` to be `true` to display longer bars at top\n3. `yAxis.animationDuration` is suggested to be set to be `300` for bar reordering animation for the first time\n4. `yAxis.animationDurationUpdate` is suggested to be set to be `300` for bar reordering animation for later times\n5. Set `yAxis.max` to be _n - 1_ where _n_ is the number of bars to be displayed; otherwise, all bars are displayed\n6. `xAxis.max` is suggested to be set to be `'dataMax'` so that the maximum of data is used as X maximum.\n7. If realtime label changing is required, set `series.label.valueAnimation` to be `true`\n8. Set `animationDuration` to be `0` so that the first animation doesn't start from 0; if you wish otherwise, set it to be the same value as `animationDurationUpdate`\n9. `animationDurationUpdate` is suggested to be set to be `3000` for animation update duration, which should be the same as the frequency of calling `setOption`\n10. Call `setOption` to update data to be of next time with `setInterval` at the frequency of `animationDurationUpdate`\n\n## Demo\n\nA complete demo:\n\n```js live\nvar data = [];\nfor (let i = 0; i < 5; ++i) {\n data.push(Math.round(Math.random() * 200));\n}\n\noption = {\n xAxis: {\n max: 'dataMax'\n },\n yAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E'],\n inverse: true,\n animationDuration: 300,\n animationDurationUpdate: 300,\n max: 2 // only the largest 3 bars will be displayed\n },\n series: [\n {\n realtimeSort: true,\n name: 'X',\n type: 'bar',\n data: data,\n label: {\n show: true,\n position: 'right',\n valueAnimation: true\n }\n }\n ],\n legend: {\n show: true\n },\n animationDuration: 0,\n animationDurationUpdate: 3000,\n animationEasing: 'linear',\n animationEasingUpdate: 'linear'\n};\n\nfunction run() {\n var data = option.series[0].data;\n for (var i = 0; i < data.length; ++i) {\n if (Math.random() > 0.9) {\n data[i] += Math.round(Math.random() * 2000);\n } else {\n data[i] += Math.round(Math.random() * 200);\n }\n }\n myChart.setOption(option);\n}\n\nsetTimeout(function() {\n run();\n}, 0);\nsetInterval(function() {\n run();\n}, 3000);\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/2eefa4b3e7d034302c37.js b/handbook/_nuxt/js/2eefa4b3e7d034302c37.js
new file mode 100644
index 0000000..9573e3a
--- /dev/null
+++ b/handbook/_nuxt/js/2eefa4b3e7d034302c37.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[80],{374:function(t,r,o){"use strict";o.r(r),r.default="# 在百度智能小程序中使用 ECharts\n\n[ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/) 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。\n\n[aidu-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-app-echarts-demo/issues) 中咨询。\n\n## 使用方式\n\n参见百度智能小程序文档 [ECharts 图表-beta](http://smartprogram.baidu.com/docs/develop/framework/echarts/)。\n\n## 注意事项\n\n百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与[在微信小程序中使用 ECharts](./zh/application/cross-platform/wechat-app) 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 `provider` 指定动态库名称,具体参见[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「在项目中引用动态库」章节。\n\n请务必查看[文档](http://smartprogram.baidu.com/docs/develop/framework/echarts/)的「兼容性说明」以了解各功能的实现方式。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/30a6ec95660d084d1473.js b/handbook/_nuxt/js/30a6ec95660d084d1473.js
new file mode 100644
index 0000000..7a42805
--- /dev/null
+++ b/handbook/_nuxt/js/30a6ec95660d084d1473.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{303: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 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```\n\nIn this case, the x-axis is under the category type. Therefore, you should define some corresponding values for `'xAxis'`. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the `data` in `'series'`.\n\n## Multi-series Bar Chart\n\nYou may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the `series`.\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 type: 'bar',\n data: [26, 24, 18, 22, 23, 20, 27]\n }\n ]\n};\n```\n\n## Customized Bar Chart\n\n### Styles\n\nIt is a good idea to install the style of Bar Chart by using ['series.itemStyle'](${optionPath}series-bar.itemStyle). Description of the SCI:\n\n- Color of column(`'color'`);\n- Outline color(`'borderColor'`), width(`'borderWidth'`), type(`'borderType'`) of column;\n- Border radius of column(`'barBorderRadius'`);\n- Transparency(`'opacity'`);\n- Shadow type(`'shadowBlur'`, `'shadowColor'`, `'shadowOffsetX'`, `'shadowOffsetY'`)\n\nHere is a example:\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn this case, we defined the style of the bar chart by `'itemStyle'` of corresponding `series`. For complete configuration items and their usage, please check the configuration item manual: [`series.itemStyle`](${optionPath}series-bar.itemStyle)。\n\n### Width and Height of Column\n\nYou can use [`barWidth`](${optionPath}#series-bar.barWidth) to change the width of the bar. For instance, the `'barWidth'` in the following case was set to `'20%'`. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% `'barWidth'` means 4% for the entire x-axis.\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn addition, [`barMaxWidth`](${optionPath}series-bar.barMaxWidth) has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: [`barMinHeight`](${optionPath}series-bar.barMinHeight). When the corresponding height of data is smaller than the limit, ECharts will take 'barMinHeight' as the replaced height.\n\n### Column Spacing\n\nThere are two kinds of column spacing. One is the spacing between different series under the same category: [`barWidth`](${optionPath}series-bar.barWidth). The other is the spacing between categories: [`barCategoryGap`](${optionPath}series-bar.barCategoryGap).\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 18],\n barGap: '20%',\n barCategoryGap: '40%'\n },\n {\n type: 'bar',\n data: [12, 14, 9, 9, 11]\n }\n ]\n};\n```\n\nIn this case, the `barGap` is `'20%'`. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the `barCategoryGap` to `'40%'`, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).\n\nUsually, `barWidth` is not necessary to be clarified if `'barGap'` and `barCategoryGap` was set. If you need to make sure the bar is not too wide while the graph is large, try to use `barMaxWidth` to limit the maximum width of bars.\n\n> In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.\n\n### Add Background Color for Bars\n\nYou might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by ['showBackground'](${optionPath}series-bar.showBackground) and configured by ['backgroundStyle'](${optionPath}series-bar.backgroundStyle).\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n showBackground: true,\n backgroundStyle: {\n color: 'rgba(220, 220, 220, 0.8)'\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/328c469c27b47b4c3f1f.js b/handbook/_nuxt/js/328c469c27b47b4c3f1f.js
new file mode 100644
index 0000000..d3a3f8f
--- /dev/null
+++ b/handbook/_nuxt/js/328c469c27b47b4c3f1f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[79],{373:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/366f7ad6be95b8f56db3.js b/handbook/_nuxt/js/366f7ad6be95b8f56db3.js
new file mode 100644
index 0000000..fe3ab06
--- /dev/null
+++ b/handbook/_nuxt/js/366f7ad6be95b8f56db3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[13],{307: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: {},\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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n```\n\nIf you want to change the area style of the line chart, try to use [`areaStyle`](${optionPath}series-line.areaStyle). Set `'areaStyle'` to `{}` to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in `'areaStyle'`. For example, the color of the second series was changed to yellow with 50% opacity.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/3719c79c1dd05f482388.js b/handbook/_nuxt/js/3719c79c1dd05f482388.js
new file mode 100644
index 0000000..1698915
--- /dev/null
+++ b/handbook/_nuxt/js/3719c79c1dd05f482388.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[82],{376: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/echarts-for-weixin) 项目。\n\n## 注意事项\n\n最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 `force-use-old-canvas="true"` 的情况下,使用新的 Canvas 2d(默认)。\n\n使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。\n\n更详细的说明请参见 [Canvas 2d 版本要求](https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82)。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/3799c7971bf94fc3bfb4.js b/handbook/_nuxt/js/3799c7971bf94fc3bfb4.js
new file mode 100644
index 0000000..53ab4b5
--- /dev/null
+++ b/handbook/_nuxt/js/3799c7971bf94fc3bfb4.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如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止`prettier`格式化该部分代码\n\n```markdown\n\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n```\n\n如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。\n\n## 内置变量\n\n- `optionPath`\n- `mainSitePath`\n- `exampleViewPath`\n- `exampleEditorPath`\n\n使用方式:\n\n```\n${xxxxx}\n```\n\n## 引用代码\n\n### 基础使用\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\n```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\n\n```js\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n### 代码推荐写法\n\n为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。\n\n比如注释 `...`\n\n```js\noption = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n```\n\n### 实时预览和编辑\n\n> 目前只支持对 Option 代码的预览\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\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\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\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```\n\n### 更多预览布局\n\n#### 左右\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\n\\```js live {layout: 'lr'}\noption = {\n ...\n};\n\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'lr'}\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```\n\n#### 右左\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\n\\```js live {layout: 'rl'}\noption = {\n ...\n};\n\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'rl'}\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```\n\n#### 下上\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\n\\```js live {layout: 'bt'}\noption = {\n ...\n};\n\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\n\n```js live {layout: 'bt'}\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```\n\n### 高亮代码行\n\n使用:\n\n\x3c!-- prettier-ignore-start --\x3e\n```markdown\n\\```js {1,3-5}\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n```\n\x3c!-- prettier-ignore-end --\x3e\n\n效果:\n\n```js {1,3-5}\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n```\n\n## 引用图片\n\n图片实际存放地址在 `static/images/` 下。\n\n```markdown\n![图片说明](images/demo.png)\n```\n\n### 设置图片高宽\n\n对于当前页面的临时样式,可以直接写 html:\n\n```markdown\n<img data-src=\"images/demo.png\" style=\"width: 50px\" />\n```\n\n## 添加示例 iframe\n\n`src`为 https://echarts.apache.org/examples/zh/editor.html?c=line-simple 地址中`?c=`后面这一串\n\n使用:\n\n```markdown\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\" />\n```\n\n效果:\n<md-example src=\"doc-example/getting-started\" width=\"100%\" height=\"300\" />\n\n## 添加配置项链接\n\n使用:\n\n```markdown\n<md-option link=\"series-bar.itemStyle.color\" />\n```\n\n效果:\n<md-option link=\"series-bar.itemStyle.color\" />\n\n## 更多组件使用\n\n文档支持使用全局注册的`markdown`组件,除了刚才介绍的`md-example`组件,还有下面几种组件\n\n### md-alert\n\n提示组件\n\n```markdown\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n```\n\n<md-alert type=\"info\">\nThis is an info alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n```\n\n<md-alert type=\"success\">\nThis is a success alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n```\n\n<md-alert type=\"warning\">\nThis is a warning alert.\n</md-alert>\n\n```markdown\n<md-alert type=\"warning\">\nThis is a danger alert.\n</md-alert>\n```\n\n<md-alert type=\"danger\">\nThis is a danger alert.\n</md-alert>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/40a0946845a463fb3fc7.js b/handbook/_nuxt/js/40a0946845a463fb3fc7.js
new file mode 100644
index 0000000..edf6cda
--- /dev/null
+++ b/handbook/_nuxt/js/40a0946845a463fb3fc7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[100],{394: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-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz">\n</iframe>\n\n## 柱状图的使用建议\n\n1、避免使用太多颜色,一般情况一个柱状图(条形图)表示一组相同的度量,所以建议使用相同的颜色或同一颜色的不同色调。如果需要强调某个数据时,可以使用对比色或者变化色调来突出显示有意义的数据点。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef">\n</iframe>\n\n2、柱状图柱子间的宽度和间隙要适当。当柱子太窄时,用户的视觉可能会集中在两个柱中间的负空间,而这里是不承载任何数据的。合理的宽度和间隙应该是 \b 单个柱子的宽度不小于柱间间隙的两倍。\n\n3、Y 轴数据应该从 0 基线开始,以恰当地反映数值。如果展示的是被截断的数据,那很可能会误导观众做出错误的判断。例如左侧图表显示出的数据结果是 2017 年收入是 2014 年收入的五倍,而实际上如右侧图表完整显示的数据表明 2017 年收入相对于 2014 年其实只提升了 25%。\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bar03.jpg">\n</img>\n\n4、对多个数据系列排序时,如果不涉及到日期等特定数据,最好能符合一定的逻辑用直观的方式引导用户更好地查看数据。可以通过升序或降序排布,例如按照数量从多到少来对数据进行排序,也可以按照字母顺序等来排布。总之,按照逻辑排序可以一定程度上引导人们更好地阅读数据。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M">\n</iframe>\n\n5、一般情况下不建议使用三维柱状图,与三维饼图一样,对于数据传达不太精准,甚至还不得不猜测哪个才是数据的顶端。\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bar04.jpg">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/43ca52abf392cbb19ed6.js b/handbook/_nuxt/js/43ca52abf392cbb19ed6.js
new file mode 100644
index 0000000..777facd
--- /dev/null
+++ b/handbook/_nuxt/js/43ca52abf392cbb19ed6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[41],{335: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 suitable for dealing with the relationship between part and whole.\n\nCompared with the pie chart, a stacked bar chart can display several groups of "part and whole" relationship. For instance, you can use a pie or bar chart to display the statistics of the number of people in each project in a physical education course. You can use a stacked bar chart when you want to distinguish boys and girls in each project. As shown in the chart, it included the info of the "part and whole" relationship of each group.\n\n<iframe max-width="830" width="100%" height="400" \n src="https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz">\n</iframe>\n\n## Suggestion for Using Stacked Bar Chart\n\n1. Follow the basic rule of bar charts. Please avoid using too many colors so that the chart can be easily understood. Don\'t deliberately display partly data to mislead the user.\n\n2. A Stacked bar chart is not suitable for comparing data inside the group.\n\n3. While there are 2 or 3 categories, a stacked bar chart will show the best effect. It is not recommended to include more than 6 categories. Too many data series will also make it very difficult to read and understand.\n\n4. Try to avoid using a stacked bar chart with categories that included negative values. It will affect understanding or the proportion between part and whole.\n\n5. Most of the stacked bar charts are vertically generated. However, if you have very long labels, try to use the horizontal stack method. \n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/473d6e136e307165746a.js b/handbook/_nuxt/js/473d6e136e307165746a.js
new file mode 100644
index 0000000..d7d1f54
--- /dev/null
+++ b/handbook/_nuxt/js/473d6e136e307165746a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[108],{402: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>:直接使用原始值堆叠,显示整个过程如何变化。\n- <b>百分比堆积面积图</b>:百分比堆积显示不同部分之间的关 系如何随时间而变化。其中累积的总数不重要,重要的是显示出类别分布在整体中的作用。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n## 堆叠面积图的使用建议\n\n1、图表有重叠的数据时,类别数量越多,重叠越多,因此可见度越低。如果使用面积图(如下示例)时会因为系列的重叠而无法阅读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n</iframe>\n\n那同样的数据,换成使用堆叠面积图展示,则相对更容易阅读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n<div class="article-look-outside">\n\t<div class="article-look-inside" style="padding-bottom:50%">\n\t <iframe class="article-look-content"\n\t src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n\t </iframe>\n\t</div>\n</div>\n\n2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果,但依然不建议堆叠面积图中包含过多数据系列,最好不要多于 7 个,以免数据难以辨识。\n\n3、堆积面积图要展示部分和整体之间的关系,所以不能用于包含负值的数据的展示。\n\n4、建议堆叠面积图中把变化量较大的数据放在上方,变化量较小的数据放在下方会获得更加的展示效果。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/4bfb171352d9a64e9093.js b/handbook/_nuxt/js/4bfb171352d9a64e9093.js
new file mode 100644
index 0000000..aa4d0a1
--- /dev/null
+++ b/handbook/_nuxt/js/4bfb171352d9a64e9093.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[83],{377:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/4d6aa149079169848905.js b/handbook/_nuxt/js/4d6aa149079169848905.js
new file mode 100644
index 0000000..3a2c49d
--- /dev/null
+++ b/handbook/_nuxt/js/4d6aa149079169848905.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[123],{417:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/4e08dd3cb7b737a2c89f.js b/handbook/_nuxt/js/4e08dd3cb7b737a2c89f.js
new file mode 100644
index 0000000..ae48c63
--- /dev/null
+++ b/handbook/_nuxt/js/4e08dd3cb7b737a2c89f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[93],{387: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 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。\n\n## 动态叙事\n\n动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。\n\n#### 动态排序图\n\nApache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。\n\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n\n动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。\n\n#### 自定义系列动画\n\n除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。\n\n想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!\n\n## 视觉设计\n\n视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。\n\n#### 默认设计\n\n我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。\n\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n\n我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:\n\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n\n对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:\n\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n\n#### 标签\n\n标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。\n\nApache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。\n\n这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。\n\n我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。\n\n新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:\n\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n\n#### 时间轴\n\nApache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。\n\n首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 `formatter` 支持了时间模版(例如 `{yyyy}-{MM}-{dd}`),并且可以为不同时间粒度的标签指定不同的 `formatter`,结合已有的富文本标签,可以定制出醒目而多样的时间效果。\n\n不同的 dataZoom 粒度下时间刻度的显示:\n\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n\n#### 提示框\n\n提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。\n\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n\n除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。\n\n#### 仪表盘\n\n我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。\n\n不同样式的仪表盘指针:\n\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n\n这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。\n\n<md-example src="gauge-clock" width="600" height="600" />\n\n#### 扇形圆角\n\n圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。\n\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n\n## 交互能力\n\n可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。\n\n#### 状态管理\n\n在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。\n\n这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了**淡出**其它非相关元素的效果,从而可以达到聚焦目标数据的目的。\n\n比如在这个[柱状图](https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack)的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。\n\n除此之外,我们为所有系列还添加了**点击选中**这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 `selectchanged` 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 `select` 中配置。\n\n#### 性能提升\n\n##### 脏矩形渲染\n\nApache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。\n\n脏矩形的可视化演示,红色框选部分为该帧重绘区域:\n\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n\n大家在新的示例页面选择开启脏矩形优化就可以看到该效果。\n\n##### 实时时序数据的折线图性能优化\n\n除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。\n\nApache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。\n\n## 开发体验\n\n我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。\n\n#### 数据集\n\nECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。\n\n#### 国际化\n\nECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。 这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。\n\n因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包 ,通过类似挂载主题的方式,使用 `registerLocale` 函数挂载语言包对象 ,重新初始化后就完成了语言的切换 。\n\n```js\n// import the lang object and set when init\necharts.registerLocale(\'DE\', lang);\necharts.init(DomElement, null, {\n locale: \'DE\'\n});\n```\n\n#### TypeScript 重构\n\n在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。\n\n对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的`DTS`类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到[DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts),这个有着不小的工作量,非常感谢大家的贡献。\n\n除此之外,如果开发者的组件是按需引入的,我们还提供了一个 `ComposeOption` 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。\n\n## 可访问性\n\nApache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。\n\n在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。\n\n#### 主题配色\n\n我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。\n\n并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。\n\n#### 贴花图案\n\nECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。\n\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n\n此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。\n\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n\n## 小结\n\n除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。\n\n感谢所有使用过 ECharts,甚至参与过社区贡献的开发者,正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中,Apache ECharts 也会以更大的诚意和大家在 6 相见!\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/52a6ca2e1d8a75e184fd.js b/handbook/_nuxt/js/52a6ca2e1d8a75e184fd.js
deleted file mode 100644
index e72fb18..0000000
--- a/handbook/_nuxt/js/52a6ca2e1d8a75e184fd.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[7],{249:function(e,t){function n(e,t,n,r,o,l,h){try{var d=e[l](h),c=d.value}catch(e){return void n(e)}d.done?t(c):Promise.resolve(c).then(r,o)}e.exports=function(e){return function(){var t=this,r=arguments;return new Promise((function(o,l){var h=e.apply(t,r);function d(e){n(h,o,l,d,c,"next",e)}function c(e){n(h,o,l,d,c,"throw",e)}d(void 0)}))}},e.exports.default=e.exports,e.exports.__esModule=!0},250:function(e,t){function n(t){return"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?(e.exports=n=function(e){return typeof e},e.exports.default=e.exports,e.exports.__esModule=!0):(e.exports=n=function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.default=e.exports,e.exports.__esModule=!0),n(t)}e.exports=n,e.exports.default=e.exports,e.exports.__esModule=!0},251:function(e,t){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.default=e.exports,e.exports.__esModule=!0},252:function(e,t){function n(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}e.exports=function(e,t,r){return t&&n(e.prototype,t),r&&n(e,r),e},e.exports.default=e.exports,e.exports.__esModule=!0},253:function(e,t){e.exports=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},e.exports.default=e.exports,e.exports.__esModule=!0},254:function(e,t,n){"use strict";var r=n(4),o=n(79)(6),l="findIndex",h=!0;l in[]&&Array(1)[l]((function(){h=!1})),r(r.P+r.F*h,"Array",{findIndex:function(e){return o(this,e,arguments.length>1?arguments[1]:void 0)}}),n(78)(l)},255:function(e,t,n){var r=n(4);r(r.P,"Array",{fill:n(256)}),n(78)("fill")},256:function(e,t,n){"use strict";var r=n(41),o=n(108),l=n(23);e.exports=function(e){for(var t=r(this),n=l(t.length),h=arguments.length,d=o(h>1?arguments[1]:void 0,n),c=h>2?arguments[2]:void 0,f=void 0===c?n:o(c,n);f>d;)t[d++]=e;return t}},257:function(e,t,n){var r;"undefined"!=typeof self&&self,r=function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},n.p="",n(n.s=8)}([function(e,t,n){"use strict";n.d(t,"a",(function(){return o}));var r=n(2);let o={js:(e,t)=>e===t?0:e<t?-1:1,"abstract-js":(e,t)=>e==t?0:e<t?-1:1,"abstract-date":(e,t)=>{let n=new Date(e).toISOString(),r=new Date(t).toISOString();return n==r?0:n<r?-1:1},loki:(e,t)=>Object(r.b)(e,t)?0:Object(r.c)(e,t,!1)?-1:1}},function(e,t,n){"use strict";(function(e){function r(){let t;return function(e){t=e}(void 0!==e&&e||this),t}n.d(t,"a",(function(){return o}));const o=function(){const e=r(),t=Symbol.for("LOKI");return void 0===e[t]&&(e[t]={}),e[t]}()}).call(this,n(7))},function(e,t,n){"use strict";function r(e,t){if(e===t)return!0;if(!e||!t||!0===e||!0===t||e!=e||t!=t){let n,r;switch(e){case void 0:case null:n=1;break;case!1:n=3;break;case!0:n=4;break;case"":n=5;break;default:n=e==e?9:0}switch(t){case void 0:case null:r=1;break;case!1:r=3;break;case!0:r=4;break;case"":r=5;break;default:r=t==t?9:0}if(9!==n||9!==r)return n===r}let n=Number(e),r=Number(t);return n==n||r==r?n===r:(n=e.toString(),r=t.toString(),n==r)}function o(e,t,n){if(!e||!t||!0===e||!0===t||e!=e||t!=t){let r,o;switch(e){case void 0:case null:r=1;break;case!1:r=3;break;case!0:r=4;break;case"":r=5;break;default:r=e==e?9:0}switch(t){case void 0:case null:o=1;break;case!1:o=3;break;case!0:o=4;break;case"":o=5;break;default:o=t==t?9:0}if(9!==r||9!==o)return r===o?n:r<o}let r=Number(e),o=Number(t);return r==r&&o==o?r<o||!(r>o)&&n:r==r&&o!=o||(o!=o||r==r)&&(e<t||!(e>t)&&(e==t?n:(r=e.toString(),o=t.toString(),r<o||r==o&&n)))}function l(e,t,n){if(!e||!t||!0===e||!0===t||e!=e||t!=t){let r,o;switch(e){case void 0:case null:r=1;break;case!1:r=3;break;case!0:r=4;break;case"":r=5;break;default:r=e==e?9:0}switch(t){case void 0:case null:o=1;break;case!1:o=3;break;case!0:o=4;break;case"":o=5;break;default:o=t==t?9:0}if(9!==r||9!==o)return r===o?n:r>o}let r=Number(e),o=Number(t);return r==r&&o==o?r>o||!(r<o)&&n:(r!=r||o==o)&&(o==o&&r!=r||e>t||!(e<t)&&(e==t?n:(r=e.toString(),o=t.toString(),r>o||r==o&&n)))}function h(e,t,n){return r(e,t)?0:o(e,t,!1)?n?1:-1:l(e,t,!1)?n?-1:1:0}n.d(t,"b",(function(){return r})),n.d(t,"c",(function(){return o})),n.d(t,"d",(function(){return h})),n.d(t,"a",(function(){return c}));class d{$eq(a,b){return a===b}$ne(a,b){return a!==b}$gt(a,b){return a>b}$gte(a,b){return a>=b}$lt(a,b){return a<b}$lte(a,b){return a<=b}$between(a,e){return null!=a&&a>=e[0]&&a<=e[1]}$in(a,b){return-1!==b.indexOf(a)}$nin(a,b){return-1===b.indexOf(a)}$keyin(a,b){return a in b}$nkeyin(a,b){return!(a in b)}$definedin(a,b){return void 0!==b[a]}$undefinedin(a,b){return void 0===b[a]}$regex(a,b){return b.test(a)}$containsNone(a,b){return!this.$containsAny(a,b)}$containsAny(a,b){const e=this.containsCheckFn(a);return null!==e&&(Array.isArray(b)?b.some(e):e(b))}$contains(a,b){const e=this.containsCheckFn(a);return null!==e&&(Array.isArray(b)?b.every(e):e(b))}$type(a,b){let e=typeof a;return"object"===e&&(Array.isArray(a)?e="array":a instanceof Date&&(e="date")),"object"!=typeof b?e===b:this.doQueryOp(e,b)}$finite(a,b){return b===isFinite(a)}$size(a,b){return!!Array.isArray(a)&&("object"!=typeof b?a.length===b:this.doQueryOp(a.length,b))}$len(a,b){return"string"==typeof a&&("object"!=typeof b?a.length===b:this.doQueryOp(a.length,b))}$where(a,b){return!0===b(a)}$not(a,b){return!this.doQueryOp(a,b)}$and(a,b){for(let e=0,t=b.length;e<t;e++)if(!this.doQueryOp(a,b[e]))return!1;return!0}$or(a,b){for(let e=0,t=b.length;e<t;e++)if(this.doQueryOp(a,b[e]))return!0;return!1}doQueryOp(e,t){for(let p in t)if(Object.hasOwnProperty.call(t,p))return this[p](e,t[p]);return!1}containsCheckFn(a){return"string"==typeof a||Array.isArray(a)?b=>-1!==a.indexOf(b):"object"==typeof a&&null!==a?b=>Object.hasOwnProperty.call(a,b):null}}let c={js:new d,loki:new class extends d{constructor(){super()}$eq(a,b){return r(a,b)}$ne(a,b){return!r(a,b)}$gt(a,b){return l(a,b,!1)}$gte(a,b){return l(a,b,!0)}$lt(a,b){return o(a,b,!1)}$lte(a,b){return o(a,b,!0)}$between(a,e){return null!=a&&l(a,e[0],!0)&&o(a,e[1],!0)}}}},function(e,t,n){"use strict";var r=n(5);class o{constructor(e){this._field=e,this._lokiMap={},this._valMap={}}set(e,t){if(null!=t){if(t in this._lokiMap)throw new Error("Duplicate key for property "+this._field+": "+t);if(e in this._valMap)throw new Error("Duplicate key for property $loki : "+e);this._lokiMap[t]=e,this._valMap[e]=t}}get(e){return this._lokiMap[e]}update(e,t){if(t!==this._valMap[e]){if(t in this._lokiMap)throw new Error("Duplicate key for property "+this._field+": "+t);this.remove(e),this.set(e,t)}}remove(e){if(!(e in this._valMap))throw new Error("Key is not in unique index: "+this._field);let t=this._valMap[e];delete this._lokiMap[t],delete this._valMap[e]}clear(){this._lokiMap={},this._valMap={}}}function l(e,t,n){return e instanceof Array?(e.push(n),e[e.length-1]):e instanceof Object?(e[t]=n,e[t]):void 0}function h(e,t){for(let n in e){let r=e[n];r instanceof Date?l(t,n,new Date(r.getTime())):r instanceof Function?l(t,n,r):r instanceof Array?h(r,l(t,n,[])):r instanceof Object?h(r,l(t,n,{})):l(t,n,r)}}function d(e){if(/number|string|boolean/.test(typeof e))return e;if(e instanceof Date)return new Date(e.getTime());const t=e instanceof Array?[]:{};return h(e,t),t}function c(data,e="parse-stringify"){if(null==data)return null;let t;switch(e){case"parse-stringify":t=JSON.parse(JSON.stringify(data));break;case"deep":t=d(data);break;case"shallow":t=Object.create(data.constructor.prototype),Object.assign(t,data);break;case"shallow-recurse":t=c(data,"shallow");const e=Object.keys(data);for(let i=0;i<e.length;i++){const n=e[i];"object"==typeof data[n]&&"Object"===data[n].constructor.name&&(t[n]=c(data[n],"shallow-recurse"))}}return t}var f=n(2),_=n(0);function w(e,t,n=0){if(++n>=10)return e;for(const r in e)if("string"==typeof e[r]&&0===e[r].indexOf("[%lktxp]")){const n=e[r].substring(8);void 0!==t[n]&&(e[r]=t[n])}else"object"==typeof e[r]&&(e[r]=w(e[r],t,n));return e}const m={$eq:!0,$dteq:!0,$gt:!0,$gte:!0,$lt:!0,$lte:!0,$in:!0,$between:!0};class v{constructor(e){this._filteredRows=[],this._filterInitialized=!1,this._scoring=null,this._collection=e}reset(){return this._filteredRows.length>0&&(this._filteredRows=[]),this._filterInitialized=!1,this}toJSON(){const e=this.copy();return e._collection=null,e}limit(e){return this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex()),this._filteredRows=this._filteredRows.slice(0,e),this._filterInitialized=!0,this}offset(e){return this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex()),this._filteredRows=this._filteredRows.slice(e),this._filterInitialized=!0,this}copy(){const e=new v(this._collection);return e._filteredRows=this._filteredRows.slice(),e._filterInitialized=this._filterInitialized,e}transform(e,t){"string"==typeof e&&(e=this._collection._transforms[e]),void 0!==t&&(e=function(e,t){if(void 0===t)return e;const n=[];for(let r=0;r<e.length;r++){const o=c(e[r],"shallow-recurse");n.push(w(o,t))}return n}(e,t));let n=this;for(let t=0;t<e.length;t++){const r=e[t];switch(r.type){case"find":n.find(r.value);break;case"where":n.where(r.value);break;case"simplesort":n.simplesort(r.property,r.options);break;case"compoundsort":n.compoundsort(r.value);break;case"sort":n.sort(r.value);break;case"sortByScoring":n.sortByScoring(r.desc);break;case"limit":n=n.limit(r.value);break;case"offset":n=n.offset(r.value);break;case"map":n=n.map(r.value,r.dataOptions);break;case"eqJoin":n=n.eqJoin(r.joinData,r.leftJoinKey,r.rightJoinKey,r.mapFun,r.dataOptions);break;case"mapReduce":n=n.mapReduce(r.mapFunction,r.reduceFunction);break;case"update":n.update(r.value);break;case"remove":n.remove()}}return n}sort(e){this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex());const data=this._collection._data;return this._filteredRows.sort(((a,b)=>e(data[a],data[b]))),this}simplesort(e,t={desc:!1}){if("boolean"==typeof t&&(t={desc:t}),!this._filterInitialized&&this._collection._rangedIndexes.hasOwnProperty(e)){let n=this._collection._rangedIndexes[e].index.rangeRequest(),r=[];for(let e of n)r.push(this._collection.get(e,!0)[1]);return this._filteredRows=t.desc?r.reverse():r,this._filterInitialized=!0,this}this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex());const data=this._collection._data;let n=t.sortComparator?_.a[t.sortComparator]:_.a[this._collection._unindexedSortComparator];return this._filteredRows.sort(((a,b)=>n(data[a][e],data[b][e]))),t.desc&&this._filteredRows.reverse(),this}compoundsort(e){if(0===e.length)throw new Error("Invalid call to compoundsort, need at least one property");if(1===e.length){const t=e[0];return"string"==typeof t?this.simplesort(t,!1):this.simplesort(t[0],t[1])}for(let i=0,t=e.length;i<t;i++){const t=e[i];"string"==typeof t&&(e[i]=[t,!1])}this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex());const data=this._collection._data;return this._filteredRows.sort(((a,b)=>this._compoundeval(e,data[a],data[b]))),this}_compoundeval(e,t,n){for(let i=0,r=e.length;i<r;i++){const r=e[i],o=r[0],l=Object(f.d)(t[o],n[o],r[1]);if(0!==l)return l}return 0}sortByScoring(e=!1){if(null===this._scoring)throw new Error("No scoring available");return e?this._filteredRows.sort(((a,b)=>this._scoring[a].score-this._scoring[b].score)):this._filteredRows.sort(((a,b)=>this._scoring[b].score-this._scoring[a].score)),this}getScoring(){if(null===this._scoring)throw new Error("No scoring available");const e=[];for(let i=0;i<this._filteredRows.length;i++)e.push(this._scoring[this._filteredRows[i]]);return e}findOr(e){const t=[],n=[],r=this.count();for(let o=0,l=e.length;o<l;o++){const l=this.copy().find(e[o])._filteredRows,h=l.length;if(h===r)return this;for(let e=0;e<h;e++){const r=l[e];void 0===n[r]&&(n[r]=!0,t.push(r))}}return this._filteredRows=t,this._filterInitialized=!0,this}$or(e){return this.findOr(e)}findAnd(e){for(let i=0,t=e.length;i<t;i++){if(0===this.count())return this;this.find(e[i])}return this}$and(e){return this.findAnd(e)}find(e,t=!1){if(0===this._collection._data.length)return this._filteredRows=[],this._filterInitialized=!0,this;const n=e||"getAll";let r,o,l;if("object"==typeof n){let e=[];for(let p in n){let t={};t[p]=n[p],e.push(t),void 0!==n[p]&&(r=p,o=n[p])}if(e.length>1)return this.find({$and:e},t)}if(!r||"getAll"===n)return t&&(this._filteredRows=this._collection._data.length>0?[0]:[],this._filterInitialized=!0),this;if("$and"===r||"$or"===r)return this[r](o),t&&this._filteredRows.length>1&&(this._filteredRows=this._filteredRows.slice(0,1)),this;let h="";if(null===o||"object"!=typeof o||o instanceof Date)h="$eq",l=o;else{if("object"!=typeof o)throw new Error("Do not know what you want to do.");for(let e in o)if(void 0!==o[e]){h=e,l=o[e];break}}"$regex"===h&&(Array.isArray(l)?l=new RegExp(l[0],l[1]):l instanceof RegExp||(l=new RegExp(l)));let d=!1;!this._filterInitialized&&this._collection._rangedIndexes[r]&&m[h]&&(d=!0);const c=f.a[this._collection._defaultLokiOperatorPackage],data=this._collection._data;let _=[];if(this._filterInitialized){let filter=this._filteredRows;if("$fts"===r){this._scoring=this._collection._fullTextSearch.search(n.$fts);let e=Object.keys(this._scoring);for(let i=0;i<e.length;i++)-1!==filter.indexOf(+e[i])&&_.push(+e[i])}else if(void 0!==this._collection._constraints.unique[r]&&"$eq"===h){const e=this._collection._constraints.unique[r].get(l);if(void 0!==e){const t=this._collection.get(e,!0)[1];-1!==filter.indexOf(t)&&_.push(t)}}else for(let i=0;i<filter.length;i++){let e=filter[i];c[h](data[e][r],l)&&_.push(e)}return this._filteredRows=_,this._filterInitialized=!0,this}if(this._filteredRows=_,this._filterInitialized=!0,"$fts"===r){this._scoring=this._collection._fullTextSearch.search(n.$fts);let e=Object.keys(this._scoring);for(let i=0;i<e.length;i++)_.push(+e[i]);return this}if(void 0!==this._collection._constraints.unique[r]&&"$eq"===h){const e=this._collection._constraints.unique[r].get(l);return void 0!==e&&_.push(this._collection.get(e,!0)[1]),this}if(!d){for(let i=0;i<data.length;i++)if(c[h](data[i][r],l)&&(_.push(i),t))return this;return this}if(this._collection._rangedIndexes[r]){if("$in"===h){let e=this._collection._rangedIndexes[r];for(let t of l){let n=e.index.rangeRequest({op:"$eq",val:t});for(let e of n)_.push(this._collection.get(e,!0)[1])}return this}if("$between"===h){let e=this._collection._rangedIndexes[r].index.rangeRequest({op:h,val:l[0],high:l[1]});for(let t of e)_.push(this._collection.get(t,!0)[1]);return this}let e=this._collection._rangedIndexes[r].index.rangeRequest({op:h,val:l});if(!0!==m[h])for(let t of e){let e=this._collection.get(t,!0)[1];m[h](data[e][r],l)&&_.push(e)}else for(let t of e)_.push(this._collection.get(t,!0)[1])}return this}where(e){let t,n=[];if("function"!=typeof e)throw new TypeError("Argument is not a stored view or a function");if(t=e,this._filterInitialized){let e=this._filteredRows.length;for(;e--;)!0===t(this._collection._data[this._filteredRows[e]])&&n.push(this._filteredRows[e]);return this._filteredRows=n,this}{let e=this._collection._data.length;for(;e--;)!0===t(this._collection._data[e])&&n.push(e);return this._filteredRows=n,this._filterInitialized=!0,this}}count(){return this._filterInitialized?this._filteredRows.length:this._collection.count()}data(e={}){let t,n,r;({forceClones:t=!1,forceCloneMethod:n=this._collection._cloneMethod,removeMeta:r=!1}=e);let o,l,h=[],data=this._collection._data;if(r&&!t&&(t=!0,n="shallow"),this._collection._disableDeltaChangesApi||(t=!0,n="deep"),!this._filterInitialized){if(0===this._filteredRows.length){if(this._collection._cloneObjects||t){l=n;for(let i=0;i<data.length;i++)o=this._collection._defineNestedProperties(c(data[i],l)),r&&(delete o.$loki,delete o.meta),h.push(o);return h}return data.slice()}this._filterInitialized=!0}const d=this._filteredRows;if(this._collection._cloneObjects||t){l=n;for(let i=0;i<d.length;i++)o=this._collection._defineNestedProperties(c(data[d[i]],l)),r&&(delete o.$loki,delete o.meta),h.push(o)}else for(let i=0;i<d.length;i++)h.push(data[d[i]]);return h}update(e){this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex());const t=this._filteredRows.length,n=this._collection._data;for(let r=0;r<t;r++)if(this._collection._cloneObjects||!this._collection._disableDeltaChangesApi){const t=c(n[this._filteredRows[r]],this._collection._cloneMethod);e(t),this._collection.update(t)}else e(n[this._filteredRows[r]]),this._collection.update(n[this._filteredRows[r]]);return this}remove(){return this._filterInitialized||0!==this._filteredRows.length||(this._filteredRows=this._collection._prepareFullDocIndex()),this._collection.remove(this.data()),this._filteredRows=[],this}mapReduce(e,t){try{return t(this.data().map(e))}catch(e){throw e}}eqJoin(e,t,n,r,o){let l,h,d=[],c=[],f="function"==typeof t,_="function"==typeof n,w={},m=this.data(o),y=m.length;if(e instanceof C)d=e.chain().data(o);else if(e instanceof v)d=e.data(o);else{if(!Array.isArray(e))throw new TypeError("joinData needs to be an array or result set");d=e}l=d.length;for(let i=0;i<l;i++)h=_?n(d[i]):d[i][n],w[h]=d[i];r||(r=(e,t)=>({left:e,right:t}));for(let e=0;e<y;e++)h=f?t(m[e]):m[e][t],c.push(r(m[e],w[h]||{}));return this._collection=new C("joinData"),this._collection.insert(c),this._filteredRows=[],this._filterInitialized=!1,this}map(e,t){const data=this.data(t).map(e);return this._collection=new C("mappedData"),this._collection.insert(data),this._filteredRows=[],this._filterInitialized=!1,this}}class y extends r.a{constructor(e,t,n={}){super(),this._rebuildPending=!1,this._resultData=[],this._resultDirty=!1,this._cachedResultSet=null,this._filterPipeline=[],this._sortFunction=null,this._sortCriteria=null,this._sortCriteriaSimple=null,this._sortByScoring=null,this._sortDirty=!1,({persistent:this._persistent=!1,sortPriority:this._sortPriority="passive",minRebuildInterval:this._minRebuildInterval=1}=n),this._collection=e,this.name=t,this._resultSet=new v(e),this._events={rebuild:[]}}_rematerialize({removeWhereFilters:e=!1}){if(this._resultData=[],this._resultDirty=!0,this._resultSet=new v(this._collection),(this._sortFunction||this._sortCriteria||this._sortCriteriaSimple||null!==this._sortByScoring)&&(this._sortDirty=!0),e){let e=this._filterPipeline.length;for(;e--;)"where"===this._filterPipeline[e].type&&(e!==this._filterPipeline.length-1&&(this._filterPipeline[e]=this._filterPipeline[this._filterPipeline.length-1]),this._filterPipeline.length--)}const t=this._filterPipeline;this._filterPipeline=[];for(let e=0;e<t.length;e++)this.applyFind(t[e].val);return this.data(),this.emit("rebuild",this),this}branchResultSet(e,t){const n=this._resultSet.copy();return void 0===e?n:n.transform(e,t)}toJSON(){return{name:this.name,_persistent:this._persistent,_sortPriority:this._sortPriority,_minRebuildInterval:this._minRebuildInterval,_resultSet:this._resultSet,_filterPipeline:this._filterPipeline,_sortCriteria:this._sortCriteria,_sortCriteriaSimple:this._sortCriteriaSimple,_sortByScoring:this._sortByScoring,_sortDirty:this._sortDirty}}static fromJSONObject(e,t){let n=new y(e,t.name);return n._resultDirty=!0,n._filterPipeline=t._filterPipeline,n._resultData=[],n._sortCriteria=t._sortCriteria,n._sortCriteriaSimple=t._sortCriteriaSimple,n._sortByScoring=t._sortByScoring,n._sortDirty=t._sortDirty,n._resultSet._filteredRows=t._resultSet._filteredRows,n._resultSet._filterInitialized=t._resultSet._filterInitialized,n._rematerialize({removeWhereFilters:!0}),n}removeFilters({queueSortPhase:e=!1}={}){this._rebuildPending=!1,this._resultSet.reset(),this._resultData=[],this._resultDirty=!0,this._cachedResultSet=null,this._filterPipeline=[],this._sortFunction=null,this._sortCriteria=null,this._sortCriteriaSimple=null,this._sortByScoring=null,this._sortDirty=!1,!0===e&&this._queueSortPhase()}applySort(e){return this._sortFunction=e,this._sortCriteria=null,this._sortCriteriaSimple=null,this._sortByScoring=null,this._queueSortPhase(),this}applySimpleSort(e,t=!1){return this._sortCriteriaSimple={field:e,options:t},this._sortFunction=null,this._sortCriteria=null,this._sortByScoring=null,this._queueSortPhase(),this}applySortCriteria(e){return this._sortCriteria=e,this._sortCriteriaSimple=null,this._sortFunction=null,this._sortByScoring=null,this._queueSortPhase(),this}applySortByScoring(e=!1){return this._sortFunction=null,this._sortCriteria=null,this._sortCriteriaSimple=null,this._sortByScoring=e,this._queueSortPhase(),this}getScoring(){return this._resultSet.getScoring()}startTransaction(){return this._cachedResultSet=this._resultSet.copy(),this}commit(){return this._cachedResultSet=null,this}rollback(){return this._resultSet=this._cachedResultSet,this._persistent&&(this._resultData=this._resultSet.data(),this.emit("rebuild",this)),this}_indexOfFilterWithId(e){if("string"==typeof e||"number"==typeof e)for(let t=0,n=this._filterPipeline.length;t<n;t++)if(e===this._filterPipeline[t].uid)return t;return-1}_addFilter(filter){this._filterPipeline.push(filter),this._resultSet[filter.type](filter.val)}reapplyFilters(){this._resultSet.reset(),this._cachedResultSet=null,this._persistent&&(this._resultData=[],this._resultDirty=!0);const e=this._filterPipeline;this._filterPipeline=[];for(let t=0,n=e.length;t<n;t++)this._addFilter(e[t]);return this._sortFunction||this._sortCriteria||this._sortCriteriaSimple||null!==this._sortByScoring?this._queueSortPhase():this._queueRebuildEvent(),this}applyFilter(filter){const e=this._indexOfFilterWithId(filter.uid);return e>=0?(this._filterPipeline[e]=filter,this.reapplyFilters()):(this._cachedResultSet=null,this._persistent&&(this._resultData=[],this._resultDirty=!0),this._addFilter(filter),this._sortFunction||this._sortCriteria||this._sortCriteriaSimple||null!==this._sortByScoring?this._queueSortPhase():this._queueRebuildEvent(),this)}applyFind(e,t=""){return this.applyFilter({type:"find",val:e,uid:t}),this}applyWhere(e,t){return this.applyFilter({type:"where",val:e,uid:t}),this}removeFilter(e){const t=this._indexOfFilterWithId(e);if(t<0)throw new Error("Dynamic view does not contain a filter with ID: "+e);return this._filterPipeline.splice(t,1),this.reapplyFilters(),this}count(){return this._resultDirty&&(this._resultData=this._resultSet.data()),this._resultSet.count()}data(e={}){return(this._sortDirty||this._resultDirty)&&this._performSortPhase({suppressRebuildEvent:!0}),this._persistent?this._resultData:this._resultSet.data(e)}_queueRebuildEvent(){this._rebuildPending||(this._rebuildPending=!0,setTimeout((()=>{this._rebuildPending&&(this._rebuildPending=!1,this.emit("rebuild",this))}),this._minRebuildInterval))}_queueSortPhase(){this._sortDirty||(this._sortDirty=!0,"active"===this._sortPriority?setTimeout((()=>{this._performSortPhase()}),this._minRebuildInterval):this._queueRebuildEvent())}_performSortPhase(e={}){(this._sortDirty||this._resultDirty)&&(this._sortDirty&&(this._sortFunction?this._resultSet.sort(this._sortFunction):this._sortCriteria?this._resultSet.compoundsort(this._sortCriteria):this._sortCriteriaSimple?this._resultSet.simplesort(this._sortCriteriaSimple.field,this._sortCriteriaSimple.options):null!==this._sortByScoring&&this._resultSet.sortByScoring(this._sortByScoring),this._sortDirty=!1),this._persistent&&(this._resultData=this._resultSet.data(),this._resultDirty=!1),e.suppressRebuildEvent||this.emit("rebuild",this))}_evaluateDocument(e,t){if(!this._resultSet._filterInitialized)return this._persistent&&(this._resultData=this._resultSet.data()),void(this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent());const n=this._resultSet._filteredRows,r=t?-1:n.indexOf(+e),o=n.length,l=new v(this._collection);let filter;l._filteredRows=[e],l._filterInitialized=!0;for(let e=0,t=this._filterPipeline.length;e<t;e++)filter=this._filterPipeline[e],l[filter.type](filter.val);const h=0===l._filteredRows.length?-1:0;return-1!==r||-1!==h?-1===r&&-1!==h?(n.push(e),this._persistent&&this._resultData.push(this._collection._data[e]),void(this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent())):-1!==r&&-1===h?(r<o-1?(n.splice(r,1),this._persistent&&this._resultData.splice(r,1)):(n.length=o-1,this._persistent&&(this._resultData.length=o-1)),void(this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent())):void(-1!==r&&-1!==h&&(this._persistent&&(this._resultData[r]=this._collection._data[e]),this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent())):void 0}_removeDocument(e){if(!this._resultSet._filterInitialized)return this._persistent&&(this._resultData=this._resultSet.data()),void(this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent());const t=this._resultSet._filteredRows,n=t.indexOf(+e);let r=t.length;-1!==n&&(n<r-1?(t[n]=t[r-1],t.length=r-1,this._persistent&&(this._resultData[n]=this._resultData[r-1],this._resultData.length=r-1)):(t.length=r-1,this._persistent&&(this._resultData.length=r-1)),this._sortFunction||this._sortCriteria||this._sortCriteriaSimple?this._queueSortPhase():this._queueRebuildEvent()),r=t.length;for(let n=0;n<r;n++)t[n]>e&&t[n]--}mapReduce(e,t){try{return t(this.data().map(e))}catch(e){throw e}}}var x=n(4),S=n(1);function k(e){return e.reduce(((a,b)=>a+b),0)/e.length}function I(e,path,t,n=0){if(void 0===e)return!1;if(n+1===path.length)return t.push(e[path[n]]),!1;const r=e[path[n]];if(Array.isArray(r)){for(let i=0;i<r.length;i++)I(r[i],path,t,n+1);return!0}return I(r,path,t,n+1)}n.d(t,"a",(function(){return C}));class C extends r.a{constructor(e,t={}){if(super(),this._data=[],this._idIndex=[],this._rangedIndexes={},this._lokimap={},this._unindexedSortComparator="js",this._defaultLokiOperatorPackage="js",this._constraints={unique:{}},this._transforms={},this._dirty=!0,this._cached=null,this._nestedProperties=[],this._ttl={age:null,ttlInterval:null,daemon:null},this._maxId=0,this._dynamicViews=[],this._changes=[],this._stages={},this._commitLog=[],t&&!0===t.disableMeta){if(!1===t.disableChangesApi)throw new Error("disableMeta option cannot be passed as true when disableChangesApi is passed as false");if(!1===t.disableDeltaChangesApi)throw new Error("disableMeta option cannot be passed as true when disableDeltaChangesApi is passed as false");if("number"==typeof t.ttl&&t.ttl>0)throw new Error("disableMeta option cannot be passed as true when ttl is enabled")}if(this.name=e,this._unindexedSortComparator=t.unindexedSortComparator||"js",this._defaultLokiOperatorPackage=t.defaultLokiOperatorPackage||"js",void 0!==t.unique&&(Array.isArray(t.unique)||(t.unique=[t.unique]),t.unique.forEach((e=>{this._constraints.unique[e]=new o(e)}))),void 0!==S.a.FullTextSearch?this._fullTextSearch=void 0!==t.fullTextSearch?new S.a.FullTextSearch(t.fullTextSearch):null:this._fullTextSearch=null,this._transactional=void 0!==t.transactional&&t.transactional,this._cloneObjects=void 0!==t.clone&&t.clone,this._asyncListeners=void 0!==t.asyncListeners&&t.asyncListeners,this._disableMeta=void 0!==t.disableMeta&&t.disableMeta,this._disableChangesApi=void 0===t.disableChangesApi||t.disableChangesApi,this._disableDeltaChangesApi=void 0===t.disableDeltaChangesApi||t.disableDeltaChangesApi,this._cloneMethod=void 0!==t.cloneMethod?t.cloneMethod:"deep",this._disableChangesApi&&(this._disableDeltaChangesApi=!0),this._serializableIndexes=void 0===t.serializableIndexes||t.serializableIndexes,null!=t.nestedProperties)for(let i=0;i<t.nestedProperties.length;i++){const e=t.nestedProperties[i];"string"==typeof e?this._nestedProperties.push({name:e,path:e.split(".")}):this._nestedProperties.push(e)}this.setTTL(t.ttl||-1,t.ttlInterval),this._events={insert:[],update:[],"pre-insert":[],"pre-update":[],close:[],flushbuffer:[],error:[],delete:[],warning:[]},this._ensureId();let n=t.rangedIndexes||{};for(let e in n)this.ensureRangedIndex(e,n[e].indexTypeName,n[e].comparatorName);this.setChangesApi(this._disableChangesApi,this._disableDeltaChangesApi),this.flushChanges()}toJSON(){return{name:this.name,unindexedSortComparator:this._unindexedSortComparator,defaultLokiOperatorPackage:this._defaultLokiOperatorPackage,_dynamicViews:this._dynamicViews,uniqueNames:Object.keys(this._constraints.unique),transforms:this._transforms,rangedIndexes:this._rangedIndexes,_data:this._data,idIndex:this._idIndex,maxId:this._maxId,_dirty:this._dirty,_nestedProperties:this._nestedProperties,transactional:this._transactional,asyncListeners:this._asyncListeners,disableMeta:this._disableMeta,disableChangesApi:this._disableChangesApi,disableDeltaChangesApi:this._disableDeltaChangesApi,cloneObjects:this._cloneObjects,cloneMethod:this._cloneMethod,changes:this._changes,_fullTextSearch:this._fullTextSearch}}static fromJSONObject(e,t){let n=new C(e.name,{disableChangesApi:e.disableChangesApi,disableDeltaChangesApi:e.disableDeltaChangesApi,unindexedSortComparator:e.unindexedSortComparator,defaultLokiOperatorPackage:e.defaultLokiOperatorPackage});if(n._transactional=e.transactional,n._asyncListeners=e.asyncListeners,n._disableMeta=e.disableMeta,n._disableChangesApi=e.disableChangesApi,n._cloneObjects=e.cloneObjects,n._cloneMethod=e.cloneMethod||"deep",n._changes=e.changes,n._nestedProperties=e._nestedProperties,n._rangedIndexes=e.rangedIndexes||{},n._dirty=!(!t||!0!==t.retainDirtyFlags)&&e._dirty,t&&void 0!==t[e.name]){let r=function(e){const n=t[e.name];if(n.proto){const e=n.inflate||((e,t)=>{for(let n in e)t[n]=e[n]});return data=>{const t=new n.proto;return e(data,t),t}}return n.inflate}(e);for(let t=0;t<e._data.length;t++)n._data[t]=n._defineNestedProperties(r(e._data[t])),n._lokimap[n._data[t].$loki]=n._data[t]}else for(let t=0;t<e._data.length;t++)n._data[t]=n._defineNestedProperties(e._data[t]),n._lokimap[n._data[t].$loki]=n._data[t];n._maxId=void 0===e.maxId?0:e.maxId,n._idIndex=e.idIndex,void 0!==e.transforms&&(n._transforms=e.transforms);for(let t in e.rangedIndexes){let r=e.rangedIndexes[t],o=(0,x.a[r.indexTypeName])(t,_.a[r.comparatorName]);o.restore(r.index),n._rangedIndexes[t].index=o}if(n._ensureId(),void 0!==e.uniqueNames)for(let t=0;t<e.uniqueNames.length;t++)n.ensureUniqueIndex(e.uniqueNames[t]);if(void 0!==e._dynamicViews)for(let t=0;t<e._dynamicViews.length;t++)n._dynamicViews.push(y.fromJSONObject(n,e._dynamicViews[t]));return e._fullTextSearch&&(n._fullTextSearch=S.a.FullTextSearch.fromJSONObject(e._fullTextSearch,t.fullTextSearch)),n}addTransform(e,t){if(void 0!==this._transforms[e])throw new Error("a transform by that name already exists");this._transforms[e]=t}getTransform(e){return this._transforms[e]}setTransform(e,t){this._transforms[e]=t}removeTransform(e){delete this._transforms[e]}setTTL(e,t){e<0?clearInterval(this._ttl.daemon):(this._ttl.age=e,this._ttl.ttlInterval=t,this._ttl.daemon=setInterval((()=>{const e=Date.now();this.chain().where((t=>{const n=t.meta.updated||t.meta.created,r=e-n;return this._ttl.age<r})).remove()}),t))}_prepareFullDocIndex(){const e=new Array(this._data.length);for(let i=0;i<e.length;i++)e[i]=i;return e}ensureIndex(e,t,n){this.ensureRangedIndex(e,t,n)}ensureRangedIndex(e,t,n){if(t=t||"avl",n=n||"loki",!x.a[t])throw new Error("ensureRangedIndex: Unknown range index type");if(!_.a[n])throw new Error("ensureRangedIndex: Unknown comparator");let r=x.a[t],o=_.a[n];this._rangedIndexes[e]={index:r(e,o),indexTypeName:t,comparatorName:n};let l=this._rangedIndexes[e].index;for(let i=0;i<this._data.length;i++)l.insert(this._data[i].$loki,this._data[i][e])}ensureUniqueIndex(e){let t=new o(e);this._constraints.unique[e]=t;for(let i=0;i<this._data.length;i++)t.set(this._data[i].$loki,this._data[i][e]);return t}count(e){return e?this.chain().find(e)._filteredRows.length:this._data.length}_ensureId(){this._idIndex=[];for(let i=0;i<this._data.length;i++)this._idIndex.push(this._data[i].$loki)}addDynamicView(e,t){const n=new y(this,e,t);return this._dynamicViews.push(n),n}removeDynamicView(e){for(let t=0;t<this._dynamicViews.length;t++)this._dynamicViews[t].name===e&&this._dynamicViews.splice(t,1)}getDynamicView(e){for(let t=0;t<this._dynamicViews.length;t++)if(this._dynamicViews[t].name===e)return this._dynamicViews[t];return null}findAndUpdate(e,t){this.chain().find(e).update(t)}findAndRemove(e){this.chain().find(e).remove()}insert(e){if(!Array.isArray(e))return this.insertOne(e);let t,n=[];this.emit("pre-insert",e);for(let i=0;i<e.length;i++){if(t=this.insertOne(e[i],!0),!t)return;n.push(t)}return this.emit("insert",n),n=this._cloneObjects?c(n,this._cloneMethod):n,1===n.length?n[0]:n}insertOne(e,t=!1){let n,r=null;if("object"!=typeof e?r=new TypeError("Document needs to be an object"):null===e&&(r=new TypeError("Object cannot be null")),null!==r)throw this.emit("error",r),r;const o=this._defineNestedProperties(this._cloneObjects?c(e,this._cloneMethod):e);if(this._disableMeta||void 0!==o.meta||(o.meta={version:0,revision:0,created:0}),t||this.emit("pre-insert",o),this._add(o))return this._disableChangesApi?this._insertMeta(o):this._insertMetaWithChange(o),n=this._cloneObjects?c(o,this._cloneMethod):o,t||this.emit("insert",n),n}_defineNestedProperties(data){for(let i=0;i<this._nestedProperties.length;i++){const e=this._nestedProperties[i].name,path=this._nestedProperties[i].path;Object.defineProperty(data,e,{get(){const e=[];return I(this,path,e)?e:e[0]},set(e){path.slice(0,path.length-1).reduce(((e,t)=>e&&e[t]?e[t]:null),this)[path[path.length-1]]=e},enumerable:!1,configurable:!0})}return data}clear({removeIndices:e=!1}={}){if(this._data=[],this._idIndex=[],this._cached=null,this._maxId=0,this._dynamicViews=[],this._dirty=!0,!0===e)this._rangedIndexes={},this._constraints={unique:{}};else{for(let e in this._rangedIndexes)this.ensureRangedIndex(e,this._rangedIndexes[e].indexTypeName,this._rangedIndexes[e].comparatorName);const e=Object.keys(this._constraints.unique);for(let i=0;i<e.length;i++)this._constraints.unique[e[i]].clear()}null!==this._fullTextSearch&&this._fullTextSearch.clear()}update(e){if(Array.isArray(e))for(let i=0;i<e.length;i++)this.update(e[i]);else{if(void 0===e.$loki)throw new Error("Trying to update unsynced document. Please save the document first by using insert() or addMany()");try{this.startTransaction();const t=this.get(e.$loki,!0);if(!t)throw new Error("Trying to update a document not in collection.");let n=t[0],r=t[1],o=this._defineNestedProperties(this._cloneObjects||!this._disableDeltaChangesApi?c(e,this._cloneMethod):e);this.emit("pre-update",e),Object.keys(this._constraints.unique).forEach((e=>{this._constraints.unique[e].update(o.$loki,o[e])})),this._data[r]=o,this._lokimap[e.$loki]=o;for(let e=0;e<this._dynamicViews.length;e++)this._dynamicViews[e]._evaluateDocument(r,!1);for(let t in this._rangedIndexes)this._rangedIndexes[t].index.update(e.$loki,e[t]);this._idIndex[r]=o.$loki,null!==this._fullTextSearch&&this._fullTextSearch.updateDocument(e,r),this.commit(),this._dirty=!0,this._disableChangesApi?this._updateMeta(o):this._updateMetaWithChange(o,n);let l=o;this._cloneObjects&&(l=c(o,this._cloneMethod)),this.emit("update",l,n)}catch(e){throw this.rollback(),this.emit("error",e),e}}}_add(e){if("object"!=typeof e)throw new TypeError("Object being added needs to be an object");if(void 0!==e.$loki)throw new Error("Document is already in collection, please use update()");try{this.startTransaction(),this._maxId++,isNaN(this._maxId)&&(this._maxId=this._data[this._data.length-1].$loki+1);const t=e;t.$loki=this._maxId,this._disableMeta||(t.meta.version=0);const n=this._constraints.unique;for(const e in n)void 0!==n[e]&&n[e].set(t.$loki,t[e]);this._idIndex.push(t.$loki),this._lokimap[t.$loki]=t,this._data.push(t);const r=this._data.length-1,o=this._dynamicViews.length;for(let i=0;i<o;i++)this._dynamicViews[i]._evaluateDocument(r,!0);for(let n in this._rangedIndexes)this._serializableIndexes&&t[n]instanceof Date&&(t[n]=t[n].getTime()),this._rangedIndexes[n].index.insert(e.$loki,e[n]);return null!==this._fullTextSearch&&this._fullTextSearch.addDocument(t,r),this.commit(),this._dirty=!0,this._cloneObjects?c(t,this._cloneMethod):t}catch(e){throw this.rollback(),this.emit("error",e),e}}updateWhere(e,t){const n=this.where(e);try{for(let i=0;i<n.length;i++)this.update(t(n[i]))}catch(e){throw this.rollback(),e}}removeWhere(e){this.remove(this._data.filter(e))}removeDataOnly(){this.remove(this._data.slice())}remove(e){if("number"==typeof e&&(e=this.get(e)),Array.isArray(e)){let t=0;const n=e.length;for(;t<n;t++)this.remove(e[t])}else{if(void 0===e.$loki)throw new Error("Object is not a document stored in the collection");try{this.startTransaction();const t=this.get(e.$loki,!0),n=t[1];let r="number"==typeof e?this.get(e):e;Object.keys(this._constraints.unique).forEach((e=>{e in r&&this._constraints.unique[e].remove(r.$loki)}));for(let e=0;e<this._dynamicViews.length;e++)this._dynamicViews[e]._removeDocument(n);this._data.splice(n,1),this._idIndex.splice(n,1),delete this._lokimap[e.$loki];for(let t in this._rangedIndexes)this._rangedIndexes[t].index.remove(e.$loki);null!==this._fullTextSearch&&this._fullTextSearch.removeDocument(e,n),this.commit(),this._dirty=!0,this._disableChangesApi||this._createChange(this.name,"R",t[0]),this.emit("delete",t[0]),delete e.$loki,delete e.meta}catch(e){throw this.rollback(),this.emit("error",e),e}}}getChanges(){return this._changes}setChangesApi(e,t=!0){this._disableChangesApi=e,this._disableDeltaChangesApi=!!e||t}flushChanges(){this._changes=[]}_getObjectDelta(e,t){const n=null!==t&&"object"==typeof t?Object.keys(t):null;if(n&&n.length&&["string","boolean","number"].indexOf(typeof t)<0){const r={};for(let i=0;i<n.length;i++){const o=n[i];if(t.hasOwnProperty(o))if(e.hasOwnProperty(o)&&void 0===this._constraints.unique[o]&&"$loki"!==o&&"meta"!==o){const n=this._getObjectDelta(e[o],t[o]);void 0!==n&&n!=={}&&(r[o]=n)}else r[o]=t[o]}return 0===Object.keys(r).length?void 0:r}return e===t?void 0:t}_getChangeDelta(e,t){return t?this._getObjectDelta(t,e):JSON.parse(JSON.stringify(e))}_createChange(e,t,n,r){this._changes.push({name:e,operation:t,obj:"U"!==t||this._disableDeltaChangesApi?JSON.parse(JSON.stringify(n)):this._getChangeDelta(n,r)})}_createInsertChange(e){this._createChange(this.name,"I",e)}_createUpdateChange(e,t){this._createChange(this.name,"U",e,t)}_insertMetaWithChange(e){this._insertMeta(e),this._createInsertChange(e)}_updateMetaWithChange(e,t){this._updateMeta(e),this._createUpdateChange(e,t)}_insertMeta(e){this._disableMeta||(e.meta||(e.meta={version:0,revision:0,created:0}),e.meta.created=(new Date).getTime(),e.meta.revision=0)}_updateMeta(e){this._disableMeta||(e.meta.updated=(new Date).getTime(),e.meta.revision+=1)}get(e,t=!1){if(!t){let t=this._lokimap[e];return void 0===t?null:t}const data=this._idIndex;let n=data.length-1,r=0,o=r+n>>1;if(e="number"==typeof e?e:parseInt(e,10),isNaN(e))throw new TypeError("Passed id is not an integer");for(;data[r]<data[n];)o=r+n>>1,data[o]<e?r=o+1:n=o;return n===r&&data[r]===e?t?[this._data[r],r]:this._data[r]:null}by(e,t){let n=this._constraints.unique[e].get(t);return this._cloneObjects?c(this._lokimap[n],this._cloneMethod):this._lokimap[n]}findOne(e){e=e||{};const t=this.chain().find(e,!0).data();return Array.isArray(t)&&0===t.length?null:this._cloneObjects?c(t[0],this._cloneMethod):t[0]}chain(e,t){const n=new v(this);return void 0===e?n:n.transform(e,t)}find(e){return this.chain().find(e).data()}findOneUnindexed(e,t){let n,i=this._data.length;for(;i--;)if(this._data[i][e]===t)return n=this._data[i],n;return null}startTransaction(){if(this._transactional){let e={};for(let t in this._rangedIndexes)e[t].indexTypeName=this._rangedIndexes[t].indexTypeName,e[t].comparatorName=this._rangedIndexes[t].comparatorName,e[t].index=this._rangedIndexes[t].index.backup();this._cached={index:this._idIndex,data:c(this._data,this._cloneMethod),rangedIndexes:e};for(let e=0;e<this._dynamicViews.length;e++)this._dynamicViews[e].startTransaction()}}commit(){if(this._transactional){this._cached=null;for(let e=0;e<this._dynamicViews.length;e++)this._dynamicViews[e].commit()}}rollback(){if(this._transactional&&null!==this._cached){this._idIndex=this._cached.index,this._data=this._cached.data;for(let i=0;i<this._data.length;i++)this._data[i]=this._defineNestedProperties(this._data[i]);for(let e in this._cached.rangedIndexes){let t=this._cached.rangedIndexes[e],n=(0,x.a[t.indexTypeName])(e,_.a[t.comparatorName]);n.restore(t.index),this._rangedIndexes[e].index=n}for(let e=0;e<this._dynamicViews.length;e++)this._dynamicViews[e].rollback()}}where(e){return this.chain().where(e).data()}mapReduce(e,t){return t(this._data.map(e))}eqJoin(e,t,n,r,o){return new v(this).eqJoin(e,t,n,r,o)}getStage(e){return this._stages[e]||(this._stages[e]={}),this._stages[e]}stage(e,t){const n=JSON.parse(JSON.stringify(t));return this.getStage(e)[t.$loki]=n,n}commitStage(e,t){const n=this.getStage(e),r=(new Date).getTime();for(const e in n)this.update(n[e]),this._commitLog.push({timestamp:r,message:t,data:JSON.parse(JSON.stringify(n[e]))});this._stages[e]={}}extract(e){const t=[];for(let i=0;i<this._data.length;i++)t.push(this._data[i][e]);return t}min(e){return Math.min.apply(null,this.extractNumerical(e))}max(e){return Math.max.apply(null,this.extractNumerical(e))}minRecord(e){const t={index:0,value:0};if(0===this._data.length)return t.index=null,t.value=null,t;t.index=this._data[0].$loki,t.value=parseFloat(this._data[0][e]);for(let i=1;i<this._data.length;i++){const n=parseFloat(this._data[i][e]);t.value>n&&(t.value=n,t.index=this._data[i].$loki)}return t}maxRecord(e){const t={index:0,value:0};if(0===this._data.length)return t.index=null,t.value=null,t;t.index=this._data[0].$loki,t.value=parseFloat(this._data[0][e]);for(let i=1;i<this._data.length;i++){const n=parseFloat(this._data[i][e]);t.value<n&&(t.value=n,t.index=this._data[i].$loki)}return t}extractNumerical(e){return this.extract(e).map(parseFloat).filter(Number).filter((e=>!isNaN(e)))}avg(e){return k(this.extractNumerical(e))}stdDev(e){return function(e){const t=k(e),n=k(e.map((e=>{const n=e-t;return n*n})));return Math.sqrt(n)}(this.extractNumerical(e))}mode(e){const t={},data=this.extractNumerical(e);let n=data[0],r=-1/0;for(let i=0;i<data.length;i++){const e=data[i];t[e]?t[e]++:t[e]=1,t[e]>r&&(n=e,r=t[e])}return n}median(e){const t=this.extractNumerical(e);t.sort(((a,b)=>a-b));const n=Math.floor(t.length/2);return t.length%2?t[n]:(t[n-1]+t[n])/2}}},function(e,t,n){"use strict";class r{constructor(e,t){this.nodes={},this.apex=null,this.name=e,this.comparator=t}backup(){let e=new r(this.name,this.comparator);return e.nodes=JSON.parse(JSON.stringify(this.nodes)),e.apex=this.apex,e}restore(e){this.name=e.name,this.comparator=e.comparator,this.nodes=JSON.parse(JSON.stringify(e.nodes)),this.apex=e.apex}insert(e,t){if(e<=0)throw new Error("avl index ids are required to be numbers greater than zero");let n=this.nodes[e]={id:e,value:t,parent:null,balance:0,height:0,left:null,right:null,siblings:[]};this.apex?this.insertNode(this.nodes[this.apex],n):this.apex=e}insertNode(e,t){switch(this.comparator(t.value,e.value)){case 0:e.siblings.push(t.id),t.parent=e.id;break;case 1:e.right?(this.insertNode(this.nodes[e.right],t),this.updateBalance(e)):(e.right=t.id,t.parent=e.id,this.updateBalance(e));break;case-1:e.left?(this.insertNode(this.nodes[e.left],t),this.updateBalance(e)):(e.left=t.id,t.parent=e.id,this.updateBalance(e));break;default:throw new Error("Invalid comparator result")}if(e.balance<-1){if(null===e.left)throw new Error("insertNode.balance() : left child should not be null");this.nodes[e.left].balance<=0?this.leftLeftCase(e):this.leftRightCase(e)}if(e.balance>1){if(null===e.right)throw new Error("insertNode.balance() : right child should not be null");this.nodes[e.right].balance>=0?this.rightRightCase(e):this.rightLeftCase(e)}return e.height}updateBalance(e){let t=e.left?this.nodes[e.left].height:-1,hr=e.right?this.nodes[e.right].height:-1;e.height=t>hr?1+t:1+hr,e.balance=hr-t}leftLeftCase(e){return this.rotateRight(e)}leftRightCase(e){if(!e.left)throw new Error("leftRightCase: left child not set");return e.left=this.rotateLeft(this.nodes[e.left]).id,this.rotateRight(e)}rightRightCase(e){return this.rotateLeft(e)}rightLeftCase(e){if(!e.right)throw new Error("rightLeftCase: right child not set");return e.right=this.rotateRight(this.nodes[e.right]).id,this.rotateLeft(e)}rotateLeft(e){if(!e.right)throw new Error("rotateLeft: right child was unavailable.");let t=e.parent?this.nodes[e.parent]:null,n=this.nodes[e.right];if(e.right=n.left,e.right&&(this.nodes[e.right].parent=e.id),n.left=e.id,n.parent=e.parent,e.parent=n.id,t)if(t.left===e.id)t.left=n.id;else{if(t.right!==e.id)throw new Error("rotateLeft() : attempt to remap parent back to child failed... not found");t.right=n.id}else{if(this.apex!==e.id)throw new Error("rightRotate expecting parentless node to be apex");this.apex=n.id}return this.updateBalance(e),this.updateBalance(n),n}rotateRight(e){if(!e.left)throw new Error("rotateRight : left child unavailable");let t=e.parent?this.nodes[e.parent]:null,n=this.nodes[e.left];if(e.left=n.right,n.right&&(this.nodes[n.right].parent=e.id),n.right=e.id,n.parent=e.parent,e.parent=n.id,t)t.left===e.id?t.left=n.id:t.right=n.id;else{if(this.apex!==e.id)throw new Error("rightRotate expecting parentless node to be apex");this.apex=n.id}return this.updateBalance(e),this.updateBalance(n),n}getValuesAsTree(e){return null===this.apex?null:{id:(e=e||this.nodes[this.apex]).id,val:e.value,siblings:e.siblings,balance:e.balance,height:e.height,left:e.left?this.getValuesAsTree(this.nodes[e.left]):null,right:e.right?this.getValuesAsTree(this.nodes[e.right]):null}}update(e,t){let n=this.nodes[e];0!==this.comparator(n.value,t)&&(this.remove(e),this.insert(e,t))}remove(e){if(!this.apex)throw new Error("remove() : attempting remove when tree has no apex");this.removeNode(this.nodes[this.apex],e)}removeNode(e,t){if(!this.nodes[t])throw new Error("removeNode: attempting to remove a node which is not in hashmap");let n=this.nodes[t].value;switch(this.comparator(n,e.value)){case 0:if(e.siblings.length>0){if(e.id===t){let n=e.siblings.shift(),r=this.nodes[n];r.parent=e.parent,this.updateChildLink(e.parent,t,n),e.left&&(this.nodes[e.left].parent=n),e.right&&(this.nodes[e.right].parent=n),r.left=e.left,r.right=e.right,r.siblings=e.siblings,r.height=e.height,r.balance=e.balance,this.apex===t&&(this.apex=n);for(let e of r.siblings)this.nodes[e].parent=n;return void delete this.nodes[t]}{let n=e.siblings.indexOf(t);if(-1===n)throw new Error("Unable to remove sibling from parented sibling");return e.siblings.splice(n,1),void delete this.nodes[t]}}return e.left||e.right?e.left&&e.right?void this.promoteSuccessor(e):(e.left&&(this.promoteChild(e,this.nodes[e.left]),this.apex===t&&(this.apex=e.left)),void(e.right&&(this.promoteChild(e,this.nodes[e.right]),this.apex===t&&(this.apex=e.right)))):(this.updateChildLink(e.parent,e.id,null),delete this.nodes[t],void(t===this.apex&&(this.apex=null)));case 1:if(!e.right)throw new Error("removeNode: Unable to find value in tree");this.removeNode(this.nodes[e.right],t);break;case-1:if(!e.left)throw new Error("removeNode: Unable to find value in tree");this.removeNode(this.nodes[e.left],t)}if(this.updateBalance(e),e.balance<-1){if(null===e.left)throw new Error("insertNode.balance() : left child should not be null");this.nodes[e.left].balance<=0?this.leftLeftCase(e):this.leftRightCase(e)}if(e.balance>1){if(null===e.right)throw new Error("insertNode.balance() : right child should not be null");this.nodes[e.right].balance>=0?this.rightRightCase(e):this.rightLeftCase(e)}}updateChildLink(e,t,n){if(null===e)return;let r=this.nodes[e];r.left===t?r.left=n:r.right===t&&(r.right=n)}promoteChild(e,t){let n=e.parent;if(n){let r=this.nodes[n];r.left===e.id?r.left=t.id:r.right===e.id&&(r.right=t.id)}t.parent=n,delete this.nodes[e.id]}promoteSuccessor(e){let t=e.id;if(!e.right||!e.left)throw new Error("promoteSuccessor() : node to replace does not have two children");let n,r,o,l=null;if(e.balance<0){let t=this.nodes[e.left];l=this.findGreaterLeaf(t),n=l.id,r=l.value,o=l.siblings,l.siblings=[],this.removeNode(t,n)}else{let t=this.nodes[e.right];l=this.findLesserLeaf(t),n=l.id,r=l.value,o=l.siblings,l.siblings=[],this.removeNode(t,n)}if(e.parent){let p=this.nodes[e.parent];p.left===t&&(p.left=n),p.right===t&&(p.right=n)}e.left&&(this.nodes[e.left].parent=n),e.right&&(this.nodes[e.right].parent=n),e.id=n,e.value=r,e.siblings=o,this.nodes[n]=e,delete this.nodes[t],this.apex===t&&(this.apex=n),this.updateBalance(e)}findGreaterLeaf(e){if(!e.right)return e;let t=this.findGreaterLeaf(this.nodes[e.right]);return t||e}findLesserLeaf(e){if(!e.left)return e;let t=this.findLesserLeaf(this.nodes[e.left]);return t||e}rangeRequest(e){if(!this.apex)return[];if(!e)return this.collateIds(this.nodes[this.apex]);if("$eq"===e.op){let t=this.locate(this.nodes[this.apex],e.val);return null===t?[]:t.siblings.length?[t.id,...t.siblings]:[t.id]}return this.collateRequest(this.nodes[this.apex],e)}collateRequest(e,t){let n=[];if("$eq"===t.op)throw new Error("collateRequest does not support $eq range request");let r=this.comparator(e.value,t.val),o=0;if("$between"===t.op){if(null===t.high||void 0===t.high)throw new Error("collateRequest: $between request missing high range value");o=this.comparator(e.value,t.high)}if(e.left)switch(t.op){case"$lt":case"$lte":n=this.collateRequest(this.nodes[e.left],t);break;case"$gt":case"$gte":case"$between":1===r&&(n=this.collateRequest(this.nodes[e.left],t))}if(t)switch(t.op){case"$lt":-1===r&&(n.push(e.id),n.push(...e.siblings));break;case"$lte":-1!==r&&0!==r||(n.push(e.id),n.push(...e.siblings));break;case"$gt":1===r&&(n.push(e.id),n.push(...e.siblings));break;case"$gte":1!==r&&0!==r||(n.push(e.id),n.push(...e.siblings));break;case"$between":r>=0&&o<=0&&(n.push(e.id),n.push(...e.siblings))}else n.push(e.id),n.push(...e.siblings);if(e.right)if(t)switch(t.op){case"$lt":case"$lte":-1===r&&n.push(...this.collateRequest(this.nodes[e.right],t));break;case"$gt":case"$gte":n.push(...this.collateRequest(this.nodes[e.right],t));break;case"$between":-1===o&&n.push(...this.collateRequest(this.nodes[e.right],t))}else n.push(...this.collateRequest(this.nodes[e.right],t));return n}collateIds(e){let t=[];return e?(e.left&&(t=this.collateIds(this.nodes[e.left])),t.push(e.id),t.push(...e.siblings),e.right&&t.push(...this.collateIds(this.nodes[e.right])),t):[]}locate(e,t){for(;null!==e;)switch(this.comparator(t,e.value)){case 0:return e;case 1:if(!e.right)return null;e=this.nodes[e.right];break;case-1:if(!e.left)return null;e=this.nodes[e.left]}return null}validateIndex(){if(!this.apex)return 0===Object.keys(this.nodes).length;if(null!==this.nodes[this.apex].parent)return!1;let e=this.collateIds(this.nodes[this.apex]),t=Object.keys(this.nodes).length;if(e.length!==t)return!1;if(1===e.length)return null===this.nodes[e[0]].parent&&null===this.nodes[e[0]].left&&null===this.nodes[e[0]].right;for(let i=0;i<e.length-1;i++)if(1===this.comparator(this.nodes[e[i]].value,this.nodes[e[i+1]].value))return!1;return this.validateNode(this.nodes[this.apex])}validateNode(e){if(-1!==[e.parent,e.left,e.right].indexOf(e.id))return!1;let t=e.left?this.nodes[e.left].height:-1,hr=e.right?this.nodes[e.right].height:-1,n=1+Math.max(t,hr);if(e.height!==n)return!1;if(e.balance!==hr-t)return!1;if(e.siblings.length>0)for(let t of e.siblings)if(this.nodes[t].parent!==e.id)return!1;if(e.left){if(this.nodes[e.left].parent!==e.id)return!1;if(!this.validateNode(this.nodes[e.left]))return!1}if(e.right){if(this.nodes[e.right].parent!==e.id)return!1;if(!this.validateNode(this.nodes[e.right]))return!1}return!0}}n.d(t,"a",(function(){return o}));let o={avl:(e,t)=>new r(e,t)}},function(e,t,n){"use strict";n.d(t,"a",(function(){return r}));class r{constructor(){this._events={},this._asyncListeners=!1}on(e,t){let n;return Array.isArray(e)?(e.forEach((e=>{this.on(e,t)})),t):(n=this._events[e],n||(n=this._events[e]=[]),n.push(t),t)}emit(e,...data){e&&this._events[e]&&this._events[e].forEach((e=>{this._asyncListeners?setTimeout((()=>{e(...data)}),1):e(...data)}))}addListener(e,t){return this.on(e,t)}removeListener(e,t){if(Array.isArray(e)&&e.forEach((e=>{this.removeListener(e,t)})),this._events[e]){const n=this._events[e];n.splice(n.indexOf(t),1)}}}},function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return _}));var r=n(5),o=n(3),l=n(1),h=n(0),d=n(4),c=n(2);function f(){if(void 0!==e&&(e.android||e.NSObject))return"NATIVESCRIPT";if(void 0!==e&&"[object process]"==={}.toString.call(e.process))return e.window,"NODEJS";if(void 0!==document)return-1===document.URL.indexOf("http://")&&-1===document.URL.indexOf("https://")?"CORDOVA":"BROWSER";if(void 0!==window&&"[object Window]"==={}.toString.call(window))return"BROWSER";throw SyntaxError("Unknown environment...")}class _ extends r.a{constructor(e="loki.db",t={}){if(super(),this.databaseVersion=1.5,this.engineVersion=1.5,this._persistenceMethod=null,this._persistenceAdapter=null,this._throttledSaves=!0,this._throttledSaveRunning=null,this._throttledSavePending=null,this._autosave=!1,this._autosaveInterval=5e3,this._autosaveRunning=!1,this._autosaveHandler=Promise.resolve(),this.filename=e,this._collections=[],({serializationMethod:this._serializationMethod="normal",destructureDelimiter:this._destructureDelimiter="$<\n",env:this._env=f()}=t),this._events={init:[],loaded:[],flushChanges:[],close:[],changes:[],warning:[]},t.comparatorMap)for(let e in t.comparatorMap)h.a[e]=t.comparatorMap[e];if(t.rangedIndexFactoryMap)for(let e in t.rangedIndexFactoryMap)d.a[e]=t.rangedIndexFactoryMap[e];if(t.lokiOperatorPackageMap)for(let e in t.lokiOperatorPackageMap)c.a[e]=t.lokiOperatorPackageMap[e];this.on("init",this.clearChanges)}initializePersistence(e={}){let t=this._autosaveDisable();({autosave:this._autosave=!1,autosaveInterval:this._autosaveInterval=5e3,persistenceMethod:this._persistenceMethod,throttledSaves:this._throttledSaves=!0}=e);const n={NODEJS:["fs-storage"],BROWSER:["local-storage","indexed-storage"],CORDOVA:["local-storage","indexed-storage"],MEMORY:["memory-storage"]},r={"fs-storage":l.a.FSStorage,"local-storage":l.a.LocalStorage,"indexed-storage":l.a.IndexedStorage,"memory-storage":l.a.MemoryStorage};if(void 0!==this._persistenceMethod){if("function"!=typeof r[this._persistenceMethod])throw Error("Unknown persistence method.");this._persistenceAdapter=new r[this._persistenceMethod]}if(void 0!==e.adapter&&(this._persistenceMethod="adapter",this._persistenceAdapter=e.adapter),null===this._persistenceAdapter){let e=n[this._env];if(e)for(let i=0;i<e.length;i++)if(r[e[i]]){this._persistenceMethod=e[i],this._persistenceAdapter=new r[e[i]];break}}return e.autoload&&(t=t.then((()=>this._loadDatabase(e.inflate,!0)))),t.then((()=>{this._autosaveEnable()}))}copy(e={}){const t=new _(this.filename,{env:this._env});if(t.loadJSONObject(this,{retainDirtyFlags:!0}),e.removeNonSerializable){t._persistenceAdapter=null;for(let e=0;e<t._collections.length;e++)t._collections[e]._constraints=null,t._collections[e]._ttl=null}return t}addCollection(e,t={}){for(let i=0;i<this._collections.length;i++)if(this._collections[i].name===e)return this._collections[i];const n=new o.a(e,t);return this._collections.push(n),n}loadCollection(e){if(!e.name)throw new Error("Collection must have a name property to be loaded");this._collections.push(e)}getCollection(e){for(let i=0;i<this._collections.length;i++)if(this._collections[i].name===e)return this._collections[i];return this.emit("warning","collection "+e+" not found"),null}renameCollection(e,t){const n=this.getCollection(e);return n&&(n.name=t),n}listCollections(){const e=[];for(let i=0;i<this._collections.length;i++)e.push({name:this._collections[i].name,count:this._collections[i].count()});return e}removeCollection(e){for(let i=0;i<this._collections.length;i++)if(this._collections[i].name===e){const t=new o.a(e,{}),n=this._collections[i];for(const e in n)void 0!==n[e]&&void 0!==t[e]&&(n[e]=t[e]);return void this._collections.splice(i,1)}}serialize(e={}){switch(void 0===e.serializationMethod&&(e.serializationMethod=this._serializationMethod),e.serializationMethod){case"normal":return JSON.stringify(this);case"pretty":return JSON.stringify(this,null,2);case"destructured":return this.serializeDestructured();default:return JSON.stringify(this)}}toJSON(){return{_env:this._env,_serializationMethod:this._serializationMethod,_autosave:this._autosave,_autosaveInterval:this._autosaveInterval,_collections:this._collections,databaseVersion:this.databaseVersion,engineVersion:this.engineVersion,filename:this.filename,_persistenceAdapter:this._persistenceAdapter,_persistenceMethod:this._persistenceMethod,_throttledSaves:this._throttledSaves}}serializeDestructured(e={}){if(void 0===e.partitioned&&(e.partitioned=!1),void 0===e.delimited&&(e.delimited=!0),void 0===e.delimiter&&(e.delimiter=this._destructureDelimiter),!0===e.partitioned&&void 0!==e.partition&&e.partition>=0)return this.serializeCollection({delimited:e.delimited,delimiter:e.delimiter,collectionIndex:e.partition});let t=new _(this.filename);t.loadJSONObject(this);for(let e=0;e<t._collections.length;e++)t._collections[e]._data=[];if(!0===e.partitioned&&-1===e.partition)return t.serialize({serializationMethod:"normal"});const n=[];n.push(t.serialize({serializationMethod:"normal"})),t=null;for(let t=0;t<this._collections.length;t++){let r=this.serializeCollection({delimited:e.delimited,delimiter:e.delimiter,collectionIndex:t});if(!1===e.partitioned&&!1===e.delimited){if(!Array.isArray(r))throw new Error("a nondelimited, non partitioned collection serialization did not return an expected array");for(let e=0;e<r.length;e++)n.push(r[e]),r[e]=null;n.push("")}else n.push(r)}return e.partitioned?(e.delimited,n):e.delimited?(n.push(""),n.join(e.delimiter)):(n.push(""),n)}serializeCollection(e={}){if(void 0===e.delimited&&(e.delimited=!0),void 0===e.collectionIndex)throw new Error("serializeCollection called without 'collectionIndex' option");const t=this._collections[e.collectionIndex].count();let n=[];for(let r=0;r<t;r++)n.push(JSON.stringify(this._collections[e.collectionIndex]._data[r]));return e.delimited?(n.push(""),n.join(e.delimiter)):n}deserializeDestructured(e,t={}){if(void 0===t.partitioned&&(t.partitioned=!1),void 0===t.delimited&&(t.delimited=!0),void 0===t.delimiter&&(t.delimiter=this._destructureDelimiter),t.partitioned){if(void 0!==t.partition)return-1===t.partition?JSON.parse(e[0]):this.deserializeCollection(e[t.partition+1],t);const n=JSON.parse(e[0]),r=n._collections.length;for(let o=0;o<r;o++)n._collections[o]._data=this.deserializeCollection(e[o+1],t);return n}let n=[];if(t.delimited){if(n=e.split(t.delimiter),e=null,0===n.length)return null}else n=e;const r=JSON.parse(n[0]),o=r._collections.length;n[0]=null;let l=0,h=1,d=!1;for(;!d;)""===n[h]?++l>o&&(d=!0):r._collections[l]._data.push(JSON.parse(n[h])),n[h++]=null;return r}deserializeCollection(e,t={}){void 0===t.partitioned&&(t.partitioned=!1),void 0===t.delimited&&(t.delimited=!0),void 0===t.delimiter&&(t.delimiter=this._destructureDelimiter);let n=[];t.delimited?(n=e.split(t.delimiter),n.pop()):n=e;for(let e=0;e<n.length;e++)n[e]=JSON.parse(n[e]);return n}loadJSON(e,t){let n;if(0===e.length)n={};else switch(this._serializationMethod){case"normal":case"pretty":n=JSON.parse(e);break;case"destructured":n=this.deserializeDestructured(e);break;default:n=JSON.parse(e)}this.loadJSONObject(n,t)}loadJSONObject(e,t={}){const n=e._collections?e._collections.length:0;this.filename=e.filename,this._collections=[];for(let i=0;i<n;++i)this._collections.push(o.a.fromJSONObject(e._collections[i],t))}close(){return this._autosave?this._autosaveDisable().then((()=>this._autosaveDirty()?this.saveDatabase():Promise.resolve())):Promise.resolve().then((()=>{this.emit("close")}))}generateChangesNotification(e){let t=[];const n=e||this._collections.map((e=>e.name));return this._collections.forEach((e=>{-1!==n.indexOf(e.name)&&(t=t.concat(e.getChanges()))})),t}serializeChanges(e){return JSON.stringify(this.generateChangesNotification(e))}clearChanges(){this._collections.forEach((e=>{e.flushChanges&&e.flushChanges()}))}throttledSaveDrain(e={}){const t=(new Date).getTime();return this._throttledSaves?(void 0===e.recursiveWait&&(e.recursiveWait=!0),void 0===e.recursiveWaitLimit&&(e.recursiveWaitLimit=!1),void 0===e.recursiveWaitLimitDuration&&(e.recursiveWaitLimitDuration=2e3),void 0===e.started&&(e.started=new Date),this._throttledSaves&&null!==this._throttledSaveRunning?e.recursiveWait?Promise.resolve(Promise.all([this._throttledSaveRunning,this._throttledSavePending])).then((()=>null!==this._throttledSaveRunning||null!==this._throttledSavePending?e.recursiveWaitLimit&&t-e.started.getTime()>e.recursiveWaitLimitDuration?Promise.reject({}):this.throttledSaveDrain(e):Promise.resolve())):Promise.resolve(this._throttledSaveRunning):Promise.resolve()):Promise.resolve()}_loadDatabase(e={},t=!1){return null===this._persistenceAdapter?Promise.reject(new Error("persistenceAdapter not configured")):Promise.resolve(this._persistenceAdapter.loadDatabase(this.filename)).then((t=>{if("string"==typeof t)this.loadJSON(t,e),this.emit("load",this);else{if("object"!=typeof t||null===t||t instanceof Error)throw t;this.loadJSONObject(t,e),this.emit("load",this)}})).catch((e=>{if(e instanceof Error)throw e;if(null!=e)throw new TypeError("The persistence adapter did not load a serialized DB string or object.");if(!t)throw new Error("Database not found.")}))}loadDatabase(e={}){return this._throttledSaves?this.throttledSaveDrain(e).then((()=>(this._throttledSaveRunning=this._loadDatabase(e).then((()=>{this._throttledSaveRunning=null})),this._throttledSaveRunning)),(()=>{throw new Error("Unable to pause save throttling long enough to read database")})):this._loadDatabase(e)}_saveDatabase(){return null===this._persistenceAdapter?Promise.reject(new Error("persistenceAdapter not configured")):"reference"===this._persistenceAdapter.mode&&"function"==typeof this._persistenceAdapter.exportDatabase?Promise.resolve(this._persistenceAdapter.exportDatabase(this.filename,this.copy({removeNonSerializable:!0}))).then((()=>{this._autosaveClearFlags(),this.emit("save")})):(this._autosaveClearFlags(),Promise.resolve(this._persistenceAdapter.saveDatabase(this.filename,this.serialize())).then((()=>{this.emit("save")})))}saveDatabase(){return this._throttledSaves?(null!==this._throttledSaveRunning&&null===this._throttledSavePending&&(this._throttledSavePending=Promise.resolve(this._throttledSaveRunning).then((()=>(this._throttledSaveRunning=null,this._throttledSavePending=null,this.saveDatabase())))),null!==this._throttledSavePending?this._throttledSavePending:(this._throttledSaveRunning=this._saveDatabase().then((()=>{this._throttledSaveRunning=null})),this._throttledSaveRunning)):this._saveDatabase()}deleteDatabase(){return null===this._persistenceAdapter?Promise.reject(new Error("persistenceAdapter not configured")):Promise.resolve(this._persistenceAdapter.deleteDatabase(this.filename))}_autosaveDirty(){for(let e=0;e<this._collections.length;e++)if(this._collections[e]._dirty)return!0;return!1}_autosaveClearFlags(){for(let e=0;e<this._collections.length;e++)this._collections[e]._dirty=!1}_autosaveEnable(){if(!this._autosave||this._autosaveRunning)return;this._autosaveRunning=!0;const e=setInterval((()=>{this._autosaveRunning?this._autosaveDirty()&&(this._autosaveHandler=this._autosaveHandler.then((()=>this.saveDatabase()))):clearInterval(e)}),this._autosaveInterval)}_autosaveDisable(){return this._autosaveRunning=!1,this._autosaveHandler}}}).call(this,n(7))},function(e,t){var g;g=function(){return this}();try{g=g||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(g=window)}e.exports=g},function(e,t,n){"use strict";n.r(t);var r=n(6);n.d(t,"Loki",(function(){return r.a}));var o=n(3);n.d(t,"Collection",(function(){return o.a})),r.a.Collection=o.a,t.default=r.a}])},e.exports=r()},258:function(e,t,n){var r;"undefined"!=typeof self&&self,r=function(){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(object,e){return Object.prototype.hasOwnProperty.call(object,e)},n.p="",n(n.s=1)}([function(e,t,n){"use strict";(function(e){function r(){let t;return function(e){t=e}(void 0!==e&&e||this),t}n.d(t,"a",(function(){return o}));const o=function(){const e=r(),t=Symbol.for("LOKI");return void 0===e[t]&&(e[t]={}),e[t]}()}).call(this,n(2))},function(e,t,n){"use strict";function r(e){return e.split(/[\s]+/)}function o(e){return e.toLowerCase()}function l(e){return e.toUpperCase()}function h(e,t){if(e.char_filter)for(let n=0;n<e.char_filter.length;n++)t=e.char_filter[n](t);const n=e.tokenizer(t);if(e.token_filter)for(let i=0;i<n.length;i++)for(let t=0;t<e.token_filter.length;t++)n[i]=e.token_filter[t](n[i],i,n);return n.filter((e=>e))}n.r(t);class d{constructor(){this.tokenizer=r,this.token_filter=[o]}}function c(e){const t=[];for(let i=0;i<e.length;){const n=e.charCodeAt(i++);if(n>=55296&&n<=56319){const r=e.charCodeAt(i++);t.push(65536+(n-55296<<10)|r-56320)}else t.push(n)}return t}class f{constructor(e={}){this.docCount=0,this.docStore=new Map,this.totalFieldLength=0,this.root=new Map,({store:this._store=!0,optimizeChanges:this._optimizeChanges=!0,analyzer:this.analyzer=new d}=e)}insert(e,t){if(this.docStore.has(t))throw Error("Field already added.");const n=h(this.analyzer,e);if(0==n.length)return void this.docStore.set(t,{fieldLength:0});this.totalFieldLength+=n.length,this.docCount+=1,this.docStore.set(t,{fieldLength:n.length});const r=[];this._optimizeChanges&&Object.defineProperties(this.docStore.get(t),{indexRef:{enumerable:!1,configurable:!0,writable:!0,value:r}});for(const e of new Set(n)){let o=0;for(let t=0;t<n.length;t++)n[t]===e&&++o;let l=this.root;for(const t of c(e)){let e=l.get(t);void 0===e&&(e=new Map,this._optimizeChanges&&(e.pa=l),l.set(t,e)),l=e}void 0===l.dc&&(l.dc=new Map,l.df=0),l.dc.set(t,o),l.df+=1,r.push(l)}}remove(e){if(!this.docStore.has(e))return;const t=this.docStore.get(e);if(this.docStore.delete(e),0!==t.fieldLength)if(this.docCount-=1,this.totalFieldLength-=t.fieldLength,this._optimizeChanges){const n=t.indexRef;for(let t=0;t<n.length;t++){let r=n[t];if(r.df-=1,r.dc.delete(e),0===r.df){if(delete r.df,delete r.dc,0!==r.size)continue;do{const e=r.pa;delete r.pa;for(const t of e.keys())if(e.get(t)===r){e.delete(t);break}r=e}while(void 0!==r.pa&&0===r.size&&void 0===r.df)}}}else this._remove(this.root,e)}static getTermIndex(e,t,n=0){if(n>=e.length)return null;for(let i=n;i<e.length;i++){let n=t.get(e[i]);if(void 0===n)return null;t=n}return t}static extendTermIndex(e,t=[],n=[]){void 0!==e.df&&n.push({index:e,term:t.slice()}),t.push(0);for(const r of e)t[t.length-1]=r[0],f.extendTermIndex(r[1],t,n);return t.pop(),n}toJSON(){return this._store?{_store:!0,_optimizeChanges:this._optimizeChanges,docCount:this.docCount,docStore:[...this.docStore],totalFieldLength:this.totalFieldLength,root:f._serializeIndex(this.root)}:{_store:!1,_optimizeChanges:this._optimizeChanges}}static fromJSONObject(e,t){const n=new f({store:e._store,optimizeChanges:e._optimizeChanges,analyzer:t});return e._store&&(n.docCount=e.docCount,n.docStore=new Map(e.docStore),n.totalFieldLength=e.totalFieldLength,n.root=f._deserializeIndex(e.root)),n._optimizeChanges&&n._regenerate(n.root,null),n}static _serializeIndex(e){const t={};if(void 0!==e.dc&&(t.d={df:e.df,dc:[...e.dc]}),0===e.size)return t;const n=[],r=[];for(const t of e)n.push(t[0]),r.push(f._serializeIndex(t[1]));return t.k=n,t.v=r,t}static _deserializeIndex(e){const t=new Map;if(void 0!==e.k)for(let i=0;i<e.k.length;i++)t.set(e.k[i],f._deserializeIndex(e.v[i]));return void 0!==e.d&&(t.df=e.d.df,t.dc=new Map(e.d.dc)),t}_regenerate(e,t){null!==t&&(e.pa=t);for(const t of e.values())this._regenerate(t,e);if(void 0!==e.dc)for(const t of e.dc.keys()){const n=this.docStore.get(t);void 0===n.indexRef&&Object.defineProperties(n,{indexRef:{enumerable:!1,configurable:!0,writable:!0,value:[]}}),n.indexRef.push(e)}}_remove(e,t){for(const n of e)this._remove(n[1],t)&&e.delete(n[0]);return void 0!==e.df&&e.dc.has(t)&&(e.df-=1,e.dc.delete(t),0===e.df&&(delete e.df,delete e.dc)),0===e.size&&void 0===e.dc}}class _{constructor(e){this._cache={},this._invIdxs=e}setDirty(){this._cache={}}score(e,t,n,r,o,l,h=0){if(null===n||void 0===n.dc)return;const d=this._idf(e,h||n.df);for(const[h,c]of n.dc)o.has(h)||o.set(h,[]),!0===r?o.get(h).push({tf:c,idf:d,boost:t,fieldName:e,term:l}):!1===r?o.set(h,[{boost:t}]):o.set(h,[{boost:0}])}scoreConstant(e,t,n){return n.has(t)||n.set(t,[]),n.get(t).push({boost:e}),n}finalScore(e,t){const n={},r=void 0!==e.bm25?e.bm25.k1:1.2,b=void 0!==e.bm25?e.bm25.b:.75,o=void 0!==e.explain&&e.explain;for(const[e,l]of t){let t=0,h=[];for(let i=0;i<l.length;i++){const n=l[i];let d=0;if(void 0!==n.tf){const t=n.tf,l=_._calculateFieldLength(this._invIdxs[n.fieldName].docStore.get(e).fieldLength),c=this._avgFieldLength(n.fieldName),f=t*(r+1)/(t+r*(1-b+b*(l/c)));d=n.idf*f*n.boost,o&&h.push({boost:n.boost,score:d,docID:e,fieldName:n.fieldName,index:String.fromCharCode(...n.term),idf:n.idf,tfNorm:f,tf:t,fieldLength:l,avgFieldLength:c})}else d=n.boost,o&&h.push({boost:n.boost,score:d});t+=d}n[e]=o?{score:t,explanation:h}:{score:t}}return n}static _calculateFieldLength(e){return e}_getCache(e){if(void 0===this._cache[e]){const t=this._invIdxs[e].totalFieldLength/this._invIdxs[e].docCount;this._cache[e]={idfs:{},avgFieldLength:t}}return this._cache[e]}_idf(e,t){const n=this._getCache(e);return void 0!==n.idfs[t]?n.idfs[t]:n.idfs[t]=Math.log(1+(this._invIdxs[e].docCount-t+.5)/(t+.5))}_avgFieldLength(e){return this._getCache(e).avgFieldLength}}class w{constructor(e){const t=e.getNumStates();this._points=e.getStartPoints(),this._accept=new Array(t),this._transitions=new Array(t*this._points.length);for(let n=0;n<t;n++){this._accept[n]=e.isAccept(n);for(let t=0;t<this._points.length;t++)this._transitions[n*this._points.length+t]=e.step(n,this._points[t])}this._classmap=new Array(256);for(let i=0,e=0;e<this._classmap.length;e++)i+1<this._points.length&&e===this._points[i+1]&&i++,this._classmap[e]=i}getCharClass(e){let a=0,b=this._points.length;for(;b-a>1;){const t=a+b>>>1;if(this._points[t]>e)b=t;else{if(!(this._points[t]<e))return t;a=t}}return a}step(e,t){return t>=this._classmap.length?this._transitions[e*this._points.length+this.getCharClass(t)]:this._transitions[e*this._points.length+this._classmap[t]]}isAccept(e){return this._accept[e]}}const m=1114111;function v(a,b){return a[0]<b[0]?-1:a[0]>b[0]?1:a[1]<b[1]?-1:a[1]>b[1]?1:a[2]<b[2]?-1:a[2]>b[2]?1:0}function y(a,b){return a[1]<b[1]?-1:a[1]>b[1]?1:a[2]<b[2]?-1:a[2]>b[2]?1:a[0]<b[0]?-1:a[0]>b[0]?1:0}class x{constructor(){this._stateTransitions=[],this._stateTransitions=[],this._accept=new Set,this._nextState=0,this._currState=-1,this._transitions={}}isAccept(e){return this._accept.has(e)}createState(){return this._nextState++}setAccept(e,t){t?this._accept.add(e):this._accept.delete(e)}finishState(){-1!==this._currState&&(this._finishCurrentState(),this._currState=-1)}_finishCurrentState(){this._stateTransitions.sort(v);let e=0,p=[-1,-1,-1];for(let i=0,t=this._stateTransitions.length;i<t;i++){let t=this._stateTransitions[i];p[0]===t[0]?t[1]<=p[2]+1?t[2]>p[2]&&(p[2]=t[2]):(-1!==p[0]&&(this._stateTransitions[e][0]=p[0],this._stateTransitions[e][1]=p[1],this._stateTransitions[e][2]=p[2],e++),p[1]=t[1],p[2]=t[2]):(-1!==p[0]&&(this._stateTransitions[e][0]=p[0],this._stateTransitions[e][1]=p[1],this._stateTransitions[e][2]=p[2],e++),p[0]=t[0],p[1]=t[1],p[2]=t[2])}-1!==p[0]&&(this._stateTransitions[e][0]=p[0],this._stateTransitions[e][1]=p[1],this._stateTransitions[e][2]=p[2],e++),this._transitions[this._currState]=this._stateTransitions.slice(0,e).sort(y),this._stateTransitions=[]}getStartPoints(){const e=new Set;e.add(0);const t=Object.keys(this._transitions);for(let i=0;i<t.length;i++){let n=this._transitions[t[i]];for(let t=0;t<n.length;t++){let r=n[t];e.add(r[1]),r[2]<m&&e.add(r[2]+1)}}return Array.from(e).sort(((a,b)=>a-b))}step(e,label){let t=this._transitions[e];if(t)for(let i=0;i<t.length;i++){let e=t[i];if(e[1]<=label&&label<=e[2])return e[0]}return-1}getNumStates(){return this._nextState}addTransition(source,e,t,n){this._currState!==source&&(-1!==this._currState&&this._finishCurrentState(),this._currState=source),this._stateTransitions.push([e,t,n])}}class S{constructor(e=0,t=0){this._low=e,this._high=t}shiftRight(e){return 0==(e&=63)?this:e<32?new S(this._low>>>e|this._high<<32-e,this._high>>e):new S(this._high>>e-32,this._high>=0?0:-1)}shiftLeft(e){return 0==(e&=63)?this:e<32?new S(this._low<<e,this._high<<e|this._low>>>32-e):new S(0,this._low<<e-32)}and(e){return new S(this._low&e._low,this._high&e._high)}toInt(){return this._low}}const k=[new S(1),new S(3),new S(7),new S(15),new S(31),new S(63),new S(127),new S(255),new S(511),new S(1023),new S(2047),new S(4095),new S(8191),new S(16383),new S(32767),new S(65535),new S(15,8191),new S(15,16383),new S(15,32767),new S(15,65535),new S(255,8191),new S(255,16383),new S(255,32767),new S(255,65535),new S(4095,8191),new S(4095,16383),new S(4095,32767),new S(4095,65535),new S(65535,8191),new S(65535,16383),new S(65535,32767),new S(65535,65535),new S(1048575,8191),new S(1048575,16383),new S(1048575,32767),new S(1048575,65535),new S(16777215,8191),new S(16777215,16383),new S(16777215,32767),new S(16777215,65535),new S(268435455,8191),new S(268435455,16383),new S(268435455,32767),new S(268435455,65535),new S(4294967295,8191),new S(4294967295,16383),new S(4294967295,32767),new S(4294967295,65535),new S(68719476735,8191),new S(68719476735,16383),new S(68719476735,32767),new S(68719476735,65535),new S(0xffffffffff,8191),new S(0xffffffffff,16383),new S(0xffffffffff,32767),new S(0xffffffffff,65535),new S(0xfffffffffff,8191),new S(0xfffffffffff,16383),new S(0xfffffffffff,32767),new S(0xfffffffffff,65535),new S(0xffffffffffff,8191),new S(0xffffffffffff,16383),new S(0xffffffffffff,32767)];class I{constructor(e,t,n){this._w=e,this._n=t,this._minErrors=n}size(){return this._minErrors.length*(this._w+1)}isAccept(e){let t=Math.floor(e/(this._w+1)),n=e%(this._w+1);return this._w-n+this._minErrors[t]<=this._n}getPosition(e){return e%(this._w+1)}static unpack(data,e,t){const n=t*e,r=n>>6,o=63&n;if(o+t<=64)return data[r].shiftRight(o).and(k[t-1]).toInt();{const e=64-o;return data[r].shiftRight(o).and(k[e-1]).toInt()+data[1+r].and(k[t-e-1]).shiftLeft(e).toInt()}}}const C=[new S(2)],O=[new S(0)],R=[new S(2627)],D=[new S(56)],P=[new S(2182348803,877873428),new S(109)],A=[new S(1436680192,21845)],M=[new S(2416705539,559024212),new S(1161073005,1531779490),new S(55860)],N=[new S(553385984,1431678474),new S(1431655765)];class z extends I{constructor(e){super(e,1,[0,1,0,-1,-1,-1])}transition(e,t,n){let r=Math.floor(e/(this._w+1)),o=e%(this._w+1);if(t===this._w){if(r<2){const e=2*n+r;o+=I.unpack(O,e,1),r=I.unpack(C,e,2)-1}}else if(t===this._w-1){if(r<3){const e=3*n+r;o+=I.unpack(D,e,1),r=I.unpack(R,e,2)-1}}else if(t===this._w-2){if(r<6){const e=6*n+r;o+=I.unpack(A,e,2),r=I.unpack(P,e,3)-1}}else if(r<6){const e=6*n+r;o+=I.unpack(N,e,2),r=I.unpack(M,e,3)-1}return-1===r?-1:r*(this._w+1)+o}}const T=[new S(35)],j=[new S(0)],$=[new S(325618500)],E=[new S(992)],F=[new S(1375778052,1625010352),new S(654713383,1379082614),new S(338833973,592794674),new S(17236)],L=[new S(8192,1431339176),new S(1431655765,85)],J=[new S(1074107396,3875651625),new S(10813440,2685408800),new S(2705416840,2955709504),new S(822630592,176295986),new S(220770817,826549144),new S(2222426336,1384244520),new S(146941966,2721677523),new S(2841782156,506631345),new S(579396904,2353082526),new S(35310113,289686537),new S(2259748971,295985736),new S(492978372,711088276),new S(1217426605,1344578827),new S(1376534810,344070858),new S(190401092,1485354377),new S(3289490533,2484954400),new S(2909430484,2337837173),new S(441472420)],V=[new S(8192,3195650),new S(3288085308,704655603),new S(2189600800,591003698),new S(850559912,1431655765),new S(1431655765,1431655765),new S(1431655765,1431655765),new S(1431655765,1431655765)],B=[new S(2904068,58725456),new S(3640,3305111883),new S(1363153922,1300),new S(0),new S(335609856,85458955),new S(685900336,166838792),new S(2198499522,564071920),new S(136348160,2181038210),new S(1619003392,134546689),new S(39855683,813828486),new S(1347453028,1164181826),new S(536873009,139461908),new S(2231378050,1094735904),new S(160481793,1164017816),new S(1352667217,137456908),new S(84799712,558175264),new S(340820500,219423040),new S(1350704224,1008844824),new S(3407093895,30086147),new S(407994924,2148016453),new S(545259552,2097672),new S(2266497861,3490060320),new S(613903113,3406463435),new S(1648822737,145860110),new S(2183434377,38340640),new S(13811748,3272876486),new S(356860963,1009861909),new S(3256660288,830815266),new S(740327956,1158959115),new S(1351286865,141656116),new S(1359540421,2999666001),new S(481339408,3894702429),new S(2425032288,337824532),new S(3224154437,813771810),new S(212943372,2216698370),new S(550373456,1545653768),new S(2332913858,545392672),new S(337723912,1107841154),new S(1350765600,153125696),new S(325399954,3323153862),new S(1841617741,3540595740),new S(1423134004,1680136456),new S(50861250,2449943586),new S(614664496,1109422667),new S(633938146,611374880),new S(2539425922,2462657904),new S(76697096,3406332098),new S(3259769985,1165203240),new S(3663819994,3336195509),new S(1563465501,1264399831),new S(2474794210,271614300),new S(34386245,1363419217),new S(740429356,3308790030),new S(1389038960,139543060),new S(2232701250,541788240),new S(1079067660,2450874499),new S(2785961365,1298533965),new S(476956248,2497254628),new S(341103461,2187601497),new S(1359153171,680658732),new S(3408700171,3804373106),new S(542345488,1160540375),new S(1888368785,145935149),new S(3255087694,2177569856),new S(683854372,3661947790),new S(2245419236,499571301),new S(2388496718,3804978483),new S(949191224)],U=[new S(524288,805437440),new S(2146400),new S(67108864,2169044992),new S(276973604,1076138561),new S(1610621058,3680514243),new S(807079296,1815527532),new S(897243,2954387888),new S(2441666669,460338720),new S(114847159,134255104),new S(37758096,76680228),new S(136613897,4784130),new S(672286724,1225265793),new S(306857122,880804100),new S(220463628,3272159376),new S(616713508,1073781257),new S(2449540634,77089286),new S(1898353250,1229784210),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,9362)],W=[new S(2904068,58725456),new S(3640,3305111883),new S(1363153922,1300),new S(0),new S(335609856,85196811),new S(59637984,5570560),new S(100708736,642062416),new S(136348168,2181570690),new S(1082263584,181504),new S(2156659014,1887570488),new S(2620424828,3279691970),new S(545261671,2130440),new S(33562752,2973765664),new S(5341184,2190352419),new S(547298336,137406220),new S(2235429087,1363481680),new S(340820500,370417986),new S(813715536,1613103716),new S(1124606104,621086726),new S(341196820,1107296387),new S(545587281,139461128),new S(336856450,2157513760),new S(136714249,2181140994),new S(2416314689,143787289),new S(3257709122,575218834),new S(23218476,1124599045),new S(2248302630,2151761173),new S(3316920642,935559200),new S(340819988,1107841157),new S(1350893649,21053528),new S(2550763714,1363501440),new S(206610448,3758633325),new S(1351295472,743623468),new S(3257709129,1611476114),new S(407929372,2268864960),new S(63640608,738315028),new S(1159221634,545261601),new S(136347648,1157636098),new S(545724419,141559316),new S(84419023,1946484981),new S(408981504,2471335494),new S(813845808,1277481805),new S(3321943618,25561121),new S(635093620,3265295049),new S(2445440114,745112472),new S(2300846658,2453800992),new S(883951872,2181591424),new S(2963079265,481446262),new S(2635903144,1625695344),new S(359976510,3541325271),new S(633494900,476056888),new S(1111241026,1364284500),new S(335790868,3257672139),new S(558045267,11715080),new S(85217605,54855856),new S(206604056,1427443855),new S(4060419156,141821184),new S(102297744,3797110162),new S(1704116792,1228416601),new S(566624470,1143194388),new S(3408729413,1925357634),new S(2693907828,1110194563),new S(1351298130,11715860),new S(2150936715,4039444593),new S(1162957064,2819666635),new S(1901927600,576776228),new S(2385343694,3864603731),new S(949191224,1108095105),new S(570559665,139494432),new S(3456639182,1891785760),new S(136350477,1107828866),new S(1350702113,203440648),new S(2200719491,554174592),new S(137937428,2768779394),new S(2848166960,2863311530),new S(2678717098,447381162),new S(337691400,2185765072),new S(2228833636,1904530289),new S(460404435,885148935),new S(355783501,2567517762),new S(818021680,137626888),new S(1398349970,886858038),new S(1303698529,2759444188),new S(1227133514,2450169746),new S(2173872170,1925324848),new S(814942496,119845450),new S(2450400290,225575516),new S(3372753479,2463566197),new S(618694956,2282496073),new S(3259505840,747801636),new S(2299037513,2158306440),new S(2865185684,1787173674),new S(2871505528,135998630),new S(120332803,2735288466),new S(1763036764,3614016979),new S(1998285110,1567933020),new S(2301457623,1917716851),new S(142656005,1277460939),new S(1939286210,1635048005),new S(3662525914,1252095430),new S(2252890502,1787206439),new S(813795018,212944144),new S(1142968578,571354193),new S(941690412,3406655685),new S(1363285074,340869640),new S(1258836101,1363414048),new S(339772204,3407106312),new S(1217071240,2486264328),new S(2675866051,4205477370),new S(2124930941,50862570),new S(550507601,1701086552),new S(2473165721,2517850499),new S(956767089,3647288901),new S(2521109812,81828105),new S(85213378,559286324),new S(1625708889,3596674266),new S(3336332676,2449992057),new S(3750905888,2821358087),new S(271614374,2300605125),new S(2999595186,740427564),new S(87593230,1388776818),new S(149129492,2334962391),new S(541795552,481379340),new S(2351735368,2269850802),new S(608733960,1133805922),new S(2602532471,2658691750),new S(3970345447,1359153177),new S(680658732,2386076427),new S(2207475987,1771444057),new S(1161328411,1959672182),new S(149130029,3255099982),new S(2177569856,683854372),new S(3661947790,2245419236),new S(1975966309,1770391529),new S(2582087242,2798283430)],Q=[new S(524288,805437440),new S(2146400),new S(67108864,16777216),new S(1348481048,3681400539),new S(11702,2759852034),new S(1092883008,306782344),new S(1065248,1073742080),new S(2450071634,613598240),new S(157651673,204527616),new S(3277862616,2954562566),new S(1815534349,409731075),new S(2954587142,2911241057),new S(1533925085,905970103),new S(230032140,3289526556),new S(3068358150,56077),new S(3674310171,152604166),new S(1907829602,7198427),new S(8390944,1076101705),new S(2420711618,545409280),new S(1074040832,302064768),new S(2760925472,1428467018),new S(38273045,1083326496),new S(1212191753,2454856978),new S(603981856,1226838017),new S(541721760,689080612),new S(349513,2416455890),new S(616710196,154440460),new S(40379539,68708608),new S(1629493832,2588509714),new S(894585300,204767233),new S(2483889154,616827184),new S(153412173,440402074),new S(110231814,1644468298),new S(2456888978,2454277460),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756,1227133513),new S(2454267026,613566756),new S(1227133513,2454267026),new S(613566756)];class K extends I{constructor(e){super(e,2,[0,2,1,0,1,0,-1,0,0,-1,0,-1,-1,-1,-1,-1,-2,-1,-1,-1,-2,-1,-1,-2,-1,-1,-2,-1,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2,-2])}transition(e,t,n){let r=Math.floor(e/(this._w+1)),o=e%(this._w+1);if(t===this._w){if(r<3){const e=3*n+r;o+=I.unpack(j,e,1),r=I.unpack(T,e,2)-1}}else if(t===this._w-1){if(r<5){const e=5*n+r;o+=I.unpack(E,e,1),r=I.unpack($,e,3)-1}}else if(t===this._w-2){if(r<13){const e=13*n+r;o+=I.unpack(L,e,2),r=I.unpack(F,e,4)-1}}else if(t===this._w-3){if(r<28){const e=28*n+r;o+=I.unpack(V,e,2),r=I.unpack(J,e,5)-1}}else if(t===this._w-4){if(r<45){const e=45*n+r;o+=I.unpack(U,e,3),r=I.unpack(B,e,6)-1}}else if(r<45){const e=45*n+r;o+=I.unpack(Q,e,3),r=I.unpack(W,e,6)-1}return-1===r?-1:r*(this._w+1)+o}}class H{constructor(input,e){this._word=input,this._editDistance=e,this._alphabet=[...new Set(this._word)].sort(((a,b)=>a-b)),this._numRanges=0,this._rangeLower=new Array(this._alphabet.length+2),this._rangeUpper=new Array(this._alphabet.length+2);let t=0;for(let i=0;i<this._alphabet.length;i++){const e=this._alphabet[i];e>t&&(this._rangeLower[this._numRanges]=t,this._rangeUpper[this._numRanges]=e-1,this._numRanges++),t=e+1}t<=m&&(this._rangeLower[this._numRanges]=t,this._rangeUpper[this._numRanges]=m,this._numRanges++),this._description=1===e?new z(input.length):new K(input.length)}toAutomaton(){let e=new x;const t=2*this._editDistance+1,n=this._description.size();e.createState();for(let i=1;i<n;i++){let t=e.createState();e.setAccept(t,this._description.isAccept(i))}for(let r=0;r<n;r++){const n=this._description.getPosition(r);if(n<0)continue;const o=n+Math.min(this._word.length-n,t);for(let t=0;t<this._alphabet.length;t++){const l=this._alphabet[t],h=this._getVector(l,n,o),d=this._description.transition(r,n,h);d>=0&&e.addTransition(r,d,l,l)}const l=this._description.transition(r,n,0);if(l>=0)for(let t=0;t<this._numRanges;t++)e.addTransition(r,l,this._rangeLower[t],this._rangeUpper[t])}return e.finishState(),e}_getVector(e,t,n){let r=0;for(let i=t;i<n;i++)r<<=1,this._word[i]===e&&(r|=1);return r}}function G(e,t){if(void 0===t)return 1;if("number"==typeof t)return t<0?e+t:t;let n=e;if(t.includes("<")){for(const s of t.split(" ")){const t=s.split("<");if(e<=parseInt(t[0]))return n;n=G(e,t[1])}return n}if(t.includes("%")){const e=n*parseInt(t.slice(0,-1))*.01;n=e<0?n+Math.ceil(e):Math.floor(e)}else{const e=parseInt(t);n=e<0?n+e:e}return n<1?1:n}class Y{constructor(e,t){this._invIdxs=e,this._docs=t,this._scorer=new _(this._invIdxs)}search(e){let t=this._recursive(e.query,!0);if(void 0===e.calculate_scoring||e.calculate_scoring)return this._scorer.finalScore(e,t);const n={};for(const e of t.keys())n[e]={score:1};return n}setDirty(){this._scorer.setDirty()}_recursive(e,t){let n=new Map;const r=void 0!==e.boost?e.boost:1,o=void 0!==e.field?e.field:null;let l=null,d=null;switch(void 0!==this._invIdxs[o]&&(l=this._invIdxs[o].root,d=this._invIdxs[o].analyzer),e.type){case"bool":if(n=null,void 0!==e.must&&(n=this._getUnique(e.must,t,n)),void 0!==e.filter&&(n=this._getUnique(e.filter,null,n)),void 0!==e.should){const r=this._getAll(e.should,t);let o=!1;null===n&&(o=!0,n=new Map);const l=Math.max(1,G(e.should.length,e.minimum_should_match));if(o&&1===l)n=r;else for(const[e,t]of r)t.length>=l&&(n.has(e)?n.get(e).push(...t):o?n.set(e,t):n.delete(e))}if(null===n&&(n=this._recursive({type:"match_all"},!1)),void 0!==e.not){let t=this._getAll(e.not,null);for(const e of t.keys())n.has(e)&&n.delete(e)}if(1!==r)for(const[e,t]of n)for(let i=0;i<t.length;i++)t[i].boost*=r;break;case"term":{const h=c(e.value);let d=f.getTermIndex(h,l);this._scorer.score(o,r,d,t,n,h);break}case"terms":for(let i=0;i<e.value.length;i++){const h=c(e.value[i]);let d=f.getTermIndex(h,l);this._scorer.score(o,r,d,t,n,h)}break;case"fuzzy":{const[h,d]=function(e,t){let n=c(e.value),r=void 0!==e.fuzziness?e.fuzziness:"AUTO";"AUTO"===r&&(r=n.length<=2?0:n.length<=5?1:2);let o=void 0!==e.prefix_length?e.prefix_length:0,l=void 0!==e.extended&&e.extended;0===r&&(o=n.length);let h=[],d=t,_=n.slice(0,o),m=n,v=0;if(0!==o&&(d=f.getTermIndex(_,d),m=m.slice(o)),null===d)return[h,v];if(0===m.length){if(l){const e=f.extendTermIndex(d);for(let i=0;i<e.length;i++)h.push({index:e[i].index,term:e[i].term,boost:1}),v=Math.max(v,e[i].index.df)}else void 0!==d.dc&&(h.push({index:d,term:n,boost:1}),v=d.df);return[h,v]}const y=[0],x=new w(new H(m,r).toAutomaton());function S(e,t,n){let o=0;if(-1!==(e=x.step(e,0))&&x.isAccept(e)&&(o++,-1!==(e=x.step(e,0))&&x.isAccept(e)&&o++,t.length<n.length)){if(o!==r)return function(a,b){let i,e,t,n;const r=Array(a.length+1);for(i=0;i<=a.length;i++)r[i]=i;for(i=1;i<=b.length;i++){for(t=i,e=1;e<=a.length;e++)b[i-1]===a[e-1]?n=r[e-1]:(n=Math.min(r[e-1]+1,Math.min(t+1,r[e]+1)),i>1&&e>1&&b[i-2]===a[e-1]&&a[e-2]===b[i-1]&&(n=Math.min(n,r[e-1]-(a[e-1]===b[i-1]?1:0)))),r[e-1]=t,t=n;r[a.length]=t}return r[a.length]}(t,n);o-=n.length-t.length}return r-o}function k(e,t,r){if(y[y.length-1]=t,-1!==(e=x.step(e,t))){if(x.isAccept(e)){if(l){const e=f.extendTermIndex(r);for(let i=0;i<e.length;i++)h.push({index:e[i].index,term:e[i].term,boost:1}),v=Math.max(v,e[i].index.df);return}if(void 0!==r.df){const t=S(e,y,m),o=Math.max(0,1-t/Math.min(_.length+y.length,n.length));h.push({index:r,term:[..._,...y],boost:o}),v=Math.max(v,r.df)}}y.push(0);for(const t of r)k(e,t[0],t[1]);y.pop()}}for(const e of d)k(0,e[0],e[1]);return[h,v]}(e,l);for(let i=0;i<h.length;i++)this._scorer.score(o,r*h[i].boost,h[i].index,t,n,h[i].term,d);break}case"wildcard":{const h=void 0!==e.enable_scoring&&e.enable_scoring,d=function(e,t){let n=c(e.value),r=[];function o(e,t=0,l=[],h=!1){if(null!==e)if(t!==n.length)if(h||92!==n[t])if(h||63!==n[t])if(h||42!==n[t])o(f.getTermIndex([n[t]],e),t+1,[...l,n[t]]);else if(t+1===n.length){const n=f.extendTermIndex(e);for(let i=0;i<n.length;i++)o(n[i].index,t+1,[...l,...n[i].term])}else{o(e,t+1,l,!1);const n=[{index:e,term:[]}];do{const e=n.pop();for(const r of e.index)o(r[1],t+1,[...l,...e.term,r[0]]),n.push({index:r[1],term:[...e.term,r[0]]})}while(0!==n.length)}else for(const n of e)o(n[1],t+1,[...l,n[0]]);else o(e,t+1,l,!0);else void 0!==e.df&&r.push({index:e,term:l.slice()})}return o(t),r}(e,l);for(let i=0;i<d.length;i++)this._scorer.score(o,r,d[i].index,t&&h,n,d[i].term);break}case"match_all":for(let e of this._docs)this._scorer.scoreConstant(r,e,n);break;case"constant_score":{let t=this._getAll(e.filter,!1);for(const e of t.keys())this._scorer.scoreConstant(r,e,n);break}case"prefix":{const h=void 0!==e.enable_scoring&&e.enable_scoring,d=c(e.value),_=f.getTermIndex(d,l);if(null!==_){const e=f.extendTermIndex(_);for(let i=0;i<e.length;i++)this._scorer.score(o,r,e[i].index,t&&h,n,[...d,...e[i].term])}break}case"exists":if(null!==l)for(const e of this._invIdxs[o].docStore.keys())this._scorer.scoreConstant(r,e,n);break;case"match":{const l=h(d,e.value),c={type:"bool"},f=[];if("or"===(void 0!==e.operator?e.operator:"or")?(void 0!==e.minimum_should_match&&(c.minimum_should_match=e.minimum_should_match),c.should=f):c.must=f,c.boost=r,void 0!==e.fuzziness){let t=void 0!==e.prefix_length?e.prefix_length:2,n=void 0!==e.extended&&e.extended;for(let i=0;i<l.length;i++)f.push({type:"fuzzy",field:o,value:l[i],fuzziness:e.fuzziness,prefix_length:t,extended:n})}else for(let i=0;i<l.length;i++)f.push({type:"term",field:o,value:l[i]});n=this._recursive(c,t);break}}return n}_getUnique(e,t,n){if(0===e.length)return n;for(let i=0;i<e.length;i++){let r=this._recursive(e[i],t);if(null!==n)for(const e of n.keys())r.has(e)?n.get(e).push(...r.get(e)):n.delete(e);else n=this._recursive(e[0],t)}return n}_getAll(e,t,n=new Map){for(let i=0;i<e.length;i++){let r=this._recursive(e[i],t);for(const e of r.keys())n.has(e)?n.get(e).push(...r.get(e)):n.set(e,r.get(e))}return n}}var X=n(0);class Z{constructor(e=[],t){this._invIdxs={};for(let i=0;i<e.length;i++){let t=e[i];this._invIdxs[t.field]=new f(t)}this._id=t,this._docs=new Set,this._idxSearcher=new Y(this._invIdxs,this._docs)}static register(){X.a.FullTextSearch=Z}addDocument(e,t=e[this._id]){let n=Object.keys(this._invIdxs);for(let r,i=0;n.length,r=n[i];i++){let n=e[r];if(null!=n){if("string"!=typeof n){if("number"!=typeof n)throw TypeError("Unsupported field type for full text search.");n=n.toString()}this._invIdxs[r].insert(n,t)}}this._docs.add(t),this._idxSearcher.setDirty()}removeDocument(e,t=e[this._id]){let n=Object.keys(this._invIdxs);for(let i=0;i<n.length;i++)this._invIdxs[n[i]].remove(t);this._docs.delete(t),this._idxSearcher.setDirty()}updateDocument(e,t=e[this._id]){this.removeDocument(e,t),this.addDocument(e,t)}clear(){for(let e of this._docs)this.removeDocument(null,e)}search(e){return this._idxSearcher.search(e)}toJSON(){let e={id:this._id,ii:{}},t=Object.keys(this._invIdxs);for(let i=0;i<t.length;i++){const n=t[i];e.ii[n]=this._invIdxs[n].toJSON()}return e}static fromJSONObject(e,t={}){let n=new Z([],e.id),r=Object.keys(e.ii);for(let i=0;i<r.length;i++){const o=r[i];n._invIdxs[o]=f.fromJSONObject(e.ii[o],t[o])}return n}}n.d(t,"FullTextSearch",(function(){return Z})),n.d(t,"analyze",(function(){return h})),n.d(t,"StandardAnalyzer",(function(){return d})),n.d(t,"whitespaceTokenizer",(function(){return r})),n.d(t,"lowercaseTokenFilter",(function(){return o})),n.d(t,"uppercaseTokenFilter",(function(){return l})),Z.Analyzer={},Z.Analyzer.analyze=h,Z.Analyzer.StandardAnalyzer=d,Z.Tokenizer={},Z.Tokenizer.whitespaceTokenizer=r,Z.TokenFilter={},Z.TokenFilter.lowercaseTokenFilter=o,Z.TokenFilter.uppercaseTokenFilter=l,t.default=Z},function(e,t){var g;g=function(){return this}();try{g=g||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(g=window)}e.exports=g}])},e.exports=r()}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/54c1f437ae2a6c018af5.js b/handbook/_nuxt/js/54c1f437ae2a6c018af5.js
new file mode 100644
index 0000000..b4b3067
--- /dev/null
+++ b/handbook/_nuxt/js/54c1f437ae2a6c018af5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[114],{408: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` 或 `opts.height` 将其覆盖。\n\n```html\n<div id="main" style="width: 600px;height:400px;"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n<\/script>\n```\n\n需要注意的是,使用这种方法在调用 `echarts.init` 时需保证容器已经有宽度和高度了。\n\n### 指定图表的大小\n\n如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。\n\n```html\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'), null, {\n width: 600,\n height: 400\n });\n<\/script>\n```\n\n## 响应容器大小的变化\n\n### 监听图表容器的大小并改变图表大小\n\n在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。\n\n比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。\n\n这种情况下,可以监听页面的 `window.onresize` 事件获取浏览器大小改变的事件,然后调用 [`echartsInstance.resize`](${mainSitePath}api.html#echartsInstance.resize) 改变图表的大小。\n\n```html\n<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n window.onresize = function() {\n myChart.resize();\n };\n<\/script>\n```\n\n### 为图表设置特定的大小\n\n除了直接调用 `resize()` 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。\n\n```js\nmyChart.resize({\n width: 800,\n height: 400\n});\n```\n\n> 小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。\n\n### 容器节点被销毁以及被重建时\n\n假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。\n\n本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。\n\n正确的做法是,在图表容器被销毁之后,调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 销毁实例,在图表容器重新被添加后再次调用 [echarts.init](${mainSitePath}/api.html#echarts.init) 初始化。\n\n> 小贴士:在容器节点被销毁时,总是应调用 [`echartsInstance.dispose`](${mainSitePath}api.html#echartsInstance.dispose) 以销毁实例释放资源,避免内存泄漏。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/586ffb442cd00f6388c2.js b/handbook/_nuxt/js/586ffb442cd00f6388c2.js
new file mode 100644
index 0000000..65d44fc
--- /dev/null
+++ b/handbook/_nuxt/js/586ffb442cd00f6388c2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[31],{325: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 animation capability. Next, we will see how this **Universal Transition** adds expressiveness and narrative power to the chart.\n\nIn previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.\n\n```js live {layout: 'lr'}\nfunction makeRandomData() {\n return [\n {\n value: Math.random(),\n name: 'A'\n },\n {\n value: Math.random(),\n name: 'B'\n },\n {\n value: Math.random(),\n name: 'C'\n }\n ];\n}\noption = {\n series: [\n {\n type: 'pie',\n radius: [0, '50%'],\n data: makeRandomData()\n }\n ]\n};\n\nsetInterval(() => {\n myChart.setOption({\n series: {\n data: makeRandomData()\n }\n });\n}, 2000);\n```\n\nAnd starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.\n\nHow cool would this be? Let's have a look!\n\n### Morphing transition across series\n\nWith `universalTransition: true` set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.\n\nAs follows, switching between a pie chart and a bar chart.\n\n```js live {layout: 'bt'}\nconst dataset = {\n dimensions: ['name', 'score'],\n source: [\n ['Hannah Krause', 314],\n ['Zhao Qian', 351],\n ['Jasmin Krause ', 287],\n ['Li Lei', 219],\n ['Karle Neumann', 253],\n ['Mia Neumann', 165],\n ['Böhm Fuchs', 318],\n ['Han Meimei', 366]\n ]\n};\nconst pieOption = {\n dataset: [dataset],\n series: [\n {\n type: 'pie',\n // associate the series to be animated by id\n id: 'Score',\n radius: [0, '50%'],\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\nconst barOption = {\n dataset: [dataset],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n // associate the series to be animated by id\n id: 'Score',\n // Each data will have a different color\n colorBy: 'data',\n encode: { x: 'name', y: 'score' },\n universalTransition: true,\n animationDurationUpdate: 1000\n }\n ]\n};\n\noption = barOption;\n\nsetInterval(() => {\n option = option === pieOption ? barOption : pieOption;\n // Use the notMerge form to remove the axes\n myChart.setOption(option, true);\n}, 2000);\n```\n\nMore transitions between common charts.\n\n![](images/5-2-0/universal-transition.gif)\n\nSuch transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:\n\n![](images/5-2-0/universal-transition-2.gif)\n\nor between Sunburst and Treemap, or even between very flexible custom series can be transitions.\n\n![](images/5-2-0/universal-transition-3.gif)\n\n> Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.\n\n### Data split and merge animations\n\nIn 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.\n\nIn order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept `groupId`. We can set the group to the whole series via [series.dataGroupId](${optionPath}series-bar.dataGroupId), or more fine-grained by [series.data.groupId](${optionPath}series-bar.dataGroupId) to set the group to which each data belongs. It's even easier if you use a `dataset` to manage the data, you can use `encode.itemGroupId` to specify a dimension encoded as `groupId`.\n\nFor example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same `groupId`, which then corresponds to the data before the drill-down\n\n```js live {layout: 'lr'}\noption = {\n xAxis: {\n data: ['Animals', 'Fruits', 'Cars']\n },\n yAxis: {},\n dataGroupId: '',\n animationDurationUpdate: 500,\n series: {\n type: 'bar',\n id: 'sales',\n data: [\n {\n value: 5,\n groupId: 'animals'\n },\n {\n value: 2,\n groupId: 'fruits'\n },\n {\n value: 4,\n groupId: 'cars'\n }\n ],\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n }\n};\n\nconst drilldownData = [\n {\n dataGroupId: 'animals',\n data: [\n ['Cats', 4],\n ['Dogs', 2],\n ['Cows', 1],\n ['Sheep', 2],\n ['Pigs', 1],\n ['Cows', 1],\n ['Sheep', 2],\n ['Pigs', 1]\n ]\n },\n {\n dataGroupId: 'fruits',\n data: [\n ['Apples', 4],\n ['Oranges', 2],\n ['Oranges', 2]\n ]\n },\n {\n dataGroupId: 'cars',\n data: [\n ['Toyota', 4],\n ['Opel', 2],\n ['Volkswagen', 2],\n ['Volkswagen', 2]\n ]\n }\n];\n\nmyChart.on('click', event => {\n if (event.data) {\n const subData = drilldownData.find(data => {\n return data.dataGroupId === event.data.groupId;\n });\n if (!subData) {\n return;\n }\n myChart.setOption({\n xAxis: {\n data: subData.data.map(item => {\n return item[0];\n })\n },\n series: {\n type: 'bar',\n id: 'sales',\n dataGroupId: subData.dataGroupId,\n data: subData.data.map(item => {\n return item[1];\n }),\n universalTransition: {\n enabled: true,\n divideShape: 'clone'\n }\n },\n graphic: [\n {\n type: 'text',\n left: 50,\n top: 20,\n style: {\n text: 'Back',\n fontSize: 18\n },\n onclick: function() {\n myChart.setOption(option, true);\n }\n }\n ]\n });\n }\n});\n```\n\nWith `groupId`, we can also implement richer aggregation and drill-down animations.\n\nAggregation of data.\n\n![](images/5-2-0/group-transition.gif)\n\nDrilling down of a single series into two series:\n\n![](images/5-2-0/group-transition-2.gif)\n\nUniversal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.\n\nAt this point, we know you're already eager to try it out. But don't worry, there are even more new features in 5.2.0 that are worth checking out.\n\n## Color palette picking strategy\n\nIn the above universal transition example, you may have noticed that we use a `colorBy` configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.\n\n- `'series'` assigns the colors in the palette by series, so that all data in the same series are in the same color.\n- `'data'` assigns colors in the palette according to data items, with each data item using a different color.\n\nPreviously, we fixed this strategy for each type of series, for example, the bar chart was fixed with `'series'` and the pie chart was fixed with `'data'`.\n\nAnd now with this new feature, we can assign a different color to each data item in the bar chart.\n\n```js live {layout: 'lr'}\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 data: [120, 200, 150, 80, 70, 110, 130],\n type: 'bar',\n colorBy: 'data'\n }\n ]\n};\n```\n\nOr use one color uniformly in the pie chart.\n\n```js live {layout: 'lr'}\noption = {\n series: {\n type: 'pie',\n colorBy: 'series',\n radius: [0, '50%'],\n itemStyle: {\n borderColor: '#fff',\n borderWidth: 1\n },\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n};\n```\n\nThis configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.\n\n## Labels for polar bar charts\n\nIn this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.\n\n```js live {layout: 'lr'}\noption = {\n angleAxis: {\n show: false,\n max: 10\n },\n radiusAxis: {\n show: false,\n type: 'category',\n data: ['AAA', 'BBB', 'CCC', 'DDD']\n },\n polar: {},\n series: [\n {\n type: 'bar',\n data: [3, 4, 5, 6],\n colorBy: 'data',\n roundCap: true,\n label: {\n show: true,\n // Try changing it to 'insideStart'\n position: 'start',\n formatter: '{b}'\n },\n coordinateSystem: 'polar'\n }\n ]\n};\n```\n\nMore configurations for label positions.\n\n![](images/5-2-0/polar-bar-label.jpg)\n\nThis flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.\n\n## Pie chart style for empty data\n\nIn the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.\n\nTo solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with `emptyCircleStyle`.\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'pie',\n data: [],\n // showEmptyCircle: false,\n emptyCircleStyle: {\n // change the style to empty circle\n color: 'transparent',\n borderColor: '#ddd',\n borderWidth: 1\n }\n }\n ]\n};\n```\n\nIf you don't want to show this gray circle, you can also set `showEmptyCircle: false` to turn it off.\n\n## Performance enhancements for high-dimensional data\n\nWe have introduced [dataset](${optionPath}dataset) since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series ([#11907](https://github.com/apache/echarts/issues/11907)), which may even may lead to getting stuck.\n\n```js\nconst indices = Array.from(Array(1000), (_, i) => {\n return `index${i}`;\n});\nconst option = {\n xAxis: { type: 'category' },\n yAxis: {},\n dataset: {\n // dimension: ['date', . . indices],\n source: Array.from(Array(10), (_, i) => {\n return {\n date: i,\n ... .indices.reduce((item, next) => {\n item[next] = Math.random() * 100;\n return item;\n }, {})\n };\n })\n },\n series: indices.map(index => {\n return { type: 'line', name: index };\n })\n};\n```\n\nThe reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the `1000 x 1000` dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.\n\nIn the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).\nThis 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.\n\nIt 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 can also bring significant performance gains.\n\n## Type optimization for custom series\n\nCustom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method `renderItem` in the custom series by making more precise inferences about the types of the parameters and return values of `renderItem`, so that it is possible to infer which properties of the elements can be set based on the type returned:\n\n```ts\nseries = {\n type: 'custom',\n renderItem(params) {\n return {\n type: 'group',\n // The group type uses children to store children of other types\n children: [\n {\n type: 'circle',\n // circle has the following configurable shape attributes\n shape: { r: 10, cx: 0, cy: 0 },\n // Configurable styles\n style: { fill: 'red' }\n },\n {\n type: 'rect',\n // rect has the following configurable shape properties\n shape: { x: 0, y: 0, width: 100, height: 100 }\n },\n {\n type: 'path',\n // Custom path shapes\n shape: { d: '...' }\n }\n ]\n };\n }\n};\n```\n\n## Summary\n\nIf you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.\n\nIf you're interested in what's next for Apache ECharts, you can also follow our development plans at [GitHub Milestone](https://github.com/apache/echarts/milestones). Feel free to join us as a contributor (learn more at [Wiki](https://github.com/apache/echarts/wiki)).\n\n### Full Changelog\n\n#### Break Changes\n\n- [Fix][pie] Negative value will be filtered [#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n\n#### All Changes\n\n- **[Feature] Introduce universal transition to all series. [#15208](https://github.com/apache/echarts/issues/15208) ([pissang](https://github.com/pissang))**\n- [Feature][color] Add `series.colorBy` [#13788](https://github.com/apache/echarts/issues/13788) ([Ovilia](https://github.com/Ovilia))\n- [Feature][label] Support sector label positions for polar bars [#15182](https://github.com/apache/echarts/pull/15182) ([Ovilia](https://github.com/Ovilia))\n- [Feature][effectscatter] Add `rippleEffect.number` [#15335](https://github.com/apache/echarts/issues/15335) ([plainheart](https://github.com/plainheart))\n- [Feature][gauge] Add `pointer.showAbove` to allow pointer show above the title and details. [#15337](https://github.com/apache/echarts/issues/15337) ([AmosChenYQ](https://github.com/AmosChenYQ)) [#15326](https://github.com/apache/echarts/issues/15326) ([susiwen8](https://github.com/susiwen8))\n- [Feature][emphasis] `emphasis.color` can use `'inherit'` to be not higlighted. [#15172](https://github.com/apache/echarts/issues/15172) ([Foreverwzh](https://github.com/Foreverwzh))\n- [Feature][pie] Display an empty cicle when pie don't have value. [#15095](https://github.com/apache/echarts/issues/15095) ([ssthouse](https://github.com/ssthouse))\n- [Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. [#15355](https://github.com/apache/echarts/issues/15355) ([pissang](https://github.com/pissang))\n- [Fix][axis] Optimize format in time axis [#15465](https://github.com/apache/echarts/issues/15465) ([leavest](https://github.com/leavest)) [#15434](https://github.com/apache/echarts/issues/15434) ([zhiyuc123](https://github.com/zhiyuc123))\n- [Fix][custom] Optimize text font compatibility with legacy code. [#15454](https://github.com/apache/echarts/issues/15454) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][memory] Optimize memory when chart instance is still hold after dispose [#15417](https://github.com/apache/echarts/issues/15417) ([pissang](https://github.com/pissang))\n- [Fix][line] Optimize color gradient when having infinite value. [#15416](https://github.com/apache/echarts/issues/15416) ([plainheart](https://github.com/plainheart))\n- [Fix][date] Optimize date parsing [#15410](https://github.com/apache/echarts/issues/15410) ([quillblue](https://github.com/quillblue))\n- [Fix][line] Fix render bug. [#788](https://github.com/ecomfe/zrender/issues/788) ([pissang](https://github.com/pissang))\n- [Fix][candlestick] Fix style lost after update [#15368](https://github.com/apache/echarts/issues/15368) ([pissang](https://github.com/pissang))\n- [Fix][sankey] Gradient should follow orient. [#15363](https://github.com/apache/echarts/issues/15363) ([susiwen8](https://github.com/susiwen8))\n- [Fix][tooltip] Fix tooltip formatter doesn't renders HTMLElement if tooltip position is specified. [#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][tooltip] Tooltip should clear content when formatter returns null. [#15313](https://github.com/apache/echarts/issues/15313) ([plainheart](https://github.com/plainheart))\n- [Fix][bar] Set label to be inside when position is `'middle'` [#15309](https://github.com/apache/echarts/issues/15309) ([Ovilia](https://github.com/Ovilia))\n- [Fix][marker] Fix 'clampData' undefined error in 'getMarkerPosition' [#15297](https://github.com/apache/echarts/issues/15297) ([AmosChenYQ](https://github.com/AmosChenYQ))\n- [Fix][treemap] Fix old nodes not removed when disabled animation [#15283](https://github.com/apache/echarts/issues/15283) ([villebro](https://github.com/villebro))\n- [Fix][tree] Fix edge may not removed when update data [#15251](https://github.com/apache/echarts/issues/15251) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie/sunburst] Fix `borderRadius` can't be reset in pie series and sunburst series when setting it to `null` or `undefined` [#15243](https://github.com/apache/echarts/issues/15243) ([plainheart](https://github.com/plainheart))\n- [Fix][canvas] Fix unexpected `none` or `null` fillStyle may be warned in firefox [#784](https://github.com/ecomfe/zrender/issues/784) ([plainheart](https://github.com/plainheart))\n- [Fix][highlight] Hightlight multiple series through `chart.dispatchAction` not work as expected [#15207](https://github.com/apache/echarts/issues/15207) ([ssthouse](https://github.com/ssthouse))\n- [Fix][sankey] Fix drag bug when using `series.nodes` to represent data. [#15199](https://github.com/apache/echarts/issues/15199) ([DuLinRain](https://github.com/DuLinRain))\n- [Fix][svg] Optimize exported SVG compatibility for Powerpoint. [#767](https://github.com/ecomfe/zrender/pull/767) ([plainheart](https://github.com/plainheart))\n- [Fix][legend] Fix `text.lineHeight` not work [#773](https://github.com/ecomfe/zrender/issues/773) ([ssthouse](https://github.com/ssthouse))\n- [Fix][pie] Change the default `borderJoin` to `round`. [#15145](https://github.com/apache/echarts/issues/15145) ([plainheart](https://github.com/plainheart))\n- [Fix][radar] Change the default `borderJoin` to `round`. [#15381](https://github.com/apache/echarts/issues/15381) ([Ovilia](https://github.com/Ovilia))\n- [Fix][treemap] Fix `label.show` set to `false` will throw error [#15141](https://github.com/apache/echarts/issues/15141) ([susiwen8](https://github.com/susiwen8))\n- [Fix][pictorialbar] Fix pictorialBar zero value label display. [#15132](https://github.com/apache/echarts/issues/15132) ([ssthouse](https://github.com/ssthouse))\n- [Fix][lines] Fix lines can't be cleared by chart.clear() [#15088](https://github.com/apache/echarts/issues/15088) ([plainheart](https://github.com/plainheart))\n- [Fix][endlabel] Fix endLabel not display when only set `emphasis.show` to `true`. [#15072](https://github.com/apache/echarts/issues/15072) ([Ovilia](https://github.com/Ovilia))\n- [Fix][svg] Fix rect path not closed. [#767](https://github.com/ecomfe/zrender/issues/767) ([plainheart](https://github.com/plainheart))\n- [Fix][treemap] Add `treeAncestors` in callback params [#14976](https://github.com/apache/echarts/issues/14976) ([pissang](https://github.com/pissang))\n- [Fix][tree] Fix error when running setOption twice with different data [#14930](https://github.com/apache/echarts/issues/14930) ([Map1en](https://github.com/Map1en))\n- [Fix][radar] Fix radar symbol border is scaled [#15396](https://github.com/apache/echarts/issues/15396) ([pissang](https://github.com/pissang))\n- [Fix][marker] Fix symbolOffset and symbolKeepAspect doesn't work in markPoint. [#14737](https://github.com/apache/echarts/issues/14737) ([plainheart](https://github.com/plainheart))\n- [Fix][gauge] Fix data index and series index is missing. [#14688](https://github.com/apache/echarts/issues/14688) ([yufeng04](https://github.com/yufeng04))\n- [Fix][tooltip] Tooltip arrow will follow borderWidth. [#14393](https://github.com/apache/echarts/issues/14393) ([g7i](https://github.com/g7i))\n- [Fix][geo] Fix geo switch from hidden to show fail. [#15361](https://github.com/apache/echarts/issues/15361) ([pissang](https://github.com/pissang))\n- [Fix][type] Optimize type of `renderItem` in custom series.\n- [Fix][type] Optimize option type of `echarts.init`. [#15487](https://github.com/apache/echarts/issues/15487) ([John60676](https://github.com/John60676))\n- [Fix][type] There is no `polarIndex` when coordinate of series is polar [#15281](https://github.com/apache/echarts/issues/15281) ([Map1en](https://github.com/Map1en))\n- [Fix][type] Optimize type when using SVG source in geo component. [#15263](https://github.com/apache/echarts/issues/15263) ([leosxie](https://github.com/leosxie))\n- [Fix][type] Fix wrong type for `pie` data and `map` data. [#15144](https://github.com/apache/echarts/issues/15144) ([plainheart](https://github.com/plainheart))\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/59434bd68f1a02bcf7de.js b/handbook/_nuxt/js/59434bd68f1a02bcf7de.js
new file mode 100644
index 0000000..8d29298
--- /dev/null
+++ b/handbook/_nuxt/js/59434bd68f1a02bcf7de.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[105],{399: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 根。如果确实有多个数据需要展示,建议可使用多个仪表盘。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=gauge-car">\n</iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/59b7bfd614b9b7af3b5d.js b/handbook/_nuxt/js/59b7bfd614b9b7af3b5d.js
new file mode 100644
index 0000000..b544e27
--- /dev/null
+++ b/handbook/_nuxt/js/59b7bfd614b9b7af3b5d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[18],{312: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 series. Let's begin with a basic pie chart:\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n```\n\nTo be mentioned, the `value` here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.\n\n## Customized Pie Chart\n\n### Radius of Pie Chart\n\nThe radius of pie chart can be defined by [`series.radius`](${optionPath}series-pie.radius). Both percent string(`'60%'`) and absolute pixel string(`'200'`) are available. While it is a percent string, it is proportional related to the shorter container(`'div'`) edge.\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n data: [\n {\n value: 335,\n name: 'Direct Visit'\n },\n {\n value: 234,\n name: 'Union Ad'\n },\n {\n value: 1548,\n name: 'Search Engine'\n }\n ],\n radius: '50%'\n }\n ]\n};\n```\n\n## Hide Chart While Data Sum is 0\n\nBy default, if the data sum is 0, the series will divide the shape equally. For instance, if you don't want to show any shape while all 4 series have value equals 0, you could define [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) to `false`.\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: 'Direct Visit'\n },\n {\n value: 0,\n name: 'Union Ad'\n },\n {\n value: 0,\n name: 'Search Engine'\n }\n ]\n }\n ]\n};\n```\n\nIf you are willing to hide the label as well, define the [`series.label.show`](${optionPath}series-pie.label.show) to `false` as well.\n\n```js live\noption = {\n series: [{\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n }\n data: [{\n value: 0,\n name: 'Direct Visit'\n }, {\n value: 0,\n name: 'Union Ad'\n }, {\n value: 0,\n name: 'Search Engine'\n }]\n }]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/5a2cdacef8764660e90f.js b/handbook/_nuxt/js/5a2cdacef8764660e90f.js
new file mode 100644
index 0000000..16a94f5
--- /dev/null
+++ b/handbook/_nuxt/js/5a2cdacef8764660e90f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[56],{350: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('click', function(params) {\n // Print name in console\n console.log(params.name);\n});\n```\n\nThere are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as ['legendselectchanged'](${mainSitePath}api.html#events.legendselectchanged) triggered while changing the legend selected (please notice that `legendselected` won't be triggered in this situation), ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) triggered while zooming the data area.\n\n## Handling the Mouse Events\n\nECharts support general mouse events: `'click'`, `'dblclick'`, `'mousedown'`, `'mousemove'`, `'mouseup'`, `'mouseover'`, `'mouseout'`, `'globalout'`, `'contextmenu'`. This is an example of opening the search result page after clicking the bar chart.\n\n```js\n// Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n// Config\nvar option = {\n xAxis: {\n data: [\n 'Shirt',\n 'Wool sweater',\n 'Chiffon shirt',\n 'Pants',\n 'High-heeled shoes',\n 'socks'\n ]\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// Use the option and data to display the chart\nmyChart.setOption(option);\n// Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https://www.google.com/search?q=' + encodeURIComponent(params.name)\n );\n});\n```\n\nAll mouse events included `params` which contained the data of the object.\n\nFormat:\n\n```js\ntype EventParams = {\n // The component name clicked,\n // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n // the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n // series name, works when componentType is 'series'.\n seriesName: string,\n // name of data (categories).\n name: string,\n // the index in 'data' array.\n dataIndex: number,\n // incoming raw data item\n data: Object,\n // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n // most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n // incoming data value\n value: number | Array,\n // color of the shape, works when componentType is 'series'.\n color: string\n};\n```\n\nIdentify where the mouse clicked.\n\n```js\nmyChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // Clicked on the markPoint\n if (params.seriesIndex === 5) {\n // clicked on the markPoint of the series with index = 5\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked at the edge of graph.\n } else {\n // clicked at the node of graph.\n }\n }\n }\n});\n```\n\nUse `query` to trigger callback of the specified component:\n\n```js\nchart.on(eventName, query, handler);\n```\n\n`query` can be `string` or `Object`.\n\nIf it is `string`, the format can be `mainType` or `mainType.subType`, such as:\n\n```js\nchart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n```\n\nIf it is `Object`, `query` can include more than one attribute:\n\n```js\n{\n ${mainType}Index: number // component index\n ${mainType}Name: string // component name\n ${mainType}Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // date item type, such as 'node', 'edge'\n element: string // name of element in custom series.\n}\n```\n\nSuch as:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // when elements in series named 'uuu' triggered 'mouseover'\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // call this method while the edge of graph was clicked.\n});\n```\n\nFor example:\n\n```js\nchart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // when data named 'my_el' triggered 'mouseup'.\n});\n```\n\nYou can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:\n\n```js\nmyChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n```\n\n## Event of Component Interaction\n\nAll Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the [events](${mainSitePath}/api.html#events) document.\n\nHere is an example of listening to legend event:\n\n```js\n// Show/hide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n // State if legend is selected.\n var isSelected = params.selected[params.name];\n // print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n // print for all legends.\n console.log(params.selected);\n});\n```\n\n## Writing Code to Trigger Component Action Manually\n\nYou can trigger events such as `'legendselectchanged'` not only by the user but also with code manually. It can be used to display the tooltip, select the legend.\n\nIn ECharts `myChart.dispatchAction({ type: '' })` is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.\n\nCommonly used behavior and corresponding parameters are listed in [action](${mainSitePath}/api.html#action).\n\nThe following example shows how to highlight each sector one by one in the pie chart using `dispatchAction`.\n\n```js live\noption = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: [\n 'Direct Access',\n 'Email Marketing',\n 'Affiliate Ads',\n 'Video Ads',\n 'Search Engines'\n ]\n },\n series: [\n {\n name: 'Access Source',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct Access' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Affiliate Ads' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n```\n\n## Listen to Events on the Blank Area\n\nSometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.\n\nBefore we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.\n\n```js\nmyChart.getZr().on('click', function(event) {\n // This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n // This listener is listening to a `echarts event`.\n});\n```\n\nzrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.\n\nHaving zrender events, we can implement listen to events from the blank as follows:\n\n```js\nmyChart.getZr().on('click', function(event) {\n // No \"target\" means that mouse/pointer is not on\n // any of the graphic elements, which is \"blank\".\n if (!event.target) {\n // Click on blank. Do something.\n }\n});\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/5d1142ae6628d75175e9.js b/handbook/_nuxt/js/5d1142ae6628d75175e9.js
new file mode 100644
index 0000000..24eed71
--- /dev/null
+++ b/handbook/_nuxt/js/5d1142ae6628d75175e9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[91],{385: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/handbook/_nuxt/js/5ef99a256860d34294a2.js b/handbook/_nuxt/js/5ef99a256860d34294a2.js
new file mode 100644
index 0000000..0243157
--- /dev/null
+++ b/handbook/_nuxt/js/5ef99a256860d34294a2.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[入门示例](${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: [\"衬衫\",\"羊毛衫\",\"雪纺衫\",\"裤子\",\"高跟鞋\",\"袜子\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n```\n\n或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n// 显示标题,图例和空的坐标轴\nmyChart.setOption({\n title: {\n text: '异步数据加载示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// 异步加载数据\n$.get('data.json').done(function(data) {\n // 填入数据\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // 根据名字对应到相应的系列\n name: '销量',\n data: data.data\n }\n ]\n });\n});\n```\n\n如下:\n\n<md-example src=\"doc-example/tutorial-async\"></md-example>\n\nECharts 中在更新数据的时候需要通过`name`属性对应到相应的系列,上面示例中如果`name`不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的`name`数据。\n\n## loading 动画\n\n如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。\n\nECharts 默认有提供了一个简单的加载动画。只需要调用 [showLoading](api.html#echartsInstance.showLoading) 方法显示。数据加载完成后再调用 [hideLoading](api.html#echartsInstance.hideLoading) 方法隐藏加载动画。\n\n```js\nmyChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n```\n\n效果如下:\n\n<md-example src=\"doc-example/tutorial-loading\"></md-example>\n\n## 数据的动态更新\n\nECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。\n\n所有数据的更新都通过 [setOption](~api.html#echartsInstance.setOption)实现,你只需要定时获取数据,[setOption](~api.html#echartsInstance.setOption) 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。\n\n具体可以看下面示例:\n\n<md-example src=\"doc-example/tutorial-dynamic-data\"></md-example>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/5f203866781801df115b.js b/handbook/_nuxt/js/5f203866781801df115b.js
deleted file mode 100644
index c36a64a..0000000
--- a/handbook/_nuxt/js/5f203866781801df115b.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{207:function(t,n,e){t.exports={}},214:function(t,n,e){t.exports={}},215:function(t,n,e){t.exports={}},216:function(t,n,e){t.exports={}},217:function(t,n,e){t.exports={}},218:function(t,n,e){"use strict";e(207)},235:function(t,n,e){"use strict";e(214)},236:function(t,n,e){"use strict";e(215)},244:function(t,n,e){"use strict";e(216)},247:function(t,n,e){"use strict";e(217)},261:function(t,n,e){"use strict";e.r(n);var c=e(2),o=(e(20),e(0)),r=e(206),l=(e(155),e(32),e(107)),d=Object(r.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,n){return{fullSrc:Object(r.a)((function(){return l.a.exampleViewPath.replace("${lang}",n.root.$i18n.locale)+t.src}))}}}),h=e(7),m=Object(h.a)(d,(function(){var t=this,n=t.$createElement;return(t._self._c||n)("iframe",{attrs:{width:t.width,height:t.height,src:t.fullSrc}})}),[],!1,null,null,null).exports,f=(e(31),o.default.extend({props:{type:{type:String,default:"info",validator:function(t){return["info","success","warning","danger"].includes(t)}}}})),v=(e(218),Object(h.a)(f,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("blockquote",{class:"md-alert md-alert-"+t.type},[e("p",[t._t("default")],2)])}),[],!1,null,"a47f983e",null).exports),z=(e(15),e(219)),O=(e(220),e(221)),y=(e(208),e(209),e(210),e(25),e(26),e(21),e(64),{});var w=e(222),k=e(223),_=e.n(k),j=e(12);function C(){var t={},n=[],e=[],c=window.setTimeout,o=window.setInterval;function r(t,n){var o=c(t,n);return e.push(o),o}function l(t,e){var c=o(t,e);return n.push(c),c}var d,h=[];return{resize:function(){d&&d.resize()},dispose:function(){d&&(d.dispose(),d=null)},getDataURL:function(){return d.getDataURL({pixelRatio:2,excludeComponents:["toolbox"]})},getOption:function(){return d.getOption()},getInstance:function(){return d},run:function(c,code,o){var m,f,v;o=o||{},d||(d=echarts.init(c,o.darkMode?"dark":"",{renderer:o.renderer,useDirtyRect:o.useDirtyRect}),f=(m=d).on,v=m.setOption,m.on=function(t){var n=f.apply(m,arguments);return h.push(t),n},m.setOption=function(){return v.apply(this,arguments)}),function(){for(var i=0;i<n.length;i++)clearInterval(n[i]);for(i=0;i<e.length;i++)clearTimeout(e[i]);n=[],e=[]}(),function(t){h.forEach((function(n){t&&t.off(n)})),h.length=0}(d),t.config=null;var option=new Function("myChart","app","setTimeout","setInterval","ROOT_PATH","var option;\n"+code+"\nreturn option;")(d,t,r,l);if(option&&"object"===Object(j.a)(option)){var z=+new Date;d.setOption(option,!0),+new Date-z}}}}var x=e(234),H=e.n(x),S=Object(r.c)({components:{},props:{source:{type:String}},setup:function(t){var n=Object(r.f)(null),e=Object(r.f)(!1);return Object(r.d)((function(){new H.a(n.value,{text:function(n){return t.source}}).on("success",(function(t){t.clearSelection(),e.value=!0,window.setTimeout((function(){e.value=!1}),2e3)}))})),{clipboardChecked:e,copyButton:n}}}),P=(e(235),Object(h.a)(S,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{ref:"copyButton",staticClass:"clipboard"},[t.clipboardChecked?e("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[e("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"}})]):e("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[e("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[e("path",{attrs:{"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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"}})])])])}),[],!1,null,"479657ca",null).exports);function R(){return"undefined"==typeof echarts?(t=["https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"],Promise.all(t.map((function(t){return"string"==typeof t?{url:t,type:t.match(/\.css$/)?"css":"js"}:t})).map((function(t){if(y[t.url])return y[t.url];var n=new Promise((function(n,e){if("js"===t.type){var script=document.createElement("script");script.src=t.url,script.async=!1,script.onload=function(){n(null)},script.onerror=function(){e()},document.body.appendChild(script)}else if("css"===t.type){var link=document.createElement("link");link.rel="stylesheet",link.href=t.url,link.onload=function(){n(null)},link.onerror=function(){e()},document.body.appendChild(link)}}));return y[t.url]=n,n})))).then((function(){})):Promise.resolve();var t}var $=Object(r.c)({components:{PrismEditor:z.a,CodeBlockCopyClipboard:P},props:{lang:{type:String,default:"js"},layout:{type:String,default:"tb",validator:function(t){return["lr","tb","rl","bt"].includes(t)}}},setup:function(t,n){var e,c=Object(r.f)(""),o=Object(r.f)(null);function l(){e&&e.resize()}var d=_()((function(){R().then((function(){e||(Object(w.a)(Object(r.g)(o),l),e=C());try{Object(r.g)(o)&&e.run(Object(r.g)(o),Object(r.g)(c))}catch(t){console.error(t)}}))}),500,{trailing:!0});return Object(r.h)(c,(function(){d()})),Object(r.d)((function(){var t=n.slots.default&&n.slots.default();c.value=(t&&t[0].text||"").trim()})),Object(r.e)((function(){Object(w.b)(Object(r.g)(o),l)})),{innerCode:c,previewContainer:o,highlighter:function(code){return Object(O.highlight)(code,O.languages[t.lang]||O.languages.js)}}}}),E=(e(236),Object(h.a)($,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return t.innerCode?e("div",{class:"md-live layout-"+t.layout},[e("div",{staticClass:"md-live-editor"},[e("div",{staticClass:"md-live-editor-container"},[e("prism-editor",{attrs:{highlight:t.highlighter},model:{value:t.innerCode,callback:function(n){t.innerCode=n},expression:"innerCode"}})],1),t._v(" "),e("div",{staticClass:"md-live-tag"},[t._v("live")]),t._v(" "),e("code-block-copy-clipboard",{attrs:{source:t.innerCode}})],1),t._v(" "),e("div",{ref:"previewContainer",staticClass:"md-live-preview"})]):t._e()}),[],!1,null,null,null).exports),M=e(237),B=e.n(M),T=(e(238),e(239),e(240),e(241),e(242),e(243),/^(diff)-([\w-]+)/i);var D=Object(r.c)({components:{CodeBlockCopyClipboard:P},props:{lang:{type:String,default:"js"},lineHighlights:String,fileName:String},setup:function(t,n){var e=Object(r.f)(""),c=Object(r.a)((function(){return function(t,n){var e="",c=(t=t||"").match(T);c&&(t=c[2],e=B.a.languages.diff),t="vue"===t?"html":t,e||(e=B.a.languages[t]);var o=c?"diff-".concat(t):t,code=e?B.a.highlight(n,e,o):n;return t&&e||(t="text",code=code.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")),{lang:t,code:code}}(t.lang,e.value)}));return Object(r.d)((function(){var t=n.slots.default&&n.slots.default();e.value=(t&&t[0].text||"").trim()})),{rawCode:e,highlightResult:c}}}),L=(e(244),Object(h.a)(D,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"md-code-block"},[e("div",{staticClass:"nuxt-content-highlight"},[e("pre",{class:"language-"+t.highlightResult.lang+" line-numbers"},[e("code",{domProps:{innerHTML:t._s(t.highlightResult.code)}})])]),t._v(" "),t.fileName?e("span",{staticClass:"filename"},[t._v(t._s(t.fileName))]):t._e(),t._v(" "),e("code-block-copy-clipboard",{attrs:{source:t.rawCode}})],1)}),[],!1,null,null,null).exports),N=(e(245),Object(r.c)({props:{link:String},setup:function(t){return{fullLink:Object(r.a)((function(){return l.a.optionPath+t.link}))}}})),I=Object(h.a)(N,(function(){var t=this,n=t.$createElement;return(t._self._c||n)("a",{attrs:{href:t.fullLink,target:"_blank"}},[t._v(t._s(t.link))])}),[],!1,null,null,null).exports;o.default.use(r.b),o.default.component("md-example",m),o.default.component("md-alert",v),o.default.component("md-live",E),o.default.component("md-code-block",L),o.default.component("md-option",I);var U={"contents/zh/concepts/visual-map.md":["Ovilia","pissang"],"contents/zh/concepts/tooltip.md":["Ovilia"],"contents/zh/concepts/style.md":["pissang"],"contents/zh/concepts/series.md":["Ovilia"],"contents/zh/concepts/options.md":["Ovilia"],"contents/zh/concepts/legend.md":["Ovilia","pissang","yufeng04"],"contents/zh/concepts/event.md":["100pah","Ovilia","huanghan01","pissang","plainheart"],"contents/zh/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/zh/concepts/data-transform.md":["100pah","pissang"],"contents/zh/concepts/coordinate.md":["Ovilia"],"contents/zh/concepts/chart-size.md":["Ovilia","pissang"],"contents/zh/concepts/axis.md":["Ovilia","huanghan01","pissang","plainheart","yufeng04"],"contents/zh/best-practice/specification/scatter/scatter.md":["pissang"],"contents/zh/best-practice/specification/scatter/bubble.md":["pissang"],"contents/zh/best-practice/specification/radar.md":["pissang"],"contents/zh/best-practice/specification/pie/basic-pie.md":["pissang"],"contents/zh/best-practice/specification/line/stacked-area.md":["pissang"],"contents/zh/best-practice/specification/line/basic-line.md":["pissang"],"contents/zh/best-practice/specification/line/area.md":["pissang"],"contents/zh/best-practice/specification/gauge.md":["pissang"],"contents/zh/best-practice/specification/funnel.md":["pissang"],"contents/zh/best-practice/specification/bar/stacked-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/grouped-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/bi-directional-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/basic-bar.md":["pissang"],"contents/zh/best-practice/mobile.md":["Ovilia"],"contents/zh/best-practice/design/color-enhance.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practice/canvas-vs-svg.md":["100pah","Ovilia","pissang"],"contents/zh/best-practice/aria.md":["Ovilia","pissang"],"contents/zh/basics/resource.md":["Ovilia","pissang"],"contents/zh/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/zh/basics/release-note/v5-feature.md":["pissang"],"contents/zh/basics/release-note/5-2-0.md":["pissang"],"contents/zh/basics/inspiration.md":["Ovilia","pissang"],"contents/zh/basics/import.md":["pissang"],"contents/zh/basics/help.md":["100pah","Ovilia","pissang","plainheart"],"contents/zh/basics/download.md":["100pah","Ovilia","pissang"],"contents/zh/application/mobile.md":["Ovilia"],"contents/zh/application/label/rich-text.md":["pissang"],"contents/zh/application/interaction/drag.md":["pissang"],"contents/zh/application/data/dynamic-data.md":["Ovilia","pissang"],"contents/zh/application/data/drilldown.md":["pissang"],"contents/zh/application/cross-platform/wechat-app.md":["Ovilia","pissang"],"contents/zh/application/cross-platform/server.md":["Ovilia","pissang"],"contents/zh/application/cross-platform/baidu-app.md":["Ovilia","pissang"],"contents/zh/application/connect.md":["Ovilia"],"contents/zh/application/chart-types/scatter/basic-scatter.md":["Ovilia","Wdingding","pissang"],"contents/zh/application/chart-types/pie/rose.md":["Ovilia","pissang"],"contents/zh/application/chart-types/pie/doughnut.md":["pissang"],"contents/zh/application/chart-types/pie/basic-pie.md":["Hansz00","Ovilia","pissang"],"contents/zh/application/chart-types/line/step-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/stacked-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/smooth-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/basic-line.md":["Hansz00","Ovilia","pissang"],"contents/zh/application/chart-types/line/area-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/waterfall.md":["Ovilia"],"contents/zh/application/chart-types/bar/stacked-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/polar-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/basic-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/bar-race.md":["Ovilia"],"contents/en/posts.yml":["pissang"],"contents/en/meta/edit-guide.md":["pissang"],"contents/en/get-started.md":["Ovilia","pissang"],"contents/en/concepts/visual-map.md":["pissang"],"contents/en/concepts/tooltip.md":["huanghan01"],"contents/en/concepts/style.md":["pissang"],"contents/en/concepts/series.md":["huanghan01"],"contents/en/concepts/options.md":["huanghan01"],"contents/en/concepts/legend.md":["huanghan01","pissang"],"contents/en/concepts/event.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/data-transform.md":["100pah","pissang"],"contents/en/concepts/coordinate.md":["huanghan01"],"contents/en/concepts/chart-size.md":["huanghan01","pissang"],"contents/en/concepts/axis.md":["huanghan01","pissang"],"contents/en/best-practice/specification/scatter/scatter.md":["pissang"],"contents/en/best-practice/specification/scatter/bubble.md":["pissang"],"contents/en/best-practice/specification/radar.md":["pissang"],"contents/en/best-practice/specification/pie/basic-pie.md":["pissang"],"contents/en/best-practice/specification/line/stacked-area.md":["pissang"],"contents/en/best-practice/specification/line/basic-line.md":["pissang"],"contents/en/best-practice/specification/line/area.md":["pissang"],"contents/en/best-practice/specification/gauge.md":["pissang"],"contents/en/best-practice/specification/funnel.md":["pissang"],"contents/en/best-practice/specification/bar/stacked-bar.md":["pissang"],"contents/en/best-practice/specification/bar/grouped-bar.md":["pissang"],"contents/en/best-practice/specification/bar/bi-directional-bar.md":["pissang"],"contents/en/best-practice/specification/bar/basic-bar.md":["pissang"],"contents/en/best-practice/mobile.md":["Hansz00"],"contents/en/best-practice/design/color-enhance.md":["Hansz00","pissang"],"contents/en/best-practice/canvas-vs-svg.md":["100pah","Hansz00","Ovilia","pissang"],"contents/en/best-practice/aria.md":["Hansz00","Ovilia","pissang"],"contents/en/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/en/basics/release-note/v5-feature.md":["pissang"],"contents/en/basics/inspiration.md":["pissang"],"contents/en/basics/import.md":["pissang"],"contents/en/basics/help.md":["pissang"],"contents/en/basics/download.md":["Ovilia"],"contents/en/application/label/rich-text.md":["pissang"],"contents/en/application/interaction/drag.md":["pissang"],"contents/en/application/data/dynamic-data.md":["Hansz00","Ovilia","pissang"],"contents/en/application/data/drilldown.md":["Hansz00"],"contents/en/application/cross-platform/server.md":["pissang"],"contents/en/application/chart-types/scatter/basic-scatter.md":["Hansz00","pissang"],"contents/en/application/chart-types/pie/rose.md":["Hansz00","pissang"],"contents/en/application/chart-types/pie/doughnut.md":["pissang"],"contents/en/application/chart-types/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/step-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/stacked-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/smooth-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/basic-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/area-line.md":["Hank","Hansz00","pissang"],"contents/en/application/chart-types/bar/waterfall.md":["Hansz00"],"contents/en/application/chart-types/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/application/chart-types/bar/polar-bar.md":["Hansz00"],"contents/en/application/chart-types/bar/basic-bar.md":["Hank","Hansz00","pissang"],"contents/en/application/chart-types/bar/bar-race.md":["Hansz00"],"contents/.prettierrc":["pissang"],"contents/zh/get-started.md":["Ovilia","pissang"],"contents/zh/meta/edit-guide.md":["pissang"],"contents/zh/meta/writing.md":["Ovilia","pissang"],"contents/zh/posts.yml":["pissang"]};e(154);var W=Object(r.c)({props:{path:String},setup:function(t){return{contributors:Object(r.a)((function(){return U["contents/".concat(t.path||"",".md")]})),sourcePath:Object(r.a)((function(){return(n=t.path).endsWith(".md")||(n+=".md"),e&&(n+="#".concat(decodeURIComponent(e))),"https://github.com/".concat(l.a.gitRepo,"/tree/master/contents/").concat(n);var n,e}))}}}),J=(e(247),Object(h.a)(W,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"post-contributors"},[e("h3",[e("span",{staticClass:"inline-block align-middle"},[t._v("本文贡献者")]),t._v(" "),e("a",{staticClass:"inline-block align-middle text-sm",attrs:{target:"_blank",href:t.sourcePath,title:"编辑本文"}},[e("svg",{staticClass:"h-8 w-8 inline-block align-middle",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[e("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"}})]),t._v(" "),e("span",{staticClass:"inline-block align-middle"},[t._v("在 GitHub 上编辑本页")])])]),t._v(" "),t.contributors&&t.contributors.length?e("div",{staticClass:"post-contributors-list"},t._l(t.contributors,(function(n){return e("a",{key:n,staticClass:"post-contributor",attrs:{href:"https://github.com/"+n,target:"_blank"}},[e("img",{attrs:{alt:n,src:"https://avatars.githubusercontent.com/"+n+"?size=60"}}),t._v(" "),e("span",[t._v(t._s(n))])])})),0):t._e()])}),[],!1,null,null,null).exports),V=o.default.extend({components:{Contributors:J},asyncData:function(t){return Object(c.a)(regeneratorRuntime.mark((function n(){var e,c,o,r,article;return regeneratorRuntime.wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return e=t.$content,c=t.params,o=t.i18n,r="".concat(o.locale,"/").concat(c.pathMatch),n.next=4,e(r).fetch();case 4:return article=n.sent,n.abrupt("return",{article:article,postPath:r});case 6:case"end":return n.stop()}}),n)})))()}}),A=Object(h.a)(V,(function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[e("div",{staticClass:"post-inner"},[e("nuxt-content",{attrs:{document:t.article}}),t._v(" "),e("div",{staticClass:"table-of-contents"},[e("h4",{staticClass:"toc-container-header"},[t._v(t._s(t.$t("inThisPage")))]),t._v(" "),e("ul",t._l(t.article.toc,(function(link){return e("li",{key:link.id,class:{toc2:2===link.depth,toc3:3===link.depth}},[e("NuxtLink",{attrs:{to:"#"+link.id}},[t._v(t._s(link.text))])],1)})),0)])],1),t._v(" "),e("contributors",{attrs:{path:t.postPath}})],1)}),[],!1,null,null,null);n.default=A.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/5fdb54cffce312072f70.js b/handbook/_nuxt/js/5fdb54cffce312072f70.js
new file mode 100644
index 0000000..07aec07
--- /dev/null
+++ b/handbook/_nuxt/js/5fdb54cffce312072f70.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[112],{406: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 值,一个变量增加,另一个变量增加。\n\n- 负相关:数据点从高 x、y 值的点到低 x、y 值,一个变量增加,另一个变量减少。\n\n- 不相关:数据没有明显的方向性,一个变量变化对另一个没有影响。\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/scatter/scatter5.jpg">\n</img>\n\n需要注意的是,散点图能够有效的说明两个变量之间的相关性,但是并不能有力地证明 \b 其中存在因果关系。例如广告投放量和点击率是正相关的,但是不能说点击率高一定是因为广告投放量多造成的。但是,如果有明显的正相关性,就有足够的理由去增加投放量,然后再去观察数据。\n\n## 散点图的使用建议\n\n1、如果一个散点图没有显示变量之间的任何关系,那么或许该图表类型不是此数据的最佳选择。\n\n2、如果数据包含不同系列,可以给不同系列使用不同的颜色,例如蓝色代表男性,红色代表女性,并增加图例标注出蓝色代表的含义。可以区分了解男女不同性别身高和体重的分布状况。还可以分别添加每个系列平均值的辅助线,可以更好的理解数据的分布情况,如图中女生体重高于平均值的比低于平均值的少。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xBy9E2oufM">\n</iframe>\n\n在观察两个变量之间的关系时,趋势线是非常有用的,趋势线的形状走向解释了两个变量之间的关系类型,还可以用来预测未来的值。但需要注意的是趋势线最可只能使用两条,以免干扰正常的数据的阅读。\n\n3、散点图只有有足够多的数据点,并且数据之间有相关性时才能呈现很好的结果。如果一份数据只有极少的信息或者数据间没有相关性,那么绘制一个很空的散点图和不相关的散点图都是没有意义的。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/611aafabdd03120aa457.js b/handbook/_nuxt/js/611aafabdd03120aa457.js
new file mode 100644
index 0000000..35dadce
--- /dev/null
+++ b/handbook/_nuxt/js/611aafabdd03120aa457.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[104],{398: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、以电商网站数据为代表,漏斗图能直观地展现从最初展现网站到最终下订单购买这整个流程中的转化状况。它不仅能展示用户从看到网站到实现购买的最终转化率,还可以展示每个步骤的转化率,能够直观地展示和说明问题所在,进而能针对性地通过各阶段的转化分析去改善设计。\n\n如下图,「展现」「点击」「访问」三个环节基本并没有太大的流失,但是从「访问」到「咨询」环节数据明显减少,所以就可以重点分析为什么咨询量明显减少,例如是不是咨询的入口不够明显造成的。\b\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf">\n</iframe>\n\n2、可以对两个基于统一事情前后的两份数据使用叠加两个漏斗图进行对比,例如下图通过预期值和实现值的对比,可以分析每一项实现情况和预期指标的偏差。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f">\n</iframe>\n\n3、还可以用左右对比的漏斗图同时分析两个项目的转化情况。如下图可见项目 B 从「访问」到「咨询」环节的流失率明显大于项目 A。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1">\n</iframe>\n\n4、漏斗图不是表示各个分类的占比情况,而是展示数据变化的一个逻辑流程,如果数据是无逻辑顺序的占比比较,建议使用饼图更合适。\n\n5、可以根据数据选择使用对比色或同一种颜色的色调渐变,从最暗到最浅来依照漏斗的尺寸排列。切记,不要添加许多图层和颜色造成漏斗图难以阅读。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/62ba2f989de415a036e0.js b/handbook/_nuxt/js/62ba2f989de415a036e0.js
new file mode 100644
index 0000000..301e2be
--- /dev/null
+++ b/handbook/_nuxt/js/62ba2f989de415a036e0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[72],{366: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/handbook/_nuxt/js/640c834f52de46dd5d86.js b/handbook/_nuxt/js/640c834f52de46dd5d86.js
new file mode 100644
index 0000000..7795f31
--- /dev/null
+++ b/handbook/_nuxt/js/640c834f52de46dd5d86.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[62],{356: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 complicated charts, like `graph`, `themeRiver`, and `treemap` have their own built-in mapping.\n\nBesides, ECharts provides [visualMap component](${optionPath}visualMap) for general visual mapping. Visual elements allowed in `visualMap` component are:\n\n- `symbol`, `symbolSize`\n- `color`, `opacity`, `colorAlpha`,\n- `colorLightness`, `colorSaturation`, `colorHue`\n\nNext, we are going to introduce how to use `visualMap` component.\n\n## Data and Dimension\n\nData are usually stored in [series.data](${optionPath}series.data) in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).\n\nFor example, [series.data](${optionPath}series.data) is the most common form, which is a `list`, a common array:\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ];\n}\n```\n\n```js\nseries: {\n data: [\n {\n // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ];\n}\n```\n\nUsually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, `visualMap` is what you need. Most likely, [scatter charts](${optionPath}series-scatter) use radius to represent the third dimension.\n\n## The visualMap Component\n\nvisualMap component defines the mapping from _which dimension of data_ to _what visual elements_.\n\nThe following two types of visualMap components are supported, identified with [visualMap.type](${optionPath}visualMap.type).\n\nIts structure is defined as:\n\n```js\noption = {\n visualMap: [\n // can define multiple visualMap components at the same time\n {\n // the first visualMap component\n type: 'continuous' // defined as continuous visualMap\n // ...\n },\n {\n // the second visualMap component\n type: 'piecewise' // defined as discrete visualMap\n // ...\n }\n ]\n // ...\n};\n```\n\n## Continuous and Piecewise Visual Mapping Components\n\nThe visual mapping component of ECharts is divided into continuous ([visualMapContinuous](${optionPath}visualMap-continuous)) and piecewise ([visualMapPiecewise](${optionPath}visualMap-piecewise)).\n\nContinuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.\n\n### Continuous Visual Mapping\n\nContinuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.\n\n```js\noption = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped\n seriesIndex: 4, // The fourth series is mapped.\n inRange: {\n // The visual configuration in the selected range\n color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping\n // the minimum value of the data is mapped to 'blue', and\n // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.\n // The rest is automatically calculated linearly.\n symbolSize: [30, 100] // Defines the mapping range for the graphic size.\n // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.\n // The maximum value is mapped to 100.\n // The rest is calculated linearly automatically.\n },\n outOfRange: {\n // Check the out of range visual configuration\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n```\n\nwhere [visualMap.inRange](${optionPath}visualMap.inRange) indicates the style used for data within the data mapping range; while [visualMap.outOfRange](${optionPath}visualMap.outOfRange) specifies the style for data outside the mapping range.\n\n[visualMap.dimension](~visualMap.dimension) specifies which dimension of the data will be visually mapped.\n\n### Piecewise Visual Mapping\n\nThe piecewise visual mapping component has three modes.\n\n- Continuous data average segmentation: based on [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) to automatically split the data into pieces equally.\n- Continuous data custom segmentation: define the range of each piece based on [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces).\n- Discrete data (categorical data): categories are defined in [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories).\n\nTo use segmented visual map, you need to set `type` to `'piecewise'` and choose one of the above three configuration items.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/665c93bf69d53406f781.js b/handbook/_nuxt/js/665c93bf69d53406f781.js
new file mode 100644
index 0000000..9a80b4d
--- /dev/null
+++ b/handbook/_nuxt/js/665c93bf69d53406f781.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[102],{396: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 src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3">\n</iframe>\n\n## 分组柱状 \b 图的使用建议\n\n1、如果每个分组中的系列过多,数据的阅读难度就会越增加。因此,不建议每个分组中包含过多的系列。在系列较多时,可考虑使用堆叠柱状图。\n\n2、建议每两个分组之间的间距大于组内不同系列之间的间距,以免造成视觉上错误的归类和区分。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/720ad2bd81da1ff6ab64.js b/handbook/_nuxt/js/720ad2bd81da1ff6ab64.js
new file mode 100644
index 0000000..1f0eec3
--- /dev/null
+++ b/handbook/_nuxt/js/720ad2bd81da1ff6ab64.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[69],{363: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, -119, -361, -203];\nvar help = [];\nvar positive = [];\nvar negative = [];\nfor (var i = 0, sum = 0; i < data.length; ++i) {\n if (data[i] >= 0) {\n positive.push(data[i]);\n negative.push('-');\n } else {\n positive.push('-');\n negative.push(-data[i]);\n }\n\n if (i === 0) {\n help.push(0);\n } else {\n sum += data[i - 1];\n if (data[i] < 0) {\n help.push(sum + data[i]);\n } else {\n help.push(sum);\n }\n }\n}\n\noption = {\n title: {\n text: 'Waterfall'\n },\n grid: {\n left: '3%',\n right: '4%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: {\n type: 'category',\n splitLine: { show: false },\n data: (function() {\n var list = [];\n for (var i = 1; i <= 11; i++) {\n list.push('Oct/' + i);\n }\n return list;\n })()\n },\n yAxis: {\n type: 'value'\n },\n series: [\n {\n type: 'bar',\n stack: 'all',\n itemStyle: {\n normal: {\n barBorderColor: 'rgba(0,0,0,0)',\n color: 'rgba(0,0,0,0)'\n },\n emphasis: {\n barBorderColor: 'rgba(0,0,0,0)',\n color: 'rgba(0,0,0,0)'\n }\n },\n data: help\n },\n {\n name: 'positive',\n type: 'bar',\n stack: 'all',\n data: positive\n },\n {\n name: 'negative',\n type: 'bar',\n stack: 'all',\n data: negative,\n itemStyle: {\n color: '#f33'\n }\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/73812c7893e59b5541bd.js b/handbook/_nuxt/js/73812c7893e59b5541bd.js
new file mode 100644
index 0000000..f7827fd
--- /dev/null
+++ b/handbook/_nuxt/js/73812c7893e59b5541bd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[48],{342: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 scale between axis, and connect the item in each axis together to become a polygon.\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\nThe radar chart is useful for indicating similar values and checking outliers in variables. The radar chart can also be used to reflect what variables have a higher or lower score in the dataset, which makes it a better way to display the performance (see below). Similarly, the radar chart is often used in displaying data such as rankings, evaluations and reviews.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1">\n</iframe>\n\nAs shown below, the chart shows the comparison of the budgets and expenses in a kindergarten fund flow. The six areas involved are food, toys, picture books, medical care and clothing. Every axis has a range of 0 to 500. The toy is the only part that was overspent while the clothing is far below the budget. It becomes clear at a glance while using a radar chart to show which part is overspend or underspend.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf">\n</iframe>\n\n## Suggestion for Using Radar Chart\n\n1. The number of polygons in the radar chart should be limited. If there are more than 5 categories to be evaluated, both the outline and color block will be too confusing to read.\n\n2. Including too many axes can also make the radar chart difficult to read. Therefore, try to keep the radar chart concisely and limit the number of variables.\n\n3. Because the radial distance is hard to judge, it is still difficult to read the specific value although there are grid lines. We recommend you use a line graph if you need to compare specific values.\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/754ba7617eda8d165b0a.js b/handbook/_nuxt/js/754ba7617eda8d165b0a.js
new file mode 100644
index 0000000..164337a
--- /dev/null
+++ b/handbook/_nuxt/js/754ba7617eda8d165b0a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[49],{343: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 location and size of bubbles. \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## Suggestion for Using Bubble Chart\n\n1. It is a good choice to choose a bubble chart while there are three series, features and related values. As shown below, the bubbles\' position shows the date and specific time when the code was submitted, the size explained the amount of code submitted.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard">\n</iframe>\n\n2. You can also change the color of the bubbles. The chart below uses different colors to classify the air quality of three areas. Red is Beijing, yellow is Shanghai, and blue is Guangzhou. Users can visually compare and analyze the tire quality of the three places. \n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1">\n</iframe>\n\n3. A bubble chart commonly used to combine with the map. X-axis and y-axis represent the longitude and latitude. The size of bubbles can be the magnitude of the value at that position.\n\n<iframe max-width="830" width="100%" height="400" \n src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population">\n</iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/760b6453f24288d76446.js b/handbook/_nuxt/js/760b6453f24288d76446.js
new file mode 100644
index 0000000..2924b59
--- /dev/null
+++ b/handbook/_nuxt/js/760b6453f24288d76446.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[70],{364: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: '#ff0',\n opacity: 0.5\n }\n }\n ]\n};\n```\n\n通过 [`areaStyle`](${optionPath}series-line.areaStyle) 设置折线图的填充区域样式,将其设为为 `{}` 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 `areaStyle` 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/7a12cecdc21751569220.js b/handbook/_nuxt/js/7a12cecdc21751569220.js
new file mode 100644
index 0000000..02cfdfb
--- /dev/null
+++ b/handbook/_nuxt/js/7a12cecdc21751569220.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[98],{392:function(n,t,e){"use strict";e.r(t),t.default="# 用颜色增强可视化效果\n\n在数据可视化所有的视觉通道中,色彩作为视觉的第一感知因素,对数据进行的视觉编码和传达是很有效的。如果使用得当,颜色可以非常有效地增强可视化效果。接下来,我们来看看具体有哪些使用颜色来增强可视化效果的的技巧和方法。\n\n## 颜色的情感共鸣\n\n颜色感知是一个复杂的物理和心理相互作用的结果。为了证明了人们感知到的色彩有冷与暖之分,日本色彩学家大智浩曾做过一个实验,将一个工作场地涂灰青色,另一个工作场地涂红橙色,两个工作场地的客观温度劳动强度相同,在灰青色工作场地工作的员工相对更容易感觉到冷。人们进一步研究发现,除了冷与暖的不同感受,色彩还有轻与重、远与近、活泼与忧郁等区分。所以,色彩之所以强大之处在于不同的色彩会使人的心理与生理产生不同的感受,从而引起情感反应和影响人们的情绪。\n\n在可视化的颜色选择上,如果我们选用的颜色与我们数据本身的特点以及想要传达的情绪吻合的话,就可以伴随着颜色的视觉传达而引起情感上的共鸣。\n\n例如某个甜品店各类甜品的销售占比,数据如下:\n\n<img max-width=\"830\" width=\"50%\" height=\"100%\" src=\"images/design/color/color01.png\" />\n\n针对这份数据,下面两个相同样式的图表,我们采用了两种不同配色方案,对比来看很明显,右图的配色更适合用来展示甜品数据。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/color/color02.png\" />\n\n因为相较于蓝色、紫色而言,橙色、黄色、粉色、绿色都是有利于提升食欲的颜色,而且更容易使人们产生温暖、幸福的情感,而这种情感与吃甜品时人们产生的感觉是一致的。另一方面,甜品本身的面向用户大多数是儿童和女性,针对这部分用户,比较明快、可爱的图表颜色也是更好的选择。而左侧的图表的配色更适合用于展示某种商务、男性群体的数据,因为左图的配色更容易使人产生理性和冷静的情感。\n\n## 颜色的语义共鸣\n\n不同的颜色可以帮助我们识别和区分不同的类别。我们已经习惯将颜色和各种事物或概念绑定在一起。当提到某些事物时我们经常会迅速的在心中匹配其对应的颜色,例如提到“云朵”会想到白色,“爱情”会想到粉红色。这些自然的、与语义一致的颜色被称为\"语义共鸣色\"。\n\n研究表明,对于有固定颜色的词,匹配其具有语义共鸣的颜色,能有效的加速认知过程,反之则会阻碍认知,这种有趣的现象称为\"斯特鲁普效应\"。我们可以做个的对比试验,分别在上图两行文字中找到“黄”字。这个过程中,第一行的“黄”可以被快速定位到,因为对应使用了黄色。而在第二行寻找的时候,可能有人最早定位到的会是“紫”字,因为此处“紫”字使用了黄色,这就阻碍了我们寻找的速度和准确性。\n\n<img max-width=\"830\" width=\"100%\" height=\"100%\" src=\"images/design/color/color03.png\" />\n\n有效地利用语义共鸣色,即采用与数据本身意义一致的颜色,也可以提高可视化的认知效率。例如可以使用蓝色的来显示\"海洋\"的数据、使用黄色来显示“沙漠”的数据。\n\n视觉效果应该尽可能容易地解释,因此请尝试找到与观众的先入为主和文化联想相匹配的配色方案。如下示例中展示了猕猴桃、香蕉、橙子、草莓四种水果的销售数据,分别选择了与水果本身一致的颜色绿色、黄色、橙色、红色。这样,我们在辨别和记忆每个柱状所对应的水果时就轻而易举了。\n\n```js live\noption = {\n color: ['#6E9D4E', '#EDDB4F', '#F7923A', '#F14747'],\n title: {\n text: '7月水果销量',\n x: '2%',\n y: '1%',\n textStyle: {\n color: '#fff',\n fontSize: '26'\n }\n },\n tooltip: {\n trigger: 'axis'\n },\n legend: {\n data: ['猕猴桃', '香蕉', '橙子', '草莓'],\n align: 'right'\n },\n grid: {\n left: '3%',\n right: '3%',\n top: '15%',\n bottom: '3%',\n containLabel: true\n },\n xAxis: [\n {\n type: 'category',\n data: ['第一周', '第二周', '第三周', '第四周']\n }\n ],\n yAxis: [\n {\n type: 'value',\n axisLabel: {\n formatter: '{value}'\n }\n }\n ],\n series: [\n {\n name: '猕猴桃',\n type: 'bar',\n data: [60, 110, 180, 100]\n },\n {\n name: '香蕉',\n type: 'bar',\n data: [90, 130, 170, 130]\n },\n {\n name: '橙子',\n type: 'bar',\n data: [120, 160, 140, 160]\n },\n {\n name: '草莓',\n type: 'bar',\n data: [110, 190, 90, 100]\n }\n ]\n};\n```\n\n## 图表颜色要吻合常识\n\n在数据可视化的过程中,颜色的使用与图表的数据、展示环境、受众人群、社会背景等因素直接相关,我们不可以把颜色作为独立的因素去设计。在开始选择可视化作品的颜色时,请先克制住自由创作的热情,查看一下这是否是一份特殊的数据,再去选择对的颜色。例如一个股票数据的图表中,红色和绿色都有独特的含义。所以可视化图表颜色的选择吻合认知的常识,可以帮助我们更好地理解和区分数据。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xp1oqJoQqG\">\n</iframe>\n\n再例如查看天气温度。蓝色和红色易于理解,无需任何解释,并且易于区分。\n\n<iframe max-width=\"830\" width=\"100%\" height=\"400\"\nsrc=\"https://gallery.echartsjs.com/view-lite.html?cid=xIVoX5gZcT&v=1\">\n</iframe>\n\n## 用颜色来区分数据\n\n我们通常会使用折线图来分析趋势,但是有的时候有需要明确的知道某个数据是否在某个区间范围内,因此我们可以主动地去配置定义区域。例如我们设定 25%-75% 这个范围内为我们计划完成的销售额,那我们可以在这个定义区域的范围内,给每个区域设置成一个底色,这样就可以高效的识别出每个数据处于哪个区间范围内,未达到、达到、超额完成的值。\n\n所以,颜色可以被用来作为提高图表的可阅读性和有效工具。\n\n<img max-width=\"830\" width=\"80%\" height=\"100%\" src=\"images/design/color/color04.png\" />\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/7b7766c05b4dfac68edd.js b/handbook/_nuxt/js/7b7766c05b4dfac68edd.js
new file mode 100644
index 0000000..34e9b7a
--- /dev/null
+++ b/handbook/_nuxt/js/7b7766c05b4dfac68edd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[25],{319: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 curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.\n\n## Implement basic dragging\n\nFirst of all, we create a basic [line chart (line series)](${optionPath}series-line):\n\n```js\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n // Set a big symbolSize for dragging convenience.\n symbolSize: symbolSize,\n data: data\n }\n ]\n});\n```\n\nSince the symbols in line is not draggable, we make them draggable by using [graphic component](${optionPath}graphic) to add draggable circular elements to symbols respectively.\n\n```js\nmyChart.setOption({\n // Declare a graphic component, which contains some graphic elements\n // with the type of 'circle'.\n // Here we have used the method `echarts.util.map`, which has the same\n // behavior as Array.prototype.map, and is compatible with ES5-.\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' means this graphic element is a shape of circle.\n type: 'circle',\n\n shape: {\n // The radius of the circle.\n r: symbolSize / 2\n },\n // Transform is used to located the circle. position:\n // [x, y] means translate the circle to the position [x, y].\n // The API `convertToPixel` is used to get the position of\n // the circle, which will introduced later.\n position: myChart.convertToPixel('grid', dataItem),\n\n // Make the circle invisible (but mouse event works as normal).\n invisible: true,\n // Make the circle draggable.\n draggable: true,\n // Give a big z value, which makes the circle cover the symbol\n // in line series.\n z: 100,\n // This is the event handler of dragging, which will be triggered\n // repeatly while dragging. See more details below.\n // A util method `echarts.util.curry` is used here to generate a\n // new function the same as `onPointDragging`, except that the\n // first parameter is fixed to be the `dataIndex` here.\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n```\n\nIn the code above, API [convertToPixel](api.html#echartsInstance.convertToPixel) is used to convert data to its \"pixel coodinate\", based on which each graphic elements can be rendered on canvas. The term \"pixel coodinate\" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence `myChart.convertToPixel('grid', dataItem)`, the first parameter `'grid'` indicates that `dataItem` should be converted in the first [grid component (cartesian)](${optionPath}grid).\n\n**Notice:** `convertToPixel` should not be called before the first time that `setOption` called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.\n\nNow points have been made draggable. Then we will bind event listeners on dragging to those points.\n\n```js\n// This function will be called repeatly while dragging.\n// The mission of this function is to update `series.data` based on\n// the new points updated by dragging, and to re-render the line\n// series based on the new data, by which the graphic elements of the\n// line series can be synchronized with dragging.\nfunction onPointDragging(dataIndex) {\n // Here the `data` is declared in the code block in the beginning\n // of this article. The `this` refers to the dragged circle.\n // `this.position` is the current position of the circle.\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // Re-render the chart based on the updated `data`.\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\nIn the code above, API [convertFromPixel](api.html#echartsInstance.convertFromPixel) is used, which is the reversed process of [convertToPixel](api.html#echartsInstance.convertToPixel). `myChart.convertFromPixel('grid', this.position)` converts a pixel coordinate to data item in [grid (cartesian)](${optionPath}grid).\n\nFinally, add those code to make graphic elements responsive to change of canvas size.\n\n```js\nwindow.addEventListener('resize', function() {\n // Re-calculate the position of each circle and update chart using `setOption`.\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n```\n\n## Add tooltip component\n\nNow basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use [tooltip component](${optionPath}tooltip) to do that. Nevertheless, tooltip component has its default \"show/hide rule\", which is not applicable in this case. So we need to customize the \"show/hide rule\" for our case.\n\nAdd these snippets to the code block above:\n\n```js\nmyChart.setOption({\n // ...,\n tooltip: {\n // Means disable default \"show/hide rule\".\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n```\n\n```js\nmyChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // Customize \"show/hide rule\", show when mouse over, hide when mouse out.\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n```\n\nThe API [dispatchAction](${mainSitePath}/api.html#echartsInstance.dispatchAction) is used to show/hide tooltip content, where actions [showTip](${mainSitePath}/api.html#action.tooltip.showTip) and [hideTip](api.html#action.tooltip.hideTip) is dispatched.\n\n## Full code\n\nFull code is shown as follow:\n\n```js\nimport echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\nWith knowledge introduced above, more feature can be implemented. For example, [dataZoom component](${optionPath}dataZoom) can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/7be2520855c4af391f2b.js b/handbook/_nuxt/js/7be2520855c4af391f2b.js
new file mode 100644
index 0000000..c8bfede
--- /dev/null
+++ b/handbook/_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/handbook/_nuxt/js/83188ac1f619f3c94f4d.js b/handbook/_nuxt/js/83188ac1f619f3c94f4d.js
new file mode 100644
index 0000000..1517aab
--- /dev/null
+++ b/handbook/_nuxt/js/83188ac1f619f3c94f4d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[75],{369: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 name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n\n需要注意的是,这里是 `value` 不需要是百分比数据,ECharts 会根据所有数据的 `value` ,按比例分配它们在饼图中对应的弧度。\n\n## 饼图样式设置\n\n### 饼图的半径\n\n饼图的半径可以通过 [`series.radius`](${optionPath}series-pie.radius) 设置,可以是诸如 `'60%'` 这样相对的百分比字符串,或是 `200` 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。\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 name: '搜索引擎'\n }\n ],\n radius: '50%'\n }\n ]\n};\n```\n\n## 如果数据和为 0,不显示饼图\n\n在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 [`series.stillShowZeroSum`](${optionPath}series-pie.stillShowZeroSum) 设为 `false`。\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n\n如果希望扇形对应的标签也不显示,可以将 [`series.label.show`](${optionPath}series-pie.label.show) 设为 `false`。\n\n```js live\noption = {\n series: [\n {\n type: 'pie',\n stillShowZeroSum: false,\n label: {\n show: false\n },\n data: [\n {\n value: 0,\n name: '直接访问'\n },\n {\n value: 0,\n name: '联盟广告'\n },\n {\n value: 0,\n name: '搜索引擎'\n }\n ]\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/846067a4901846a78c55.js b/handbook/_nuxt/js/846067a4901846a78c55.js
deleted file mode 100644
index 32e9e85..0000000
--- a/handbook/_nuxt/js/846067a4901846a78c55.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see ../LICENSES */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[1],[function(t,e,n){"use strict";n.r(e),function(t,n){var r=Object.freeze({});function o(t){return null==t}function c(t){return null!=t}function f(t){return!0===t}function l(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function h(t){return null!==t&&"object"==typeof t}var d=Object.prototype.toString;function v(t){return"[object Object]"===d.call(t)}function y(t){return"[object RegExp]"===d.call(t)}function m(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function _(t){return c(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function w(t){return null==t?"":Array.isArray(t)||v(t)&&t.toString===d?JSON.stringify(t,null,2):String(t)}function x(t){var e=parseFloat(t);return isNaN(e)?t:e}function O(t,e){for(var map=Object.create(null),n=t.split(","),i=0;i<n.length;i++)map[n[i]]=!0;return e?function(t){return map[t.toLowerCase()]}:function(t){return map[t]}}O("slot,component",!0);var S=O("key,ref,slot,slot-scope,is");function A(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)return t.splice(n,1)}}var k=Object.prototype.hasOwnProperty;function C(t,e){return k.call(t,e)}function E(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var $=/-(\w)/g,j=E((function(t){return t.replace($,(function(t,e){return e?e.toUpperCase():""}))})),T=E((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),I=/\B([A-Z])/g,M=E((function(t){return t.replace(I,"-$1").toLowerCase()}));var P=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(a){var n=arguments.length;return n?n>1?t.apply(e,arguments):t.call(e,a):t.call(e)}return n._length=t.length,n};function N(t,e){e=e||0;for(var i=t.length-e,n=new Array(i);i--;)n[i]=t[i+e];return n}function L(t,e){for(var n in e)t[n]=e[n];return t}function R(t){for(var e={},i=0;i<t.length;i++)t[i]&&L(e,t[i]);return e}function F(a,b,t){}var D=function(a,b,t){return!1},U=function(t){return t};function V(a,b){if(a===b)return!0;var t=h(a),e=h(b);if(!t||!e)return!t&&!e&&String(a)===String(b);try{var n=Array.isArray(a),r=Array.isArray(b);if(n&&r)return a.length===b.length&&a.every((function(t,i){return V(t,b[i])}));if(a instanceof Date&&b instanceof Date)return a.getTime()===b.getTime();if(n||r)return!1;var o=Object.keys(a),c=Object.keys(b);return o.length===c.length&&o.every((function(t){return V(a[t],b[t])}))}catch(t){return!1}}function z(t,e){for(var i=0;i<t.length;i++)if(V(t[i],e))return i;return-1}function B(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}var H="data-server-rendered",G=["component","directive","filter"],K=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],W={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:D,isReservedAttr:D,isUnknownElement:D,getTagNamespace:F,parsePlatformTagName:U,mustUseProp:D,async:!0,_lifecycleHooks:K},J=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function X(t){var e=(t+"").charCodeAt(0);return 36===e||95===e}function Y(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var Q=new RegExp("[^"+J.source+".$_\\d]");var Z,tt="__proto__"in{},et="undefined"!=typeof window,nt="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,ot=nt&&WXEnvironment.platform.toLowerCase(),it=et&&window.navigator.userAgent.toLowerCase(),at=it&&/msie|trident/.test(it),ct=it&&it.indexOf("msie 9.0")>0,st=it&&it.indexOf("edge/")>0,ut=(it&&it.indexOf("android"),it&&/iphone|ipad|ipod|ios/.test(it)||"ios"===ot),ft=(it&&/chrome\/\d+/.test(it),it&&/phantomjs/.test(it),it&&it.match(/firefox\/(\d+)/)),lt={}.watch,pt=!1;if(et)try{var ht={};Object.defineProperty(ht,"passive",{get:function(){pt=!0}}),window.addEventListener("test-passive",null,ht)}catch(t){}var vt=function(){return void 0===Z&&(Z=!et&&!nt&&void 0!==t&&(t.process&&"server"===t.process.env.VUE_ENV)),Z},yt=et&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function mt(t){return"function"==typeof t&&/native code/.test(t.toString())}var gt,bt="undefined"!=typeof Symbol&&mt(Symbol)&&"undefined"!=typeof Reflect&&mt(Reflect.ownKeys);gt="undefined"!=typeof Set&&mt(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var _t=F,wt=0,xt=function(){this.id=wt++,this.subs=[]};xt.prototype.addSub=function(sub){this.subs.push(sub)},xt.prototype.removeSub=function(sub){A(this.subs,sub)},xt.prototype.depend=function(){xt.target&&xt.target.addDep(this)},xt.prototype.notify=function(){var t=this.subs.slice();for(var i=0,e=t.length;i<e;i++)t[i].update()},xt.target=null;var Ot=[];function St(t){Ot.push(t),xt.target=t}function At(){Ot.pop(),xt.target=Ot[Ot.length-1]}var kt=function(t,data,e,text,n,r,o,c){this.tag=t,this.data=data,this.children=e,this.text=text,this.elm=n,this.ns=void 0,this.context=r,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=data&&data.key,this.componentOptions=o,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=c,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},Ct={child:{configurable:!0}};Ct.child.get=function(){return this.componentInstance},Object.defineProperties(kt.prototype,Ct);var Et=function(text){void 0===text&&(text="");var t=new kt;return t.text=text,t.isComment=!0,t};function $t(t){return new kt(void 0,void 0,void 0,String(t))}function jt(t){var e=new kt(t.tag,t.data,t.children&&t.children.slice(),t.text,t.elm,t.context,t.componentOptions,t.asyncFactory);return e.ns=t.ns,e.isStatic=t.isStatic,e.key=t.key,e.isComment=t.isComment,e.fnContext=t.fnContext,e.fnOptions=t.fnOptions,e.fnScopeId=t.fnScopeId,e.asyncMeta=t.asyncMeta,e.isCloned=!0,e}var Tt=Array.prototype,It=Object.create(Tt);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(t){var e=Tt[t];Y(It,t,(function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var o,c=e.apply(this,n),f=this.__ob__;switch(t){case"push":case"unshift":o=n;break;case"splice":o=n.slice(2)}return o&&f.observeArray(o),f.dep.notify(),c}))}));var Mt=Object.getOwnPropertyNames(It),Pt=!0;function Nt(t){Pt=t}var Lt=function(t){this.value=t,this.dep=new xt,this.vmCount=0,Y(t,"__ob__",this),Array.isArray(t)?(tt?function(t,e){t.__proto__=e}(t,It):function(t,e,n){for(var i=0,r=n.length;i<r;i++){var o=n[i];Y(t,o,e[o])}}(t,It,Mt),this.observeArray(t)):this.walk(t)};function Rt(t,e){var n;if(h(t)&&!(t instanceof kt))return C(t,"__ob__")&&t.__ob__ instanceof Lt?n=t.__ob__:Pt&&!vt()&&(Array.isArray(t)||v(t))&&Object.isExtensible(t)&&!t._isVue&&(n=new Lt(t)),e&&n&&n.vmCount++,n}function Ft(t,e,n,r,o){var c=new xt,f=Object.getOwnPropertyDescriptor(t,e);if(!f||!1!==f.configurable){var l=f&&f.get,h=f&&f.set;l&&!h||2!==arguments.length||(n=t[e]);var d=!o&&Rt(n);Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){var e=l?l.call(t):n;return xt.target&&(c.depend(),d&&(d.dep.depend(),Array.isArray(e)&&Ut(e))),e},set:function(e){var r=l?l.call(t):n;e===r||e!=e&&r!=r||l&&!h||(h?h.call(t,e):n=e,d=!o&&Rt(e),c.notify())}})}}function Dt(t,e,n){if(Array.isArray(t)&&m(e))return t.length=Math.max(t.length,e),t.splice(e,1,n),n;if(e in t&&!(e in Object.prototype))return t[e]=n,n;var r=t.__ob__;return t._isVue||r&&r.vmCount?n:r?(Ft(r.value,e,n),r.dep.notify(),n):(t[e]=n,n)}function del(t,e){if(Array.isArray(t)&&m(e))t.splice(e,1);else{var n=t.__ob__;t._isVue||n&&n.vmCount||C(t,e)&&(delete t[e],n&&n.dep.notify())}}function Ut(t){for(var e=void 0,i=0,n=t.length;i<n;i++)(e=t[i])&&e.__ob__&&e.__ob__.dep.depend(),Array.isArray(e)&&Ut(e)}Lt.prototype.walk=function(t){for(var e=Object.keys(t),i=0;i<e.length;i++)Ft(t,e[i])},Lt.prototype.observeArray=function(t){for(var i=0,e=t.length;i<e;i++)Rt(t[i])};var Vt=W.optionMergeStrategies;function zt(t,e){if(!e)return t;for(var n,r,o,c=bt?Reflect.ownKeys(e):Object.keys(e),i=0;i<c.length;i++)"__ob__"!==(n=c[i])&&(r=t[n],o=e[n],C(t,n)?r!==o&&v(r)&&v(o)&&zt(r,o):Dt(t,n,o));return t}function Bt(t,e,n){return n?function(){var r="function"==typeof e?e.call(n,n):e,o="function"==typeof t?t.call(n,n):t;return r?zt(r,o):o}:e?t?function(){return zt("function"==typeof e?e.call(this,this):e,"function"==typeof t?t.call(this,this):t)}:e:t}function Ht(t,e){var n=e?t?t.concat(e):Array.isArray(e)?e:[e]:t;return n?function(t){for(var e=[],i=0;i<t.length;i++)-1===e.indexOf(t[i])&&e.push(t[i]);return e}(n):n}function Gt(t,e,n,r){var o=Object.create(t||null);return e?L(o,e):o}Vt.data=function(t,e,n){return n?Bt(t,e,n):e&&"function"!=typeof e?t:Bt(t,e)},K.forEach((function(t){Vt[t]=Ht})),G.forEach((function(t){Vt[t+"s"]=Gt})),Vt.watch=function(t,e,n,r){if(t===lt&&(t=void 0),e===lt&&(e=void 0),!e)return Object.create(t||null);if(!t)return e;var o={};for(var c in L(o,t),e){var f=o[c],l=e[c];f&&!Array.isArray(f)&&(f=[f]),o[c]=f?f.concat(l):Array.isArray(l)?l:[l]}return o},Vt.props=Vt.methods=Vt.inject=Vt.computed=function(t,e,n,r){if(!t)return e;var o=Object.create(null);return L(o,t),e&&L(o,e),o},Vt.provide=Bt;var qt=function(t,e){return void 0===e?t:e};function Kt(t,e,n){if("function"==typeof e&&(e=e.options),function(t,e){var n=t.props;if(n){var i,r,o={};if(Array.isArray(n))for(i=n.length;i--;)"string"==typeof(r=n[i])&&(o[j(r)]={type:null});else if(v(n))for(var c in n)r=n[c],o[j(c)]=v(r)?r:{type:r};t.props=o}}(e),function(t,e){var n=t.inject;if(n){var r=t.inject={};if(Array.isArray(n))for(var i=0;i<n.length;i++)r[n[i]]={from:n[i]};else if(v(n))for(var o in n){var c=n[o];r[o]=v(c)?L({from:o},c):{from:c}}}}(e),function(t){var e=t.directives;if(e)for(var n in e){var r=e[n];"function"==typeof r&&(e[n]={bind:r,update:r})}}(e),!e._base&&(e.extends&&(t=Kt(t,e.extends,n)),e.mixins))for(var i=0,r=e.mixins.length;i<r;i++)t=Kt(t,e.mixins[i],n);var o,c={};for(o in t)f(o);for(o in e)C(t,o)||f(o);function f(r){var o=Vt[r]||qt;c[r]=o(t[r],e[r],n,r)}return c}function Wt(t,e,n,r){if("string"==typeof n){var o=t[e];if(C(o,n))return o[n];var c=j(n);if(C(o,c))return o[c];var f=T(c);return C(o,f)?o[f]:o[n]||o[c]||o[f]}}function Jt(t,e,n,r){var o=e[t],c=!C(n,t),f=n[t],l=Qt(Boolean,o.type);if(l>-1)if(c&&!C(o,"default"))f=!1;else if(""===f||f===M(t)){var h=Qt(String,o.type);(h<0||l<h)&&(f=!0)}if(void 0===f){f=function(t,e,n){if(!C(e,"default"))return;var r=e.default;0;if(t&&t.$options.propsData&&void 0===t.$options.propsData[n]&&void 0!==t._props[n])return t._props[n];return"function"==typeof r&&"Function"!==Xt(e.type)?r.call(t):r}(r,o,t);var d=Pt;Nt(!0),Rt(f),Nt(d)}return f}function Xt(t){var e=t&&t.toString().match(/^\s*function (\w+)/);return e?e[1]:""}function Yt(a,b){return Xt(a)===Xt(b)}function Qt(t,e){if(!Array.isArray(e))return Yt(e,t)?0:-1;for(var i=0,n=e.length;i<n;i++)if(Yt(e[i],t))return i;return-1}function Zt(t,e,n){St();try{if(e)for(var r=e;r=r.$parent;){var o=r.$options.errorCaptured;if(o)for(var i=0;i<o.length;i++)try{if(!1===o[i].call(r,t,e,n))return}catch(t){ee(t,r,"errorCaptured hook")}}ee(t,e,n)}finally{At()}}function te(t,e,n,r,o){var c;try{(c=n?t.apply(e,n):t.call(e))&&!c._isVue&&_(c)&&!c._handled&&(c.catch((function(t){return Zt(t,r,o+" (Promise/async)")})),c._handled=!0)}catch(t){Zt(t,r,o)}return c}function ee(t,e,n){if(W.errorHandler)try{return W.errorHandler.call(null,t,e,n)}catch(e){e!==t&&ne(e,null,"config.errorHandler")}ne(t,e,n)}function ne(t,e,n){if(!et&&!nt||"undefined"==typeof console)throw t;console.error(t)}var re,oe=!1,ie=[],ae=!1;function ce(){ae=!1;var t=ie.slice(0);ie.length=0;for(var i=0;i<t.length;i++)t[i]()}if("undefined"!=typeof Promise&&mt(Promise)){var p=Promise.resolve();re=function(){p.then(ce),ut&&setTimeout(F)},oe=!0}else if(at||"undefined"==typeof MutationObserver||!mt(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())re=void 0!==n&&mt(n)?function(){n(ce)}:function(){setTimeout(ce,0)};else{var se=1,ue=new MutationObserver(ce),fe=document.createTextNode(String(se));ue.observe(fe,{characterData:!0}),re=function(){se=(se+1)%2,fe.data=String(se)},oe=!0}function le(t,e){var n;if(ie.push((function(){if(t)try{t.call(e)}catch(t){Zt(t,e,"nextTick")}else n&&n(e)})),ae||(ae=!0,re()),!t&&"undefined"!=typeof Promise)return new Promise((function(t){n=t}))}var pe=new gt;function he(t){de(t,pe),pe.clear()}function de(t,e){var i,n,r=Array.isArray(t);if(!(!r&&!h(t)||Object.isFrozen(t)||t instanceof kt)){if(t.__ob__){var o=t.__ob__.dep.id;if(e.has(o))return;e.add(o)}if(r)for(i=t.length;i--;)de(t[i],e);else for(i=(n=Object.keys(t)).length;i--;)de(t[n[i]],e)}}var ve=E((function(t){var e="&"===t.charAt(0),n="~"===(t=e?t.slice(1):t).charAt(0),r="!"===(t=n?t.slice(1):t).charAt(0);return{name:t=r?t.slice(1):t,once:n,capture:r,passive:e}}));function ye(t,e){function n(){var t=arguments,r=n.fns;if(!Array.isArray(r))return te(r,null,arguments,e,"v-on handler");for(var o=r.slice(),i=0;i<o.length;i++)te(o[i],null,t,e,"v-on handler")}return n.fns=t,n}function me(t,e,n,r,c,l){var h,d,v,y;for(h in t)d=t[h],v=e[h],y=ve(h),o(d)||(o(v)?(o(d.fns)&&(d=t[h]=ye(d,l)),f(y.once)&&(d=t[h]=c(y.name,d,y.capture)),n(y.name,d,y.capture,y.passive,y.params)):d!==v&&(v.fns=d,t[h]=v));for(h in e)o(t[h])&&r((y=ve(h)).name,e[h],y.capture)}function ge(t,e,n){var r;t instanceof kt&&(t=t.data.hook||(t.data.hook={}));var l=t[e];function h(){n.apply(this,arguments),A(r.fns,h)}o(l)?r=ye([h]):c(l.fns)&&f(l.merged)?(r=l).fns.push(h):r=ye([l,h]),r.merged=!0,t[e]=r}function be(t,e,n,r,o){if(c(e)){if(C(e,n))return t[n]=e[n],o||delete e[n],!0;if(C(e,r))return t[n]=e[r],o||delete e[r],!0}return!1}function _e(t){return l(t)?[$t(t)]:Array.isArray(t)?xe(t):void 0}function we(t){return c(t)&&c(t.text)&&!1===t.isComment}function xe(t,e){var i,n,r,h,d=[];for(i=0;i<t.length;i++)o(n=t[i])||"boolean"==typeof n||(h=d[r=d.length-1],Array.isArray(n)?n.length>0&&(we((n=xe(n,(e||"")+"_"+i))[0])&&we(h)&&(d[r]=$t(h.text+n[0].text),n.shift()),d.push.apply(d,n)):l(n)?we(h)?d[r]=$t(h.text+n):""!==n&&d.push($t(n)):we(n)&&we(h)?d[r]=$t(h.text+n.text):(f(t._isVList)&&c(n.tag)&&o(n.key)&&c(e)&&(n.key="__vlist"+e+"_"+i+"__"),d.push(n)));return d}function Oe(t,e){if(t){for(var n=Object.create(null),r=bt?Reflect.ownKeys(t):Object.keys(t),i=0;i<r.length;i++){var o=r[i];if("__ob__"!==o){for(var c=t[o].from,source=e;source;){if(source._provided&&C(source._provided,c)){n[o]=source._provided[c];break}source=source.$parent}if(!source)if("default"in t[o]){var f=t[o].default;n[o]="function"==typeof f?f.call(e):f}else 0}}return n}}function Se(t,e){if(!t||!t.length)return{};for(var n={},i=0,r=t.length;i<r;i++){var o=t[i],data=o.data;if(data&&data.attrs&&data.attrs.slot&&delete data.attrs.slot,o.context!==e&&o.fnContext!==e||!data||null==data.slot)(n.default||(n.default=[])).push(o);else{var c=data.slot,slot=n[c]||(n[c]=[]);"template"===o.tag?slot.push.apply(slot,o.children||[]):slot.push(o)}}for(var f in n)n[f].every(Ae)&&delete n[f];return n}function Ae(t){return t.isComment&&!t.asyncFactory||" "===t.text}function ke(t,e,n){var o,c=Object.keys(e).length>0,f=t?!!t.$stable:!c,l=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(f&&n&&n!==r&&l===n.$key&&!c&&!n.$hasNormal)return n;for(var h in o={},t)t[h]&&"$"!==h[0]&&(o[h]=Ce(e,h,t[h]))}else o={};for(var d in e)d in o||(o[d]=Ee(e,d));return t&&Object.isExtensible(t)&&(t._normalized=o),Y(o,"$stable",f),Y(o,"$key",l),Y(o,"$hasNormal",c),o}function Ce(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:_e(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function Ee(t,e){return function(){return t[e]}}function $e(t,e){var n,i,r,o,f;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),i=0,r=t.length;i<r;i++)n[i]=e(t[i],i);else if("number"==typeof t)for(n=new Array(t),i=0;i<t;i++)n[i]=e(i+1,i);else if(h(t))if(bt&&t[Symbol.iterator]){n=[];for(var l=t[Symbol.iterator](),d=l.next();!d.done;)n.push(e(d.value,n.length)),d=l.next()}else for(o=Object.keys(t),n=new Array(o.length),i=0,r=o.length;i<r;i++)f=o[i],n[i]=e(t[f],f,i);return c(n)||(n=[]),n._isVList=!0,n}function je(t,e,n,r){var o,c=this.$scopedSlots[t];c?(n=n||{},r&&(n=L(L({},r),n)),o=c(n)||e):o=this.$slots[t]||e;var f=n&&n.slot;return f?this.$createElement("template",{slot:f},o):o}function Te(t){return Wt(this.$options,"filters",t)||U}function Ie(t,e){return Array.isArray(t)?-1===t.indexOf(e):t!==e}function Me(t,e,n,r,o){var c=W.keyCodes[e]||n;return o&&r&&!W.keyCodes[e]?Ie(o,r):c?Ie(c,t):r?M(r)!==e:void 0}function Pe(data,t,e,n,r){if(e)if(h(e)){var o;Array.isArray(e)&&(e=R(e));var c=function(c){if("class"===c||"style"===c||S(c))o=data;else{var f=data.attrs&&data.attrs.type;o=n||W.mustUseProp(t,f,c)?data.domProps||(data.domProps={}):data.attrs||(data.attrs={})}var l=j(c),h=M(c);l in o||h in o||(o[c]=e[c],r&&((data.on||(data.on={}))["update:"+c]=function(t){e[c]=t}))};for(var f in e)c(f)}else;return data}function Ne(t,e){var n=this._staticTrees||(this._staticTrees=[]),r=n[t];return r&&!e||Re(r=n[t]=this.$options.staticRenderFns[t].call(this._renderProxy,null,this),"__static__"+t,!1),r}function Le(t,e,n){return Re(t,"__once__"+e+(n?"_"+n:""),!0),t}function Re(t,e,n){if(Array.isArray(t))for(var i=0;i<t.length;i++)t[i]&&"string"!=typeof t[i]&&Fe(t[i],e+"_"+i,n);else Fe(t,e,n)}function Fe(t,e,n){t.isStatic=!0,t.key=e,t.isOnce=n}function De(data,t){if(t)if(v(t)){var e=data.on=data.on?L({},data.on):{};for(var n in t){var r=e[n],o=t[n];e[n]=r?[].concat(r,o):o}}else;return data}function Ue(t,e,n,r){e=e||{$stable:!n};for(var i=0;i<t.length;i++){var slot=t[i];Array.isArray(slot)?Ue(slot,e,n):slot&&(slot.proxy&&(slot.fn.proxy=!0),e[slot.key]=slot.fn)}return r&&(e.$key=r),e}function Ve(t,e){for(var i=0;i<e.length;i+=2){var n=e[i];"string"==typeof n&&n&&(t[e[i]]=e[i+1])}return t}function ze(t,symbol){return"string"==typeof t?symbol+t:t}function Be(t){t._o=Le,t._n=x,t._s=w,t._l=$e,t._t=je,t._q=V,t._i=z,t._m=Ne,t._f=Te,t._k=Me,t._b=Pe,t._v=$t,t._e=Et,t._u=Ue,t._g=De,t._d=Ve,t._p=ze}function He(data,t,e,n,o){var c,l=this,h=o.options;C(n,"_uid")?(c=Object.create(n))._original=n:(c=n,n=n._original);var d=f(h._compiled),v=!d;this.data=data,this.props=t,this.children=e,this.parent=n,this.listeners=data.on||r,this.injections=Oe(h.inject,n),this.slots=function(){return l.$slots||ke(data.scopedSlots,l.$slots=Se(e,n)),l.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return ke(data.scopedSlots,this.slots())}}),d&&(this.$options=h,this.$slots=this.slots(),this.$scopedSlots=ke(data.scopedSlots,this.$slots)),h._scopeId?this._c=function(a,b,t,e){var r=Ye(c,a,b,t,e,v);return r&&!Array.isArray(r)&&(r.fnScopeId=h._scopeId,r.fnContext=n),r}:this._c=function(a,b,t,e){return Ye(c,a,b,t,e,v)}}function Ge(t,data,e,n,r){var o=jt(t);return o.fnContext=e,o.fnOptions=n,data.slot&&((o.data||(o.data={})).slot=data.slot),o}function qe(t,e){for(var n in e)t[j(n)]=e[n]}Be(He.prototype);var Ke={init:function(t,e){if(t.componentInstance&&!t.componentInstance._isDestroyed&&t.data.keepAlive){var n=t;Ke.prepatch(n,n)}else{(t.componentInstance=function(t,e){var n={_isComponent:!0,_parentVnode:t,parent:e},r=t.data.inlineTemplate;c(r)&&(n.render=r.render,n.staticRenderFns=r.staticRenderFns);return new t.componentOptions.Ctor(n)}(t,un)).$mount(e?t.elm:void 0,e)}},prepatch:function(t,e){var n=e.componentOptions;!function(t,e,n,o,c){0;var f=o.data.scopedSlots,l=t.$scopedSlots,h=!!(f&&!f.$stable||l!==r&&!l.$stable||f&&t.$scopedSlots.$key!==f.$key),d=!!(c||t.$options._renderChildren||h);t.$options._parentVnode=o,t.$vnode=o,t._vnode&&(t._vnode.parent=o);if(t.$options._renderChildren=c,t.$attrs=o.data.attrs||r,t.$listeners=n||r,e&&t.$options.props){Nt(!1);for(var v=t._props,y=t.$options._propKeys||[],i=0;i<y.length;i++){var m=y[i],_=t.$options.props;v[m]=Jt(m,_,e,t)}Nt(!0),t.$options.propsData=e}n=n||r;var w=t.$options._parentListeners;t.$options._parentListeners=n,sn(t,n,w),d&&(t.$slots=Se(c,o.context),t.$forceUpdate());0}(e.componentInstance=t.componentInstance,n.propsData,n.listeners,e,n.children)},insert:function(t){var e,n=t.context,r=t.componentInstance;r._isMounted||(r._isMounted=!0,dn(r,"mounted")),t.data.keepAlive&&(n._isMounted?((e=r)._inactive=!1,yn.push(e)):pn(r,!0))},destroy:function(t){var e=t.componentInstance;e._isDestroyed||(t.data.keepAlive?hn(e,!0):e.$destroy())}},We=Object.keys(Ke);function Je(t,data,e,n,l){if(!o(t)){var d=e.$options._base;if(h(t)&&(t=d.extend(t)),"function"==typeof t){var v;if(o(t.cid)&&void 0===(t=function(t,e){if(f(t.error)&&c(t.errorComp))return t.errorComp;if(c(t.resolved))return t.resolved;var n=tn;n&&c(t.owners)&&-1===t.owners.indexOf(n)&&t.owners.push(n);if(f(t.loading)&&c(t.loadingComp))return t.loadingComp;if(n&&!c(t.owners)){var r=t.owners=[n],l=!0,d=null,v=null;n.$on("hook:destroyed",(function(){return A(r,n)}));var y=function(t){for(var i=0,e=r.length;i<e;i++)r[i].$forceUpdate();t&&(r.length=0,null!==d&&(clearTimeout(d),d=null),null!==v&&(clearTimeout(v),v=null))},m=B((function(n){t.resolved=en(n,e),l?r.length=0:y(!0)})),w=B((function(e){c(t.errorComp)&&(t.error=!0,y(!0))})),x=t(m,w);return h(x)&&(_(x)?o(t.resolved)&&x.then(m,w):_(x.component)&&(x.component.then(m,w),c(x.error)&&(t.errorComp=en(x.error,e)),c(x.loading)&&(t.loadingComp=en(x.loading,e),0===x.delay?t.loading=!0:d=setTimeout((function(){d=null,o(t.resolved)&&o(t.error)&&(t.loading=!0,y(!1))}),x.delay||200)),c(x.timeout)&&(v=setTimeout((function(){v=null,o(t.resolved)&&w(null)}),x.timeout)))),l=!1,t.loading?t.loadingComp:t.resolved}}(v=t,d)))return function(t,data,e,n,r){var o=Et();return o.asyncFactory=t,o.asyncMeta={data:data,context:e,children:n,tag:r},o}(v,data,e,n,l);data=data||{},Ln(t),c(data.model)&&function(t,data){var e=t.model&&t.model.prop||"value",n=t.model&&t.model.event||"input";(data.attrs||(data.attrs={}))[e]=data.model.value;var r=data.on||(data.on={}),o=r[n],f=data.model.callback;c(o)?(Array.isArray(o)?-1===o.indexOf(f):o!==f)&&(r[n]=[f].concat(o)):r[n]=f}(t.options,data);var y=function(data,t,e){var n=t.options.props;if(!o(n)){var r={},f=data.attrs,l=data.props;if(c(f)||c(l))for(var h in n){var d=M(h);be(r,l,h,d,!0)||be(r,f,h,d,!1)}return r}}(data,t);if(f(t.options.functional))return function(t,e,data,n,o){var f=t.options,l={},h=f.props;if(c(h))for(var d in h)l[d]=Jt(d,h,e||r);else c(data.attrs)&&qe(l,data.attrs),c(data.props)&&qe(l,data.props);var v=new He(data,l,o,n,t),y=f.render.call(null,v._c,v);if(y instanceof kt)return Ge(y,data,v.parent,f);if(Array.isArray(y)){for(var m=_e(y)||[],_=new Array(m.length),i=0;i<m.length;i++)_[i]=Ge(m[i],data,v.parent,f);return _}}(t,y,data,e,n);var m=data.on;if(data.on=data.nativeOn,f(t.options.abstract)){var slot=data.slot;data={},slot&&(data.slot=slot)}!function(data){for(var t=data.hook||(data.hook={}),i=0;i<We.length;i++){var e=We[i],n=t[e],r=Ke[e];n===r||n&&n._merged||(t[e]=n?Xe(r,n):r)}}(data);var w=t.options.name||l;return new kt("vue-component-"+t.cid+(w?"-"+w:""),data,void 0,void 0,void 0,e,{Ctor:t,propsData:y,listeners:m,tag:l,children:n},v)}}}function Xe(t,e){var n=function(a,b){t(a,b),e(a,b)};return n._merged=!0,n}function Ye(t,e,data,n,r,o){return(Array.isArray(data)||l(data))&&(r=n,n=data,data=void 0),f(o)&&(r=2),function(t,e,data,n,r){if(c(data)&&c(data.__ob__))return Et();c(data)&&c(data.is)&&(e=data.is);if(!e)return Et();0;Array.isArray(n)&&"function"==typeof n[0]&&((data=data||{}).scopedSlots={default:n[0]},n.length=0);2===r?n=_e(n):1===r&&(n=function(t){for(var i=0;i<t.length;i++)if(Array.isArray(t[i]))return Array.prototype.concat.apply([],t);return t}(n));var o,f;if("string"==typeof e){var l;f=t.$vnode&&t.$vnode.ns||W.getTagNamespace(e),o=W.isReservedTag(e)?new kt(W.parsePlatformTagName(e),data,n,void 0,void 0,t):data&&data.pre||!c(l=Wt(t.$options,"components",e))?new kt(e,data,n,void 0,void 0,t):Je(l,data,t,n,e)}else o=Je(e,data,t,n);return Array.isArray(o)?o:c(o)?(c(f)&&Qe(o,f),c(data)&&function(data){h(data.style)&&he(data.style);h(data.class)&&he(data.class)}(data),o):Et()}(t,e,data,n,r)}function Qe(t,e,n){if(t.ns=e,"foreignObject"===t.tag&&(e=void 0,n=!0),c(t.children))for(var i=0,r=t.children.length;i<r;i++){var l=t.children[i];c(l.tag)&&(o(l.ns)||f(n)&&"svg"!==l.tag)&&Qe(l,e,n)}}var Ze,tn=null;function en(t,base){return(t.__esModule||bt&&"Module"===t[Symbol.toStringTag])&&(t=t.default),h(t)?base.extend(t):t}function nn(t){return t.isComment&&t.asyncFactory}function rn(t){if(Array.isArray(t))for(var i=0;i<t.length;i++){var e=t[i];if(c(e)&&(c(e.componentOptions)||nn(e)))return e}}function on(t,e){Ze.$on(t,e)}function an(t,e){Ze.$off(t,e)}function cn(t,e){var n=Ze;return function r(){var o=e.apply(null,arguments);null!==o&&n.$off(t,r)}}function sn(t,e,n){Ze=t,me(e,n||{},on,an,cn,t),Ze=void 0}var un=null;function fn(t){var e=un;return un=t,function(){un=e}}function ln(t){for(;t&&(t=t.$parent);)if(t._inactive)return!0;return!1}function pn(t,e){if(e){if(t._directInactive=!1,ln(t))return}else if(t._directInactive)return;if(t._inactive||null===t._inactive){t._inactive=!1;for(var i=0;i<t.$children.length;i++)pn(t.$children[i]);dn(t,"activated")}}function hn(t,e){if(!(e&&(t._directInactive=!0,ln(t))||t._inactive)){t._inactive=!0;for(var i=0;i<t.$children.length;i++)hn(t.$children[i]);dn(t,"deactivated")}}function dn(t,e){St();var n=t.$options[e],r=e+" hook";if(n)for(var i=0,o=n.length;i<o;i++)te(n[i],t,null,t,r);t._hasHookEvent&&t.$emit("hook:"+e),At()}var vn=[],yn=[],mn={},gn=!1,bn=!1,_n=0;var wn=0,xn=Date.now;if(et&&!at){var On=window.performance;On&&"function"==typeof On.now&&xn()>document.createEvent("Event").timeStamp&&(xn=function(){return On.now()})}function Sn(){var t,e;for(wn=xn(),bn=!0,vn.sort((function(a,b){return a.id-b.id})),_n=0;_n<vn.length;_n++)(t=vn[_n]).before&&t.before(),e=t.id,mn[e]=null,t.run();var n=yn.slice(),r=vn.slice();_n=vn.length=yn.length=0,mn={},gn=bn=!1,function(t){for(var i=0;i<t.length;i++)t[i]._inactive=!0,pn(t[i],!0)}(n),function(t){var i=t.length;for(;i--;){var e=t[i],n=e.vm;n._watcher===e&&n._isMounted&&!n._isDestroyed&&dn(n,"updated")}}(r),yt&&W.devtools&&yt.emit("flush")}var An=0,kn=function(t,e,n,r,o){this.vm=t,o&&(t._watcher=this),t._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++An,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new gt,this.newDepIds=new gt,this.expression="","function"==typeof e?this.getter=e:(this.getter=function(path){if(!Q.test(path)){var t=path.split(".");return function(e){for(var i=0;i<t.length;i++){if(!e)return;e=e[t[i]]}return e}}}(e),this.getter||(this.getter=F)),this.value=this.lazy?void 0:this.get()};kn.prototype.get=function(){var t;St(this);var e=this.vm;try{t=this.getter.call(e,e)}catch(t){if(!this.user)throw t;Zt(t,e,'getter for watcher "'+this.expression+'"')}finally{this.deep&&he(t),At(),this.cleanupDeps()}return t},kn.prototype.addDep=function(t){var e=t.id;this.newDepIds.has(e)||(this.newDepIds.add(e),this.newDeps.push(t),this.depIds.has(e)||t.addSub(this))},kn.prototype.cleanupDeps=function(){for(var i=this.deps.length;i--;){var t=this.deps[i];this.newDepIds.has(t.id)||t.removeSub(this)}var e=this.depIds;this.depIds=this.newDepIds,this.newDepIds=e,this.newDepIds.clear(),e=this.deps,this.deps=this.newDeps,this.newDeps=e,this.newDeps.length=0},kn.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():function(t){var e=t.id;if(null==mn[e]){if(mn[e]=!0,bn){for(var i=vn.length-1;i>_n&&vn[i].id>t.id;)i--;vn.splice(i+1,0,t)}else vn.push(t);gn||(gn=!0,le(Sn))}}(this)},kn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||h(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){Zt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},kn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},kn.prototype.depend=function(){for(var i=this.deps.length;i--;)this.deps[i].depend()},kn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||A(this.vm._watchers,this);for(var i=this.deps.length;i--;)this.deps[i].removeSub(this);this.active=!1}};var Cn={enumerable:!0,configurable:!0,get:F,set:F};function En(t,e,n){Cn.get=function(){return this[e][n]},Cn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,Cn)}function $n(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},o=t.$options._propKeys=[];t.$parent&&Nt(!1);var c=function(c){o.push(c);var f=Jt(c,e,n,t);Ft(r,c,f),c in t||En(t,"_props",c)};for(var f in e)c(f);Nt(!0)}(t,e.props),e.methods&&function(t,e){t.$options.props;for(var n in e)t[n]="function"!=typeof e[n]?F:P(e[n],t)}(t,e.methods),e.data?function(t){var data=t.$options.data;v(data=t._data="function"==typeof data?function(data,t){St();try{return data.call(t,t)}catch(e){return Zt(e,t,"data()"),{}}finally{At()}}(data,t):data||{})||(data={});var e=Object.keys(data),n=t.$options.props,i=(t.$options.methods,e.length);for(;i--;){var r=e[i];0,n&&C(n,r)||X(r)||En(t,"_data",r)}Rt(data,!0)}(t):Rt(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=vt();for(var o in e){var c=e[o],f="function"==typeof c?c:c.get;0,r||(n[o]=new kn(t,f||F,F,jn)),o in t||Tn(t,o,c)}}(t,e.computed),e.watch&&e.watch!==lt&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var i=0;i<r.length;i++)Pn(t,n,r[i]);else Pn(t,n,r)}}(t,e.watch)}var jn={lazy:!0};function Tn(t,e,n){var r=!vt();"function"==typeof n?(Cn.get=r?In(e):Mn(n),Cn.set=F):(Cn.get=n.get?r&&!1!==n.cache?In(e):Mn(n.get):F,Cn.set=n.set||F),Object.defineProperty(t,e,Cn)}function In(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),xt.target&&e.depend(),e.value}}function Mn(t){return function(){return t.call(this,this)}}function Pn(t,e,n,r){return v(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}var Nn=0;function Ln(t){var e=t.options;if(t.super){var n=Ln(t.super);if(n!==t.superOptions){t.superOptions=n;var r=function(t){var e,n=t.options,r=t.sealedOptions;for(var o in n)n[o]!==r[o]&&(e||(e={}),e[o]=n[o]);return e}(t);r&&L(t.extendOptions,r),(e=t.options=Kt(n,t.extendOptions)).name&&(e.components[e.name]=t)}}return e}function Rn(t){this._init(t)}function Fn(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,o=t._Ctor||(t._Ctor={});if(o[r])return o[r];var c=t.name||n.options.name;var f=function(t){this._init(t)};return(f.prototype=Object.create(n.prototype)).constructor=f,f.cid=e++,f.options=Kt(n.options,t),f.super=n,f.options.props&&function(t){var e=t.options.props;for(var n in e)En(t.prototype,"_props",n)}(f),f.options.computed&&function(t){var e=t.options.computed;for(var n in e)Tn(t.prototype,n,e[n])}(f),f.extend=n.extend,f.mixin=n.mixin,f.use=n.use,G.forEach((function(t){f[t]=n[t]})),c&&(f.options.components[c]=f),f.superOptions=n.options,f.extendOptions=t,f.sealedOptions=L({},f.options),o[r]=f,f}}function Dn(t){return t&&(t.Ctor.options.name||t.tag)}function Un(pattern,t){return Array.isArray(pattern)?pattern.indexOf(t)>-1:"string"==typeof pattern?pattern.split(",").indexOf(t)>-1:!!y(pattern)&&pattern.test(t)}function Vn(t,filter){var e=t.cache,n=t.keys,r=t._vnode;for(var o in e){var c=e[o];if(c){var f=Dn(c.componentOptions);f&&!filter(f)&&zn(e,o,n,r)}}}function zn(t,e,n,r){var o=t[e];!o||r&&o.tag===r.tag||o.componentInstance.$destroy(),t[e]=null,A(n,e)}!function(t){t.prototype._init=function(t){var e=this;e._uid=Nn++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var o=r.componentOptions;n.propsData=o.propsData,n._parentListeners=o.listeners,n._renderChildren=o.children,n._componentTag=o.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Kt(Ln(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&sn(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,o=n&&n.context;t.$slots=Se(e._renderChildren,o),t.$scopedSlots=r,t._c=function(a,b,e,n){return Ye(t,a,b,e,n,!1)},t.$createElement=function(a,b,e,n){return Ye(t,a,b,e,n,!0)};var c=n&&n.data;Ft(t,"$attrs",c&&c.attrs||r,null,!0),Ft(t,"$listeners",e._parentListeners||r,null,!0)}(e),dn(e,"beforeCreate"),function(t){var e=Oe(t.$options.inject,t);e&&(Nt(!1),Object.keys(e).forEach((function(n){Ft(t,n,e[n])})),Nt(!0))}(e),$n(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),dn(e,"created"),e.$options.el&&e.$mount(e.$options.el)}}(Rn),function(t){var e={get:function(){return this._data}},n={get:function(){return this._props}};Object.defineProperty(t.prototype,"$data",e),Object.defineProperty(t.prototype,"$props",n),t.prototype.$set=Dt,t.prototype.$delete=del,t.prototype.$watch=function(t,e,n){var r=this;if(v(e))return Pn(r,t,e,n);(n=n||{}).user=!0;var o=new kn(r,t,e,n);if(n.immediate)try{e.call(r,o.value)}catch(t){Zt(t,r,'callback for immediate watcher "'+o.expression+'"')}return function(){o.teardown()}}}(Rn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var i=0,o=t.length;i<o;i++)r.$on(t[i],n);else(r._events[t]||(r._events[t]=[])).push(n),e.test(t)&&(r._hasHookEvent=!0);return r},t.prototype.$once=function(t,e){var n=this;function r(){n.$off(t,r),e.apply(n,arguments)}return r.fn=e,n.$on(t,r),n},t.prototype.$off=function(t,e){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(t)){for(var r=0,o=t.length;r<o;r++)n.$off(t[r],e);return n}var c,f=n._events[t];if(!f)return n;if(!e)return n._events[t]=null,n;for(var i=f.length;i--;)if((c=f[i])===e||c.fn===e){f.splice(i,1);break}return n},t.prototype.$emit=function(t){var e=this,n=e._events[t];if(n){n=n.length>1?N(n):n;for(var r=N(arguments,1),o='event handler for "'+t+'"',i=0,c=n.length;i<c;i++)te(n[i],e,r,e,o)}return e}}(Rn),function(t){t.prototype._update=function(t,e){var n=this,r=n.$el,o=n._vnode,c=fn(n);n._vnode=t,n.$el=o?n.__patch__(o,t):n.__patch__(n.$el,t,e,!1),c(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},t.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},t.prototype.$destroy=function(){var t=this;if(!t._isBeingDestroyed){dn(t,"beforeDestroy"),t._isBeingDestroyed=!0;var e=t.$parent;!e||e._isBeingDestroyed||t.$options.abstract||A(e.$children,t),t._watcher&&t._watcher.teardown();for(var i=t._watchers.length;i--;)t._watchers[i].teardown();t._data.__ob__&&t._data.__ob__.vmCount--,t._isDestroyed=!0,t.__patch__(t._vnode,null),dn(t,"destroyed"),t.$off(),t.$el&&(t.$el.__vue__=null),t.$vnode&&(t.$vnode.parent=null)}}}(Rn),function(t){Be(t.prototype),t.prototype.$nextTick=function(t){return le(t,this)},t.prototype._render=function(){var t,e=this,n=e.$options,r=n.render,o=n._parentVnode;o&&(e.$scopedSlots=ke(o.data.scopedSlots,e.$slots,e.$scopedSlots)),e.$vnode=o;try{tn=e,t=r.call(e._renderProxy,e.$createElement)}catch(n){Zt(n,e,"render"),t=e._vnode}finally{tn=null}return Array.isArray(t)&&1===t.length&&(t=t[0]),t instanceof kt||(t=Et()),t.parent=o,t}}(Rn);var Bn=[String,RegExp,Array],Hn={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:Bn,exclude:Bn,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var t in this.cache)zn(this.cache,t,this.keys)},mounted:function(){var t=this;this.$watch("include",(function(e){Vn(t,(function(t){return Un(e,t)}))})),this.$watch("exclude",(function(e){Vn(t,(function(t){return!Un(e,t)}))}))},render:function(){var slot=this.$slots.default,t=rn(slot),e=t&&t.componentOptions;if(e){var n=Dn(e),r=this.include,o=this.exclude;if(r&&(!n||!Un(r,n))||o&&n&&Un(o,n))return t;var c=this.cache,f=this.keys,l=null==t.key?e.Ctor.cid+(e.tag?"::"+e.tag:""):t.key;c[l]?(t.componentInstance=c[l].componentInstance,A(f,l),f.push(l)):(c[l]=t,f.push(l),this.max&&f.length>parseInt(this.max)&&zn(c,f[0],f,this._vnode)),t.data.keepAlive=!0}return t||slot&&slot[0]}}};!function(t){var e={get:function(){return W}};Object.defineProperty(t,"config",e),t.util={warn:_t,extend:L,mergeOptions:Kt,defineReactive:Ft},t.set=Dt,t.delete=del,t.nextTick=le,t.observable=function(t){return Rt(t),t},t.options=Object.create(null),G.forEach((function(e){t.options[e+"s"]=Object.create(null)})),t.options._base=t,L(t.options.components,Hn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=N(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Kt(this.options,t),this}}(t),Fn(t),function(t){G.forEach((function(e){t[e]=function(t,n){return n?("component"===e&&v(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}}))}(t)}(Rn),Object.defineProperty(Rn.prototype,"$isServer",{get:vt}),Object.defineProperty(Rn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(Rn,"FunctionalRenderContext",{value:He}),Rn.version="2.6.12";var Gn=O("style,class"),qn=O("input,textarea,option,select,progress"),Kn=O("contenteditable,draggable,spellcheck"),Wn=O("events,caret,typing,plaintext-only"),Jn=O("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Xn="http://www.w3.org/1999/xlink",Yn=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},Qn=function(t){return Yn(t)?t.slice(6,t.length):""},Zn=function(t){return null==t||!1===t};function er(t){for(var data=t.data,e=t,n=t;c(n.componentInstance);)(n=n.componentInstance._vnode)&&n.data&&(data=nr(n.data,data));for(;c(e=e.parent);)e&&e.data&&(data=nr(data,e.data));return function(t,e){if(c(t)||c(e))return rr(t,or(e));return""}(data.staticClass,data.class)}function nr(t,e){return{staticClass:rr(t.staticClass,e.staticClass),class:c(t.class)?[t.class,e.class]:e.class}}function rr(a,b){return a?b?a+" "+b:a:b||""}function or(t){return Array.isArray(t)?function(t){for(var e,n="",i=0,r=t.length;i<r;i++)c(e=or(t[i]))&&""!==e&&(n&&(n+=" "),n+=e);return n}(t):h(t)?function(t){var e="";for(var n in t)t[n]&&(e&&(e+=" "),e+=n);return e}(t):"string"==typeof t?t:""}var ir={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},ar=O("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),cr=O("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),sr=function(t){return ar(t)||cr(t)};var ur=Object.create(null);var fr=O("text,number,password,search,email,tel,url");var lr=Object.freeze({createElement:function(t,e){var n=document.createElement(t);return"select"!==t||e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(t,e){return document.createElementNS(ir[t],e)},createTextNode:function(text){return document.createTextNode(text)},createComment:function(text){return document.createComment(text)},insertBefore:function(t,e,n){t.insertBefore(e,n)},removeChild:function(t,e){t.removeChild(e)},appendChild:function(t,e){t.appendChild(e)},parentNode:function(t){return t.parentNode},nextSibling:function(t){return t.nextSibling},tagName:function(t){return t.tagName},setTextContent:function(t,text){t.textContent=text},setStyleScope:function(t,e){t.setAttribute(e,"")}}),pr={create:function(t,e){dr(e)},update:function(t,e){t.data.ref!==e.data.ref&&(dr(t,!0),dr(e))},destroy:function(t){dr(t,!0)}};function dr(t,e){var n=t.data.ref;if(c(n)){var r=t.context,o=t.componentInstance||t.elm,f=r.$refs;e?Array.isArray(f[n])?A(f[n],o):f[n]===o&&(f[n]=void 0):t.data.refInFor?Array.isArray(f[n])?f[n].indexOf(o)<0&&f[n].push(o):f[n]=[o]:f[n]=o}}var vr=new kt("",{},[]),yr=["create","activate","update","remove","destroy"];function mr(a,b){return a.key===b.key&&(a.tag===b.tag&&a.isComment===b.isComment&&c(a.data)===c(b.data)&&function(a,b){if("input"!==a.tag)return!0;var i,t=c(i=a.data)&&c(i=i.attrs)&&i.type,e=c(i=b.data)&&c(i=i.attrs)&&i.type;return t===e||fr(t)&&fr(e)}(a,b)||f(a.isAsyncPlaceholder)&&a.asyncFactory===b.asyncFactory&&o(b.asyncFactory.error))}function gr(t,e,n){var i,r,map={};for(i=e;i<=n;++i)c(r=t[i].key)&&(map[r]=i);return map}var _r={create:wr,update:wr,destroy:function(t){wr(t,vr)}};function wr(t,e){(t.data.directives||e.data.directives)&&function(t,e){var n,r,o,c=t===vr,f=e===vr,l=Or(t.data.directives,t.context),h=Or(e.data.directives,e.context),d=[],v=[];for(n in h)r=l[n],o=h[n],r?(o.oldValue=r.value,o.oldArg=r.arg,Ar(o,"update",e,t),o.def&&o.def.componentUpdated&&v.push(o)):(Ar(o,"bind",e,t),o.def&&o.def.inserted&&d.push(o));if(d.length){var y=function(){for(var i=0;i<d.length;i++)Ar(d[i],"inserted",e,t)};c?ge(e,"insert",y):y()}v.length&&ge(e,"postpatch",(function(){for(var i=0;i<v.length;i++)Ar(v[i],"componentUpdated",e,t)}));if(!c)for(n in l)h[n]||Ar(l[n],"unbind",t,t,f)}(t,e)}var xr=Object.create(null);function Or(t,e){var i,n,r=Object.create(null);if(!t)return r;for(i=0;i<t.length;i++)(n=t[i]).modifiers||(n.modifiers=xr),r[Sr(n)]=n,n.def=Wt(e.$options,"directives",n.name);return r}function Sr(t){return t.rawName||t.name+"."+Object.keys(t.modifiers||{}).join(".")}function Ar(t,e,n,r,o){var c=t.def&&t.def[e];if(c)try{c(n.elm,t,n,r,o)}catch(r){Zt(r,n.context,"directive "+t.name+" "+e+" hook")}}var kr=[pr,_r];function Cr(t,e){var n=e.componentOptions;if(!(c(n)&&!1===n.Ctor.options.inheritAttrs||o(t.data.attrs)&&o(e.data.attrs))){var r,f,l=e.elm,h=t.data.attrs||{},d=e.data.attrs||{};for(r in c(d.__ob__)&&(d=e.data.attrs=L({},d)),d)f=d[r],h[r]!==f&&Er(l,r,f);for(r in(at||st)&&d.value!==h.value&&Er(l,"value",d.value),h)o(d[r])&&(Yn(r)?l.removeAttributeNS(Xn,Qn(r)):Kn(r)||l.removeAttribute(r))}}function Er(t,e,n){t.tagName.indexOf("-")>-1?$r(t,e,n):Jn(e)?Zn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):Kn(e)?t.setAttribute(e,function(t,e){return Zn(e)||"false"===e?"false":"contenteditable"===t&&Wn(e)?e:"true"}(e,n)):Yn(e)?Zn(n)?t.removeAttributeNS(Xn,Qn(e)):t.setAttributeNS(Xn,e,n):$r(t,e,n)}function $r(t,e,n){if(Zn(n))t.removeAttribute(e);else{if(at&&!ct&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var jr={create:Cr,update:Cr};function Tr(t,e){var n=e.elm,data=e.data,r=t.data;if(!(o(data.staticClass)&&o(data.class)&&(o(r)||o(r.staticClass)&&o(r.class)))){var f=er(e),l=n._transitionClasses;c(l)&&(f=rr(f,or(l))),f!==n._prevClass&&(n.setAttribute("class",f),n._prevClass=f)}}var Ir,Mr={create:Tr,update:Tr};function Pr(t,e,n){var r=Ir;return function o(){var c=e.apply(null,arguments);null!==c&&Rr(t,o,n,r)}}var Nr=oe&&!(ft&&Number(ft[1])<=53);function Lr(t,e,n,r){if(Nr){var o=wn,c=e;e=c._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=o||t.timeStamp<=0||t.target.ownerDocument!==document)return c.apply(this,arguments)}}Ir.addEventListener(t,e,pt?{capture:n,passive:r}:n)}function Rr(t,e,n,r){(r||Ir).removeEventListener(t,e._wrapper||e,n)}function Fr(t,e){if(!o(t.data.on)||!o(e.data.on)){var n=e.data.on||{},r=t.data.on||{};Ir=e.elm,function(t){if(c(t.__r)){var e=at?"change":"input";t[e]=[].concat(t.__r,t[e]||[]),delete t.__r}c(t.__c)&&(t.change=[].concat(t.__c,t.change||[]),delete t.__c)}(n),me(n,r,Lr,Rr,Pr,e.context),Ir=void 0}}var Dr,Ur={create:Fr,update:Fr};function Vr(t,e){if(!o(t.data.domProps)||!o(e.data.domProps)){var n,r,f=e.elm,l=t.data.domProps||{},h=e.data.domProps||{};for(n in c(h.__ob__)&&(h=e.data.domProps=L({},h)),l)n in h||(f[n]="");for(n in h){if(r=h[n],"textContent"===n||"innerHTML"===n){if(e.children&&(e.children.length=0),r===l[n])continue;1===f.childNodes.length&&f.removeChild(f.childNodes[0])}if("value"===n&&"PROGRESS"!==f.tagName){f._value=r;var d=o(r)?"":String(r);zr(f,d)&&(f.value=d)}else if("innerHTML"===n&&cr(f.tagName)&&o(f.innerHTML)){(Dr=Dr||document.createElement("div")).innerHTML="<svg>"+r+"</svg>";for(var svg=Dr.firstChild;f.firstChild;)f.removeChild(f.firstChild);for(;svg.firstChild;)f.appendChild(svg.firstChild)}else if(r!==l[n])try{f[n]=r}catch(t){}}}}function zr(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,r=t._vModifiers;if(c(r)){if(r.number)return x(n)!==x(e);if(r.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var Br={create:Vr,update:Vr},Hr=E((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function Gr(data){var style=qr(data.style);return data.staticStyle?L(data.staticStyle,style):style}function qr(t){return Array.isArray(t)?R(t):"string"==typeof t?Hr(t):t}var Kr,Wr=/^--/,Jr=/\s*!important$/,Xr=function(t,e,n){if(Wr.test(e))t.style.setProperty(e,n);else if(Jr.test(n))t.style.setProperty(M(e),n.replace(Jr,""),"important");else{var r=Qr(e);if(Array.isArray(n))for(var i=0,o=n.length;i<o;i++)t.style[r]=n[i];else t.style[r]=n}},Yr=["Webkit","Moz","ms"],Qr=E((function(t){if(Kr=Kr||document.createElement("div").style,"filter"!==(t=j(t))&&t in Kr)return t;for(var e=t.charAt(0).toUpperCase()+t.slice(1),i=0;i<Yr.length;i++){var n=Yr[i]+e;if(n in Kr)return n}}));function Zr(t,e){var data=e.data,n=t.data;if(!(o(data.staticStyle)&&o(data.style)&&o(n.staticStyle)&&o(n.style))){var r,f,l=e.elm,h=n.staticStyle,d=n.normalizedStyle||n.style||{},v=h||d,style=qr(e.data.style)||{};e.data.normalizedStyle=c(style.__ob__)?L({},style):style;var y=function(t,e){var n,r={};if(e)for(var o=t;o.componentInstance;)(o=o.componentInstance._vnode)&&o.data&&(n=Gr(o.data))&&L(r,n);(n=Gr(t.data))&&L(r,n);for(var c=t;c=c.parent;)c.data&&(n=Gr(c.data))&&L(r,n);return r}(e,!0);for(f in v)o(y[f])&&Xr(l,f,"");for(f in y)(r=y[f])!==v[f]&&Xr(l,f,null==r?"":r)}}var style={create:Zr,update:Zr},to=/\s+/;function eo(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(to).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function no(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(to).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function ro(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&L(e,oo(t.name||"v")),L(e,t),e}return"string"==typeof t?oo(t):void 0}}var oo=E((function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}})),io=et&&!ct,ao="transition",co="animation",so="transition",uo="transitionend",fo="animation",lo="animationend";io&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(so="WebkitTransition",uo="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(fo="WebkitAnimation",lo="webkitAnimationEnd"));var po=et?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function ho(t){po((function(){po(t)}))}function vo(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),eo(t,e))}function yo(t,e){t._transitionClasses&&A(t._transitionClasses,e),no(t,e)}function mo(t,e,n){var r=bo(t,e),o=r.type,c=r.timeout,f=r.propCount;if(!o)return n();var l=o===ao?uo:lo,h=0,d=function(){t.removeEventListener(l,v),n()},v=function(e){e.target===t&&++h>=f&&d()};setTimeout((function(){h<f&&d()}),c+1),t.addEventListener(l,v)}var go=/\b(transform|all)(,|$)/;function bo(t,e){var n,r=window.getComputedStyle(t),o=(r[so+"Delay"]||"").split(", "),c=(r[so+"Duration"]||"").split(", "),f=_o(o,c),l=(r[fo+"Delay"]||"").split(", "),h=(r[fo+"Duration"]||"").split(", "),d=_o(l,h),v=0,y=0;return e===ao?f>0&&(n=ao,v=f,y=c.length):e===co?d>0&&(n=co,v=d,y=h.length):y=(n=(v=Math.max(f,d))>0?f>d?ao:co:null)?n===ao?c.length:h.length:0,{type:n,timeout:v,propCount:y,hasTransform:n===ao&&go.test(r[so+"Property"])}}function _o(t,e){for(;t.length<e.length;)t=t.concat(t);return Math.max.apply(null,e.map((function(e,i){return wo(e)+wo(t[i])})))}function wo(s){return 1e3*Number(s.slice(0,-1).replace(",","."))}function xo(t,e){var n=t.elm;c(n._leaveCb)&&(n._leaveCb.cancelled=!0,n._leaveCb());var data=ro(t.data.transition);if(!o(data)&&!c(n._enterCb)&&1===n.nodeType){for(var r=data.css,f=data.type,l=data.enterClass,d=data.enterToClass,v=data.enterActiveClass,y=data.appearClass,m=data.appearToClass,_=data.appearActiveClass,w=data.beforeEnter,O=data.enter,S=data.afterEnter,A=data.enterCancelled,k=data.beforeAppear,C=data.appear,E=data.afterAppear,$=data.appearCancelled,j=data.duration,T=un,I=un.$vnode;I&&I.parent;)T=I.context,I=I.parent;var M=!T._isMounted||!t.isRootInsert;if(!M||C||""===C){var P=M&&y?y:l,N=M&&_?_:v,L=M&&m?m:d,R=M&&k||w,F=M&&"function"==typeof C?C:O,D=M&&E||S,U=M&&$||A,V=x(h(j)?j.enter:j);0;var z=!1!==r&&!ct,H=Ao(F),G=n._enterCb=B((function(){z&&(yo(n,L),yo(n,N)),G.cancelled?(z&&yo(n,P),U&&U(n)):D&&D(n),n._enterCb=null}));t.data.show||ge(t,"insert",(function(){var e=n.parentNode,r=e&&e._pending&&e._pending[t.key];r&&r.tag===t.tag&&r.elm._leaveCb&&r.elm._leaveCb(),F&&F(n,G)})),R&&R(n),z&&(vo(n,P),vo(n,N),ho((function(){yo(n,P),G.cancelled||(vo(n,L),H||(So(V)?setTimeout(G,V):mo(n,f,G)))}))),t.data.show&&(e&&e(),F&&F(n,G)),z||H||G()}}}function Oo(t,e){var n=t.elm;c(n._enterCb)&&(n._enterCb.cancelled=!0,n._enterCb());var data=ro(t.data.transition);if(o(data)||1!==n.nodeType)return e();if(!c(n._leaveCb)){var r=data.css,f=data.type,l=data.leaveClass,d=data.leaveToClass,v=data.leaveActiveClass,y=data.beforeLeave,m=data.leave,_=data.afterLeave,w=data.leaveCancelled,O=data.delayLeave,S=data.duration,A=!1!==r&&!ct,k=Ao(m),C=x(h(S)?S.leave:S);0;var E=n._leaveCb=B((function(){n.parentNode&&n.parentNode._pending&&(n.parentNode._pending[t.key]=null),A&&(yo(n,d),yo(n,v)),E.cancelled?(A&&yo(n,l),w&&w(n)):(e(),_&&_(n)),n._leaveCb=null}));O?O($):$()}function $(){E.cancelled||(!t.data.show&&n.parentNode&&((n.parentNode._pending||(n.parentNode._pending={}))[t.key]=t),y&&y(n),A&&(vo(n,l),vo(n,v),ho((function(){yo(n,l),E.cancelled||(vo(n,d),k||(So(C)?setTimeout(E,C):mo(n,f,E)))}))),m&&m(n,E),A||k||E())}}function So(t){return"number"==typeof t&&!isNaN(t)}function Ao(t){if(o(t))return!1;var e=t.fns;return c(e)?Ao(Array.isArray(e)?e[0]:e):(t._length||t.length)>1}function ko(t,e){!0!==e.data.show&&xo(e)}var Co=function(t){var i,e,n={},r=t.modules,h=t.nodeOps;for(i=0;i<yr.length;++i)for(n[yr[i]]=[],e=0;e<r.length;++e)c(r[e][yr[i]])&&n[yr[i]].push(r[e][yr[i]]);function d(t){var e=h.parentNode(t);c(e)&&h.removeChild(e,t)}function v(t,e,r,o,l,d,v){if(c(t.elm)&&c(d)&&(t=d[v]=jt(t)),t.isRootInsert=!l,!function(t,e,r,o){var i=t.data;if(c(i)){var l=c(t.componentInstance)&&i.keepAlive;if(c(i=i.hook)&&c(i=i.init)&&i(t,!1),c(t.componentInstance))return y(t,e),m(r,t.elm,o),f(l)&&function(t,e,r,o){var i,f=t;for(;f.componentInstance;)if(c(i=(f=f.componentInstance._vnode).data)&&c(i=i.transition)){for(i=0;i<n.activate.length;++i)n.activate[i](vr,f);e.push(f);break}m(r,t.elm,o)}(t,e,r,o),!0}}(t,e,r,o)){var data=t.data,w=t.children,O=t.tag;c(O)?(t.elm=t.ns?h.createElementNS(t.ns,O):h.createElement(O,t),S(t),_(t,w,e),c(data)&&x(t,e),m(r,t.elm,o)):f(t.isComment)?(t.elm=h.createComment(t.text),m(r,t.elm,o)):(t.elm=h.createTextNode(t.text),m(r,t.elm,o))}}function y(t,e){c(t.data.pendingInsert)&&(e.push.apply(e,t.data.pendingInsert),t.data.pendingInsert=null),t.elm=t.componentInstance.$el,w(t)?(x(t,e),S(t)):(dr(t),e.push(t))}function m(t,e,n){c(t)&&(c(n)?h.parentNode(n)===t&&h.insertBefore(t,e,n):h.appendChild(t,e))}function _(t,e,n){if(Array.isArray(e)){0;for(var i=0;i<e.length;++i)v(e[i],n,t.elm,null,!0,e,i)}else l(t.text)&&h.appendChild(t.elm,h.createTextNode(String(t.text)))}function w(t){for(;t.componentInstance;)t=t.componentInstance._vnode;return c(t.tag)}function x(t,e){for(var r=0;r<n.create.length;++r)n.create[r](vr,t);c(i=t.data.hook)&&(c(i.create)&&i.create(vr,t),c(i.insert)&&e.push(t))}function S(t){var i;if(c(i=t.fnScopeId))h.setStyleScope(t.elm,i);else for(var e=t;e;)c(i=e.context)&&c(i=i.$options._scopeId)&&h.setStyleScope(t.elm,i),e=e.parent;c(i=un)&&i!==t.context&&i!==t.fnContext&&c(i=i.$options._scopeId)&&h.setStyleScope(t.elm,i)}function A(t,e,n,r,o,c){for(;r<=o;++r)v(n[r],c,t,e,!1,n,r)}function k(t){var i,e,data=t.data;if(c(data))for(c(i=data.hook)&&c(i=i.destroy)&&i(t),i=0;i<n.destroy.length;++i)n.destroy[i](t);if(c(i=t.children))for(e=0;e<t.children.length;++e)k(t.children[e])}function C(t,e,n){for(;e<=n;++e){var r=t[e];c(r)&&(c(r.tag)?(E(r),k(r)):d(r.elm))}}function E(t,e){if(c(e)||c(t.data)){var i,r=n.remove.length+1;for(c(e)?e.listeners+=r:e=function(t,e){function n(){0==--n.listeners&&d(t)}return n.listeners=e,n}(t.elm,r),c(i=t.componentInstance)&&c(i=i._vnode)&&c(i.data)&&E(i,e),i=0;i<n.remove.length;++i)n.remove[i](t,e);c(i=t.data.hook)&&c(i=i.remove)?i(t,e):e()}else d(t.elm)}function $(t,e,n,r){for(var i=n;i<r;i++){var o=e[i];if(c(o)&&mr(t,o))return i}}function j(t,e,r,l,d,y){if(t!==e){c(e.elm)&&c(l)&&(e=l[d]=jt(e));var m=e.elm=t.elm;if(f(t.isAsyncPlaceholder))c(e.asyncFactory.resolved)?M(t.elm,e,r):e.isAsyncPlaceholder=!0;else if(f(e.isStatic)&&f(t.isStatic)&&e.key===t.key&&(f(e.isCloned)||f(e.isOnce)))e.componentInstance=t.componentInstance;else{var i,data=e.data;c(data)&&c(i=data.hook)&&c(i=i.prepatch)&&i(t,e);var _=t.children,x=e.children;if(c(data)&&w(e)){for(i=0;i<n.update.length;++i)n.update[i](t,e);c(i=data.hook)&&c(i=i.update)&&i(t,e)}o(e.text)?c(_)&&c(x)?_!==x&&function(t,e,n,r,f){var l,d,y,m=0,_=0,w=e.length-1,x=e[0],O=e[w],S=n.length-1,k=n[0],E=n[S],T=!f;for(;m<=w&&_<=S;)o(x)?x=e[++m]:o(O)?O=e[--w]:mr(x,k)?(j(x,k,r,n,_),x=e[++m],k=n[++_]):mr(O,E)?(j(O,E,r,n,S),O=e[--w],E=n[--S]):mr(x,E)?(j(x,E,r,n,S),T&&h.insertBefore(t,x.elm,h.nextSibling(O.elm)),x=e[++m],E=n[--S]):mr(O,k)?(j(O,k,r,n,_),T&&h.insertBefore(t,O.elm,x.elm),O=e[--w],k=n[++_]):(o(l)&&(l=gr(e,m,w)),o(d=c(k.key)?l[k.key]:$(k,e,m,w))?v(k,r,t,x.elm,!1,n,_):mr(y=e[d],k)?(j(y,k,r,n,_),e[d]=void 0,T&&h.insertBefore(t,y.elm,x.elm)):v(k,r,t,x.elm,!1,n,_),k=n[++_]);m>w?A(t,o(n[S+1])?null:n[S+1].elm,n,_,S,r):_>S&&C(e,m,w)}(m,_,x,r,y):c(x)?(c(t.text)&&h.setTextContent(m,""),A(m,null,x,0,x.length-1,r)):c(_)?C(_,0,_.length-1):c(t.text)&&h.setTextContent(m,""):t.text!==e.text&&h.setTextContent(m,e.text),c(data)&&c(i=data.hook)&&c(i=i.postpatch)&&i(t,e)}}}function T(t,e,n){if(f(n)&&c(t.parent))t.parent.data.pendingInsert=e;else for(var i=0;i<e.length;++i)e[i].data.hook.insert(e[i])}var I=O("attrs,class,staticClass,staticStyle,key");function M(t,e,n,r){var i,o=e.tag,data=e.data,l=e.children;if(r=r||data&&data.pre,e.elm=t,f(e.isComment)&&c(e.asyncFactory))return e.isAsyncPlaceholder=!0,!0;if(c(data)&&(c(i=data.hook)&&c(i=i.init)&&i(e,!0),c(i=e.componentInstance)))return y(e,n),!0;if(c(o)){if(c(l))if(t.hasChildNodes())if(c(i=data)&&c(i=i.domProps)&&c(i=i.innerHTML)){if(i!==t.innerHTML)return!1}else{for(var h=!0,d=t.firstChild,v=0;v<l.length;v++){if(!d||!M(d,l[v],n,r)){h=!1;break}d=d.nextSibling}if(!h||d)return!1}else _(e,l,n);if(c(data)){var m=!1;for(var w in data)if(!I(w)){m=!0,x(e,n);break}!m&&data.class&&he(data.class)}}else t.data!==e.text&&(t.data=e.text);return!0}return function(t,e,r,l){if(!o(e)){var d,y=!1,m=[];if(o(t))y=!0,v(e,m);else{var _=c(t.nodeType);if(!_&&mr(t,e))j(t,e,m,null,null,l);else{if(_){if(1===t.nodeType&&t.hasAttribute(H)&&(t.removeAttribute(H),r=!0),f(r)&&M(t,e,m))return T(e,m,!0),t;d=t,t=new kt(h.tagName(d).toLowerCase(),{},[],void 0,d)}var x=t.elm,O=h.parentNode(x);if(v(e,m,x._leaveCb?null:O,h.nextSibling(x)),c(e.parent))for(var S=e.parent,A=w(e);S;){for(var i=0;i<n.destroy.length;++i)n.destroy[i](S);if(S.elm=e.elm,A){for(var E=0;E<n.create.length;++E)n.create[E](vr,S);var $=S.data.hook.insert;if($.merged)for(var I=1;I<$.fns.length;I++)$.fns[I]()}else dr(S);S=S.parent}c(O)?C([t],0,0):c(t.tag)&&k(t)}}return T(e,m,y),e.elm}c(t)&&k(t)}}({nodeOps:lr,modules:[jr,Mr,Ur,Br,style,et?{create:ko,activate:ko,remove:function(t,e){!0!==t.data.show?Oo(t,e):e()}}:{}].concat(kr)});ct&&document.addEventListener("selectionchange",(function(){var t=document.activeElement;t&&t.vmodel&&No(t,"input")}));var Eo={inserted:function(t,e,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?ge(n,"postpatch",(function(){Eo.componentUpdated(t,e,n)})):$o(t,e,n.context),t._vOptions=[].map.call(t.options,Io)):("textarea"===n.tag||fr(t.type))&&(t._vModifiers=e.modifiers,e.modifiers.lazy||(t.addEventListener("compositionstart",Mo),t.addEventListener("compositionend",Po),t.addEventListener("change",Po),ct&&(t.vmodel=!0)))},componentUpdated:function(t,e,n){if("select"===n.tag){$o(t,e,n.context);var r=t._vOptions,o=t._vOptions=[].map.call(t.options,Io);if(o.some((function(t,i){return!V(t,r[i])})))(t.multiple?e.value.some((function(t){return To(t,o)})):e.value!==e.oldValue&&To(e.value,o))&&No(t,"change")}}};function $o(t,e,n){jo(t,e,n),(at||st)&&setTimeout((function(){jo(t,e,n)}),0)}function jo(t,e,n){var r=e.value,o=t.multiple;if(!o||Array.isArray(r)){for(var c,option,i=0,f=t.options.length;i<f;i++)if(option=t.options[i],o)c=z(r,Io(option))>-1,option.selected!==c&&(option.selected=c);else if(V(Io(option),r))return void(t.selectedIndex!==i&&(t.selectedIndex=i));o||(t.selectedIndex=-1)}}function To(t,e){return e.every((function(e){return!V(e,t)}))}function Io(option){return"_value"in option?option._value:option.value}function Mo(t){t.target.composing=!0}function Po(t){t.target.composing&&(t.target.composing=!1,No(t.target,"input"))}function No(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Lo(t){return!t.componentInstance||t.data&&t.data.transition?t:Lo(t.componentInstance._vnode)}var Ro={model:Eo,show:{bind:function(t,e,n){var r=e.value,o=(n=Lo(n)).data&&n.data.transition,c=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&o?(n.data.show=!0,xo(n,(function(){t.style.display=c}))):t.style.display=r?c:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Lo(n)).data&&n.data.transition?(n.data.show=!0,r?xo(n,(function(){t.style.display=t.__vOriginalDisplay})):Oo(n,(function(){t.style.display="none"}))):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,o){o||(t.style.display=t.__vOriginalDisplay)}}},Fo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Do(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Do(rn(e.children)):t}function Uo(t){var data={},e=t.$options;for(var n in e.propsData)data[n]=t[n];var r=e._parentListeners;for(var o in r)data[j(o)]=r[o];return data}function Vo(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var zo=function(t){return t.tag||nn(t)},Bo=function(t){return"show"===t.name},Ho={name:"transition",props:Fo,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(zo)).length){0;var r=this.mode;0;var o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var c=Do(o);if(!c)return o;if(this._leaving)return Vo(t,o);var f="__transition-"+this._uid+"-";c.key=null==c.key?c.isComment?f+"comment":f+c.tag:l(c.key)?0===String(c.key).indexOf(f)?c.key:f+c.key:c.key;var data=(c.data||(c.data={})).transition=Uo(this),h=this._vnode,d=Do(h);if(c.data.directives&&c.data.directives.some(Bo)&&(c.data.show=!0),d&&d.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(c,d)&&!nn(d)&&(!d.componentInstance||!d.componentInstance._vnode.isComment)){var v=d.data.transition=L({},data);if("out-in"===r)return this._leaving=!0,ge(v,"afterLeave",(function(){e._leaving=!1,e.$forceUpdate()})),Vo(t,o);if("in-out"===r){if(nn(c))return h;var y,m=function(){y()};ge(data,"afterEnter",m),ge(data,"enterCancelled",m),ge(v,"delayLeave",(function(t){y=t}))}}return o}}},Go=L({tag:String,moveClass:String},Fo);function qo(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function Ko(t){t.data.newPos=t.elm.getBoundingClientRect()}function Wo(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,o=e.top-n.top;if(r||o){t.data.moved=!0;var s=t.elm.style;s.transform=s.WebkitTransform="translate("+r+"px,"+o+"px)",s.transitionDuration="0s"}}delete Go.mode;var Jo={Transition:Ho,TransitionGroup:{props:Go,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var o=fn(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,o(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",map=Object.create(null),n=this.prevChildren=this.children,r=this.$slots.default||[],o=this.children=[],c=Uo(this),i=0;i<r.length;i++){var f=r[i];if(f.tag)if(null!=f.key&&0!==String(f.key).indexOf("__vlist"))o.push(f),map[f.key]=f,(f.data||(f.data={})).transition=c;else;}if(n){for(var l=[],h=[],d=0;d<n.length;d++){var v=n[d];v.data.transition=c,v.data.pos=v.elm.getBoundingClientRect(),map[v.key]?l.push(v):h.push(v)}this.kept=t(e,null,l),this.removed=h}return t(e,null,o)},updated:function(){var t=this.prevChildren,e=this.moveClass||(this.name||"v")+"-move";t.length&&this.hasMove(t[0].elm,e)&&(t.forEach(qo),t.forEach(Ko),t.forEach(Wo),this._reflow=document.body.offsetHeight,t.forEach((function(t){if(t.data.moved){var n=t.elm,s=n.style;vo(n,e),s.transform=s.WebkitTransform=s.transitionDuration="",n.addEventListener(uo,n._moveCb=function t(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(uo,t),n._moveCb=null,yo(n,e))})}})))},methods:{hasMove:function(t,e){if(!io)return!1;if(this._hasMove)return this._hasMove;var n=t.cloneNode();t._transitionClasses&&t._transitionClasses.forEach((function(t){no(n,t)})),eo(n,e),n.style.display="none",this.$el.appendChild(n);var r=bo(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};Rn.config.mustUseProp=function(t,e,n){return"value"===n&&qn(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},Rn.config.isReservedTag=sr,Rn.config.isReservedAttr=Gn,Rn.config.getTagNamespace=function(t){return cr(t)?"svg":"math"===t?"math":void 0},Rn.config.isUnknownElement=function(t){if(!et)return!0;if(sr(t))return!1;if(t=t.toLowerCase(),null!=ur[t])return ur[t];var e=document.createElement(t);return t.indexOf("-")>-1?ur[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:ur[t]=/HTMLUnknownElement/.test(e.toString())},L(Rn.options.directives,Ro),L(Rn.options.components,Jo),Rn.prototype.__patch__=et?Co:F,Rn.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=Et),dn(t,"beforeMount"),r=function(){t._update(t._render(),n)},new kn(t,r,F,{before:function(){t._isMounted&&!t._isDestroyed&&dn(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,dn(t,"mounted")),t}(this,t=t&&et?function(t){if("string"==typeof t){return document.querySelector(t)||document.createElement("div")}return t}(t):void 0,e)},et&&setTimeout((function(){W.devtools&&yt&&yt.emit("init",Rn)}),0),e.default=Rn}.call(this,n(44),n(183).setImmediate)},,function(t,e,n){"use strict";function r(t,e,n,r,o,c,f){try{var l=t[c](f),h=l.value}catch(t){return void n(t)}l.done?e(h):Promise.resolve(h).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,h,"next",t)}function h(t){r(f,o,c,l,h,"throw",t)}l(void 0)}))}}n.d(e,"a",(function(){return o}))},function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));var r=n(76);function o(t,i){return function(t){if(Array.isArray(t))return t}(t)||function(t,i){var e=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null!=e){var n,r,o=[],c=!0,f=!1;try{for(e=e.call(t);!(c=(n=e.next()).done)&&(o.push(n.value),!i||o.length!==i);c=!0);}catch(t){f=!0,r=t}finally{try{c||null==e.return||e.return()}finally{if(f)throw r}}return o}}(t,i)||Object(r.a)(t,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},function(t,e,n){var r=n(6),o=n(33),c=n(34),f=n(18),l=n(36),h=function(t,e,source){var n,d,v,y,m=t&h.F,_=t&h.G,w=t&h.S,x=t&h.P,O=t&h.B,S=_?r:w?r[e]||(r[e]={}):(r[e]||{}).prototype,A=_?o:o[e]||(o[e]={}),k=A.prototype||(A.prototype={});for(n in _&&(source=e),source)v=((d=!m&&S&&void 0!==S[n])?S:source)[n],y=O&&d?l(v,r):x&&"function"==typeof v?l(Function.call,v):v,S&&f(S,n,v,t&h.U),A[n]!=v&&c(A,n,y),x&&k[n]!=v&&(k[n]=v)};r.core=o,h.F=1,h.G=2,h.S=4,h.P=8,h.B=16,h.W=32,h.U=64,h.R=128,t.exports=h},function(t,e,n){var r=n(67)("wks"),o=n(50),c=n(6).Symbol,f="function"==typeof c;(t.exports=function(t){return r[t]||(r[t]=f&&c[t]||(f?c:o)("Symbol."+t))}).store=r},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e,n){"use strict";function r(t,e,n,r,o,c,f,l){var h,d="function"==typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=n,d._compiled=!0),r&&(d.functional=!0),c&&(d._scopeId="data-v-"+c),f?(h=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(f)},d._ssrRegister=h):o&&(h=l?function(){o.call(this,(d.functional?this.parent:this).$root.$options.shadowRoot)}:o),h)if(d.functional){d._injectStyles=h;var v=d.render;d.render=function(t,e){return h.call(e),v(t,e)}}else{var y=d.beforeCreate;d.beforeCreate=y?[].concat(y,h):[h]}return{exports:t,options:d}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(14);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}n.d(e,"a",(function(){return r}))},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){t.exports=!n(10)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(8),o=n(110),c=n(66),f=Object.defineProperty;e.f=n(11)?Object.defineProperty:function(t,e,n){if(r(t),e=c(e,!0),r(n),o)try{return f(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){"use strict";var r=n(71),o={};o[n(5)("toStringTag")]="z",o+""!="[object z]"&&n(18)(Object.prototype,"toString",(function(){return"[object "+r(this)+"]"}),!0)},function(t,e,n){"use strict";var r=n(6),o=n(35),c=n(11),f=n(4),l=n(18),h=n(82).KEY,d=n(10),v=n(67),y=n(53),m=n(50),_=n(5),w=n(111),x=n(159),O=n(160),S=n(114),A=n(8),k=n(14),C=n(41),E=n(29),$=n(66),j=n(49),T=n(70),I=n(162),M=n(56),P=n(69),N=n(13),L=n(43),R=M.f,F=N.f,D=I.f,U=r.Symbol,V=r.JSON,z=V&&V.stringify,B=_("_hidden"),H=_("toPrimitive"),G={}.propertyIsEnumerable,K=v("symbol-registry"),W=v("symbols"),J=v("op-symbols"),X=Object.prototype,Y="function"==typeof U&&!!P.f,Q=r.QObject,Z=!Q||!Q.prototype||!Q.prototype.findChild,tt=c&&d((function(){return 7!=T(F({},"a",{get:function(){return F(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=R(X,e);r&&delete X[e],F(t,e,n),r&&t!==X&&F(X,e,r)}:F,et=function(t){var e=W[t]=T(U.prototype);return e._k=t,e},nt=Y&&"symbol"==typeof U.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof U},ot=function(t,e,n){return t===X&&ot(J,e,n),A(t),e=$(e,!0),A(n),o(W,e)?(n.enumerable?(o(t,B)&&t[B][e]&&(t[B][e]=!1),n=T(n,{enumerable:j(0,!1)})):(o(t,B)||F(t,B,j(1,{})),t[B][e]=!0),tt(t,e,n)):F(t,e,n)},it=function(t,e){A(t);for(var n,r=O(e=E(e)),i=0,o=r.length;o>i;)ot(t,n=r[i++],e[n]);return t},at=function(t){var e=G.call(this,t=$(t,!0));return!(this===X&&o(W,t)&&!o(J,t))&&(!(e||!o(this,t)||!o(W,t)||o(this,B)&&this[B][t])||e)},ct=function(t,e){if(t=E(t),e=$(e,!0),t!==X||!o(W,e)||o(J,e)){var n=R(t,e);return!n||!o(W,e)||o(t,B)&&t[B][e]||(n.enumerable=!0),n}},st=function(t){for(var e,n=D(E(t)),r=[],i=0;n.length>i;)o(W,e=n[i++])||e==B||e==h||r.push(e);return r},ut=function(t){for(var e,n=t===X,r=D(n?J:E(t)),c=[],i=0;r.length>i;)!o(W,e=r[i++])||n&&!o(X,e)||c.push(W[e]);return c};Y||(l((U=function(){if(this instanceof U)throw TypeError("Symbol is not a constructor!");var t=m(arguments.length>0?arguments[0]:void 0),e=function(n){this===X&&e.call(J,n),o(this,B)&&o(this[B],t)&&(this[B][t]=!1),tt(this,t,j(1,n))};return c&&Z&&tt(X,t,{configurable:!0,set:e}),et(t)}).prototype,"toString",(function(){return this._k})),M.f=ct,N.f=ot,n(55).f=I.f=st,n(54).f=at,P.f=ut,c&&!n(51)&&l(X,"propertyIsEnumerable",at,!0),w.f=function(t){return et(_(t))}),f(f.G+f.W+f.F*!Y,{Symbol:U});for(var ft="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),lt=0;ft.length>lt;)_(ft[lt++]);for(var pt=L(_.store),ht=0;pt.length>ht;)x(pt[ht++]);f(f.S+f.F*!Y,"Symbol",{for:function(t){return o(K,t+="")?K[t]:K[t]=U(t)},keyFor:function(t){if(!nt(t))throw TypeError(t+" is not a symbol!");for(var e in K)if(K[e]===t)return e},useSetter:function(){Z=!0},useSimple:function(){Z=!1}}),f(f.S+f.F*!Y,"Object",{create:function(t,e){return void 0===e?T(t):it(T(t),e)},defineProperty:ot,defineProperties:it,getOwnPropertyDescriptor:ct,getOwnPropertyNames:st,getOwnPropertySymbols:ut});var vt=d((function(){P.f(1)}));f(f.S+f.F*vt,"Object",{getOwnPropertySymbols:function(t){return P.f(C(t))}}),V&&f(f.S+f.F*(!Y||d((function(){var t=U();return"[null]"!=z([t])||"{}"!=z({a:t})||"{}"!=z(Object(t))}))),"JSON",{stringify:function(t){for(var e,n,r=[t],i=1;arguments.length>i;)r.push(arguments[i++]);if(n=e=r[1],(k(e)||void 0!==t)&&!nt(t))return S(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!nt(e))return e}),r[1]=e,z.apply(V,r)}}),U.prototype[H]||n(34)(U.prototype,H,U.prototype.valueOf),y(U,"Symbol"),y(Math,"Math",!0),y(r.JSON,"JSON",!0)},function(t,e,n){var r=n(13).f,o=Function.prototype,c=/^\s*function ([^ (]*)/,f="name";f in o||n(11)&&r(o,f,{configurable:!0,get:function(){try{return(""+this).match(c)[1]}catch(t){return""}}})},function(t,e,n){var r=n(6),o=n(34),c=n(35),f=n(50)("src"),l=n(158),h="toString",d=(""+l).split(h);n(33).inspectSource=function(t){return l.call(t)},(t.exports=function(t,e,n,l){var h="function"==typeof n;h&&(c(n,"name")||o(n,"name",e)),t[e]!==n&&(h&&(c(n,f)||o(n,f,t[e]?""+t[e]:d.join(String(e)))),t===r?t[e]=n:l?t[e]?t[e]=n:o(t,e,n):(delete t[e],o(t,e,n)))})(Function.prototype,h,(function(){return"function"==typeof this&&this[f]||l.call(this)}))},function(t,e,n){"use strict";n.d(e,"a",(function(){return lt})),n.d(e,"b",(function(){return st})),n.d(e,"c",(function(){return ft})),n.d(e,"d",(function(){return at})),n.d(e,"e",(function(){return et}));n(17),n(16),n(27),n(25),n(26),n(38),n(39);var r=n(3),o=n(9),c=n(12);function f(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}n(59),n(32),n(64),n(21),n(28),n(128),n(58),n(154),n(22),n(24),n(15),n(99),n(100);function h(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(object);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,n)}return e}function d(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?h(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):h(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function v(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return y(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,f=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return c=t.done,t},e:function(t){f=!0,o=t},f:function(){try{c||null==n.return||n.return()}finally{if(f)throw o}}}}function y(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var m=/[^\0-\x7E]/,_=/[\x2E\u3002\uFF0E\uFF61]/g,w={overflow:"Overflow Error","not-basic":"Illegal Input","invalid-input":"Invalid Input"},x=Math.floor,O=String.fromCharCode;function s(t){throw new RangeError(w[t])}var S=function(t,e){return t+22+75*(t<26)-((0!=e)<<5)},u=function(t,e,n){var r=0;for(t=n?x(t/700):t>>1,t+=x(t/e);t>455;r+=36)t=x(t/35);return x(r+36*t/(t+38))};function A(t){return n=(e=t).split("@"),r="",n.length>1&&(r=n[0]+"@",e=n[1]),r+function(t,e){for(var n=[],r=t.length;r--;)n[r]=e(t[r]);return n}((e=e.replace(_,".")).split("."),(function(t){return m.test(t)?"xn--"+function(t){var e,n=[],r=(t=function(t){for(var e=[],n=0,r=t.length;n<r;){var o=t.charCodeAt(n++);if(o>=55296&&o<=56319&&n<r){var c=t.charCodeAt(n++);56320==(64512&c)?e.push(((1023&o)<<10)+(1023&c)+65536):(e.push(o),n--)}else e.push(o)}return e}(t)).length,o=128,i=0,c=72,f=v(t);try{for(f.s();!(e=f.n()).done;){var l=e.value;l<128&&n.push(O(l))}}catch(t){f.e(t)}finally{f.f()}var h=n.length,p=h;for(h&&n.push("-");p<r;){var d,y=2147483647,m=v(t);try{for(m.s();!(d=m.n()).done;){var _=d.value;_>=o&&_<y&&(y=_)}}catch(t){m.e(t)}finally{m.f()}var a=p+1;y-o>x((2147483647-i)/a)&&s("overflow"),i+=(y-o)*a,o=y;var w,A=v(t);try{for(A.s();!(w=A.n()).done;){var k=w.value;if(k<o&&++i>2147483647&&s("overflow"),k==o){for(var C=i,E=36;;E+=36){var $=E<=c?1:E>=c+26?26:E-c;if(C<$)break;var j=C-$,T=36-$;n.push(O(S($+j%T,0))),C=x(j/T)}n.push(O(S(C,0))),c=u(i,a,p==h),i=0,++p}}}catch(t){A.e(t)}finally{A.f()}++i,++o}return n.join("")}(t):t})).join(".");var e,n,r}var k=/#/g,C=/&/g,E=/=/g,$=/\?/g,j=/\+/g,T=/%5B/g,I=/%5D/g,M=/%5E/g,P=/%60/g,N=/%7B/g,L=/%7C/g,R=/%7D/g,F=/%20/g,D=/%2F/g,U=/%252F/g;function V(text){return encodeURI(""+text).replace(L,"|").replace(T,"[").replace(I,"]")}function z(text){return V(text).replace(j,"%2B").replace(F,"+").replace(k,"%23").replace(C,"%26").replace(P,"`").replace(N,"{").replace(R,"}").replace(M,"^")}function B(text){return z(text).replace(E,"%3D")}function H(text){return V(text).replace(k,"%23").replace($,"%3F").replace(U,"%2F")}function G(){var text=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";try{return decodeURIComponent(""+text)}catch(t){return""+text}}function K(text){return G(text.replace(D,"%252F"))}function W(text){return G(text.replace(j," "))}function J(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return A(t)}function X(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e={};"?"===t[0]&&(t=t.substr(1));var n,r=v(t.split("&"));try{for(r.s();!(n=r.n()).done;){var param=n.value,o=param.match(/([^=]+)=?(.*)/)||[];if(!(o.length<2)){var c=G(o[1]);if("__proto__"!==c&&"constructor"!==c){var f=W(o[2]||"");e[c]?Array.isArray(e[c])?e[c].push(f):e[c]=[e[c],f]:e[c]=f}}}}catch(t){r.e(t)}finally{r.f()}return e}function Y(t){return Object.keys(t).map((function(e){return n=e,(r=t[e])?Array.isArray(r)?r.map((function(t){return"".concat(B(n),"=").concat(z(t))})).join("&"):"".concat(B(n),"=").concat(z(r)):B(n);var n,r})).join("&")}var Q=function(){function t(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if(f(this,t),this.query={},"string"!=typeof input)throw new TypeError("URL input should be string received ".concat(Object(c.a)(input)," (").concat(input,")"));var e=pt(input);this.protocol=G(e.protocol),this.host=G(e.host),this.auth=G(e.auth),this.pathname=K(e.pathname),this.query=X(e.search),this.hash=G(e.hash)}var e,n,r;return e=t,(n=[{key:"hostname",get:function(){return yt(this.host).hostname}},{key:"port",get:function(){return yt(this.host).port||""}},{key:"username",get:function(){return vt(this.auth).username}},{key:"password",get:function(){return vt(this.auth).password||""}},{key:"hasProtocol",get:function(){return this.protocol.length}},{key:"isAbsolute",get:function(){return this.hasProtocol||"/"===this.pathname[0]}},{key:"search",get:function(){var q=Y(this.query);return q.length?"?"+q:""}},{key:"searchParams",get:function(){var t=this,p=new URLSearchParams,e=function(e){var n=t.query[e];Array.isArray(n)?n.forEach((function(t){return p.append(e,t)})):p.append(e,n||"")};for(var n in this.query)e(n);return p}},{key:"origin",get:function(){return(this.protocol?this.protocol+"//":"")+J(this.host)}},{key:"fullpath",get:function(){return H(this.pathname)+this.search+V(this.hash).replace(N,"{").replace(R,"}").replace(M,"^")}},{key:"encodedAuth",get:function(){if(!this.auth)return"";var t=vt(this.auth),e=t.username,n=t.password;return encodeURIComponent(e)+(n?":"+encodeURIComponent(n):"")}},{key:"href",get:function(){var t=this.encodedAuth,e=(this.protocol?this.protocol+"//":"")+(t?t+"@":"")+J(this.host);return this.hasProtocol&&this.isAbsolute?e+this.fullpath:this.fullpath}},{key:"append",value:function(t){if(t.hasProtocol)throw new Error("Cannot append a URL with protocol");Object.assign(this.query,t.query),t.pathname&&(this.pathname=nt(this.pathname)+it(t.pathname)),t.hash&&(this.hash=t.hash)}},{key:"toJSON",value:function(){return this.href}},{key:"toString",value:function(){return this.href}}])&&l(e.prototype,n),r&&l(e,r),t}();function Z(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return/^\w+:\/\/.+/.test(t)||e&&/^\/\/[^/]+/.test(t)}function tt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.endsWith("/")}function et(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(tt(input)?input.slice(0,-1):input)||"/"}function nt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.endsWith("/")?input:input+"/"}function ot(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.startsWith("/")}function it(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(ot(input)?input.substr(1):input)||"/"}function at(input,t){var e=pt(input),n=d(d({},X(e.search)),t);return e.search=Y(n),function(t){var e=t.pathname+(t.search?"?"+t.search:"")+t.hash;if(!t.protocol)return e;return t.protocol+"//"+(t.auth?t.auth+"@":"")+t.host+e}(e)}function ct(t){return t&&"/"!==t}function st(base){for(var t=base||"",e=arguments.length,input=new Array(e>1?e-1:0),n=1;n<e;n++)input[n-1]=arguments[n];var r,o=v(input.filter(ct));try{for(o.s();!(r=o.n()).done;){var i=r.value;t=t?nt(t)+it(i):i}}catch(t){o.e(t)}finally{o.f()}return t}function ut(input){return new Q(input)}function ft(input){return ut(input).toString()}function lt(t,e){return G(et(t))===G(et(e))}function pt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1?arguments[1]:void 0;if(!Z(input,!0))return t?pt(t+input):ht(input);var e=(input.match(/([^:/]+:)?\/\/([^/@]+@)?(.*)/)||[]).splice(1),n=Object(r.a)(e,3),o=n[0],c=void 0===o?"":o,f=n[1],l=n[2],h=(l.match(/([^/]*)(.*)?/)||[]).splice(1),d=Object(r.a)(h,2),v=d[0],y=void 0===v?"":v,m=d[1],path=void 0===m?"":m,_=ht(path),w=_.pathname,x=_.search,O=_.hash;return{protocol:c,auth:f?f.substr(0,f.length-1):"",host:y,pathname:w,search:x,hash:O}}function ht(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=(input.match(/([^#?]*)(\?[^#]*)?(#.*)?/)||[]).splice(1),e=Object(r.a)(t,3),n=e[0],o=void 0===n?"":n,c=e[1],f=void 0===c?"":c,l=e[2],h=void 0===l?"":l;return{pathname:o,search:f,hash:h}}function vt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=input.split(":"),e=Object(r.a)(t,2),n=e[0],o=e[1];return{username:G(n),password:G(o)}}function yt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=(input.match(/([^/]*)(:0-9+)?/)||[]).splice(1),e=Object(r.a)(t,2),n=e[0],o=e[1];return{hostname:G(n),port:o}}},function(t,e,n){var r=function(t){"use strict";var e,n=Object.prototype,r=n.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},c=o.iterator||"@@iterator",f=o.asyncIterator||"@@asyncIterator",l=o.toStringTag||"@@toStringTag";function h(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{h({},"")}catch(t){h=function(t,e,n){return t[e]=n}}function d(t,e,n,r){var o=e&&e.prototype instanceof O?e:O,c=Object.create(o.prototype),f=new N(r||[]);return c._invoke=function(t,e,n){var r=y;return function(o,c){if(r===_)throw new Error("Generator is already running");if(r===w){if("throw"===o)throw c;return R()}for(n.method=o,n.arg=c;;){var f=n.delegate;if(f){var l=I(f,n);if(l){if(l===x)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===y)throw r=w,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=_;var h=v(t,e,n);if("normal"===h.type){if(r=n.done?w:m,h.arg===x)continue;return{value:h.arg,done:n.done}}"throw"===h.type&&(r=w,n.method="throw",n.arg=h.arg)}}}(t,n,f),c}function v(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=d;var y="suspendedStart",m="suspendedYield",_="executing",w="completed",x={};function O(){}function S(){}function A(){}var k={};k[c]=function(){return this};var C=Object.getPrototypeOf,E=C&&C(C(L([])));E&&E!==n&&r.call(E,c)&&(k=E);var $=A.prototype=O.prototype=Object.create(k);function j(t){["next","throw","return"].forEach((function(e){h(t,e,(function(t){return this._invoke(e,t)}))}))}function T(t,e){function n(o,c,f,l){var h=v(t[o],t,c);if("throw"!==h.type){var d=h.arg,y=d.value;return y&&"object"==typeof y&&r.call(y,"__await")?e.resolve(y.__await).then((function(t){n("next",t,f,l)}),(function(t){n("throw",t,f,l)})):e.resolve(y).then((function(t){d.value=t,f(d)}),(function(t){return n("throw",t,f,l)}))}l(h.arg)}var o;this._invoke=function(t,r){function c(){return new e((function(e,o){n(t,r,e,o)}))}return o=o?o.then(c,c):c()}}function I(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=e,I(t,n),"throw"===n.method))return x;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return x}var o=v(r,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,x;var c=o.arg;return c?c.done?(n[t.resultName]=c.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,x):c:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,x)}function M(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function P(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function N(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(M,this),this.reset(!0)}function L(t){if(t){var n=t[c];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,o=function n(){for(;++i<t.length;)if(r.call(t,i))return n.value=t[i],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}return{next:R}}function R(){return{value:e,done:!0}}return S.prototype=$.constructor=A,A.constructor=S,S.displayName=h(A,l,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===S||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,A):(t.__proto__=A,h(t,l,"GeneratorFunction")),t.prototype=Object.create($),t},t.awrap=function(t){return{__await:t}},j(T.prototype),T.prototype[f]=function(){return this},t.AsyncIterator=T,t.async=function(e,n,r,o,c){void 0===c&&(c=Promise);var f=new T(d(e,n,r,o),c);return t.isGeneratorFunction(n)?f:f.next().then((function(t){return t.done?t.value:f.next()}))},j($),h($,l,"Generator"),$[c]=function(){return this},$.toString=function(){return"[object Generator]"},t.keys=function(object){var t=[];for(var e in object)t.push(e);return t.reverse(),function e(){for(;t.length;){var n=t.pop();if(n in object)return e.value=n,e.done=!1,e}return e.done=!0,e}},t.values=L,N.prototype={constructor:N,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(P),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function o(r,o){return f.type="throw",f.arg=t,n.next=r,o&&(n.method="next",n.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var c=this.tryEntries[i],f=c.completion;if("root"===c.tryLoc)return o("end");if(c.tryLoc<=this.prev){var l=r.call(c,"catchLoc"),h=r.call(c,"finallyLoc");if(l&&h){if(this.prev<c.catchLoc)return o(c.catchLoc,!0);if(this.prev<c.finallyLoc)return o(c.finallyLoc)}else if(l){if(this.prev<c.catchLoc)return o(c.catchLoc,!0)}else{if(!h)throw new Error("try statement without catch or finally");if(this.prev<c.finallyLoc)return o(c.finallyLoc)}}}},abrupt:function(t,e){for(var i=this.tryEntries.length-1;i>=0;--i){var n=this.tryEntries[i];if(n.tryLoc<=this.prev&&r.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var c=o?o.completion:{};return c.type=t,c.arg=e,o?(this.method="next",this.next=o.finallyLoc,x):this.complete(c)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var i=this.tryEntries.length-1;i>=0;--i){var e=this.tryEntries[i];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),P(e),x}},catch:function(t){for(var i=this.tryEntries.length-1;i>=0;--i){var e=this.tryEntries[i];if(e.tryLoc===t){var n=e.completion;if("throw"===n.type){var r=n.arg;P(e)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:L(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),x}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},function(t,e,n){"use strict";var r=n(4),o=n(79)(1);r(r.P+r.F*!n(124)([].map,!0),"Array",{map:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(4),html=n(81),o=n(37),c=n(108),f=n(23),l=[].slice;r(r.P+r.F*n(10)((function(){html&&l.call(html)})),"Array",{slice:function(t,e){var n=f(this.length),r=o(this);if(e=void 0===e?n:e,"Array"==r)return l.call(this,t,e);for(var h=c(t,n),d=c(e,n),v=f(d-h),y=new Array(v),i=0;i<v;i++)y[i]="String"==r?this.charAt(h+i):this[h+i];return y}})},function(t,e,n){var r=n(52),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){"use strict";var r=n(4),o=n(79)(2);r(r.P+r.F*!n(124)([].filter,!0),"Array",{filter:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(126)(!0);n(87)(String,"String",(function(t){this._t=String(t),this._i=0}),(function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})}))},function(t,e,n){for(var r=n(119),o=n(43),c=n(18),f=n(6),l=n(34),h=n(57),d=n(5),v=d("iterator"),y=d("toStringTag"),m=h.Array,_={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},w=o(_),i=0;i<w.length;i++){var x,O=w[i],S=_[O],A=f[O],k=A&&A.prototype;if(k&&(k[v]||l(k,v,m),k[y]||l(k,y,O),h[O]=m,S))for(x in r)k[x]||c(k,x,r[x],!0)}},function(t,e,n){"use strict";var r=n(36),o=n(4),c=n(41),f=n(115),l=n(116),h=n(23),d=n(117),v=n(118);o(o.S+o.F*!n(86)((function(t){Array.from(t)})),"Array",{from:function(t){var e,n,o,y,m=c(t),_="function"==typeof this?this:Array,w=arguments.length,x=w>1?arguments[1]:void 0,O=void 0!==x,S=0,A=v(m);if(O&&(x=r(x,w>2?arguments[2]:void 0,2)),null==A||_==Array&&l(A))for(n=new _(e=h(m.length));e>S;S++)d(n,S,O?x(m[S],S):m[S]);else for(y=A.call(m),n=new _;!(o=y.next()).done;S++)d(n,S,O?f(y,x,[o.value,S],!0):o.value);return n.length=S,n}})},function(t,e,n){var r=n(41),o=n(43);n(125)("keys",(function(){return function(t){return o(r(t))}}))},function(t,e,n){var r=n(83),o=n(40);t.exports=function(t){return r(o(t))}},,function(t,e,n){"use strict";var r=n(4),o=n(113)(!0);r(r.P,"Array",{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),n(78)("includes")},function(t,e,n){"use strict";var r=n(8),o=n(41),c=n(23),f=n(52),l=n(96),h=n(72),d=Math.max,v=Math.min,y=Math.floor,m=/\$([$&`']|\d\d?|<[^>]*>)/g,_=/\$([$&`']|\d\d?)/g;n(73)("replace",2,(function(t,e,n,w){return[function(r,o){var c=t(this),f=null==r?void 0:r[e];return void 0!==f?f.call(r,c,o):n.call(String(c),r,o)},function(t,e){var o=w(n,t,this,e);if(o.done)return o.value;var y=r(t),m=String(this),_="function"==typeof e;_||(e=String(e));var O=y.global;if(O){var S=y.unicode;y.lastIndex=0}for(var A=[];;){var k=h(y,m);if(null===k)break;if(A.push(k),!O)break;""===String(k[0])&&(y.lastIndex=l(m,c(y.lastIndex),S))}for(var C,E="",$=0,i=0;i<A.length;i++){k=A[i];for(var j=String(k[0]),T=d(v(f(k.index),m.length),0),I=[],M=1;M<k.length;M++)I.push(void 0===(C=k[M])?C:String(C));var P=k.groups;if(_){var N=[j].concat(I,T,m);void 0!==P&&N.push(P);var L=String(e.apply(void 0,N))}else L=x(j,m,T,I,P,e);T>=$&&(E+=m.slice($,T)+L,$=T+j.length)}return E+m.slice($)}];function x(t,e,r,c,f,l){var h=r+t.length,d=c.length,v=_;return void 0!==f&&(f=o(f),v=m),n.call(l,v,(function(n,o){var l;switch(o.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(h);case"<":l=f[o.slice(1,-1)];break;default:var v=+o;if(0===v)return n;if(v>d){var m=y(v/10);return 0===m?n:m<=d?void 0===c[m-1]?o.charAt(1):c[m-1]+o.charAt(1):n}l=c[v-1]}return void 0===l?"":l}))}}))},function(t,e){var n=t.exports={version:"2.6.12"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(13),o=n(49);t.exports=n(11)?function(object,t,e){return r.f(object,t,o(1,e))}:function(object,t,e){return object[t]=e,object}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(68);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(a){return t.call(e,a)};case 2:return function(a,b){return t.call(e,a,b)};case 3:return function(a,b,n){return t.call(e,a,b,n)}}return function(){return t.apply(e,arguments)}}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){var r=n(29),o=n(56).f;n(125)("getOwnPropertyDescriptor",(function(){return function(t,e){return o(r(t),e)}}))},function(t,e,n){var r=n(4),o=n(175),c=n(29),f=n(56),l=n(117);r(r.S,"Object",{getOwnPropertyDescriptors:function(object){for(var t,desc,e=c(object),n=f.f,r=o(e),h={},i=0;r.length>i;)void 0!==(desc=n(e,t=r[i++]))&&l(h,t,desc);return h}})},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(40);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(4),o=n(93),c="includes";r(r.P+r.F*n(95)(c),"String",{includes:function(t){return!!~o(this,t,c).indexOf(t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(112),o=n(85);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e){var g;g=function(){return this}();try{g=g||new Function("return this")()}catch(t){"object"==typeof window&&(g=window)}t.exports=g},,function(t,e,n){"use strict";n.d(e,"a",(function(){return c}));var r=n(61);var o=n(76);function c(t){return function(t){if(Array.isArray(t))return Object(r.a)(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||Object(o.a)(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},,,function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports=!1},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(13).f,o=n(35),c=n(5)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,c)&&r(t,c,{configurable:!0,value:e})}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(112),o=n(85).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(54),o=n(49),c=n(29),f=n(66),l=n(35),h=n(110),d=Object.getOwnPropertyDescriptor;e.f=n(11)?d:function(t,e){if(t=c(t),e=f(e,!0),h)try{return d(t,e)}catch(t){}if(l(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e){t.exports={}},function(t,e,n){"use strict";var r=n(4),o=n(23),c=n(93),f="startsWith",l="".startsWith;r(r.P+r.F*n(95)(f),"String",{startsWith:function(t){var e=c(this,t,f),n=o(Math.min(arguments.length>1?arguments[1]:void 0,e.length)),r=String(t);return l?l.call(e,r,n):e.slice(n,n+r.length)===r}})},function(t,e,n){"use strict";var r=n(94),o=n(8),c=n(90),f=n(96),l=n(23),h=n(72),d=n(97),v=n(10),y=Math.min,m=[].push,_=4294967295,w=!v((function(){RegExp(_,"y")}));n(73)("split",2,(function(t,e,n,v){var x;return x="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,e){var o=String(this);if(void 0===t&&0===e)return[];if(!r(t))return n.call(o,t,e);for(var c,f,l,output=[],h=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),v=0,y=void 0===e?_:e>>>0,w=new RegExp(t.source,h+"g");(c=d.call(w,o))&&!((f=w.lastIndex)>v&&(output.push(o.slice(v,c.index)),c.length>1&&c.index<o.length&&m.apply(output,c.slice(1)),l=c[0].length,v=f,output.length>=y));)w.lastIndex===c.index&&w.lastIndex++;return v===o.length?!l&&w.test("")||output.push(""):output.push(o.slice(v)),output.length>y?output.slice(0,y):output}:"0".split(void 0,0).length?function(t,e){return void 0===t&&0===e?[]:n.call(this,t,e)}:n,[function(n,r){var o=t(this),c=null==n?void 0:n[e];return void 0!==c?c.call(n,o,r):x.call(String(o),n,r)},function(t,e){var r=v(x,t,this,e,x!==n);if(r.done)return r.value;var d=o(t),m=String(this),O=c(d,RegExp),S=d.unicode,A=(d.ignoreCase?"i":"")+(d.multiline?"m":"")+(d.unicode?"u":"")+(w?"y":"g"),k=new O(w?d:"^(?:"+d.source+")",A),C=void 0===e?_:e>>>0;if(0===C)return[];if(0===m.length)return null===h(k,m)?[m]:[];for(var p=0,q=0,E=[];q<m.length;){k.lastIndex=w?q:0;var $,j=h(k,w?m:m.slice(q));if(null===j||($=y(l(k.lastIndex+(w?0:q)),m.length))===p)q=f(m,q,S);else{if(E.push(m.slice(p,q)),E.length===C)return E;for(var i=1;i<=j.length-1;i++)if(E.push(j[i]),E.length===C)return E;q=p=$}}return E.push(m.slice(p)),E}]}))},,function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";(function(t){var r=n(147),o=n.n(r);function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function f(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function l(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return f(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==n.return||n.return()}finally{if(l)throw o}}}}function h(t){return Array.isArray(t)}function d(t){return void 0===t}function v(t){return"object"===c(t)}function y(t){return"object"===c(t)&&null!==t}function m(t){return"function"==typeof t}var _=(function(){try{return!d(window)}catch(t){return!1}}()?window:t).console||{};function w(t){_&&_.warn&&_.warn(t)}var x=function(t){return w("".concat(t," is not supported in browser builds"))},O={title:void 0,titleChunk:"",titleTemplate:"%s",htmlAttrs:{},bodyAttrs:{},headAttrs:{},base:[],link:[],meta:[],style:[],script:[],noscript:[],__dangerouslyDisableSanitizers:[],__dangerouslyDisableSanitizersByTagID:{}},S="metaInfo",A="data-vue-meta",k="data-vue-meta-server-rendered",C="vmid",E="content",$="template",j=!0,T=10,I="ssr",M=Object.keys(O),P=[M[12],M[13]],N=[M[1],M[2],"changed"].concat(P),L=[M[3],M[4],M[5]],R=["link","style","script"],F=["once","skip","template"],D=["body","pbody"],U=["allowfullscreen","amp","amp-boilerplate","async","autofocus","autoplay","checked","compact","controls","declare","default","defaultchecked","defaultmuted","defaultselected","defer","disabled","enabled","formnovalidate","hidden","indeterminate","inert","ismap","itemscope","loop","multiple","muted","nohref","noresize","noshade","novalidate","nowrap","open","pauseonexit","readonly","required","reversed","scoped","seamless","selected","sortable","truespeed","typemustmatch","visible"],V=null;function z(t,e,n){var r=t.debounceWait;e._vueMeta.initialized||!e._vueMeta.initializing&&"watcher"!==n||(e._vueMeta.initialized=null),e._vueMeta.initialized&&!e._vueMeta.pausing&&function(t,e){if(!(e=void 0===e?10:e))return void t();clearTimeout(V),V=setTimeout((function(){t()}),e)}((function(){e.$meta().refresh()}),r)}function B(t,e,n){if(!Array.prototype.findIndex){for(var r=0;r<t.length;r++)if(e.call(n,t[r],r,t))return r;return-1}return t.findIndex(e,n)}function H(t){return Array.from?Array.from(t):Array.prototype.slice.call(t)}function G(t,e){if(!Array.prototype.includes){for(var n in t)if(t[n]===e)return!0;return!1}return t.includes(e)}var K=function(t,e){return(e||document).querySelectorAll(t)};function W(t,e){return t[e]||(t[e]=document.getElementsByTagName(e)[0]),t[e]}function J(t,e,n){var r=e.appId,o=e.attribute,c=e.type,f=e.tagIDKeyName;n=n||{};var l=["".concat(c,"[").concat(o,'="').concat(r,'"]'),"".concat(c,"[data-").concat(f,"]")].map((function(t){for(var e in n){var r=n[e],o=r&&!0!==r?'="'.concat(r,'"'):"";t+="[data-".concat(e).concat(o,"]")}return t}));return H(K(l.join(", "),t))}function X(t,e){t.removeAttribute(e)}function Y(t){return(t=t||this)&&(!0===t._vueMeta||v(t._vueMeta))}function Q(t,e){return t._vueMeta.pausing=!0,function(){return Z(t,e)}}function Z(t,e){if(t._vueMeta.pausing=!1,e||void 0===e)return t.$meta().refresh()}function tt(t){var e=t.$router;!t._vueMeta.navGuards&&e&&(t._vueMeta.navGuards=!0,e.beforeEach((function(e,n,r){Q(t),r()})),e.afterEach((function(){t.$nextTick((function(){var e=Z(t).metaInfo;e&&m(e.afterNavigation)&&e.afterNavigation(e)}))})))}var et=1;function nt(t,e){var n=["activated","deactivated","beforeMount"],r=!1;return{beforeCreate:function(){var o=this,c=this.$root,f=this.$options,l=t.config.devtools;if(Object.defineProperty(this,"_hasMetaInfo",{configurable:!0,get:function(){return l&&!c._vueMeta.deprecationWarningShown&&(w("VueMeta DeprecationWarning: _hasMetaInfo has been deprecated and will be removed in a future version. Please use hasMetaInfo(vm) instead"),c._vueMeta.deprecationWarningShown=!0),Y(this)}}),this===c&&c.$once("hook:beforeMount",(function(){if(!(r=this.$el&&1===this.$el.nodeType&&this.$el.hasAttribute("data-server-rendered"))&&c._vueMeta&&1===c._vueMeta.appId){var t=W({},"html");r=t&&t.hasAttribute(e.ssrAttribute)}})),!d(f[e.keyName])&&null!==f[e.keyName]){if(c._vueMeta||(c._vueMeta={appId:et},et++,l&&c.$options[e.keyName]&&this.$nextTick((function(){var t=function(t,e,n){if(Array.prototype.find)return t.find(e,n);for(var r=0;r<t.length;r++)if(e.call(n,t[r],r,t))return t[r]}(c.$children,(function(t){return t.$vnode&&t.$vnode.fnOptions}));t&&t.$vnode.fnOptions[e.keyName]&&w("VueMeta has detected a possible global mixin which adds a ".concat(e.keyName," property to all Vue components on the page. This could cause severe performance issues. If possible, use $meta().addApp to add meta information instead"))}))),!this._vueMeta){this._vueMeta=!0;for(var h=this.$parent;h&&h!==c;)d(h._vueMeta)&&(h._vueMeta=!1),h=h.$parent}m(f[e.keyName])&&(f.computed=f.computed||{},f.computed.$metaInfo=f[e.keyName],this.$isServer||this.$on("hook:created",(function(){this.$watch("$metaInfo",(function(){z(e,this.$root,"watcher")}))}))),d(c._vueMeta.initialized)&&(c._vueMeta.initialized=this.$isServer,c._vueMeta.initialized||(c._vueMeta.initializedSsr||(c._vueMeta.initializedSsr=!0,this.$on("hook:beforeMount",(function(){var t=this.$root;r&&(t._vueMeta.appId=e.ssrAppId)}))),this.$on("hook:mounted",(function(){var t=this.$root;t._vueMeta.initialized||(t._vueMeta.initializing=!0,this.$nextTick((function(){var n=t.$meta().refresh(),r=n.tags,o=n.metaInfo;!1===r&&null===t._vueMeta.initialized&&this.$nextTick((function(){return z(e,t,"init")})),t._vueMeta.initialized=!0,delete t._vueMeta.initializing,!e.refreshOnceOnNavigation&&o.afterNavigation&&tt(t)})))})),e.refreshOnceOnNavigation&&tt(c))),this.$on("hook:destroyed",(function(){var t=this;this.$parent&&Y(this)&&(delete this._hasMetaInfo,this.$nextTick((function(){if(e.waitOnDestroyed&&t.$el&&t.$el.offsetParent)var n=setInterval((function(){t.$el&&null!==t.$el.offsetParent||(clearInterval(n),z(e,t.$root,"destroyed"))}),50);else z(e,t.$root,"destroyed")})))})),this.$isServer||n.forEach((function(t){o.$on("hook:".concat(t),(function(){z(e,this.$root,t)}))}))}}}}function ot(t,e){return e&&v(t)?(h(t[e])||(t[e]=[]),t):h(t)?t:[]}var it=[[/&/g,"&"],[/</g,"<"],[/>/g,">"],[/"/g,'"'],[/'/g,"'"]];function at(t,e,n,r){var o=e.tagIDKeyName,c=n.doEscape,f=void 0===c?function(t){return t}:c,l={};for(var d in t){var v=t[d];if(G(N,d))l[d]=v;else{var m=P[0];if(n[m]&&G(n[m],d))l[d]=v;else{var _=t[o];if(_&&(m=P[1],n[m]&&n[m][_]&&G(n[m][_],d)))l[d]=v;else if("string"==typeof v?l[d]=f(v):h(v)?l[d]=v.map((function(t){return y(t)?at(t,e,n,!0):f(t)})):y(v)?l[d]=at(v,e,n,!0):l[d]=v,r){var w=f(d);d!==w&&(l[w]=l[d],delete l[d])}}}}return l}function ct(t,e,n){n=n||[];var r={doEscape:function(t){return n.reduce((function(t,e){return t.replace(e[0],e[1])}),t)}};return P.forEach((function(t,n){if(0===n)ot(e,t);else if(1===n)for(var o in e[t])ot(e[t],o);r[t]=e[t]})),at(e,t,r)}function st(t,e,template,n){var component=t.component,r=t.metaTemplateKeyName,o=t.contentKeyName;return!0!==template&&!0!==e[r]&&(d(template)&&e[r]&&(template=e[r],e[r]=!0),template?(d(n)&&(n=e[o]),e[o]=m(template)?template.call(component,n):template.replace(/%s/g,n),!0):(delete e[r],!1))}var ut=!1;function ft(t,source,e){return e=e||{},void 0===source.title&&delete source.title,L.forEach((function(t){if(source[t])for(var e in source[t])e in source[t]&&void 0===source[t][e]&&(G(U,e)&&!ut&&(w("VueMeta: Please note that since v2 the value undefined is not used to indicate boolean attributes anymore, see migration guide for details"),ut=!0),delete source[t][e])})),o()(t,source,{arrayMerge:function(t,s){return function(t,e,source){var component=t.component,n=t.tagIDKeyName,r=t.metaTemplateKeyName,o=t.contentKeyName,c=[];return e.length||source.length?(e.forEach((function(t,e){if(t[n]){var f=B(source,(function(e){return e[n]===t[n]})),l=source[f];if(-1!==f){if(o in l&&void 0===l[o]||"innerHTML"in l&&void 0===l.innerHTML)return c.push(t),void source.splice(f,1);if(null!==l[o]&&null!==l.innerHTML){var h=t[r];if(h){if(!l[r])return st({component:component,metaTemplateKeyName:r,contentKeyName:o},l,h),void(l.template=!0);l[o]||st({component:component,metaTemplateKeyName:r,contentKeyName:o},l,void 0,t[o])}}else source.splice(f,1)}else c.push(t)}else c.push(t)})),c.concat(source)):c}(e,t,s)}})}function lt(t,component){return pt(t||{},component,O)}function pt(t,component,e){if(e=e||{},component._inactive)return e;var n=(t=t||{}).keyName,r=component.$metaInfo,o=component.$options,c=component.$children;if(o[n]){var data=r||o[n];v(data)&&(e=ft(e,data,t))}return c.length&&c.forEach((function(n){(function(t){return(t=t||this)&&!d(t._vueMeta)})(n)&&(e=pt(t,n,e))})),e}var ht=[];function vt(t,e,n,r){var o=t.tagIDKeyName,c=!1;return n.forEach((function(t){t[o]&&t.callback&&(c=!0,function(t,e){1===arguments.length&&(e=t,t=""),ht.push([t,e])}("".concat(e,"[data-").concat(o,'="').concat(t[o],'"]'),t.callback))})),r&&c?yt():c}function yt(){var t;"complete"!==(t||document).readyState?document.onreadystatechange=function(){mt()}:mt()}function mt(t){ht.forEach((function(e){var n=e[0],r=e[1],o="".concat(n,'[onload="this.__vm_l=1"]'),c=[];t||(c=H(K(o))),t&&t.matches(o)&&(c=[t]),c.forEach((function(element){if(!element.__vm_cb){var t=function(){element.__vm_cb=!0,X(element,"onload"),r(element)};element.__vm_l?t():element.__vm_ev||(element.__vm_ev=!0,element.addEventListener("load",t))}}))}))}var gt,bt={};function _t(t,e,n,r,o){var c=(e||{}).attribute,f=o.getAttribute(c);f&&(bt[n]=JSON.parse(decodeURI(f)),X(o,c));var data=bt[n]||{},l=[];for(var h in data)void 0!==data[h]&&t in data[h]&&(l.push(h),r[h]||delete data[h][t]);for(var d in r){var v=data[d];v&&v[t]===r[d]||(l.push(d),void 0!==r[d]&&(data[d]=data[d]||{},data[d][t]=r[d]))}for(var y=0,m=l;y<m.length;y++){var _=m[y],w=data[_],x=[];for(var O in w)Array.prototype.push.apply(x,[].concat(w[O]));if(x.length){var S=G(U,_)&&x.some(Boolean)?"":x.filter((function(t){return void 0!==t})).join(" ");o.setAttribute(_,S)}else X(o,_)}bt[n]=data}function wt(t,e,n,r,head,body){var o=e||{},c=o.attribute,f=o.tagIDKeyName,l=D.slice();l.push(f);var h=[],d={appId:t,attribute:c,type:n,tagIDKeyName:f},v={head:J(head,d),pbody:J(body,d,{pbody:!0}),body:J(body,d,{body:!0})};if(r.length>1){var y=[];r=r.filter((function(t){var e=JSON.stringify(t),n=!G(y,e);return y.push(e),n}))}r.forEach((function(e){if(!e.skip){var r=document.createElement(n);e.once||r.setAttribute(c,t),Object.keys(e).forEach((function(t){if(!G(F,t))if("innerHTML"!==t)if("json"!==t)if("cssText"!==t)if("callback"!==t){var n=G(l,t)?"data-".concat(t):t,o=G(U,t);if(!o||e[t]){var c=o?"":e[t];r.setAttribute(n,c)}}else r.onload=function(){return e[t](r)};else r.styleSheet?r.styleSheet.cssText=e.cssText:r.appendChild(document.createTextNode(e.cssText));else r.innerHTML=JSON.stringify(e.json);else r.innerHTML=e.innerHTML}));var o,f=v[function(t){var body=t.body,e=t.pbody;return body?"body":e?"pbody":"head"}(e)];f.some((function(t,e){return o=e,r.isEqualNode(t)}))&&(o||0===o)?f.splice(o,1):h.push(r)}}));var m=[];for(var _ in v)Array.prototype.push.apply(m,v[_]);return m.forEach((function(element){element.parentNode.removeChild(element)})),h.forEach((function(element){element.hasAttribute("data-body")?body.appendChild(element):element.hasAttribute("data-pbody")?body.insertBefore(element,body.firstChild):head.appendChild(element)})),{oldTags:m,newTags:h}}function xt(t,e,n){var r=e=e||{},o=r.ssrAttribute,c=r.ssrAppId,f={},l=W(f,"html");if(t===c&&l.hasAttribute(o)){X(l,o);var d=!1;return R.forEach((function(t){n[t]&&vt(e,t,n[t])&&(d=!0)})),d&&yt(),!1}var title,v={},y={};for(var m in n)if(!G(N,m))if("title"!==m){if(G(L,m)){var _=m.substr(0,4);_t(t,e,m,n[m],W(f,_))}else if(h(n[m])){var w=wt(t,e,m,n[m],W(f,"head"),W(f,"body")),x=w.oldTags,O=w.newTags;O.length&&(v[m]=O,y[m]=x)}}else((title=n.title)||""===title)&&(document.title=title);return{tagsAdded:v,tagsRemoved:y}}function Ot(t,e,n){return{set:function(r){return function(t,e,n,r){if(t&&t.$el)return xt(e,n,r);(gt=gt||{})[e]=r}(t,e,n,r)},remove:function(){return function(t,e,n){if(t&&t.$el){var r,o={},c=l(L);try{for(c.s();!(r=c.n()).done;){var f=r.value,h=f.substr(0,4);_t(e,n,f,{},W(o,h))}}catch(t){c.e(t)}finally{c.f()}return function(t,e){var n=t.attribute;H(K("[".concat(n,'="').concat(e,'"]'))).map((function(t){return t.remove()}))}(n,e)}gt[e]&&(delete gt[e],At())}(t,e,n)}}}function St(){return gt}function At(t){!t&&Object.keys(gt).length||(gt=void 0)}function kt(t,e){if(e=e||{},!t._vueMeta)return w("This vue app/component has no vue-meta configuration"),{};var n=function(t,e,n,component){n=n||[];var r=(t=t||{}).tagIDKeyName;return e.title&&(e.titleChunk=e.title),e.titleTemplate&&"%s"!==e.titleTemplate&&st({component:component,contentKeyName:"title"},e,e.titleTemplate,e.titleChunk||""),e.base&&(e.base=Object.keys(e.base).length?[e.base]:[]),e.meta&&(e.meta=e.meta.filter((function(t,e,n){return!t[r]||e===B(n,(function(e){return e[r]===t[r]}))})),e.meta.forEach((function(e){return st(t,e)}))),ct(t,e,n)}(e,lt(e,t),it,t),r=xt(t._vueMeta.appId,e,n);r&&m(n.changed)&&(n.changed(n,r.tagsAdded,r.tagsRemoved),r={addedTags:r.tagsAdded,removedTags:r.tagsRemoved});var o=St();if(o){for(var c in o)xt(c,e,o[c]),delete o[c];At(!0)}return{vm:t,metaInfo:n,tags:r}}function Ct(t){t=t||{};var e=this.$root;return{getOptions:function(){return function(t){var e={};for(var n in t)e[n]=t[n];return e}(t)},setOptions:function(n){var r="refreshOnceOnNavigation";n&&n[r]&&(t.refreshOnceOnNavigation=!!n[r],tt(e));var o="debounceWait";if(n&&o in n){var c=parseInt(n.debounceWait);isNaN(c)||(t.debounceWait=c)}var f="waitOnDestroyed";n&&f in n&&(t.waitOnDestroyed=!!n.waitOnDestroyed)},refresh:function(){return kt(e,t)},inject:function(t){return x("inject")},pause:function(){return Q(e)},resume:function(){return Z(e)},addApp:function(n){return Ot(e,n,t)}}}function Et(t,e){t.__vuemeta_installed||(t.__vuemeta_installed=!0,e=function(t){return{keyName:(t=v(t)?t:{}).keyName||S,attribute:t.attribute||A,ssrAttribute:t.ssrAttribute||k,tagIDKeyName:t.tagIDKeyName||C,contentKeyName:t.contentKeyName||E,metaTemplateKeyName:t.metaTemplateKeyName||$,debounceWait:d(t.debounceWait)?T:t.debounceWait,waitOnDestroyed:d(t.waitOnDestroyed)?j:t.waitOnDestroyed,ssrAppId:t.ssrAppId||I,refreshOnceOnNavigation:!!t.refreshOnceOnNavigation}}(e),t.prototype.$meta=function(){return Ct.call(this,e)},t.mixin(nt(t,e)))}d(window)||d(window.Vue)||Et(window.Vue);var $t={version:"2.4.0",install:Et,generate:function(t,e){return x("generate")},hasMetaInfo:Y};e.a=$t}).call(this,n(44))},function(t,e,n){"use strict";(function(t){var n=("undefined"!=typeof window?window:void 0!==t?t:{}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function r(t,e){if(void 0===e&&(e=[]),null===t||"object"!=typeof t)return t;var n,o=(n=function(e){return e.original===t},e.filter(n)[0]);if(o)return o.copy;var c=Array.isArray(t)?[]:{};return e.push({original:t,copy:c}),Object.keys(t).forEach((function(n){c[n]=r(t[n],e)})),c}function o(t,e){Object.keys(t).forEach((function(n){return e(t[n],n)}))}function c(t){return null!==t&&"object"==typeof t}var f=function(t,e){this.runtime=e,this._children=Object.create(null),this._rawModule=t;var n=t.state;this.state=("function"==typeof n?n():n)||{}},l={namespaced:{configurable:!0}};l.namespaced.get=function(){return!!this._rawModule.namespaced},f.prototype.addChild=function(t,e){this._children[t]=e},f.prototype.removeChild=function(t){delete this._children[t]},f.prototype.getChild=function(t){return this._children[t]},f.prototype.hasChild=function(t){return t in this._children},f.prototype.update=function(t){this._rawModule.namespaced=t.namespaced,t.actions&&(this._rawModule.actions=t.actions),t.mutations&&(this._rawModule.mutations=t.mutations),t.getters&&(this._rawModule.getters=t.getters)},f.prototype.forEachChild=function(t){o(this._children,t)},f.prototype.forEachGetter=function(t){this._rawModule.getters&&o(this._rawModule.getters,t)},f.prototype.forEachAction=function(t){this._rawModule.actions&&o(this._rawModule.actions,t)},f.prototype.forEachMutation=function(t){this._rawModule.mutations&&o(this._rawModule.mutations,t)},Object.defineProperties(f.prototype,l);var h=function(t){this.register([],t,!1)};function d(path,t,e){if(t.update(e),e.modules)for(var n in e.modules){if(!t.getChild(n))return void 0;d(path.concat(n),t.getChild(n),e.modules[n])}}h.prototype.get=function(path){return path.reduce((function(t,e){return t.getChild(e)}),this.root)},h.prototype.getNamespace=function(path){var t=this.root;return path.reduce((function(e,n){return e+((t=t.getChild(n)).namespaced?n+"/":"")}),"")},h.prototype.update=function(t){d([],this.root,t)},h.prototype.register=function(path,t,e){var n=this;void 0===e&&(e=!0);var r=new f(t,e);0===path.length?this.root=r:this.get(path.slice(0,-1)).addChild(path[path.length-1],r);t.modules&&o(t.modules,(function(t,r){n.register(path.concat(r),t,e)}))},h.prototype.unregister=function(path){var t=this.get(path.slice(0,-1)),e=path[path.length-1],n=t.getChild(e);n&&n.runtime&&t.removeChild(e)},h.prototype.isRegistered=function(path){var t=this.get(path.slice(0,-1)),e=path[path.length-1];return!!t&&t.hasChild(e)};var v;var y=function(t){var e=this;void 0===t&&(t={}),!v&&"undefined"!=typeof window&&window.Vue&&k(window.Vue);var r=t.plugins;void 0===r&&(r=[]);var o=t.strict;void 0===o&&(o=!1),this._committing=!1,this._actions=Object.create(null),this._actionSubscribers=[],this._mutations=Object.create(null),this._wrappedGetters=Object.create(null),this._modules=new h(t),this._modulesNamespaceMap=Object.create(null),this._subscribers=[],this._watcherVM=new v,this._makeLocalGettersCache=Object.create(null);var c=this,f=this.dispatch,l=this.commit;this.dispatch=function(t,e){return f.call(c,t,e)},this.commit=function(t,e,n){return l.call(c,t,e,n)},this.strict=o;var d=this._modules.root.state;O(this,d,[],this._modules.root),x(this,d),r.forEach((function(t){return t(e)})),(void 0!==t.devtools?t.devtools:v.config.devtools)&&function(t){n&&(t._devtoolHook=n,n.emit("vuex:init",t),n.on("vuex:travel-to-state",(function(e){t.replaceState(e)})),t.subscribe((function(t,e){n.emit("vuex:mutation",t,e)}),{prepend:!0}),t.subscribeAction((function(t,e){n.emit("vuex:action",t,e)}),{prepend:!0}))}(this)},m={state:{configurable:!0}};function _(t,e,n){return e.indexOf(t)<0&&(n&&n.prepend?e.unshift(t):e.push(t)),function(){var i=e.indexOf(t);i>-1&&e.splice(i,1)}}function w(t,e){t._actions=Object.create(null),t._mutations=Object.create(null),t._wrappedGetters=Object.create(null),t._modulesNamespaceMap=Object.create(null);var n=t.state;O(t,n,[],t._modules.root,!0),x(t,n,e)}function x(t,e,n){var r=t._vm;t.getters={},t._makeLocalGettersCache=Object.create(null);var c=t._wrappedGetters,f={};o(c,(function(e,n){f[n]=function(t,e){return function(){return t(e)}}(e,t),Object.defineProperty(t.getters,n,{get:function(){return t._vm[n]},enumerable:!0})}));var l=v.config.silent;v.config.silent=!0,t._vm=new v({data:{$$state:e},computed:f}),v.config.silent=l,t.strict&&function(t){t._vm.$watch((function(){return this._data.$$state}),(function(){0}),{deep:!0,sync:!0})}(t),r&&(n&&t._withCommit((function(){r._data.$$state=null})),v.nextTick((function(){return r.$destroy()})))}function O(t,e,path,n,r){var o=!path.length,c=t._modules.getNamespace(path);if(n.namespaced&&(t._modulesNamespaceMap[c],t._modulesNamespaceMap[c]=n),!o&&!r){var f=S(e,path.slice(0,-1)),l=path[path.length-1];t._withCommit((function(){v.set(f,l,n.state)}))}var h=n.context=function(t,e,path){var n=""===e,r={dispatch:n?t.dispatch:function(n,r,o){var c=A(n,r,o),f=c.payload,l=c.options,h=c.type;return l&&l.root||(h=e+h),t.dispatch(h,f)},commit:n?t.commit:function(n,r,o){var c=A(n,r,o),f=c.payload,l=c.options,h=c.type;l&&l.root||(h=e+h),t.commit(h,f,l)}};return Object.defineProperties(r,{getters:{get:n?function(){return t.getters}:function(){return function(t,e){if(!t._makeLocalGettersCache[e]){var n={},r=e.length;Object.keys(t.getters).forEach((function(o){if(o.slice(0,r)===e){var c=o.slice(r);Object.defineProperty(n,c,{get:function(){return t.getters[o]},enumerable:!0})}})),t._makeLocalGettersCache[e]=n}return t._makeLocalGettersCache[e]}(t,e)}},state:{get:function(){return S(t.state,path)}}}),r}(t,c,path);n.forEachMutation((function(e,n){!function(t,e,n,r){(t._mutations[e]||(t._mutations[e]=[])).push((function(e){n.call(t,r.state,e)}))}(t,c+n,e,h)})),n.forEachAction((function(e,n){var r=e.root?n:c+n,o=e.handler||e;!function(t,e,n,r){(t._actions[e]||(t._actions[e]=[])).push((function(e){var o,c=n.call(t,{dispatch:r.dispatch,commit:r.commit,getters:r.getters,state:r.state,rootGetters:t.getters,rootState:t.state},e);return(o=c)&&"function"==typeof o.then||(c=Promise.resolve(c)),t._devtoolHook?c.catch((function(e){throw t._devtoolHook.emit("vuex:error",e),e})):c}))}(t,r,o,h)})),n.forEachGetter((function(e,n){!function(t,e,n,r){if(t._wrappedGetters[e])return void 0;t._wrappedGetters[e]=function(t){return n(r.state,r.getters,t.state,t.getters)}}(t,c+n,e,h)})),n.forEachChild((function(n,o){O(t,e,path.concat(o),n,r)}))}function S(t,path){return path.reduce((function(t,e){return t[e]}),t)}function A(t,e,n){return c(t)&&t.type&&(n=e,e=t,t=t.type),{type:t,payload:e,options:n}}function k(t){v&&t===v||function(t){if(Number(t.version.split(".")[0])>=2)t.mixin({beforeCreate:n});else{var e=t.prototype._init;t.prototype._init=function(t){void 0===t&&(t={}),t.init=t.init?[n].concat(t.init):n,e.call(this,t)}}function n(){var t=this.$options;t.store?this.$store="function"==typeof t.store?t.store():t.store:t.parent&&t.parent.$store&&(this.$store=t.parent.$store)}}(v=t)}m.state.get=function(){return this._vm._data.$$state},m.state.set=function(t){0},y.prototype.commit=function(t,e,n){var r=this,o=A(t,e,n),c=o.type,f=o.payload,l=(o.options,{type:c,payload:f}),h=this._mutations[c];h&&(this._withCommit((function(){h.forEach((function(t){t(f)}))})),this._subscribers.slice().forEach((function(sub){return sub(l,r.state)})))},y.prototype.dispatch=function(t,e){var n=this,r=A(t,e),o=r.type,c=r.payload,f={type:o,payload:c},l=this._actions[o];if(l){try{this._actionSubscribers.slice().filter((function(sub){return sub.before})).forEach((function(sub){return sub.before(f,n.state)}))}catch(t){0}var h=l.length>1?Promise.all(l.map((function(t){return t(c)}))):l[0](c);return new Promise((function(t,e){h.then((function(e){try{n._actionSubscribers.filter((function(sub){return sub.after})).forEach((function(sub){return sub.after(f,n.state)}))}catch(t){0}t(e)}),(function(t){try{n._actionSubscribers.filter((function(sub){return sub.error})).forEach((function(sub){return sub.error(f,n.state,t)}))}catch(t){0}e(t)}))}))}},y.prototype.subscribe=function(t,e){return _(t,this._subscribers,e)},y.prototype.subscribeAction=function(t,e){return _("function"==typeof t?{before:t}:t,this._actionSubscribers,e)},y.prototype.watch=function(t,e,n){var r=this;return this._watcherVM.$watch((function(){return t(r.state,r.getters)}),e,n)},y.prototype.replaceState=function(t){var e=this;this._withCommit((function(){e._vm._data.$$state=t}))},y.prototype.registerModule=function(path,t,e){void 0===e&&(e={}),"string"==typeof path&&(path=[path]),this._modules.register(path,t),O(this,this.state,path,this._modules.get(path),e.preserveState),x(this,this.state)},y.prototype.unregisterModule=function(path){var t=this;"string"==typeof path&&(path=[path]),this._modules.unregister(path),this._withCommit((function(){var e=S(t.state,path.slice(0,-1));v.delete(e,path[path.length-1])})),w(this)},y.prototype.hasModule=function(path){return"string"==typeof path&&(path=[path]),this._modules.isRegistered(path)},y.prototype.hotUpdate=function(t){this._modules.update(t),w(this,!0)},y.prototype._withCommit=function(t){var e=this._committing;this._committing=!0,t(),this._committing=e},Object.defineProperties(y.prototype,m);var C=I((function(t,e){var n={};return T(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){var e=this.$store.state,n=this.$store.getters;if(t){var r=M(this.$store,"mapState",t);if(!r)return;e=r.context.state,n=r.context.getters}return"function"==typeof o?o.call(this,e,n):e[o]},n[r].vuex=!0})),n})),E=I((function(t,e){var n={};return T(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.commit;if(t){var c=M(this.$store,"mapMutations",t);if(!c)return;r=c.context.commit}return"function"==typeof o?o.apply(this,[r].concat(e)):r.apply(this.$store,[o].concat(e))}})),n})),$=I((function(t,e){var n={};return T(e).forEach((function(e){var r=e.key,o=e.val;o=t+o,n[r]=function(){if(!t||M(this.$store,"mapGetters",t))return this.$store.getters[o]},n[r].vuex=!0})),n})),j=I((function(t,e){var n={};return T(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.dispatch;if(t){var c=M(this.$store,"mapActions",t);if(!c)return;r=c.context.dispatch}return"function"==typeof o?o.apply(this,[r].concat(e)):r.apply(this.$store,[o].concat(e))}})),n}));function T(map){return function(map){return Array.isArray(map)||c(map)}(map)?Array.isArray(map)?map.map((function(t){return{key:t,val:t}})):Object.keys(map).map((function(t){return{key:t,val:map[t]}})):[]}function I(t){return function(e,map){return"string"!=typeof e?(map=e,e=""):"/"!==e.charAt(e.length-1)&&(e+="/"),t(e,map)}}function M(t,e,n){return t._modulesNamespaceMap[n]}function P(t,e,n){var r=n?t.groupCollapsed:t.group;try{r.call(t,e)}catch(n){t.log(e)}}function N(t){try{t.groupEnd()}catch(e){t.log("—— log end ——")}}function L(){var time=new Date;return" @ "+R(time.getHours(),2)+":"+R(time.getMinutes(),2)+":"+R(time.getSeconds(),2)+"."+R(time.getMilliseconds(),3)}function R(t,e){return n="0",r=e-t.toString().length,new Array(r+1).join(n)+t;var n,r}var F={Store:y,install:k,version:"3.6.2",mapState:C,mapMutations:E,mapGetters:$,mapActions:j,createNamespacedHelpers:function(t){return{mapState:C.bind(null,t),mapGetters:$.bind(null,t),mapMutations:E.bind(null,t),mapActions:j.bind(null,t)}},createLogger:function(t){void 0===t&&(t={});var e=t.collapsed;void 0===e&&(e=!0);var filter=t.filter;void 0===filter&&(filter=function(t,e,n){return!0});var n=t.transformer;void 0===n&&(n=function(t){return t});var o=t.mutationTransformer;void 0===o&&(o=function(t){return t});var c=t.actionFilter;void 0===c&&(c=function(t,e){return!0});var f=t.actionTransformer;void 0===f&&(f=function(t){return t});var l=t.logMutations;void 0===l&&(l=!0);var h=t.logActions;void 0===h&&(h=!0);var d=t.logger;return void 0===d&&(d=console),function(t){var v=r(t.state);void 0!==d&&(l&&t.subscribe((function(t,c){var f=r(c);if(filter(t,v,f)){var l=L(),h=o(t),y="mutation "+t.type+l;P(d,y,e),d.log("%c prev state","color: #9E9E9E; font-weight: bold",n(v)),d.log("%c mutation","color: #03A9F4; font-weight: bold",h),d.log("%c next state","color: #4CAF50; font-weight: bold",n(f)),N(d)}v=f})),h&&t.subscribeAction((function(t,n){if(c(t,n)){var r=L(),o=f(t),l="action "+t.type+r;P(d,l,e),d.log("%c action","color: #03A9F4; font-weight: bold",o),N(d)}})))}}};e.a=F}).call(this,n(44))},function(t,e,n){"use strict";var r=n(8),o=n(23),c=n(96),f=n(72);n(73)("match",1,(function(t,e,n,l){return[function(n){var r=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=l(n,t,this);if(e.done)return e.value;var h=r(t),d=String(this);if(!h.global)return f(h,d);var v=h.unicode;h.lastIndex=0;for(var y,m=[],_=0;null!==(y=f(h,d));){var w=String(y[0]);m[_]=w,""===w&&(h.lastIndex=c(d,o(h.lastIndex),v)),_++}return 0===_?null:m}]}))},function(t,e,n){"use strict";var r=n(4),o=n(79)(5),c="find",f=!0;c in[]&&Array(1).find((function(){f=!1})),r(r.P+r.F*f,"Array",{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),n(78)(c)},function(t,e,n){var r=n(14);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(33),o=n(6),c="__core-js_shared__",f=o[c]||(o[c]={});(t.exports=function(t,e){return f[t]||(f[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(51)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(8),o=n(161),c=n(85),f=n(84)("IE_PROTO"),l=function(){},h=function(){var t,iframe=n(80)("iframe"),i=c.length;for(iframe.style.display="none",n(81).appendChild(iframe),iframe.src="javascript:",(t=iframe.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),h=t.F;i--;)delete h.prototype[c[i]];return h()};t.exports=Object.create||function(t,e){var n;return null!==t?(l.prototype=r(t),n=new l,l.prototype=null,n[f]=t):n=h(),void 0===e?n:o(n,e)}},function(t,e,n){var r=n(37),o=n(5)("toStringTag"),c="Arguments"==r(function(){return arguments}());t.exports=function(t){var e,n,f;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?n:c?r(e):"Object"==(f=r(e))&&"function"==typeof e.callee?"Arguments":f}},function(t,e,n){"use strict";var r=n(71),o=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var c=n.call(t,e);if("object"!=typeof c)throw new TypeError("RegExp exec method returned something other than an Object or null");return c}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";n(177);var r=n(18),o=n(34),c=n(10),f=n(40),l=n(5),h=n(97),d=l("species"),v=!c((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),y=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var m=l(t),_=!c((function(){var e={};return e[m]=function(){return 7},7!=""[t](e)})),w=_?!c((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[d]=function(){return n}),n[m](""),!e})):void 0;if(!_||!w||"replace"===t&&!v||"split"===t&&!y){var x=/./[m],O=n(f,m,""[t],(function(t,e,n,r,o){return e.exec===h?_&&!o?{done:!0,value:x.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),S=O[0],A=O[1];r(String.prototype,t,S),o(RegExp.prototype,m,2==e?function(t,e){return A.call(t,this,e)}:function(t){return A.call(t,this)})}}},function(t,e,n){"use strict";var r=n(8);t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},,function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));var r=n(61);function o(t,e){if(t){if("string"==typeof t)return Object(r.a)(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Object(r.a)(t,e):void 0}}},,function(t,e,n){var r=n(5)("unscopables"),o=Array.prototype;null==o[r]&&n(34)(o,r,{}),t.exports=function(t){o[r][t]=!0}},function(t,e,n){var r=n(36),o=n(83),c=n(41),f=n(23),l=n(173);t.exports=function(t,e){var n=1==t,h=2==t,d=3==t,v=4==t,y=6==t,m=5==t||y,_=e||l;return function(e,l,w){for(var x,O,S=c(e),A=o(S),k=r(l,w,3),C=f(A.length),E=0,$=n?_(e,C):h?_(e,0):void 0;C>E;E++)if((m||E in A)&&(O=k(x=A[E],E,S),t))if(n)$[E]=O;else if(O)switch(t){case 3:return!0;case 5:return x;case 6:return E;case 2:$.push(x)}else if(v)return!1;return y?-1:d||v?v:$}}},function(t,e,n){var r=n(14),o=n(6).document,c=r(o)&&r(o.createElement);t.exports=function(t){return c?o.createElement(t):{}}},function(t,e,n){var r=n(6).document;t.exports=r&&r.documentElement},function(t,e,n){var r=n(50)("meta"),o=n(14),c=n(35),f=n(13).f,l=0,h=Object.isExtensible||function(){return!0},d=!n(10)((function(){return h(Object.preventExtensions({}))})),v=function(t){f(t,r,{value:{i:"O"+ ++l,w:{}}})},meta=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!c(t,r)){if(!h(t))return"F";if(!e)return"E";v(t)}return t[r].i},getWeak:function(t,e){if(!c(t,r)){if(!h(t))return!0;if(!e)return!1;v(t)}return t[r].w},onFreeze:function(t){return d&&meta.NEED&&h(t)&&!c(t,r)&&v(t),t}}},function(t,e,n){var r=n(37);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(67)("keys"),o=n(50);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(5)("iterator"),o=!1;try{var c=[7][r]();c.return=function(){o=!0},Array.from(c,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var c=[7],f=c[r]();f.next=function(){return{done:n=!0}},c[r]=function(){return f},t(c)}catch(t){}return n}},function(t,e,n){"use strict";var r=n(51),o=n(4),c=n(18),f=n(34),l=n(57),h=n(163),d=n(53),v=n(164),y=n(5)("iterator"),m=!([].keys&&"next"in[].keys()),_="keys",w="values",x=function(){return this};t.exports=function(t,e,n,O,S,A,k){h(n,e,O);var C,E,$,j=function(t){if(!m&&t in P)return P[t];switch(t){case _:case w:return function(){return new n(this,t)}}return function(){return new n(this,t)}},T=e+" Iterator",I=S==w,M=!1,P=t.prototype,N=P[y]||P["@@iterator"]||S&&P[S],L=N||j(S),R=S?I?j("entries"):L:void 0,F="Array"==e&&P.entries||N;if(F&&($=v(F.call(new t)))!==Object.prototype&&$.next&&(d($,T,!0),r||"function"==typeof $[y]||f($,y,x)),I&&N&&N.name!==w&&(M=!0,L=function(){return N.call(this)}),r&&!k||!m&&!M&&P[y]||f(P,y,L),l[e]=L,l[T]=x,S)if(C={values:I?L:j(w),keys:A?L:j(_),entries:R},k)for(E in C)E in P||c(P,E,C[E]);else o(o.P+o.F*(m||M),e,C);return C}},function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},function(t,e,n){var r=n(36),o=n(115),c=n(116),f=n(8),l=n(23),h=n(118),d={},v={};(e=t.exports=function(t,e,n,y,m){var _,w,x,O,S=m?function(){return t}:h(t),A=r(n,y,e?2:1),k=0;if("function"!=typeof S)throw TypeError(t+" is not iterable!");if(c(S)){for(_=l(t.length);_>k;k++)if((O=e?A(f(w=t[k])[0],w[1]):A(t[k]))===d||O===v)return O}else for(x=S.call(t);!(w=x.next()).done;)if((O=o(x,A,w.value,e))===d||O===v)return O}).BREAK=d,e.RETURN=v},function(t,e,n){var r=n(8),o=n(68),c=n(5)("species");t.exports=function(t,e){var n,f=r(t).constructor;return void 0===f||null==(n=r(f)[c])?e:o(n)}},function(t,e,n){var r=n(18);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){"use strict";var r=n(6),o=n(13),c=n(11),f=n(5)("species");t.exports=function(t){var e=r[t];c&&e&&!e[f]&&o.f(e,f,{configurable:!0,get:function(){return this}})}},function(t,e,n){var r=n(94),o=n(40);t.exports=function(t,e,n){if(r(e))throw TypeError("String#"+n+" doesn't accept regex!");return String(o(t))}},function(t,e,n){var r=n(14),o=n(37),c=n(5)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[c])?!!e:"RegExp"==o(t))}},function(t,e,n){var r=n(5)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(n){try{return e[r]=!1,!"/./"[t](e)}catch(t){}}return!0}},function(t,e,n){"use strict";var r=n(126)(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){"use strict";var r,o,c=n(74),f=RegExp.prototype.exec,l=String.prototype.replace,h=f,d=(r=/a/,o=/b*/g,f.call(r,"a"),f.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),v=void 0!==/()??/.exec("")[1];(d||v)&&(h=function(t){var e,n,r,i,o=this;return v&&(n=new RegExp("^"+o.source+"$(?!\\s)",c.call(o))),d&&(e=o.lastIndex),r=f.call(o,t),d&&r&&(o.lastIndex=o.global?r.index+r[0].length:e),v&&r&&r.length>1&&l.call(r[0],n,(function(){for(i=1;i<arguments.length-2;i++)void 0===arguments[i]&&(r[i]=void 0)})),r}),t.exports=h},function(t,e,n){var r=n(14),o=n(179).set;t.exports=function(t,e,n){var c,f=e.constructor;return f!==n&&"function"==typeof f&&(c=f.prototype)!==n.prototype&&r(c)&&o&&o(t,c),t}},function(t,e,n){var r=Date.prototype,o="Invalid Date",c="toString",f=r.toString,l=r.getTime;new Date(NaN)+""!=o&&n(18)(r,c,(function(){var t=l.call(this);return t==t?f.call(this):o}))},function(t,e,n){"use strict";n(180);var r=n(8),o=n(74),c=n(11),f="toString",l=/./.toString,h=function(t){n(18)(RegExp.prototype,f,t,!0)};n(10)((function(){return"/a/b"!=l.call({source:"a",flags:"b"})}))?h((function(){var t=r(this);return"/".concat(t.source,"/","flags"in t?t.flags:!c&&t instanceof RegExp?o.call(t):void 0)})):l.name!=f&&h((function(){return l.call(this)}))},,,function(t,e,n){"use strict";function r(a,b){for(var t in b)a[t]=b[t];return a}var o=/[!'()*]/g,c=function(t){return"%"+t.charCodeAt(0).toString(16)},f=/%2C/g,l=function(t){return encodeURIComponent(t).replace(o,c).replace(f,",")};function h(t){try{return decodeURIComponent(t)}catch(t){0}return t}var d=function(t){return null==t||"object"==typeof t?t:String(t)};function v(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(param){var t=param.replace(/\+/g," ").split("="),n=h(t.shift()),r=t.length>0?h(t.join("=")):null;void 0===e[n]?e[n]=r:Array.isArray(e[n])?e[n].push(r):e[n]=[e[n],r]})),e):e}function y(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return l(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(l(e)):r.push(l(e)+"="+l(t)))})),r.join("&")}return l(e)+"="+l(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var m=/\/?$/;function _(t,e,n,r){var o=r&&r.options.stringifyQuery,c=e.query||{};try{c=w(c)}catch(t){}var f={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:c,params:e.params||{},fullPath:S(e,o),matched:t?O(t):[]};return n&&(f.redirectedFrom=S(n,o)),Object.freeze(f)}function w(t){if(Array.isArray(t))return t.map(w);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=w(t[n]);return e}return t}var x=_(null,{path:"/"});function O(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function S(t,e){var path=t.path,n=t.query;void 0===n&&(n={});var r=t.hash;return void 0===r&&(r=""),(path||"/")+(e||y)(n)+r}function A(a,b,t){return b===x?a===b:!!b&&(a.path&&b.path?a.path.replace(m,"")===b.path.replace(m,"")&&(t||a.hash===b.hash&&k(a.query,b.query)):!(!a.name||!b.name)&&(a.name===b.name&&(t||a.hash===b.hash&&k(a.query,b.query)&&k(a.params,b.params))))}function k(a,b){if(void 0===a&&(a={}),void 0===b&&(b={}),!a||!b)return a===b;var t=Object.keys(a).sort(),e=Object.keys(b).sort();return t.length===e.length&&t.every((function(t,i){var n=a[t];if(e[i]!==t)return!1;var r=b[t];return null==n||null==r?n===r:"object"==typeof n&&"object"==typeof r?k(n,r):String(n)===String(r)}))}function C(t){for(var i=0;i<t.matched.length;i++){var e=t.matched[i];for(var n in e.instances){var r=e.instances[n],o=e.enteredCbs[n];if(r&&o){delete e.enteredCbs[n];for(var c=0;c<o.length;c++)r._isBeingDestroyed||o[c](r)}}}}var E={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,o=e.children,c=e.parent,data=e.data;data.routerView=!0;for(var f=c.$createElement,l=n.name,h=c.$route,d=c._routerViewCache||(c._routerViewCache={}),v=0,y=!1;c&&c._routerRoot!==c;){var m=c.$vnode?c.$vnode.data:{};m.routerView&&v++,m.keepAlive&&c._directInactive&&c._inactive&&(y=!0),c=c.$parent}if(data.routerViewDepth=v,y){var _=d[l],w=_&&_.component;return w?(_.configProps&&$(w,data,_.route,_.configProps),f(w,data,o)):f()}var x=h.matched[v],component=x&&x.components[l];if(!x||!component)return d[l]=null,f();d[l]={component:component},data.registerRouteInstance=function(t,e){var n=x.instances[l];(e&&n!==t||!e&&n===t)&&(x.instances[l]=e)},(data.hook||(data.hook={})).prepatch=function(t,e){x.instances[l]=e.componentInstance},data.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==x.instances[l]&&(x.instances[l]=t.componentInstance),C(h)};var O=x.props&&x.props[l];return O&&(r(d[l],{route:h,configProps:O}),$(component,data,h,O)),f(component,data,o)}};function $(component,data,t,e){var n=data.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(t,e);if(n){n=data.props=r({},n);var o=data.attrs=data.attrs||{};for(var c in n)component.props&&c in component.props||(o[c]=n[c],delete n[c])}}function j(t,base,e){var n=t.charAt(0);if("/"===n)return t;if("?"===n||"#"===n)return base+t;var r=base.split("/");e&&r[r.length-1]||r.pop();for(var o=t.replace(/^\//,"").split("/"),i=0;i<o.length;i++){var c=o[i];".."===c?r.pop():"."!==c&&r.push(c)}return""!==r[0]&&r.unshift(""),r.join("/")}function T(path){return path.replace(/\/\//g,"/")}var I=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},M=W,P=D,N=function(t,e){return V(D(t,e),e)},L=V,R=K,F=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function D(t,e){for(var n,r=[],o=0,c=0,path="",f=e&&e.delimiter||"/";null!=(n=F.exec(t));){var l=n[0],h=n[1],d=n.index;if(path+=t.slice(c,d),c=d+l.length,h)path+=h[1];else{var v=t[c],y=n[2],m=n[3],_=n[4],w=n[5],x=n[6],O=n[7];path&&(r.push(path),path="");var S=null!=y&&null!=v&&v!==y,A="+"===x||"*"===x,k="?"===x||"*"===x,C=n[2]||f,pattern=_||w;r.push({name:m||o++,prefix:y||"",delimiter:C,optional:k,repeat:A,partial:S,asterisk:!!O,pattern:pattern?B(pattern):O?".*":"[^"+z(C)+"]+?"})}}return c<t.length&&(path+=t.substr(c)),path&&r.push(path),r}function U(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function V(t,e){for(var n=new Array(t.length),i=0;i<t.length;i++)"object"==typeof t[i]&&(n[i]=new RegExp("^(?:"+t[i].pattern+")$",G(e)));return function(e,r){for(var path="",data=e||{},o=(r||{}).pretty?U:encodeURIComponent,i=0;i<t.length;i++){var c=t[i];if("string"!=typeof c){var f,l=data[c.name];if(null==l){if(c.optional){c.partial&&(path+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(I(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var h=0;h<l.length;h++){if(f=o(l[h]),!n[i].test(f))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===h?c.prefix:c.delimiter)+f}}else{if(f=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):o(l),!n[i].test(f))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+f+'"');path+=c.prefix+f}}else path+=c}return path}}function z(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function B(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function H(t,e){return t.keys=e,t}function G(t){return t&&t.sensitive?"":"i"}function K(t,e,n){I(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,c="",i=0;i<t.length;i++){var f=t[i];if("string"==typeof f)c+=z(f);else{var l=z(f.prefix),h="(?:"+f.pattern+")";e.push(f),f.repeat&&(h+="(?:"+l+h+")*"),c+=h=f.optional?f.partial?l+"("+h+")?":"(?:"+l+"("+h+"))?":l+"("+h+")"}}var d=z(n.delimiter||"/"),v=c.slice(-d.length)===d;return r||(c=(v?c.slice(0,-d.length):c)+"(?:"+d+"(?=$))?"),c+=o?"$":r&&v?"":"(?="+d+"|$)",H(new RegExp("^"+c,G(n)),e)}function W(path,t,e){return I(t)||(e=t||e,t=[]),e=e||{},path instanceof RegExp?function(path,t){var e=path.source.match(/\((?!\?)/g);if(e)for(var i=0;i<e.length;i++)t.push({name:i,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return H(path,t)}(path,t):I(path)?function(path,t,e){for(var n=[],i=0;i<path.length;i++)n.push(W(path[i],t,e).source);return H(new RegExp("(?:"+n.join("|")+")",G(e)),t)}(path,t,e):function(path,t,e){return K(D(path,e),t,e)}(path,t,e)}M.parse=P,M.compile=N,M.tokensToFunction=L,M.tokensToRegExp=R;var J=Object.create(null);function X(path,t,e){t=t||{};try{var n=J[path]||(J[path]=M.compile(path));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),n(t,{pretty:!0})}catch(t){return""}finally{delete t[0]}}function Y(t,e,n,o){var c="string"==typeof t?{path:t}:t;if(c._normalized)return c;if(c.name){var f=(c=r({},t)).params;return f&&"object"==typeof f&&(c.params=r({},f)),c}if(!c.path&&c.params&&e){(c=r({},c))._normalized=!0;var l=r(r({},e.params),c.params);if(e.name)c.name=e.name,c.params=l;else if(e.matched.length){var h=e.matched[e.matched.length-1].path;c.path=X(h,l,e.path)}else 0;return c}var y=function(path){var t="",e="",n=path.indexOf("#");n>=0&&(t=path.slice(n),path=path.slice(0,n));var r=path.indexOf("?");return r>=0&&(e=path.slice(r+1),path=path.slice(0,r)),{path:path,query:e,hash:t}}(c.path||""),m=e&&e.path||"/",path=y.path?j(y.path,m,n||c.append):m,_=function(t,e,n){void 0===e&&(e={});var r,o=n||v;try{r=o(t||"")}catch(t){r={}}for(var c in e){var f=e[c];r[c]=Array.isArray(f)?f.map(d):d(f)}return r}(y.query,c.query,o&&o.options.parseQuery),w=c.hash||y.hash;return w&&"#"!==w.charAt(0)&&(w="#"+w),{_normalized:!0,path:path,query:_,hash:w}}var Q,Z=function(){},tt={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,o=this.$route,c=n.resolve(this.to,o,this.append),f=c.location,l=c.route,h=c.href,d={},v=n.options.linkActiveClass,y=n.options.linkExactActiveClass,w=null==v?"router-link-active":v,x=null==y?"router-link-exact-active":y,O=null==this.activeClass?w:this.activeClass,S=null==this.exactActiveClass?x:this.exactActiveClass,k=l.redirectedFrom?_(null,Y(l.redirectedFrom),null,n):l;d[S]=A(o,k,this.exactPath),d[O]=this.exact||this.exactPath?d[S]:function(t,e){return 0===t.path.replace(m,"/").indexOf(e.path.replace(m,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(o,k);var C=d[S]?this.ariaCurrentValue:null,E=function(t){et(t)&&(e.replace?n.replace(f,Z):n.push(f,Z))},$={click:et};Array.isArray(this.event)?this.event.forEach((function(t){$[t]=E})):$[this.event]=E;var data={class:d},j=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:h,route:l,navigate:E,isActive:d[O],isExactActive:d[S]});if(j){if(1===j.length)return j[0];if(j.length>1||!j.length)return 0===j.length?t():t("span",{},j)}if("a"===this.tag)data.on=$,data.attrs={href:h,"aria-current":C};else{var a=nt(this.$slots.default);if(a){a.isStatic=!1;var T=a.data=r({},a.data);for(var I in T.on=T.on||{},T.on){var M=T.on[I];I in $&&(T.on[I]=Array.isArray(M)?M:[M])}for(var P in $)P in T.on?T.on[P].push($[P]):T.on[P]=E;var N=a.data.attrs=r({},a.data.attrs);N.href=h,N["aria-current"]=C}else data.on=$}return t(this.tag,data,this.$slots.default)}};function et(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}function nt(t){if(t)for(var e,i=0;i<t.length;i++){if("a"===(e=t[i]).tag)return e;if(e.children&&(e=nt(e.children)))return e}}var ot="undefined"!=typeof window;function it(t,e,n,r,o){var c=e||[],f=n||Object.create(null),l=r||Object.create(null);t.forEach((function(t){at(c,f,l,t,o)}));for(var i=0,h=c.length;i<h;i++)"*"===c[i]&&(c.push(c.splice(i,1)[0]),h--,i--);return{pathList:c,pathMap:f,nameMap:l}}function at(t,e,n,r,o,c){var path=r.path,f=r.name;var l=r.pathToRegexpOptions||{},h=function(path,t,e){e||(path=path.replace(/\/$/,""));if("/"===path[0])return path;if(null==t)return path;return T(t.path+"/"+path)}(path,o,l.strict);"boolean"==typeof r.caseSensitive&&(l.sensitive=r.caseSensitive);var d={path:h,regex:ct(h,l),components:r.components||{default:r.component},alias:r.alias?"string"==typeof r.alias?[r.alias]:r.alias:[],instances:{},enteredCbs:{},name:f,parent:o,matchAs:c,redirect:r.redirect,beforeEnter:r.beforeEnter,meta:r.meta||{},props:null==r.props?{}:r.components?r.props:{default:r.props}};if(r.children&&r.children.forEach((function(r){var o=c?T(c+"/"+r.path):void 0;at(t,e,n,r,d,o)})),e[d.path]||(t.push(d.path),e[d.path]=d),void 0!==r.alias)for(var v=Array.isArray(r.alias)?r.alias:[r.alias],i=0;i<v.length;++i){0;var y={path:v[i],children:r.children};at(t,e,n,y,o,d.path||"/")}f&&(n[f]||(n[f]=d))}function ct(path,t){return M(path,[],t)}function st(t,e){var n=it(t),r=n.pathList,o=n.pathMap,c=n.nameMap;function f(t,n,f){var l=Y(t,n,!1,e),d=l.name;if(d){var v=c[d];if(!v)return h(null,l);var y=v.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof l.params&&(l.params={}),n&&"object"==typeof n.params)for(var m in n.params)!(m in l.params)&&y.indexOf(m)>-1&&(l.params[m]=n.params[m]);return l.path=X(v.path,l.params),h(v,l,f)}if(l.path){l.params={};for(var i=0;i<r.length;i++){var path=r[i],_=o[path];if(ut(_.regex,l.path,l.params))return h(_,l,f)}}return h(null,l)}function l(t,n){var r=t.redirect,o="function"==typeof r?r(_(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return h(null,n);var l=o,d=l.name,path=l.path,v=n.query,y=n.hash,m=n.params;if(v=l.hasOwnProperty("query")?l.query:v,y=l.hasOwnProperty("hash")?l.hash:y,m=l.hasOwnProperty("params")?l.params:m,d){c[d];return f({_normalized:!0,name:d,query:v,hash:y,params:m},void 0,n)}if(path){var w=function(path,t){return j(path,t.parent?t.parent.path:"/",!0)}(path,t);return f({_normalized:!0,path:X(w,m),query:v,hash:y},void 0,n)}return h(null,n)}function h(t,n,r){return t&&t.redirect?l(t,r||n):t&&t.matchAs?function(t,e,n){var r=f({_normalized:!0,path:X(n,e.params)});if(r){var o=r.matched,c=o[o.length-1];return e.params=r.params,h(c,e)}return h(null,e)}(0,n,t.matchAs):_(t,n,r,e)}return{match:f,addRoute:function(t,e){var n="object"!=typeof t?c[t]:void 0;it([e||t],r,o,c,n),n&&it(n.alias.map((function(t){return{path:t,children:[e]}})),r,o,c,n)},getRoutes:function(){return r.map((function(path){return o[path]}))},addRoutes:function(t){it(t,r,o,c)}}}function ut(t,path,e){var n=path.match(t);if(!n)return!1;if(!e)return!0;for(var i=1,r=n.length;i<r;++i){var o=t.keys[i-1];o&&(e[o.name||"pathMatch"]="string"==typeof n[i]?h(n[i]):n[i])}return!0}var ft=ot&&window.performance&&window.performance.now?window.performance:Date;function lt(){return ft.now().toFixed(3)}var pt=lt();function ht(){return pt}function vt(t){return pt=t}var yt=Object.create(null);function mt(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=r({},window.history.state);return n.key=ht(),window.history.replaceState(n,"",e),window.addEventListener("popstate",_t),function(){window.removeEventListener("popstate",_t)}}function gt(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var c=function(){var t=ht();if(t)return yt[t]}(),f=o.call(t,e,n,r?c:null);f&&("function"==typeof f.then?f.then((function(t){At(t,c)})).catch((function(t){0})):At(f,c))}))}}function bt(){var t=ht();t&&(yt[t]={x:window.pageXOffset,y:window.pageYOffset})}function _t(t){bt(),t.state&&t.state.key&&vt(t.state.key)}function wt(t){return Ot(t.x)||Ot(t.y)}function xt(t){return{x:Ot(t.x)?t.x:window.pageXOffset,y:Ot(t.y)?t.y:window.pageYOffset}}function Ot(t){return"number"==typeof t}var St=/^#\d/;function At(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=St.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var c=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,c={x:Ot((n=c).x)?n.x:0,y:Ot(n.y)?n.y:0})}else wt(t)&&(e=xt(t))}else r&&wt(t)&&(e=xt(t));e&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:e.x,top:e.y,behavior:t.behavior}):window.scrollTo(e.x,e.y))}var kt,Ct=ot&&((-1===(kt=window.navigator.userAgent).indexOf("Android 2.")&&-1===kt.indexOf("Android 4.0")||-1===kt.indexOf("Mobile Safari")||-1!==kt.indexOf("Chrome")||-1!==kt.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function Et(t,e){bt();var n=window.history;try{if(e){var o=r({},n.state);o.key=ht(),n.replaceState(o,"",t)}else n.pushState({key:vt(lt())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function $t(t){Et(t,!0)}function jt(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}var Tt={redirected:2,aborted:4,cancelled:8,duplicated:16};function It(t,e){return Pt(t,e,Tt.redirected,'Redirected when going from "'+t.fullPath+'" to "'+function(t){if("string"==typeof t)return t;if("path"in t)return t.path;var e={};return Nt.forEach((function(n){n in t&&(e[n]=t[n])})),JSON.stringify(e,null,2)}(e)+'" via a navigation guard.')}function Mt(t,e){return Pt(t,e,Tt.cancelled,'Navigation cancelled from "'+t.fullPath+'" to "'+e.fullPath+'" with a new navigation.')}function Pt(t,e,n,r){var o=new Error(r);return o._isRouter=!0,o.from=t,o.to=e,o.type=n,o}var Nt=["params","query","hash"];function Lt(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Rt(t,e){return Lt(t)&&t._isRouter&&(null==e||t.type===e)}function Ft(t){return function(e,n,r){var o=!1,c=0,f=null;Dt(t,(function(t,e,n,l){if("function"==typeof t&&void 0===t.cid){o=!0,c++;var h,d=zt((function(e){var o;((o=e).__esModule||Vt&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:Q.extend(e),n.components[l]=e,--c<=0&&r()})),v=zt((function(t){var e="Failed to resolve async component "+l+": "+t;f||(f=Lt(t)?t:new Error(e),r(f))}));try{h=t(d,v)}catch(t){v(t)}if(h)if("function"==typeof h.then)h.then(d,v);else{var y=h.component;y&&"function"==typeof y.then&&y.then(d,v)}}})),o||r()}}function Dt(t,e){return Ut(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ut(t){return Array.prototype.concat.apply([],t)}var Vt="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function zt(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var Bt=function(t,base){this.router=t,this.base=function(base){if(!base)if(ot){var t=document.querySelector("base");base=(base=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else base="/";"/"!==base.charAt(0)&&(base="/"+base);return base.replace(/\/$/,"")}(base),this.current=x,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function Ht(t,e,n,r){var o=Dt(t,(function(t,r,o,c){var f=function(t,e){"function"!=typeof t&&(t=Q.extend(t));return t.options[e]}(t,e);if(f)return Array.isArray(f)?f.map((function(t){return n(t,r,o,c)})):n(f,r,o,c)}));return Ut(r?o.reverse():o)}function Gt(t,e){if(e)return function(){return t.apply(e,arguments)}}Bt.prototype.listen=function(t){this.cb=t},Bt.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},Bt.prototype.onError=function(t){this.errorCbs.push(t)},Bt.prototype.transitionTo=function(t,e,n){var r,o=this;try{r=this.router.match(t,this.current)}catch(t){throw this.errorCbs.forEach((function(e){e(t)})),t}var c=this.current;this.confirmTransition(r,(function(){o.updateRoute(r),e&&e(r),o.ensureURL(),o.router.afterHooks.forEach((function(t){t&&t(r,c)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(t){t(r)})))}),(function(t){n&&n(t),t&&!o.ready&&(Rt(t,Tt.redirected)&&c===x||(o.ready=!0,o.readyErrorCbs.forEach((function(e){e(t)}))))}))},Bt.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current;this.pending=t;var c,f,l=function(t){!Rt(t)&&Lt(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)},h=t.matched.length-1,d=o.matched.length-1;if(A(t,o)&&h===d&&t.matched[h]===o.matched[d])return this.ensureURL(),l(((f=Pt(c=o,t,Tt.duplicated,'Avoided redundant navigation to current location: "'+c.fullPath+'".')).name="NavigationDuplicated",f));var v=function(t,e){var i,n=Math.max(t.length,e.length);for(i=0;i<n&&t[i]===e[i];i++);return{updated:e.slice(0,i),activated:e.slice(i),deactivated:t.slice(i)}}(this.current.matched,t.matched),y=v.updated,m=v.deactivated,_=v.activated,w=[].concat(function(t){return Ht(t,"beforeRouteLeave",Gt,!0)}(m),this.router.beforeHooks,function(t){return Ht(t,"beforeRouteUpdate",Gt)}(y),_.map((function(t){return t.beforeEnter})),Ft(_)),x=function(e,n){if(r.pending!==t)return l(Mt(o,t));try{e(t,o,(function(e){!1===e?(r.ensureURL(!0),l(function(t,e){return Pt(t,e,Tt.aborted,'Navigation aborted from "'+t.fullPath+'" to "'+e.fullPath+'" via a navigation guard.')}(o,t))):Lt(e)?(r.ensureURL(!0),l(e)):"string"==typeof e||"object"==typeof e&&("string"==typeof e.path||"string"==typeof e.name)?(l(It(o,t)),"object"==typeof e&&e.replace?r.replace(e):r.push(e)):n(e)}))}catch(t){l(t)}};jt(w,x,(function(){jt(function(t){return Ht(t,"beforeRouteEnter",(function(t,e,n,r){return function(t,e,n){return function(r,o,c){return t(r,o,(function(t){"function"==typeof t&&(e.enteredCbs[n]||(e.enteredCbs[n]=[]),e.enteredCbs[n].push(t)),c(t)}))}}(t,n,r)}))}(_).concat(r.router.resolveHooks),x,(function(){if(r.pending!==t)return l(Mt(o,t));r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){C(t)}))}))}))},Bt.prototype.updateRoute=function(t){this.current=t,this.cb&&this.cb(t)},Bt.prototype.setupListeners=function(){},Bt.prototype.teardown=function(){this.listeners.forEach((function(t){t()})),this.listeners=[],this.current=x,this.pending=null};var qt=function(t){function e(e,base){t.call(this,e,base),this._startLocation=Kt(this.base)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router,n=e.options.scrollBehavior,r=Ct&&n;r&&this.listeners.push(mt());var o=function(){var n=t.current,o=Kt(t.base);t.current===x&&o===t._startLocation||t.transitionTo(o,(function(t){r&>(e,t,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Et(T(r.base+t.fullPath)),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){$t(T(r.base+t.fullPath)),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(Kt(this.base)!==this.current.fullPath){var e=T(this.base+this.current.fullPath);t?Et(e):$t(e)}},e.prototype.getCurrentLocation=function(){return Kt(this.base)},e}(Bt);function Kt(base){var path=window.location.pathname;return base&&0===path.toLowerCase().indexOf(base.toLowerCase())&&(path=path.slice(base.length)),(path||"/")+window.location.search+window.location.hash}var Wt=function(t){function e(e,base,n){t.call(this,e,base),n&&function(base){var t=Kt(base);if(!/^\/#/.test(t))return window.location.replace(T(base+"/#"+t)),!0}(this.base)||Jt()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router.options.scrollBehavior,n=Ct&&e;n&&this.listeners.push(mt());var r=function(){var e=t.current;Jt()&&t.transitionTo(Xt(),(function(r){n&>(t.router,r,e,!0),Ct||Zt(r.fullPath)}))},o=Ct?"popstate":"hashchange";window.addEventListener(o,r),this.listeners.push((function(){window.removeEventListener(o,r)}))}},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Qt(t.fullPath),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zt(t.fullPath),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;Xt()!==e&&(t?Qt(e):Zt(e))},e.prototype.getCurrentLocation=function(){return Xt()},e}(Bt);function Jt(){var path=Xt();return"/"===path.charAt(0)||(Zt("/"+path),!1)}function Xt(){var t=window.location.href,e=t.indexOf("#");return e<0?"":t=t.slice(e+1)}function Yt(path){var t=window.location.href,i=t.indexOf("#");return(i>=0?t.slice(0,i):t)+"#"+path}function Qt(path){Ct?Et(Yt(path)):window.location.hash=path}function Zt(path){Ct?$t(Yt(path)):window.location.replace(Yt(path))}var te=function(t){function e(e,base){t.call(this,e,base),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var t=e.current;e.index=n,e.updateRoute(r),e.router.afterHooks.forEach((function(e){e&&e(r,t)}))}),(function(t){Rt(t,Tt.duplicated)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(Bt),ee=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=st(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!Ct&&!1!==t.fallback,this.fallback&&(e="hash"),ot||(e="abstract"),this.mode=e,e){case"history":this.history=new qt(this,t.base);break;case"hash":this.history=new Wt(this,t.base,this.fallback);break;case"abstract":this.history=new te(this,t.base);break;default:0}},ne={currentRoute:{configurable:!0}};function re(t,e){return t.push(e),function(){var i=t.indexOf(e);i>-1&&t.splice(i,1)}}ee.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},ne.currentRoute.get=function(){return this.history&&this.history.current},ee.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null),e.app||e.history.teardown()})),!this.app){this.app=t;var n=this.history;if(n instanceof qt||n instanceof Wt){var r=function(t){n.setupListeners(),function(t){var r=n.current,o=e.options.scrollBehavior;Ct&&o&&"fullPath"in t&>(e,t,r,!1)}(t)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ee.prototype.beforeEach=function(t){return re(this.beforeHooks,t)},ee.prototype.beforeResolve=function(t){return re(this.resolveHooks,t)},ee.prototype.afterEach=function(t){return re(this.afterHooks,t)},ee.prototype.onReady=function(t,e){this.history.onReady(t,e)},ee.prototype.onError=function(t){this.history.onError(t)},ee.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ee.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ee.prototype.go=function(t){this.history.go(t)},ee.prototype.back=function(){this.go(-1)},ee.prototype.forward=function(){this.go(1)},ee.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ee.prototype.resolve=function(t,e,n){var r=Y(t,e=e||this.history.current,n,this),o=this.match(r,e),c=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(base,t,e){var path="hash"===e?"#"+t:t;return base?T(base+"/"+path):path}(this.history.base,c,this.mode),normalizedTo:r,resolved:o}},ee.prototype.getRoutes=function(){return this.matcher.getRoutes()},ee.prototype.addRoute=function(t,e){this.matcher.addRoute(t,e),this.history.current!==x&&this.history.transitionTo(this.history.getCurrentLocation())},ee.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==x&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ee.prototype,ne),ee.install=function t(e){if(!t.installed||Q!==e){t.installed=!0,Q=e;var n=function(t){return void 0!==t},r=function(t,e){var i=t.$options._parentVnode;n(i)&&n(i=i.data)&&n(i=i.registerRouteInstance)&&i(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",E),e.component("RouterLink",tt);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ee.version="3.5.1",ee.isNavigationFailure=Rt,ee.NavigationFailureType=Tt,ee.START_LOCATION=x,ot&&window.Vue&&window.Vue.use(ee),e.a=ee},function(t,e,n){var r,o;!function(c){if(void 0===(o="function"==typeof(r=c)?r.call(e,n,e,t):r)||(t.exports=o),!0,t.exports=c(),!!0){var f=window.Cookies,l=window.Cookies=c();l.noConflict=function(){return window.Cookies=f,l}}}((function(){function t(){for(var i=0,t={};i<arguments.length;i++){var e=arguments[i];for(var n in e)t[n]=e[n]}return t}function e(s){return s.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}return function n(r){function o(){}function c(e,n,c){if("undefined"!=typeof document){"number"==typeof(c=t({path:"/"},o.defaults,c)).expires&&(c.expires=new Date(1*new Date+864e5*c.expires)),c.expires=c.expires?c.expires.toUTCString():"";try{var f=JSON.stringify(n);/^[\{\[]/.test(f)&&(n=f)}catch(t){}n=r.write?r.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var l="";for(var h in c)c[h]&&(l+="; "+h,!0!==c[h]&&(l+="="+c[h].split(";")[0]));return document.cookie=e+"="+n+l}}function f(t,n){if("undefined"!=typeof document){for(var o={},c=document.cookie?document.cookie.split("; "):[],i=0;i<c.length;i++){var f=c[i].split("="),l=f.slice(1).join("=");n||'"'!==l.charAt(0)||(l=l.slice(1,-1));try{var h=e(f[0]);if(l=(r.read||r)(l,h)||e(l),n)try{l=JSON.parse(l)}catch(t){}if(o[h]=l,t===h)break}catch(t){}}return t?o[t]:o}}return o.set=c,o.get=function(t){return f(t,!1)},o.getJSON=function(t){return f(t,!0)},o.remove=function(e,n){c(e,"",t(n,{expires:-1}))},o.defaults={},o.withConverter=n,o}((function(){}))}))},,,,function(t,e,n){var r=n(52),o=Math.max,c=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):c(t,e)}},function(t,e,n){var r=n(6),o=n(98),c=n(13).f,f=n(55).f,l=n(94),h=n(74),d=r.RegExp,v=d,y=d.prototype,m=/a/g,_=/a/g,w=new d(m)!==m;if(n(11)&&(!w||n(10)((function(){return _[n(5)("match")]=!1,d(m)!=m||d(_)==_||"/a/i"!=d(m,"i")})))){d=function(p,t){var e=this instanceof d,n=l(p),r=void 0===t;return!e&&n&&p.constructor===d&&r?p:o(w?new v(n&&!r?p.source:p,t):v((n=p instanceof d)?p.source:p,n&&r?h.call(p):t),e?this:y,d)};for(var x=function(t){t in d||c(d,t,{configurable:!0,get:function(){return v[t]},set:function(e){v[t]=e}})},O=f(v),i=0;O.length>i;)x(O[i++]);y.constructor=d,d.prototype=y,n(18)(r,"RegExp",d)}n(92)("RegExp")},function(t,e,n){t.exports=!n(11)&&!n(10)((function(){return 7!=Object.defineProperty(n(80)("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){e.f=n(5)},function(t,e,n){var r=n(35),o=n(29),c=n(113)(!1),f=n(84)("IE_PROTO");t.exports=function(object,t){var e,n=o(object),i=0,l=[];for(e in n)e!=f&&r(n,e)&&l.push(e);for(;t.length>i;)r(n,e=t[i++])&&(~c(l,e)||l.push(e));return l}},function(t,e,n){var r=n(29),o=n(23),c=n(108);t.exports=function(t){return function(e,n,f){var l,h=r(e),d=o(h.length),v=c(f,d);if(t&&n!=n){for(;d>v;)if((l=h[v++])!=l)return!0}else for(;d>v;v++)if((t||v in h)&&h[v]===n)return t||v||0;return!t&&-1}}},function(t,e,n){var r=n(37);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(8);t.exports=function(t,e,n,o){try{return o?e(r(n)[0],n[1]):e(n)}catch(e){var c=t.return;throw void 0!==c&&r(c.call(t)),e}}},function(t,e,n){var r=n(57),o=n(5)("iterator"),c=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||c[o]===t)}},function(t,e,n){"use strict";var r=n(13),o=n(49);t.exports=function(object,t,e){t in object?r.f(object,t,o(0,e)):object[t]=e}},function(t,e,n){var r=n(71),o=n(5)("iterator"),c=n(57);t.exports=n(33).getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||c[r(t)]}},function(t,e,n){"use strict";var r=n(78),o=n(120),c=n(57),f=n(29);t.exports=n(87)(Array,"Array",(function(t,e){this._t=f(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])}),"values"),c.Arguments=c.Array,r("keys"),r("values"),r("entries")},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r,o,c,f=n(36),l=n(166),html=n(81),h=n(80),d=n(6),v=d.process,y=d.setImmediate,m=d.clearImmediate,_=d.MessageChannel,w=d.Dispatch,x=0,O={},S="onreadystatechange",A=function(){var t=+this;if(O.hasOwnProperty(t)){var e=O[t];delete O[t],e()}},k=function(t){A.call(t.data)};y&&m||(y=function(t){for(var e=[],i=1;arguments.length>i;)e.push(arguments[i++]);return O[++x]=function(){l("function"==typeof t?t:Function(t),e)},r(x),x},m=function(t){delete O[t]},"process"==n(37)(v)?r=function(t){v.nextTick(f(A,t,1))}:w&&w.now?r=function(t){w.now(f(A,t,1))}:_?(c=(o=new _).port2,o.port1.onmessage=k,r=f(c.postMessage,c,1)):d.addEventListener&&"function"==typeof postMessage&&!d.importScripts?(r=function(t){d.postMessage(t+"","*")},d.addEventListener("message",k,!1)):r=S in h("script")?function(t){html.appendChild(h("script")).onreadystatechange=function(){html.removeChild(this),A.call(t)}}:function(t){setTimeout(f(A,t,1),0)}),t.exports={set:y,clear:m}},function(t,e,n){"use strict";var r=n(68);function o(t){var e,n;this.promise=new t((function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r})),this.resolve=r(e),this.reject=r(n)}t.exports.f=function(t){return new o(t)}},function(t,e,n){var r=n(8),o=n(14),c=n(122);t.exports=function(t,e){if(r(t),o(e)&&e.constructor===t)return e;var n=c.f(t);return(0,n.resolve)(e),n.promise}},function(t,e,n){"use strict";var r=n(10);t.exports=function(t,e){return!!t&&r((function(){e?t.call(null,(function(){}),1):t.call(null)}))}},function(t,e,n){var r=n(4),o=n(33),c=n(10);t.exports=function(t,e){var n=(o.Object||{})[t]||Object[t],f={};f[t]=e(n),r(r.S+r.F*c((function(){n(1)})),"Object",f)}},function(t,e,n){var r=n(52),o=n(40);t.exports=function(t){return function(e,n){var a,b,s=String(o(e)),i=r(n),c=s.length;return i<0||i>=c?t?"":void 0:(a=s.charCodeAt(i))<55296||a>56319||i+1===c||(b=s.charCodeAt(i+1))<56320||b>57343?t?s.charAt(i):a:t?s.slice(i,i+2):b-56320+(a-55296<<10)+65536}}},function(t,e,n){var r=n(4),o=n(176)(!0);r(r.S,"Object",{entries:function(t){return o(t)}})},function(t,e,n){"use strict";var r=n(8),o=n(178),c=n(72);n(73)("search",1,(function(t,e,n,f){return[function(n){var r=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=f(n,t,this);if(e.done)return e.value;var l=r(t),h=String(this),d=l.lastIndex;o(d,0)||(l.lastIndex=0);var v=c(l,h);return o(l.lastIndex,d)||(l.lastIndex=d),null===v?-1:v.index}]}))},,,,,,,function(t,e,n){var r=n(14);t.exports=function(t,e){if(!r(t)||t._t!==e)throw TypeError("Incompatible receiver, "+e+" required!");return t}},,,,,,,,,,,,,,,,,,function(t,e,n){"use strict";function r(source,t){if(null==source)return{};var e,i,n=function(source,t){if(null==source)return{};var e,i,n={},r=Object.keys(source);for(i=0;i<r.length;i++)e=r[i],t.indexOf(e)>=0||(n[e]=source[e]);return n}(source,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(source);for(i=0;i<r.length;i++)e=r[i],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(source,e)&&(n[e]=source[e])}return n}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";var r=n(4),o=n(23),c=n(93),f="endsWith",l="".endsWith;r(r.P+r.F*n(95)(f),"String",{endsWith:function(t){var e=c(this,t,f),n=arguments.length>1?arguments[1]:void 0,r=o(e.length),h=void 0===n?r:Math.min(o(n),r),d=String(t);return l?l.call(e,d,h):e.slice(h-d.length,h)===d}})},function(t,e,n){"use strict";var r=n(6),o=n(35),c=n(37),f=n(98),l=n(66),h=n(10),d=n(55).f,v=n(56).f,y=n(13).f,m=n(189).trim,_="Number",w=r.Number,x=w,O=w.prototype,S=c(n(70)(O))==_,A="trim"in String.prototype,k=function(t){var e=l(t,!1);if("string"==typeof e&&e.length>2){var n,r,o,c=(e=A?e.trim():m(e,3)).charCodeAt(0);if(43===c||45===c){if(88===(n=e.charCodeAt(2))||120===n)return NaN}else if(48===c){switch(e.charCodeAt(1)){case 66:case 98:r=2,o=49;break;case 79:case 111:r=8,o=55;break;default:return+e}for(var code,f=e.slice(2),i=0,h=f.length;i<h;i++)if((code=f.charCodeAt(i))<48||code>o)return NaN;return parseInt(f,r)}}return+e};if(!w(" 0o1")||!w("0b1")||w("+0x1")){w=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof w&&(S?h((function(){O.valueOf.call(n)})):c(n)!=_)?f(new x(k(e)),n,w):k(e)};for(var C,E=n(11)?d(x):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),$=0;E.length>$;$++)o(x,C=E[$])&&!o(w,C)&&y(w,C,v(x,C));w.prototype=O,O.constructor=w,n(18)(r,_,w)}},,,function(t,e,n){t.exports=n(67)("native-function-to-string",Function.toString)},function(t,e,n){var r=n(6),o=n(33),c=n(51),f=n(111),l=n(13).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=c?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||l(e,t,{value:f.f(t)})}},function(t,e,n){var r=n(43),o=n(69),c=n(54);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var f,l=n(t),h=c.f,i=0;l.length>i;)h.call(t,f=l[i++])&&e.push(f);return e}},function(t,e,n){var r=n(13),o=n(8),c=n(43);t.exports=n(11)?Object.defineProperties:function(t,e){o(t);for(var n,f=c(e),l=f.length,i=0;l>i;)r.f(t,n=f[i++],e[n]);return t}},function(t,e,n){var r=n(29),o=n(55).f,c={}.toString,f="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return f&&"[object Window]"==c.call(t)?function(t){try{return o(t)}catch(t){return f.slice()}}(t):o(r(t))}},function(t,e,n){"use strict";var r=n(70),o=n(49),c=n(53),f={};n(34)(f,n(5)("iterator"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(f,{next:o(1,n)}),c(t,e+" Iterator")}},function(t,e,n){var r=n(35),o=n(41),c=n(84)("IE_PROTO"),f=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,c)?t[c]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?f:null}},function(t,e,n){"use strict";var r,o,c,f,l=n(51),h=n(6),d=n(36),v=n(71),y=n(4),m=n(14),_=n(68),w=n(88),x=n(89),O=n(90),S=n(121).set,A=n(167)(),k=n(122),C=n(168),E=n(169),$=n(123),j="Promise",T=h.TypeError,I=h.process,M=I&&I.versions,P=M&&M.v8||"",N=h.Promise,L="process"==v(I),R=function(){},F=o=k.f,D=!!function(){try{var t=N.resolve(1),e=(t.constructor={})[n(5)("species")]=function(t){t(R,R)};return(L||"function"==typeof PromiseRejectionEvent)&&t.then(R)instanceof e&&0!==P.indexOf("6.6")&&-1===E.indexOf("Chrome/66")}catch(t){}}(),U=function(t){var e;return!(!m(t)||"function"!=typeof(e=t.then))&&e},V=function(t,e){if(!t._n){t._n=!0;var n=t._c;A((function(){for(var r=t._v,o=1==t._s,i=0,c=function(e){var n,c,f,l=o?e.ok:e.fail,h=e.resolve,d=e.reject,v=e.domain;try{l?(o||(2==t._h&&H(t),t._h=1),!0===l?n=r:(v&&v.enter(),n=l(r),v&&(v.exit(),f=!0)),n===e.promise?d(T("Promise-chain cycle")):(c=U(n))?c.call(n,h,d):h(n)):d(r)}catch(t){v&&!f&&v.exit(),d(t)}};n.length>i;)c(n[i++]);t._c=[],t._n=!1,e&&!t._h&&z(t)}))}},z=function(t){S.call(h,(function(){var e,n,r,o=t._v,c=B(t);if(c&&(e=C((function(){L?I.emit("unhandledRejection",o,t):(n=h.onunhandledrejection)?n({promise:t,reason:o}):(r=h.console)&&r.error&&r.error("Unhandled promise rejection",o)})),t._h=L||B(t)?2:1),t._a=void 0,c&&e.e)throw e.v}))},B=function(t){return 1!==t._h&&0===(t._a||t._c).length},H=function(t){S.call(h,(function(){var e;L?I.emit("rejectionHandled",t):(e=h.onrejectionhandled)&&e({promise:t,reason:t._v})}))},G=function(t){var e=this;e._d||(e._d=!0,(e=e._w||e)._v=t,e._s=2,e._a||(e._a=e._c.slice()),V(e,!0))},K=function(t){var e,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===t)throw T("Promise can't be resolved itself");(e=U(t))?A((function(){var r={_w:n,_d:!1};try{e.call(t,d(K,r,1),d(G,r,1))}catch(t){G.call(r,t)}})):(n._v=t,n._s=1,V(n,!1))}catch(t){G.call({_w:n,_d:!1},t)}}};D||(N=function(t){w(this,N,j,"_h"),_(t),r.call(this);try{t(d(K,this,1),d(G,this,1))}catch(t){G.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=n(91)(N.prototype,{then:function(t,e){var n=F(O(this,N));return n.ok="function"!=typeof t||t,n.fail="function"==typeof e&&e,n.domain=L?I.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&V(this,!1),n.promise},catch:function(t){return this.then(void 0,t)}}),c=function(){var t=new r;this.promise=t,this.resolve=d(K,t,1),this.reject=d(G,t,1)},k.f=F=function(t){return t===N||t===f?new c(t):o(t)}),y(y.G+y.W+y.F*!D,{Promise:N}),n(53)(N,j),n(92)(j),f=n(33).Promise,y(y.S+y.F*!D,j,{reject:function(t){var e=F(this);return(0,e.reject)(t),e.promise}}),y(y.S+y.F*(l||!D),j,{resolve:function(t){return $(l&&this===f?N:this,t)}}),y(y.S+y.F*!(D&&n(86)((function(t){N.all(t).catch(R)}))),j,{all:function(t){var e=this,n=F(e),r=n.resolve,o=n.reject,c=C((function(){var n=[],c=0,f=1;x(t,!1,(function(t){var l=c++,h=!1;n.push(void 0),f++,e.resolve(t).then((function(t){h||(h=!0,n[l]=t,--f||r(n))}),o)})),--f||r(n)}));return c.e&&o(c.v),n.promise},race:function(t){var e=this,n=F(e),r=n.reject,o=C((function(){x(t,!1,(function(t){e.resolve(t).then(n.resolve,r)}))}));return o.e&&r(o.v),n.promise}})},function(t,e){t.exports=function(t,e,n){var r=void 0===n;switch(e.length){case 0:return r?t():t.call(n);case 1:return r?t(e[0]):t.call(n,e[0]);case 2:return r?t(e[0],e[1]):t.call(n,e[0],e[1]);case 3:return r?t(e[0],e[1],e[2]):t.call(n,e[0],e[1],e[2]);case 4:return r?t(e[0],e[1],e[2],e[3]):t.call(n,e[0],e[1],e[2],e[3])}return t.apply(n,e)}},function(t,e,n){var r=n(6),o=n(121).set,c=r.MutationObserver||r.WebKitMutationObserver,f=r.process,l=r.Promise,h="process"==n(37)(f);t.exports=function(){var head,t,e,n=function(){var n,r;for(h&&(n=f.domain)&&n.exit();head;){r=head.fn,head=head.next;try{r()}catch(n){throw head?e():t=void 0,n}}t=void 0,n&&n.enter()};if(h)e=function(){f.nextTick(n)};else if(!c||r.navigator&&r.navigator.standalone)if(l&&l.resolve){var d=l.resolve(void 0);e=function(){d.then(n)}}else e=function(){o.call(r,n)};else{var v=!0,y=document.createTextNode("");new c(n).observe(y,{characterData:!0}),e=function(){y.data=v=!v}}return function(n){var r={fn:n,next:void 0};t&&(t.next=r),head||(head=r,e()),t=r}}},function(t,e){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,e,n){var r=n(6).navigator;t.exports=r&&r.userAgent||""},function(t,e,n){var r=n(4);r(r.S+r.F,"Object",{assign:n(171)})},function(t,e,n){"use strict";var r=n(11),o=n(43),c=n(69),f=n(54),l=n(41),h=n(83),d=Object.assign;t.exports=!d||n(10)((function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach((function(t){e[t]=t})),7!=d({},t)[n]||Object.keys(d({},e)).join("")!=r}))?function(t,source){for(var e=l(t),n=arguments.length,d=1,v=c.f,y=f.f;n>d;)for(var m,_=h(arguments[d++]),w=v?o(_).concat(v(_)):o(_),x=w.length,O=0;x>O;)m=w[O++],r&&!y.call(_,m)||(e[m]=_[m]);return e}:d},function(t,e,n){"use strict";var r=n(4),o=n(33),c=n(6),f=n(90),l=n(123);r(r.P+r.R,"Promise",{finally:function(t){var e=f(this,o.Promise||c.Promise),n="function"==typeof t;return this.then(n?function(n){return l(e,t()).then((function(){return n}))}:t,n?function(n){return l(e,t()).then((function(){throw n}))}:t)}})},function(t,e,n){var r=n(174);t.exports=function(t,e){return new(r(t))(e)}},function(t,e,n){var r=n(14),o=n(114),c=n(5)("species");t.exports=function(t){var e;return o(t)&&("function"!=typeof(e=t.constructor)||e!==Array&&!o(e.prototype)||(e=void 0),r(e)&&null===(e=e[c])&&(e=void 0)),void 0===e?Array:e}},function(t,e,n){var r=n(55),o=n(69),c=n(8),f=n(6).Reflect;t.exports=f&&f.ownKeys||function(t){var e=r.f(c(t)),n=o.f;return n?e.concat(n(t)):e}},function(t,e,n){var r=n(11),o=n(43),c=n(29),f=n(54).f;t.exports=function(t){return function(e){for(var n,l=c(e),h=o(l),d=h.length,i=0,v=[];d>i;)n=h[i++],r&&!f.call(l,n)||v.push(t?[n,l[n]]:l[n]);return v}}},function(t,e,n){"use strict";var r=n(97);n(4)({target:"RegExp",proto:!0,forced:r!==/./.exec},{exec:r})},function(t,e){t.exports=Object.is||function(t,e){return t===e?0!==t||1/t==1/e:t!=t&&e!=e}},function(t,e,n){var r=n(14),o=n(8),c=function(t,e){if(o(t),!r(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,r){try{(r=n(36)(Function.call,n(56).f(Object.prototype,"__proto__").set,2))(t,[]),e=!(t instanceof Array)}catch(t){e=!0}return function(t,n){return c(t,n),e?t.__proto__=n:r(t,n),t}}({},!1):void 0),check:c}},function(t,e,n){n(11)&&"g"!=/./g.flags&&n(13).f(RegExp.prototype,"flags",{configurable:!0,get:n(74)})},function(t,e,n){var r=n(4);r(r.P,"String",{repeat:n(182)})},function(t,e,n){"use strict";var r=n(52),o=n(40);t.exports=function(t){var e=String(o(this)),n="",c=r(t);if(c<0||c==1/0)throw RangeError("Count can't be negative");for(;c>0;(c>>>=1)&&(e+=e))1&c&&(n+=e);return n}},function(t,e,n){(function(t){var r=void 0!==t&&t||"undefined"!=typeof self&&self||window,o=Function.prototype.apply;function c(t,e){this._id=t,this._clearFn=e}e.setTimeout=function(){return new c(o.call(setTimeout,r,arguments),clearTimeout)},e.setInterval=function(){return new c(o.call(setInterval,r,arguments),clearInterval)},e.clearTimeout=e.clearInterval=function(t){t&&t.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(r,this._id)},e.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},e.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},e._unrefActive=e.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;e>=0&&(t._idleTimeoutId=setTimeout((function(){t._onTimeout&&t._onTimeout()}),e))},n(184),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(44))},function(t,e,n){(function(t,e){!function(t,n){"use strict";if(!t.setImmediate){var r,html,o,c,f,l=1,h={},d=!1,v=t.document,y=Object.getPrototypeOf&&Object.getPrototypeOf(t);y=y&&y.setTimeout?y:t,"[object process]"==={}.toString.call(t.process)?r=function(t){e.nextTick((function(){_(t)}))}:!function(){if(t.postMessage&&!t.importScripts){var e=!0,n=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=n,e}}()?t.MessageChannel?((o=new MessageChannel).port1.onmessage=function(t){_(t.data)},r=function(t){o.port2.postMessage(t)}):v&&"onreadystatechange"in v.createElement("script")?(html=v.documentElement,r=function(t){var script=v.createElement("script");script.onreadystatechange=function(){_(t),script.onreadystatechange=null,html.removeChild(script),script=null},html.appendChild(script)}):r=function(t){setTimeout(_,0,t)}:(c="setImmediate$"+Math.random()+"$",f=function(e){e.source===t&&"string"==typeof e.data&&0===e.data.indexOf(c)&&_(+e.data.slice(c.length))},t.addEventListener?t.addEventListener("message",f,!1):t.attachEvent("onmessage",f),r=function(e){t.postMessage(c+e,"*")}),y.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),i=0;i<e.length;i++)e[i]=arguments[i+1];var n={callback:t,args:e};return h[l]=n,r(l),l++},y.clearImmediate=m}function m(t){delete h[t]}function _(t){if(d)setTimeout(_,0,t);else{var e=h[t];if(e){d=!0;try{!function(t){var e=t.callback,n=t.args;switch(n.length){case 0:e();break;case 1:e(n[0]);break;case 2:e(n[0],n[1]);break;case 3:e(n[0],n[1],n[2]);break;default:e.apply(void 0,n)}}(e)}finally{m(t),d=!1}}}}}("undefined"==typeof self?void 0===t?this:t:self)}).call(this,n(44),n(185))},function(t,e){var n,r,o=t.exports={};function c(){throw new Error("setTimeout has not been defined")}function f(){throw new Error("clearTimeout has not been defined")}function l(t){if(n===setTimeout)return setTimeout(t,0);if((n===c||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:c}catch(t){n=c}try{r="function"==typeof clearTimeout?clearTimeout:f}catch(t){r=f}}();var h,d=[],v=!1,y=-1;function m(){v&&h&&(v=!1,h.length?d=h.concat(d):y=-1,d.length&&_())}function _(){if(!v){var t=l(m);v=!0;for(var e=d.length;e;){for(h=d,d=[];++y<e;)h&&h[y].run();y=-1,e=d.length}h=null,v=!1,function(marker){if(r===clearTimeout)return clearTimeout(marker);if((r===f||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(marker);try{r(marker)}catch(t){try{return r.call(null,marker)}catch(t){return r.call(this,marker)}}}(t)}}function w(t,e){this.fun=t,this.array=e}function x(){}o.nextTick=function(t){var e=new Array(arguments.length-1);if(arguments.length>1)for(var i=1;i<arguments.length;i++)e[i-1]=arguments[i];d.push(new w(t,e)),1!==d.length||v||l(_)},w.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=x,o.addListener=x,o.once=x,o.off=x,o.removeListener=x,o.removeAllListeners=x,o.emit=x,o.prependListener=x,o.prependOnceListener=x,o.listeners=function(t){return[]},o.binding=function(t){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(t){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},,,,function(t,e,n){var r=n(4),o=n(40),c=n(10),f=n(190),l="["+f+"]",h=RegExp("^"+l+l+"*"),d=RegExp(l+l+"*$"),v=function(t,e,n){var o={},l=c((function(){return!!f[t]()||"
"!="
"[t]()})),h=o[t]=l?e(y):f[t];n&&(o[n]=h),r(r.P+r.F*l,"String",o)},y=v.trim=function(t,e){return t=String(o(t)),1&e&&(t=t.replace(h,"")),2&e&&(t=t.replace(d,"")),t};t.exports=v},function(t,e){t.exports="\t\n\v\f\r \u2028\u2029\ufeff"},,,,,,function(t,e,n){"use strict";e.parse=function(t,e){if("string"!=typeof t)throw new TypeError("argument str must be a string");for(var n={},o=e||{},f=t.split(c),h=o.decode||r,i=0;i<f.length;i++){var d=f[i],v=d.indexOf("=");if(!(v<0)){var y=d.substr(0,v).trim(),m=d.substr(++v,d.length).trim();'"'==m[0]&&(m=m.slice(1,-1)),null==n[y]&&(n[y]=l(m,h))}}return n},e.serialize=function(t,e,n){var r=n||{},c=r.encode||o;if("function"!=typeof c)throw new TypeError("option encode is invalid");if(!f.test(t))throw new TypeError("argument name is invalid");var l=c(e);if(l&&!f.test(l))throw new TypeError("argument val is invalid");var h=t+"="+l;if(null!=r.maxAge){var d=r.maxAge-0;if(isNaN(d))throw new Error("maxAge should be a Number");h+="; Max-Age="+Math.floor(d)}if(r.domain){if(!f.test(r.domain))throw new TypeError("option domain is invalid");h+="; Domain="+r.domain}if(r.path){if(!f.test(r.path))throw new TypeError("option path is invalid");h+="; Path="+r.path}if(r.expires){if("function"!=typeof r.expires.toUTCString)throw new TypeError("option expires is invalid");h+="; Expires="+r.expires.toUTCString()}r.httpOnly&&(h+="; HttpOnly");r.secure&&(h+="; Secure");if(r.sameSite){switch("string"==typeof r.sameSite?r.sameSite.toLowerCase():r.sameSite){case!0:h+="; SameSite=Strict";break;case"lax":h+="; SameSite=Lax";break;case"strict":h+="; SameSite=Strict";break;default:throw new TypeError("option sameSite is invalid")}}return h};var r=decodeURIComponent,o=encodeURIComponent,c=/; */,f=/^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;function l(t,e){try{return e(t)}catch(e){return t}}},function(t,e,n){"use strict";var strong=n(198),r=n(135),o="Map";t.exports=n(199)(o,(function(t){return function(){return t(this,arguments.length>0?arguments[0]:void 0)}}),{get:function(t){var e=strong.getEntry(r(this,o),t);return e&&e.v},set:function(t,e){return strong.def(r(this,o),0===t?0:t,e)}},strong,!0)},function(t,e,n){"use strict";var r=n(13).f,o=n(70),c=n(91),f=n(36),l=n(88),h=n(89),d=n(87),v=n(120),y=n(92),m=n(11),_=n(82).fastKey,w=n(135),x=m?"_s":"size",O=function(t,e){var n,r=_(e);if("F"!==r)return t._i[r];for(n=t._f;n;n=n.n)if(n.k==e)return n};t.exports={getConstructor:function(t,e,n,d){var v=t((function(t,r){l(t,v,e,"_i"),t._t=e,t._i=o(null),t._f=void 0,t._l=void 0,t[x]=0,null!=r&&h(r,n,t[d],t)}));return c(v.prototype,{clear:function(){for(var t=w(this,e),data=t._i,n=t._f;n;n=n.n)n.r=!0,n.p&&(n.p=n.p.n=void 0),delete data[n.i];t._f=t._l=void 0,t[x]=0},delete:function(t){var n=w(this,e),r=O(n,t);if(r){var o=r.n,c=r.p;delete n._i[r.i],r.r=!0,c&&(c.n=o),o&&(o.p=c),n._f==r&&(n._f=o),n._l==r&&(n._l=c),n[x]--}return!!r},forEach:function(t){w(this,e);for(var n,r=f(t,arguments.length>1?arguments[1]:void 0,3);n=n?n.n:this._f;)for(r(n.v,n.k,this);n&&n.r;)n=n.p},has:function(t){return!!O(w(this,e),t)}}),m&&r(v.prototype,"size",{get:function(){return w(this,e)[x]}}),v},def:function(t,e,n){var r,o,c=O(t,e);return c?c.v=n:(t._l=c={i:o=_(e,!0),k:e,v:n,p:r=t._l,n:void 0,r:!1},t._f||(t._f=c),r&&(r.n=c),t[x]++,"F"!==o&&(t._i[o]=c)),t},getEntry:O,setStrong:function(t,e,n){d(t,e,(function(t,n){this._t=w(t,e),this._k=n,this._l=void 0}),(function(){for(var t=this,e=t._k,n=t._l;n&&n.r;)n=n.p;return t._t&&(t._l=n=n?n.n:t._t._f)?v(0,"keys"==e?n.k:"values"==e?n.v:[n.k,n.v]):(t._t=void 0,v(1))}),n?"entries":"values",!n,!0),y(e)}}},function(t,e,n){"use strict";var r=n(6),o=n(4),c=n(18),f=n(91),meta=n(82),l=n(89),h=n(88),d=n(14),v=n(10),y=n(86),m=n(53),_=n(98);t.exports=function(t,e,n,w,x,O){var S=r[t],A=S,k=x?"set":"add",C=A&&A.prototype,E={},$=function(t){var e=C[t];c(C,t,"delete"==t||"has"==t?function(a){return!(O&&!d(a))&&e.call(this,0===a?0:a)}:"get"==t?function(a){return O&&!d(a)?void 0:e.call(this,0===a?0:a)}:"add"==t?function(a){return e.call(this,0===a?0:a),this}:function(a,b){return e.call(this,0===a?0:a,b),this})};if("function"==typeof A&&(O||C.forEach&&!v((function(){(new A).entries().next()})))){var j=new A,T=j[k](O?{}:-0,1)!=j,I=v((function(){j.has(1)})),M=y((function(t){new A(t)})),P=!O&&v((function(){for(var t=new A,e=5;e--;)t[k](e,e);return!t.has(-0)}));M||((A=e((function(e,n){h(e,A,t);var r=_(new S,e,A);return null!=n&&l(n,x,r[k],r),r}))).prototype=C,C.constructor=A),(I||P)&&($("delete"),$("has"),x&&$("get")),(P||T)&&$(k),O&&C.clear&&delete C.clear}else A=w.getConstructor(e,t,x,k),f(A.prototype,n),meta.NEED=!0;return m(A,t),E[t]=A,o(o.G+o.W+o.F*(A!=S),E),O||w.setStrong(A,t,x),A}}]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8740422d206a5f28b814.js b/handbook/_nuxt/js/8740422d206a5f28b814.js
new file mode 100644
index 0000000..9a126f0
--- /dev/null
+++ b/handbook/_nuxt/js/8740422d206a5f28b814.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[10],{304: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/handbook/_nuxt/js/87bca500fffaccdabeb9.js b/handbook/_nuxt/js/87bca500fffaccdabeb9.js
new file mode 100644
index 0000000..e4e2239
--- /dev/null
+++ b/handbook/_nuxt/js/87bca500fffaccdabeb9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[81],{375: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](http://phantomjs.org/) 等。\n\n这是一些社区贡献的 ECharts 服务端渲染方案:\n\n- [https://github.com/hellosean1025/node-echarts](https://github.com/hellosean1025/node-echarts)\n- [https://github.com/chfw/echarts-scrappeteer](https://github.com/chfw/echarts-scrappeteer)\n- [https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js](https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js)\n- [https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73](https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73)\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/87d073533b02b80c9f5a.js b/handbook/_nuxt/js/87d073533b02b80c9f5a.js
new file mode 100644
index 0000000..940c180
--- /dev/null
+++ b/handbook/_nuxt/js/87d073533b02b80c9f5a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{424:function(t,e,n){"use strict";n.r(e);var r=n(2),o=(n(21),n(0)),c=n.n(o).a.extend({mounted:function(){this.$router.push("get-started")},asyncData:function(){return Object(r.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:case"end":return t.stop()}}),t)})))()}}),l=n(7),component=Object(l.a)(c,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nuxt-link",{attrs:{to:"zh/get-started"}},[t._v("中文")]),t._v(" "),n("nuxt-link",{attrs:{to:"en/get-started"}},[t._v("English")])],1)}),[],!1,null,null,null);e.default=component.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/883c8a4a82d2802585c5.js b/handbook/_nuxt/js/883c8a4a82d2802585c5.js
new file mode 100644
index 0000000..c0831bf
--- /dev/null
+++ b/handbook/_nuxt/js/883c8a4a82d2802585c5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[122],{416: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}/examples) 中,可以通过切换深色模式,直接看到采用主题的效果。\n\nECharts5 除了一贯的默认主题外,还内置了`'dark'`主题。可以如下切换成深色模式:\n\n```js\nvar chart = echarts.init(dom, 'dark');\n```\n\n其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 [主题编辑器](https://echarts.apache.org/theme-builder.html) 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:\n\n如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:\n\n```js\n// 假设主题名称是 \"vintage\"\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n```\n\n如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:\n\n```js\n// HTML 引入 vintage.js 文件后(假设主题名称是 \"vintage\")\nvar chart = echarts.init(dom, 'vintage');\n// ...\n```\n\n## 调色盘\n\n调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。\n\n```js\noption = {\n // 全局调色盘。\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // 此系列自己的调色盘。\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // 此系列自己的调色盘。\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n```\n\n## 直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...\n\n直接的样式设置是比较常用设置方式。纵观 ECharts 的 [option](${optionPath}) 中,很多地方可以设置 [itemStyle](${optionPath}series-bar.itemStyle)、[lineStyle](${optionPath}series-line.lineStyle)、[areaStyle](${optionPath}series-line.areaStyle)、[label](${optionPath}series-bar.label) 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。\n\n一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,`itemStyle`、`label` 等可能出现在不同的地方。\n\n在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:\n\n```js live\nvar data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n```\n\n## 高亮的样式:emphasis\n\n在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 [emphasis](${optionPath}series-bar.emphasis) 属性来定制。[emphsis](${optionPath}series-bar.emphasis) 中的结构,和普通样式的结构相同,例如:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\n注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\n这种写法 **仍然被兼容**,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 `normal` 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。\n\n## 通过 visualMap 组件设定样式\n\n[visualMap 组件](${optionPath}visualMap) 能指定数据到颜色、图形尺寸的映射规则,详见 [数据的视觉映射](${lang}/concepts/visual-map)。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8aca0800230497efb3c5.js b/handbook/_nuxt/js/8aca0800230497efb3c5.js
new file mode 100644
index 0000000..19c72b9
--- /dev/null
+++ b/handbook/_nuxt/js/8aca0800230497efb3c5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{395: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双向柱状图可分为垂直方向的双向柱状图(如上图)和水平方向的双向柱状图(又叫正负条形图,如下图),例如一个客户满意度的调查数据分析中,有正面评价和负面评价,这很适合用正负条形图,所有数据在中间对齐,正面的评价数据分布在右侧,负面的评价数据分布在左侧。\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">\n</iframe>\n\n## 双向柱状 \b 图的使用建议\n\n1、双向柱状图正向和负向的数据具有对比性,因此一般选用差值较大的具有对比性的颜色。\n\n2、永远不要在 0 基线的右边画负值的水平条行图或在 0 基线的上边画负值的柱子,以免和常识违背造成误解。\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar01.jpg">\n</img>\n\n3、双向柱状图多用于展示含相反含义的数据,因此要避免不具有正负含义的数据使用而造成的误解。 如下图人口统计图表中使用双向柱状图,一侧绘制男性的数据,另一侧绘制女性的数据,只是单纯的两类不同数据的对比,并不存在负数。那么,此时将两个数据序列绘制成一个分组柱状图是更合适的。\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar02.jpg">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8b843ba40bed064e7dab.js b/handbook/_nuxt/js/8b843ba40bed064e7dab.js
new file mode 100644
index 0000000..4634ccb
--- /dev/null
+++ b/handbook/_nuxt/js/8b843ba40bed064e7dab.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[59],{353:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8c0e9d23a3264ba34cf3.js b/handbook/_nuxt/js/8c0e9d23a3264ba34cf3.js
new file mode 100644
index 0000000..fac5d7d
--- /dev/null
+++ b/handbook/_nuxt/js/8c0e9d23a3264ba34cf3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[74],{368: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: 'Step Start',\n type: 'line',\n step: 'start',\n data: [120, 132, 101, 134, 90, 230, 210]\n },\n {\n name: 'Step Middle',\n type: 'line',\n step: 'middle',\n data: [220, 282, 201, 234, 290, 430, 410]\n },\n {\n name: 'Step End',\n type: 'line',\n step: 'end',\n data: [450, 432, 401, 454, 590, 530, 510]\n }\n ]\n};\n```\n\n> 请注意这个例子中不同的 `step` 取值对应的数据点和连线的区别。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8c305df7926580a3084b.js b/handbook/_nuxt/js/8c305df7926580a3084b.js
new file mode 100644
index 0000000..221959c
--- /dev/null
+++ b/handbook/_nuxt/js/8c305df7926580a3084b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[51],{345: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 and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:\n\n```js\noption = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n // ...\n};\n```\n\nThe x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: \"Sales Time\", \"Sales Location\" and \"product name\", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as \"Sales Quantity\" and \"Sales Price\".\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n }\n // ...\n};\n```\n\nWhen x-axis has a large span, we can use the zoom method to display part of the data in the chart.\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n dataZoom: []\n // ...\n};\n```\n\nIn two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config [offset](${optionPath}xAxis.offset) to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.\n\n```js\noption = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n {\n type: 'value',\n name: 'Sales Price'\n // ...\n }\n ]\n // ...\n};\n```\n\n## Axis Line\n\nECharts provide the config of [axisLine](${optionPath}xAxis.axisLine). You can change the setting according to the demand, such as the arrow on two sides and the style of axes.\n\n```js\noption = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## Tick\n\nECharts provide the config [axisTick](${optionPath}xAxis.axisTick). You can change the setting according to the demand, such as the length of ticks, and the style of ticks.\n\n```js\noption = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n```\n\n## Label\n\nECharts provide the config [axisLabel](${optionPath}xAxis.axisLabel). You can change the setting according to the demand, such as the text alignment and the customized label content.\n\n```js\noption = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} ¥',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n```\n\n## Example\n\nThe y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.\n\n```js live\noption = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n axisLabel: {\n rotate: 30\n },\n data: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'Precipitation',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: 'Temperature',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: 'Precipitation',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: 'Temperature',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n```\n\nThese are the concise intro of the usage of axis config. Check more details at: [Official Website](${optionPath}xAxis).\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/8ef204dfd1e847f744f4.js b/handbook/_nuxt/js/8ef204dfd1e847f744f4.js
new file mode 100644
index 0000000..55fd507
--- /dev/null
+++ b/handbook/_nuxt/js/8ef204dfd1e847f744f4.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[94],{388: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#### 默认主题(theme)\n\n首先是默认主题的改动,`v5` 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:\n\n```js\nchart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n```\n\n或者,做一个简单的 `v4` 主题:\n\n```js\nvar themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n```\n\n#### 引用 ECharts\n\n##### 去除 default exports 的支持\n\n如果使用者在 `v4` 中这样引用了 echarts:\n\n```js\nimport echarts from 'echarts';\n// 或者按需引入\nimport echarts from 'echarts/lib/echarts';\n```\n\n这两种方式,`v5` 中不再支持了。\n\n使用者需要如下更改代码解决这个问题:\n\n```js\nimport * as echarts from 'echarts';\n// 按需引入\nimport * as echarts from 'echarts/lib/echarts';\n```\n\n##### 按需引入\n\n在 5.0.1 中,我们引入了新的[按需引入接口](${lang}/basics/import)\n\n```js\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 注意,新的接口中默认不再包含 Canvas 渲染器,需要显示引入,如果需要使用 SVG 渲染模式则使用 SVGRenderer\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n```\n\n如果之前是使用`import 'echarts/lib/chart/bar'`引入,新的接口对应的是`import {BarChart} from 'echarts/charts'`;\n\n为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的`完整代码`标签下选中按需引入后查看需要引入的模块以及相关代码。\n\n在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n```\n\n其次,因为我们的源代码已使用 TypeScript 重写,`v5` 将不再支持从 `echarts/src` 引用文件,需要改为从`echarts/lib`引入。\n\n##### 依赖调整\n\n> 注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注\n\n为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,`CanvasRenderer`将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:\n\n- 在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n```\n\n需要再单独引入`grid`组件\n\n```js\nrequire('echarts/lib/component/grid');\n```\n\n参考 issue:[#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764)\n\n- 默认不再引入`aria`组件,如果需要的话可以手动引入。\n\n```js\nimport { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n```\n\n或者:\n\n```js\nrequire('echarts/lib/component/aria');\n```\n\n#### 去除内置的 geoJSON\n\n`v5` 移除了内置的 geoJSON(原先在 `echarts/map` 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。\n\n#### 浏览器兼容性\n\n`v5` 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 [VML 渲染器](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 `v5.0.1` 开始支持注册独立的渲染器了。\n\n#### ECharts 配置项调整\n\n##### 视觉样式设置的优先级改变\n\n`v5` 对调了 [visualMap 组件](${optionPath}visualMap) 和 [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) 的视觉样式优先级。\n\n具体来说,`v4` 中,[visualMap 组件](${optionPath}visualMap) 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 [visualMap 组件](${optionPath}visualMap) 时,又想针对某个数据项对应的图形,设置 [itemStyle](${optionPath}series-scatter.itemStyle) 样式,则做不到。`v5` 中于是提高了 [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) 的优先级,使他们能生效。\n\n在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 `v4` 到 `v5` 时,还是可以检查下,是否有同时使用 [visualMap](${optionPath}visualMap) 和 [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) 的情况。\n\n##### 富文本的 `padding`\n\n`v5` 调整了 [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding) 的格式使其更符合 CSS 的规范。`v4` 里,例如 `rich.?.padding: [11, 22, 33, 44]` 表示 `padding-top` 是 `33` 且 `padding-bottom` 是 `11`。在 `v5` 中调整了上下的位置,`rich.?.padding: [11, 22, 33, 44]` 表示 `padding-top` 是 `11` 且 `padding-bottom` 是 `33`。\n\n如果使用者有在使用 [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding),需要注意调整下这个顺序。\n\n## ECharts 的相关扩展\n\n如果想要升级到 `v5` ,下面这些扩展需要升级到最新的版本实现兼容。\n\n- [echarts-gl](https://github.com/ecomfe/echarts-gl)\n- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)\n- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)\n\n## 不再推荐使用的 API\n\n一些 API(包括接口调用,事件监听和配置项)在 `v5` 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。\n\n下面是不再推荐使用的 API 以及推荐的新 API:\n\n- 图形元素 transform 相关的属性被改变了:\n - 变更点:\n - `position: [number, number]` 改为 `x: number` / `y: number`。\n - `scale: [number, number]` 改为 `scaleX: number` / `scaleY: number`。\n - `origin: [number, number]` 改为 `originX: number` / `originY: number`。\n - `position`、`scale` 和 `origin` 仍然支持,但已不推荐使用。\n - 它影响到这些地方:\n - 在`graphic`组件中:每个元素的声明。\n - 在 `custom series` 中:`renderItem` 返回的每个元素的声明。\n - 直接使用 zrender 图形元素时。\n- Text 相关的属性被改变:\n - 变更点:\n - 图形元素附带的文本的声明方式被改变:\n - 除了 `Text` 元素之外,其他元素中的属性 `style.text` 都不推荐使用了。取而代之的是新属性 `textContent` 和 `textConfig`,他们能带来更丰富的功能。\n - 其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n - textPosition => textConfig.position\n - textOffset => textConfig.offset\n - textRotation => textConfig.rotation\n - textDistance => textConfig.distance\n - 下面左边部分的属性在 `style` 和 `style.rich.?` 中已不推荐使用或废弃。请使用下面右边的属性:\n - textFill => fill\n - textStroke => stroke\n - textFont => font\n - textStrokeWidth => lineWidth\n - textAlign => align\n - textVerticalAlign => verticalAlign\n - textLineHeight =>\n - textWidth => width\n - textHeight => hight\n - textBackgroundColor => backgroundColor\n - textPadding => padding\n - textBorderColor => borderColor\n - textBorderWidth => borderWidth\n - textBorderRadius => borderRadius\n - textBoxShadowColor => shadowColor\n - textBoxShadowBlur => shadowBlur\n - textBoxShadowOffsetX => shadowOffsetX\n - textBoxShadowOffsetY => shadowOffsetY\n - 注:这些属性并没有变化:\n - textShadowColor\n - textShadowBlur\n - textShadowOffsetX\n - textShadowOffsetY\n - 它影响到这些地方:\n - 在 `graphic` 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)\n - 在自定义系列(`custom series`)中:`renderItem` 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)\n - 直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)\n- 图表实例上的 API:\n - `chart.one(...)` 已不推荐使用。\n- `label`。\n - 属性 `color`、`textBorderColor`、`backgroundColor`、`borderColor` 中,值 `auto` 已不推荐使用,而推荐使用 `'inherit'` 代替。\n- `hoverAnimation`:\n - 选项 `series.hoverAnimation` 已不推荐使用,使用 `series.emphasis.scale` 代替之。\n- 折线图(`line series`):\n - 选项 `series.clipOverflow` 已不推荐使用,使用 `series.clip` 代替之。\n- 自定义系列(`custom series`)。\n - 在 `renderItem` 中,`api.style(...)` 和 `api.styleEmphasis(...)` 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 `api.visual(...)` 获取系统自动分配的视觉信息。\n- 旭日图(`sunburst`):\n - 动作类型 `highlight` 已被弃用,请使用 `sunburstHighlight` 代替。\n - 动作类型 `downplay` 已被弃用,请使用 `sunburstUnhighlight` 代替。\n - 选项 `series.downplay` 已被弃用,请使用 `series.blur` 代替。\n - 选项 `series.highlightPolicy` 已不适用,请使用 `series.emphasis.focus` 代替。\n- 饼图(`pie`):\n - 下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n - `pieToggleSelect` => `toggleSelect`。\n - `pieSelect` => `select`。\n - `pieUnSelect` => `unselect`。\n - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n - `pieselectchanged` => `selectchanged`。\n - `pieselected` => `selected`。\n - `pieunselected` => `unselected`。\n - 选项 `series.label.margin` 已经不推荐使用。使用 `series.label.edgeDistance` 代替。\n - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。\n - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。\n- 地图(`map series`):\n - 下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n - `mapToggleSelect` => `toggleSelect`。\n - `mapSelect` => `select`。\n - `mapUnSelect` => `unselect`。\n - 下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n - `mapselectchanged` => `selectchanged`。\n - `mapselected` => `selected`。\n - `mapunselected` => `unselected`。\n - 选项 `series.mapType` 已经不推荐使用。使用 `series.map` 代替。\n - 选项 `series.mapLocation` 已经不推荐使用。\n- 关系图(`graph series`):\n - 选项 `series.focusNodeAdjacency` 已经不推荐使用。使用 `series.emphasis: { focus: 'adjacency'}` 代替。\n- 仪表盘(`gauge series`):\n - 选项 `series.clockWise` 已经不推荐使用。使用 `series.clockwise` 代替。\n - 选项 `series.hoverOffset` 已经不推荐使用。使用 `series.emphasis.scaleSize` 代替。\n- `dataZoom` 组件:\n - 选项 `dataZoom.handleIcon` 如果使用 `SVGPath`,需要前缀 `path://`。\n- 雷达图(`radar`):\n - 选项 `radar.name` 已经不推荐使用。使用 `radar.axisName` 代替。\n - 选项 `radar.nameGap` 已经不推荐使用。使用 `radar.axisNameGap` 代替。\n- Parse and format:\n - `echarts.format.formatTime` 已经不推荐使用。使用 `echarts.time.format` 代替。\n - `echarts.number.parseDate` 已经不推荐使用。使用 `echarts.time.parse` 代替。\n - `echarts.format.getTextRect` 已经不推荐使用。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/911d7b85b7ac344417e5.js b/handbook/_nuxt/js/911d7b85b7ac344417e5.js
new file mode 100644
index 0000000..bfe0b6f
--- /dev/null
+++ b/handbook/_nuxt/js/911d7b85b7ac344417e5.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[15],{309: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: [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/handbook/_nuxt/js/9670a8e6505bdaf98a3a.js b/handbook/_nuxt/js/9670a8e6505bdaf98a3a.js
new file mode 100644
index 0000000..73892a9
--- /dev/null
+++ b/handbook/_nuxt/js/9670a8e6505bdaf98a3a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[88],{382: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### 从 GitHub 获取\n\n[apache/echarts](https://github.com/apache/echarts) 项目的 [release](https://github.com/apache/echarts/releases) 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 `dist` 目录下的 `echarts.js` 即为包含完整 ECharts 功能的文件。\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### 在线定制\n\n如果只想引入部分模块以减少包体积,可以使用 [ECharts 在线定制](${mainSitePath}/builder.html)功能。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/97cb9e8e23b546a88acd.js b/handbook/_nuxt/js/97cb9e8e23b546a88acd.js
new file mode 100644
index 0000000..5ef3a91
--- /dev/null
+++ b/handbook/_nuxt/js/97cb9e8e23b546a88acd.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{347:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/97dab2d2d3a3045f7809.js b/handbook/_nuxt/js/97dab2d2d3a3045f7809.js
new file mode 100644
index 0000000..5afe820
--- /dev/null
+++ b/handbook/_nuxt/js/97dab2d2d3a3045f7809.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{310: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 stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x'\n }\n ]\n};\n```\n\nHowever, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.\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 areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/986fdb22890a51fd3cd7.js b/handbook/_nuxt/js/986fdb22890a51fd3cd7.js
new file mode 100644
index 0000000..76cf100
--- /dev/null
+++ b/handbook/_nuxt/js/986fdb22890a51fd3cd7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[44],{338: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 mostly used to convey the size of the trend but not single values.\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## Suggestion for Using Area Line Chart\n\n1. The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable. \n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>\n\n2. The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>\n\n3. You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/9957e6b213f047f0b356.js b/handbook/_nuxt/js/9957e6b213f047f0b356.js
new file mode 100644
index 0000000..2d1e7ff
--- /dev/null
+++ b/handbook/_nuxt/js/9957e6b213f047f0b356.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[107],{401: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-lite.html?cid=xSkBiMSU4M&v=1">>\n </iframe>\n\n折线图是将数据点之间用线连接起来绘制成的图表。为了追求美观或特殊的效果,还可以如上图将点与点之间用曲线连接,这种图又叫曲线图或样条图样条。样条图与折线图用法相同,区别是数据点之间的连线使用曲线绘制。\n\n## 折线图的使用建议\n\n1、使用实线绘制数据线,首先要保证能够的区分数据线和坐标轴线,并且要尽力要所有的数据清晰可识别。\n\n2、建议不要绘制 4 条以上的折线,如下图错误的示例,线都折叠在一起并且又没有明显的对比,整张图表就会混乱并难以阅读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xBJzdEItVz&v=1">\n</iframe>\n\n3、不建议使用过多的装饰来区分图表,图例虽然可以帮助区分不同数据系列,但如下图使用过多种类的图例有时会让用户分心。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS1Tbdr8EG&v=1">\n</iframe>\n\n4、展示折线图的数据时,要避免刻意的歪曲趋势。如下图,左图过于扁平化掩盖了想传达的信息,右图过于夸大趋势。要根据展示数据波动的参考单位,做有意义的波动分析。正确的数据高度是线约占 Y 轴高度的 2/3。\n\n<img max-width="830" width="100%" height="100%" src="images/design/line/line01.jpg"></img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/9cae5d0339723a01b8cc.js b/handbook/_nuxt/js/9cae5d0339723a01b8cc.js
new file mode 100644
index 0000000..5f1c2a6
--- /dev/null
+++ b/handbook/_nuxt/js/9cae5d0339723a01b8cc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[23],{317:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js b/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js
deleted file mode 100644
index cbf236a..0000000
--- a/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see ../LICENSES */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[8],{206:function(e,t,n){"use strict";n.d(t,"a",(function(){return we})),n.d(t,"c",(function(){return Ce})),n.d(t,"d",(function(){return fe})),n.d(t,"e",(function(){return de})),n.d(t,"f",(function(){return V})),n.d(t,"g",(function(){return ee})),n.d(t,"h",(function(){return _e}));var r=n(0);function o(e){return"function"==typeof e&&/native code/.test(e.toString())}var l="undefined"!=typeof Symbol&&o(Symbol)&&"undefined"!=typeof Reflect&&o(Reflect.ownKeys),c=function(e){return e};function f(e,t,n){var r=n.get,o=n.set;Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:r||c,set:o||c})}function d(e,t,n,r){Object.defineProperty(e,t,{value:n,enumerable:!!r,writable:!0,configurable:!0})}function h(e,t){return Object.hasOwnProperty.call(e,t)}function v(e){return Array.isArray(e)}var m=Object.prototype.toString,y=function(e){return m.call(e)};function _(e){return null!==e&&"object"==typeof e}function k(e){return"[object Object]"===function(e){return Object.prototype.toString.call(e)}(e)}function w(e){return"function"==typeof e}function x(e,t){r.default.util.warn(e,t)}var F=void 0;try{var S=n(0);S&&P(S)?F=S:S&&"default"in S&&P(S.default)&&(F=S.default)}catch(e){}var A=null,E=null,$="__composition_api_installed__";function P(e){return e&&"function"==typeof e&&"Vue"===e.name}function j(){return A}function C(e){E=e}function z(){return E?L(E):null}var O,T=new WeakMap;function L(e){if(T.has(e))return T.get(e);var t={proxy:e,update:e.$forceUpdate,uid:e._uid,emit:e.$emit.bind(e),parent:null,root:null};return["data","props","attrs","refs","vnode","slots"].forEach((function(n){f(t,n,{get:function(){return e["$"+n]}})})),f(t,"isMounted",{get:function(){return e._isMounted}}),f(t,"isUnmounted",{get:function(){return e._isDestroyed}}),f(t,"isDeactivated",{get:function(){return e._inactive}}),f(t,"emitted",{get:function(){return e._events}}),T.set(e,t),e.$parent&&(t.parent=L(e.$parent)),e.$root&&(t.root=L(e.$root)),t}function N(e){var t=z();return null==t?void 0:t.proxy}function M(e,t){void 0===t&&(t={});var n=e.config.silent;e.config.silent=!0;var r=new e(t);return e.config.silent=n,r}function D(e,t){return function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return e.$scopedSlots[t]?e.$scopedSlots[t].apply(e,n):x("slots."+t+'() got called outside of the "render()" scope',e)}}var R=function(){return(R=Object.assign||function(e){for(var s,i=1,t=arguments.length;i<t;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(e[p]=s[p]);return e}).apply(this,arguments)};function H(e){var s="function"==typeof Symbol&&Symbol.iterator,t=s&&e[s],i=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(s?"Object is not iterable.":"Symbol.iterator is not defined.")}function I(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,o,i=n.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)l.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(n=i.return)&&n.call(i)}finally{if(o)throw o.error}}return l}function W(e,t){for(var i=0,n=t.length,r=e.length;i<n;i++,r++)e[r]=t[i];return e}function B(e){return l?Symbol.for(e):e}var K=B("composition-api.preFlushQueue"),Z=B("composition-api.postFlushQueue"),U="composition-api.refKey",J=new WeakMap,X=(new WeakMap,new WeakMap),Y=function(e){f(this,"value",{get:e.get,set:e.set})};function G(e,t){var n=new Y(e),r=Object.seal(n);return X.set(r,!0),r}function V(e){var t;if(Q(e))return e;var n=ue(((t={})[U]=e,t));return G({get:function(){return n[U]},set:function(e){return n[U]=e}})}function Q(e){return e instanceof Y}function ee(e){return Q(e)?e.value:e}function te(object,e){var t=object[e];return Q(t)?t:G({get:function(){return object[e]},set:function(t){return object[e]=t}})}function ne(e){var t;return Boolean((null==e?void 0:e.__ob__)&&(null===(t=e.__ob__)||void 0===t?void 0:t.__raw__))}function re(e){var t;return Boolean((null==e?void 0:e.__ob__)&&!(null===(t=e.__ob__)||void 0===t?void 0:t.__raw__))}function ie(e){if(!(!k(e)||ne(e)||Array.isArray(e)||Q(e)||(t=e,n=j(),n&&t instanceof n)||J.has(e))){var t,n;J.set(e,!0);for(var r=Object.keys(e),i=0;i<r.length;i++)ae(e,r[i])}}function ae(e,t,n){if("__ob__"!==t&&!ne(e[t])){var r,o,l=Object.getOwnPropertyDescriptor(e,t);if(l){if(!1===l.configurable)return;r=l.get,o=l.set,r&&!o||2!==arguments.length||(n=e[t])}ie(n),Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var o=r?r.call(e):n;return t!==U&&Q(o)?o.value:o},set:function(l){if(!r||o){var c=r?r.call(e):n;t!==U&&Q(c)&&!Q(l)?c.value=l:o?o.call(e,l):n=l,ie(l)}}})}}function oe(e){var t,n=A||F;n.observable?t=n.observable(e):t=M(n,{data:{$$state:e}})._data.$$state;return h(t,"__ob__")||d(t,"__ob__",function(e){void 0===e&&(e={});return{value:e,dep:{notify:c,depend:c,addSub:c,removeSub:c}}}(t)),t}function se(){return oe({}).__ob__}function ue(e){if(!_(e))return e;if(!k(e)&&!v(e)||ne(e)||!Object.isExtensible(e))return e;var t=oe(e);return ie(t),t}function le(e){return function(t){var n,r=N(((n=e)[0].toUpperCase(),n.slice(1)));r&&function(e,t,n,r){var o=t.$options,l=e.config.optionMergeStrategies[n];o[n]=l(o[n],function(e,t){return function(){for(var n,r=[],o=0;o<arguments.length;o++)r[o]=arguments[o];var l=null===(n=z())||void 0===n?void 0:n.proxy;C(e);try{return t.apply(void 0,W([],I(r)))}finally{C(l)}}}(t,r))}(j(),r,e,t)}}le("beforeMount");var ce,fe=le("mounted"),de=(le("beforeUpdate"),le("updated"),le("beforeDestroy"),le("destroyed"));le("errorCaptured"),le("activated"),le("deactivated"),le("serverPrefetch");function ge(){ve(this,K)}function pe(){ve(this,Z)}function he(){var e,t=null===(e=z())||void 0===e?void 0:e.proxy;return t?function(e){return void 0!==e[K]}(t)||function(e){e[K]=[],e[Z]=[],e.$on("hook:beforeUpdate",ge),e.$on("hook:updated",pe)}(t):(ce||(ce=M(j())),t=ce),t}function ve(e,t){for(var n=e[t],r=0;r<n.length;r++)n[r]();n.length=0}function me(e,t,n){var r=function(){e.$nextTick((function(){e[K].length&&ve(e,K),e[Z].length&&ve(e,Z)}))};switch(n){case"pre":r(),e[K].push(t);break;case"post":r(),e[Z].push(t);break;default:!function(e,t){if(!e)throw new Error("[vue-composition-api] "+t)}(!1,'flush must be one of ["post", "pre", "sync"], but got '+n)}}function ye(e,t){var n=e.teardown;e.teardown=function(){for(var r=[],o=0;o<arguments.length;o++)r[o]=arguments[o];n.apply(e,r),t()}}function be(e,source,t,n){var r,o,l=n.flush,f="sync"===l,d=function(e){o=function(){try{e()}catch(e){!function(e,t,n){if("undefined"==typeof window||"undefined"==typeof console)throw e;console.error(e)}(e)}}},h=function(){o&&(o(),o=null)},m=function(t){return f||e===ce?t:function(){for(var n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return me(e,(function(){t.apply(void 0,W([],I(n)))}),l)}};if(null===t){var y=!1,_=function(e,t,n,r){var o=e._watchers.length;return e.$watch(t,n,{immediate:r.immediateInvokeCallback,deep:r.deep,lazy:r.noRun,sync:r.sync,before:r.before}),e._watchers[o]}(e,(function(){if(!y)try{y=!0,source(d)}finally{y=!1}}),c,{deep:n.deep||!1,sync:f,before:h});ye(_,h),_.lazy=!1;var k=_.get.bind(_);return _.get=m(k),function(){_.teardown()}}var F,S=n.deep;Q(source)?F=function(){return source.value}:re(source)?(F=function(){return source},S=!0):v(source)?F=function(){return source.map((function(s){return Q(s)?s.value:re(s)?ke(s):w(s)?s():(x("Invalid watch source: "+JSON.stringify(s)+".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.",e),c)}))}:w(source)?F=source:(F=c,x("Invalid watch source: "+JSON.stringify(source)+".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.",e));var A=function(e,n){h(),t(e,n,d)},E=m(A);if(n.immediate){var $=E,P=function(e,t){P=$,A(e,t)};E=function(e,t){P(e,t)}}var j=e.$watch(F,E,{immediate:n.immediate,deep:S,sync:f}),C=e._watchers[e._watchers.length-1];return re(C.value)&&(null===(r=C.value.__ob__)||void 0===r?void 0:r.dep)&&S&&C.value.__ob__.dep.addSub({update:function(){C.run()}}),ye(C,h),function(){j()}}function _e(source,e,t){var n=null;"function"==typeof e?n=e:(t=e,n=null);var r=function(e){return R({immediate:!1,deep:!1,flush:"pre"},e)}(t);return be(he(),source,n,r)}function ke(e,t){if(void 0===t&&(t=new Set),!_(e)||t.has(e))return e;if(t.add(e),Q(e))ke(e.value,t);else if(v(e))for(var i=0;i<e.length;i++)ke(e[i],t);else if("[object Set]"===y(e)||function(e){return"[object Map]"===y(e)}(e))e.forEach((function(e){ke(e,t)}));else if(k(e))for(var n in e)ke(e[n],t);return e}function we(e){var t,n,r,o,l,f=null===(t=z())||void 0===t?void 0:t.proxy;if("function"==typeof e?n=e:(n=e.get,r=e.set),f&&!f.$isServer){var d,h=function(){if(!O){var e=M(j(),{computed:{value:function(){return 0}}}),t=e._computedWatchers.value.constructor,n=e._data.__ob__.dep.constructor;O={Watcher:t,Dep:n},e.$destroy()}return O}(),v=h.Watcher,m=h.Dep;l=function(){return d||(d=new v(f,n,c,{lazy:!0})),d.dirty&&d.evaluate(),m.target&&d.depend(),d.value},o=function(e){r&&r(e)}}else{var y=M(j(),{computed:{$$state:{get:n,set:r}}});f&&f.$on("hook:destroyed",(function(){return y.$destroy()})),l=function(){return y.$$state},o=function(e){y.$$state=e}}return G({get:l,set:o})}var xe={set:function(e,t,n){(e.__composition_api_state__=e.__composition_api_state__||{})[t]=n},get:function(e,t){return(e.__composition_api_state__||{})[t]}};function Fe(e){var t=xe.get(e,"rawBindings")||{};if(t&&Object.keys(t).length){for(var n=e.$refs,r=xe.get(e,"refs")||[],o=0;o<r.length;o++){var l=t[d=r[o]];!n[d]&&l&&Q(l)&&(l.value=null)}var c=Object.keys(n),f=[];for(o=0;o<c.length;o++){var d;l=t[d=c[o]];n[d]&&l&&Q(l)&&(l.value=n[d],f.push(d))}xe.set(e,"refs",f)}}function Se(e,t){var n=e.$options._parentVnode;if(n){for(var r=xe.get(e,"slots")||[],o=function(e,t){var n;if(e){if(e._normalized)return e._normalized;for(var r in n={},e)e[r]&&"$"!==r[0]&&(n[r]=!0)}else n={};for(var r in t)r in n||(n[r]=!0);return n}(n.data.scopedSlots,e.$slots),l=0;l<r.length;l++){o[f=r[l]]||delete t[f]}var c=Object.keys(o);for(l=0;l<c.length;l++){var f;t[f=c[l]]||(t[f]=D(e,f))}xe.set(e,"slots",c)}}function Ae(e,t,n){var r=E;C(e);try{return t(e)}catch(e){if(!n)throw e;n(e)}finally{C(r)}}function Ee(e){function t(e){if(k(e)&&!Q(e)&&!re(e)&&!ne(e)){var n=j().util.defineReactive;Object.keys(e).forEach((function(r){var o=e[r];n(e,r,o),o&&t(o)}))}}function n(e,t){return void 0===t&&(t=new Map),t.has(e)?t.get(e):(t.set(e,!1),Array.isArray(e)&&re(e)?(t.set(e,!0),!0):!(!k(e)||ne(e))&&Object.keys(e).some((function(r){return n(e[r],t)})))}e.mixin({beforeCreate:function(){var e=this,r=e.$options,o=r.setup,l=r.render;l&&(r.render=function(){for(var t=this,n=[],r=0;r<arguments.length;r++)n[r]=arguments[r];return Ae(e,(function(){return l.apply(t,n)}))});if(!o)return;if("function"!=typeof o)return void 0;var data=r.data;r.data=function(){return function(e,r){void 0===r&&(r={});var o,l=e.$options.setup,c=function(e){var t={slots:{}},n=["attrs"],r=["emit"];["root","parent","refs","listeners","isServer","ssrContext"].forEach((function(n){var r="$"+n;f(t,n,{get:function(){return e[r]},set:function(){x("Cannot assign to '"+n+"' because it is a read-only property",e)}})})),n.forEach((function(n){var r="$"+n;f(t,n,{get:function(){var t,n,data=ue({}),source=e[r],o=function(t){f(data,t,{get:function(){return e[r][t]}})};try{for(var l=H(Object.keys(source)),c=l.next();!c.done;c=l.next()){o(c.value)}}catch(e){t={error:e}}finally{try{c&&!c.done&&(n=l.return)&&n.call(l)}finally{if(t)throw t.error}}return data},set:function(){x("Cannot assign to '"+n+"' because it is a read-only property",e)}})})),r.forEach((function(n){var r="$"+n;f(t,n,{get:function(){return function(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];e[r].apply(e,t)}}})})),!1;return t}(e);if(d(r,"__ob__",se()),Se(e,c.slots),Ae(e,(function(){o=l(r,c)})),!o)return;if(w(o)){var m=o;return void(e.$options.render=function(){return Se(e,c.slots),Ae(e,(function(){return m()}))})}if(k(o)){re(o)&&(o=function(e){if(!k(e))return e;var t={};for(var n in e)t[n]=te(e,n);return t}(o)),xe.set(e,"rawBindings",o);var y=o;return void Object.keys(y).forEach((function(r){var o=y[r];Q(o)||(re(o)?v(o)&&(o=V(o)):w(o)?o=o.bind(e):_(o)?n(o)&&t(o):o=V(o)),function(e,t,n){var r=e.$options.props;t in e||r&&h(r,t)||(Q(n)?f(e,t,{get:function(){return n.value},set:function(e){n.value=e}}):Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return re(n)&&n.__ob__.dep.depend(),n},set:function(e){n=e}}))}(e,r,o)}))}0}(e,e.$props),"function"==typeof data?data.call(e,e):data||{}}},mounted:function(){Fe(this)},updated:function(){Fe(this)}})}function $e(e,t){if(!e)return t;if(!t)return e;for(var n,r,o,c=l?Reflect.ownKeys(e):Object.keys(e),i=0;i<c.length;i++)"__ob__"!==(n=c[i])&&(r=t[n],o=e[n],h(t,n)?r!==o&&k(r)&&!Q(r)&&k(o)&&!Q(o)&&$e(o,r):t[n]=o);return t}function Pe(e){(function(e){return h(e,$)})(e)||(e.config.optionMergeStrategies.setup=function(e,t){return function(n,r){return $e("function"==typeof e?e(n,r)||{}:void 0,"function"==typeof t?t(n,r)||{}:void 0)}},function(e){A=e,Object.defineProperty(e,$,{configurable:!0,writable:!0,value:!0})}(e),Ee(e))}var je={install:function(e){return Pe(e)}};function Ce(e){return e}"undefined"!=typeof window&&window.Vue&&window.Vue.use(je),t.b=je},208:function(e,t){Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}},209:function(e,t){Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript},210:function(e,t,n){e.exports={}},211:function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},212:function(e,t,n){var r=n(225),o="object"==typeof self&&self&&self.Object===Object&&self,l=r||o||Function("return this")();e.exports=l},213:function(e,t,n){var r=n(212).Symbol;e.exports=r},219:function(e,t,n){"use strict";(function(e){n.d(t,"a",(function(){return f}));var r=n(0);function o(){return(o=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var t in source)Object.prototype.hasOwnProperty.call(source,t)&&(e[t]=source[t])}return e}).apply(this,arguments)}var l="navigator"in e&&/Win/i.test(navigator.platform),c="navigator"in e&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),f=r.default.extend({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},value:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{value:{immediate:!0,handler:function(e){this.codeData=e||""}},content:{immediate:!0,handler:function(){var e=this;this.lineNumbers&&this.$nextTick((function(){e.setLineNumbersHeight()}))}},lineNumbers:function(){var e=this;this.$nextTick((function(){e.styleLineNumbers(),e.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var e=this.$refs.pre,t=this.$el.querySelector(".prism-editor__line-numbers"),n=window.getComputedStyle(e);this.$nextTick((function(){var r="border-top-left-radius",o="border-bottom-left-radius";if(t){t.style[r]=n[r],t.style[o]=n[o],e.style[r]="0",e.style[o]="0";["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(style){t.style[style]=n[style]})),t.style["margin-bottom"]="-"+n["padding-top"]}}))}},_recordCurrentState:function(){var input=this.$refs.textarea;if(input){var e=input.value,t=input.selectionStart,n=input.selectionEnd;this._recordChange({value:e,selectionStart:t,selectionEnd:n})}},_getLines:function(text,e){return text.substring(0,e).split("\n")},_applyEdits:function(e){var input=this.$refs.textarea,t=this.history.stack[this.history.offset];t&&input&&(this.history.stack[this.history.offset]=o({},t,{selectionStart:input.selectionStart,selectionEnd:input.selectionEnd})),this._recordChange(e),this._updateInput(e)},_recordChange:function(e,t){void 0===t&&(t=!1);var n=this.history,r=n.stack,l=n.offset;if(r.length&&l>-1){this.history.stack=r.slice(0,l+1);var c=this.history.stack.length;if(c>100){var f=c-100;this.history.stack=r.slice(f,c),this.history.offset=Math.max(this.history.offset-f,0)}}var d=Date.now();if(t){var h=this.history.stack[this.history.offset];if(h&&d-h.timestamp<3e3){var v,m,y=/[^a-z0-9]([a-z0-9]+)$/i,_=null===(v=this._getLines(h.value,h.selectionStart).pop())||void 0===v?void 0:v.match(y),k=null===(m=this._getLines(e.value,e.selectionStart).pop())||void 0===m?void 0:m.match(y);if(_&&k&&k[1].startsWith(_[1]))return void(this.history.stack[this.history.offset]=o({},e,{timestamp:d}))}}this.history.stack.push(o({},e,{timestamp:d})),this.history.offset++},_updateInput:function(e){var input=this.$refs.textarea;input&&(input.value=e.value,input.selectionStart=e.selectionStart,input.selectionEnd=e.selectionEnd,this.$emit("input",e.value))},handleChange:function(e){var t=e.target,n=t.value,r=t.selectionStart,o=t.selectionEnd;this._recordChange({value:n,selectionStart:r,selectionEnd:o},!0),this.$emit("input",n)},_undoEdit:function(){var e=this.history,t=e.stack,n=e.offset,r=t[n-1];r&&(this._updateInput(r),this.history.offset=Math.max(n-1,0))},_redoEdit:function(){var e=this.history,t=e.stack,n=e.offset,r=t[n+1];r&&(this._updateInput(r),this.history.offset=Math.min(n+1,t.length-1))},handleKeyDown:function(e){var t=this.tabSize,n=this.insertSpaces,r=this.ignoreTabKey;if(!this.$listeners.keydown||(this.$emit("keydown",e),!e.defaultPrevented)){27===e.keyCode&&(e.target.blur(),this.$emit("blur",e));var o=e.target,f=o.value,d=o.selectionStart,h=o.selectionEnd,v=(n?" ":"\t").repeat(t);if(9===e.keyCode&&!r&&this.capture)if(e.preventDefault(),e.shiftKey){var m=this._getLines(f,d),y=m.length-1,_=this._getLines(f,h).length-1,k=f.split("\n").map((function(line,i){return i>=y&&i<=_&&line.startsWith(v)?line.substring(v.length):line})).join("\n");if(f!==k){var w=m[y];this._applyEdits({value:k,selectionStart:w.startsWith(v)?d-v.length:d,selectionEnd:h-(f.length-k.length)})}}else if(d!==h){var x=this._getLines(f,d),F=x.length-1,S=this._getLines(f,h).length-1,A=x[F];this._applyEdits({value:f.split("\n").map((function(line,i){return i>=F&&i<=S?v+line:line})).join("\n"),selectionStart:/\S/.test(A)?d+v.length:d,selectionEnd:h+v.length*(S-F+1)})}else{var E=d+v.length;this._applyEdits({value:f.substring(0,d)+v+f.substring(h),selectionStart:E,selectionEnd:E})}else if(8===e.keyCode){var $=d!==h;if(f.substring(0,d).endsWith(v)&&!$){e.preventDefault();var P=d-v.length;this._applyEdits({value:f.substring(0,d-v.length)+f.substring(h),selectionStart:P,selectionEnd:P})}}else if(13===e.keyCode){if(d===h){var line=this._getLines(f,d).pop(),j=null==line?void 0:line.match(/^\s+/);if(j&&j[0]){e.preventDefault();var C="\n"+j[0],z=d+C.length;this._applyEdits({value:f.substring(0,d)+C+f.substring(h),selectionStart:z,selectionEnd:z})}}}else if(57===e.keyCode||219===e.keyCode||222===e.keyCode||192===e.keyCode){var O;57===e.keyCode&&e.shiftKey?O=["(",")"]:219===e.keyCode?O=e.shiftKey?["{","}"]:["[","]"]:222===e.keyCode?O=e.shiftKey?['"','"']:["'","'"]:192!==e.keyCode||e.shiftKey||(O=["`","`"]),d!==h&&O&&(e.preventDefault(),this._applyEdits({value:f.substring(0,d)+O[0]+f.substring(d,h)+O[1]+f.substring(h),selectionStart:d,selectionEnd:h+2}))}else!(c?e.metaKey&&90===e.keyCode:e.ctrlKey&&90===e.keyCode)||e.shiftKey||e.altKey?(c?e.metaKey&&90===e.keyCode&&e.shiftKey:l?e.ctrlKey&&89===e.keyCode:e.ctrlKey&&90===e.keyCode&&e.shiftKey)&&!e.altKey?(e.preventDefault(),this._redoEdit()):77!==e.keyCode||!e.ctrlKey||c&&!e.shiftKey||(e.preventDefault(),this.capture=!this.capture):(e.preventDefault(),this._undoEdit())}}},render:function(e){var t=this,n=e("div",{attrs:{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"}},"999"),r=e("div",{staticClass:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},attrs:{"aria-hidden":"true"}},[n,Array.from(Array(this.lineNumbersCount).keys()).map((function(t,n){return e("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++n)}))]),textarea=e("textarea",{ref:"textarea",on:{input:this.handleChange,keydown:this.handleKeyDown,click:function(e){t.$emit("click",e)},keyup:function(e){t.$emit("keyup",e)},focus:function(e){t.$emit("focus",e)},blur:function(e){t.$emit("blur",e)}},staticClass:"prism-editor__textarea",class:{"prism-editor__textarea--empty":this.isEmpty},attrs:{spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly},domProps:{value:this.codeData}}),o=e("pre",{ref:"pre",staticClass:"prism-editor__editor",attrs:{"data-testid":"preview"},domProps:{innerHTML:this.content}}),l=e("div",{staticClass:"prism-editor__container"},[textarea,o]);return e("div",{staticClass:"prism-editor-wrapper"},[this.lineNumbers&&r,l])}})}).call(this,n(44))},220:function(e,t,n){e.exports={}},221:function(e,t,n){(function(t){var n=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,n=0,r={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function e(t,n){var o,l;switch(n=n||{},r.util.type(t)){case"Object":if(l=r.util.objId(t),n[l])return n[l];for(var c in o={},n[l]=o,t)t.hasOwnProperty(c)&&(o[c]=e(t[c],n));return o;case"Array":return l=r.util.objId(t),n[l]?n[l]:(o=[],n[l]=o,t.forEach((function(t,i){o[i]=e(t,n)})),o);default:return t}},getLanguage:function(element){for(;element&&!t.test(element.className);)element=element.parentElement;return element?(element.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(n){var e=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(n.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var i in t)if(t[i].src==e)return t[i]}return null}},isActive:function(element,e,t){for(var n="no-"+e;element;){var r=element.classList;if(r.contains(e))return!0;if(r.contains(n))return!1;element=element.parentElement}return!!t}},languages:{extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var o in t)n[o]=t[o];return n},insertBefore:function(e,t,n,o){var l=(o=o||r.languages)[e],c={};for(var f in l)if(l.hasOwnProperty(f)){if(f==t)for(var d in n)n.hasOwnProperty(d)&&(c[d]=n[d]);n.hasOwnProperty(f)||(c[f]=l[f])}var h=o[e];return o[e]=c,r.languages.DFS(r.languages,(function(t,n){n===h&&t!=e&&(this[t]=c)})),c},DFS:function e(t,n,o,l){l=l||{};var c=r.util.objId;for(var i in t)if(t.hasOwnProperty(i)){n.call(t,i,t[i],o||i);var f=t[i],d=r.util.type(f);"Object"!==d||l[c(f)]?"Array"!==d||l[c(f)]||(l[c(f)]=!0,e(f,n,i,l)):(l[c(f)]=!0,e(f,n,null,l))}}},plugins:{},highlightAll:function(e,t){r.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var o={callback:n,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};r.hooks.run("before-highlightall",o),o.elements=Array.prototype.slice.apply(o.container.querySelectorAll(o.selector)),r.hooks.run("before-all-elements-highlight",o);for(var element,i=0;element=o.elements[i++];)r.highlightElement(element,!0===t,o.callback)},highlightElement:function(element,n,o){var l=r.util.getLanguage(element),c=r.languages[l];element.className=element.className.replace(t,"").replace(/\s+/g," ")+" language-"+l;var f=element.parentElement;f&&"pre"===f.nodeName.toLowerCase()&&(f.className=f.className.replace(t,"").replace(/\s+/g," ")+" language-"+l);var d={element:element,language:l,grammar:c,code:element.textContent};function h(e){d.highlightedCode=e,r.hooks.run("before-insert",d),d.element.innerHTML=d.highlightedCode,r.hooks.run("after-highlight",d),r.hooks.run("complete",d),o&&o.call(d.element)}if(r.hooks.run("before-sanity-check",d),!d.code)return r.hooks.run("complete",d),void(o&&o.call(d.element));if(r.hooks.run("before-highlight",d),d.grammar)if(n&&e.Worker){var v=new Worker(r.filename);v.onmessage=function(e){h(e.data)},v.postMessage(JSON.stringify({language:d.language,code:d.code,immediateClose:!0}))}else h(r.highlight(d.code,d.grammar,d.language));else h(r.util.encode(d.code))},highlight:function(text,e,t){var n={code:text,grammar:e,language:t};return r.hooks.run("before-tokenize",n),n.tokens=r.tokenize(n.code,n.grammar),r.hooks.run("after-tokenize",n),o.stringify(r.util.encode(n.tokens),n.language)},tokenize:function(text,e){var t=e.rest;if(t){for(var n in t)e[n]=t[n];delete e.rest}var r=new f;return d(r,r.head,text),c(text,r,e,r.head,0),function(e){var t=[],n=e.head.next;for(;n!==e.tail;)t.push(n.value),n=n.next;return t}(r)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var o,i=0;o=n[i++];)o(t)}},Token:o};function o(e,content,t,n){this.type=e,this.content=content,this.alias=t,this.length=0|(n||"").length}function l(pattern,e,text,t){pattern.lastIndex=e;var n=pattern.exec(text);if(n&&t&&n[1]){var r=n[1].length;n.index+=r,n[0]=n[0].slice(r)}return n}function c(text,e,t,n,f,v){for(var m in t)if(t.hasOwnProperty(m)&&t[m]){var y=t[m];y=Array.isArray(y)?y:[y];for(var _=0;_<y.length;++_){if(v&&v.cause==m+","+_)return;var k=y[_],w=k.inside,x=!!k.lookbehind,F=!!k.greedy,S=k.alias;if(F&&!k.pattern.global){var A=k.pattern.toString().match(/[imsuy]*$/)[0];k.pattern=RegExp(k.pattern.source,A+"g")}for(var pattern=k.pattern||k,E=n.next,$=f;E!==e.tail&&!(v&&$>=v.reach);$+=E.value.length,E=E.next){var P=E.value;if(e.length>text.length)return;if(!(P instanceof o)){var j,C=1;if(F){if(!(j=l(pattern,$,text,x)))break;var z=j.index,O=j.index+j[0].length,p=$;for(p+=E.value.length;z>=p;)p+=(E=E.next).value.length;if($=p-=E.value.length,E.value instanceof o)continue;for(var T=E;T!==e.tail&&(p<O||"string"==typeof T.value);T=T.next)C++,p+=T.value.length;C--,P=text.slice($,p),j.index-=$}else if(!(j=l(pattern,0,P,x)))continue;z=j.index;var L=j[0],N=P.slice(0,z),M=P.slice(z+L.length),D=$+P.length;v&&D>v.reach&&(v.reach=D);var R=E.prev;N&&(R=d(e,R,N),$+=N.length),h(e,R,C),E=d(e,R,new o(m,w?r.tokenize(L,w):L,S,L)),M&&d(e,E,M),C>1&&c(text,e,t,E.prev,$,{cause:m+","+_,reach:D})}}}}}function f(){var head={value:null,prev:null,next:null},e={value:null,prev:head,next:null};head.next=e,this.head=head,this.tail=e,this.length=0}function d(e,t,n){var r=t.next,o={value:n,prev:t,next:r};return t.next=o,r.prev=o,e.length++,o}function h(e,t,n){for(var r=t.next,i=0;i<n&&r!==e.tail;i++)r=r.next;t.next=r,r.prev=t,e.length-=i}if(e.Prism=r,o.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var s="";return t.forEach((function(t){s+=e(t,n)})),s}var o={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},l=t.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(o.classes,l):o.classes.push(l)),r.hooks.run("wrap",o);var c="";for(var f in o.attributes)c+=" "+f+'="'+(o.attributes[f]||"").replace(/"/g,""")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'"'+c+">"+o.content+"</"+o.tag+">"},!e.document)return e.addEventListener?(r.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var n=JSON.parse(t.data),o=n.language,code=n.code,l=n.immediateClose;e.postMessage(r.highlight(code,r.languages[o],o)),l&&e.close()}),!1),r):r;var script=r.util.currentScript();function v(){r.manual||r.highlightAll()}if(script&&(r.filename=script.src,script.hasAttribute("data-manual")&&(r.manual=!0)),!r.manual){var m=document.readyState;"loading"===m||"interactive"===m&&script&&script.defer?document.addEventListener("DOMContentLoaded",v):window.requestAnimationFrame?window.requestAnimationFrame(v):window.setTimeout(v,16)}return r}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=n),void 0!==t&&(t.Prism=n)}).call(this,n(44))},222:function(e,t,n){"use strict";n.d(t,"a",(function(){return h})),n.d(t,"b",(function(){return v}));var r=null;var o=null;function l(e,t){void 0===t&&(t={});var n=document.createElement(e);return Object.keys(t).forEach((function(e){n[e]=t[e]})),n}function c(e,t,n){return(window.getComputedStyle(e,n||null)||{display:"none"})[t]}function f(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var t=e;t!==document;){if("none"===c(t,"display"))return{detached:!1,rendered:!1};t=t.parentNode}return{detached:!1,rendered:!0}}var d=0,style=null;function h(e,t){if(e.__resize_mutation_handler__||(e.__resize_mutation_handler__=m.bind(e)),!e.__resize_listeners__)if(e.__resize_listeners__=[],window.ResizeObserver){var n=e.offsetWidth,r=e.offsetHeight,o=new ResizeObserver((function(){(e.__resize_observer_triggered__||(e.__resize_observer_triggered__=!0,e.offsetWidth!==n||e.offsetHeight!==r))&&_(e)})),h=f(e),v=h.detached,w=h.rendered;e.__resize_observer_triggered__=!1===v&&!1===w,e.__resize_observer__=o,o.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){_(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(d||(style=function(e){var style=document.createElement("style");return style.styleSheet?style.styleSheet.cssText=e:style.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(style),style}('.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}')),function(e){var t=c(e,"position");t&&"static"!==t||(e.style.position="relative");e.__resize_old_position__=t,e.__resize_last__={};var n=l("div",{className:"resize-triggers"}),r=l("div",{className:"resize-expand-trigger"}),o=l("div"),f=l("div",{className:"resize-contract-trigger"});r.appendChild(o),n.appendChild(r),n.appendChild(f),e.appendChild(n),e.__resize_triggers__={triggers:n,expand:r,expandChild:o,contract:f},k(e),e.addEventListener("scroll",y,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}(e),e.__resize_rendered__=f(e).rendered,window.MutationObserver){var x=new MutationObserver(e.__resize_mutation_handler__);x.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=x}e.__resize_listeners__.push(t),d++}function v(e,t){var n=e.__resize_listeners__;if(n){if(t&&n.splice(n.indexOf(t),1),!n.length||!t){if(e.detachEvent&&e.removeEventListener)return e.detachEvent("onresize",e.__resize_legacy_resize_handler__),void document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",y),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--d&&style&&style.parentNode.removeChild(style)}}function m(){var e=f(this),t=e.rendered,n=e.detached;t!==this.__resize_rendered__&&(!n&&this.__resize_triggers__&&(k(this),this.addEventListener("scroll",y,!0)),this.__resize_rendered__=t,_(this))}function y(){var e,t,n=this;k(this),this.__resize_raf__&&(e=this.__resize_raf__,o||(o=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}).bind(window)),o(e)),this.__resize_raf__=(t=function(){var e,t,r,o,l,c,f=(t=(e=n).__resize_last__,r=t.width,o=t.height,l=e.offsetWidth,c=e.offsetHeight,l!==r||c!==o?{width:l,height:c}:null);f&&(n.__resize_last__=f,_(n))},r||(r=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){return setTimeout(e,16)}).bind(window)),r(t))}function _(e){e&&e.__resize_listeners__&&e.__resize_listeners__.forEach((function(t){t.call(e,e)}))}function k(e){var t=e.__resize_triggers__,n=t.expand,r=t.expandChild,o=t.contract,l=o.scrollWidth,c=o.scrollHeight,f=n.offsetWidth,d=n.offsetHeight,h=n.scrollWidth,v=n.scrollHeight;o.scrollLeft=l,o.scrollTop=c,r.style.width=f+1+"px",r.style.height=d+1+"px",n.scrollLeft=h,n.scrollTop=v}},223:function(e,t,n){var r=n(211),o=n(224),l=n(226),c=Math.max,f=Math.min;e.exports=function(e,t,n){var d,h,v,m,y,_,k=0,w=!1,x=!1,F=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function S(time){var t=d,n=h;return d=h=void 0,k=time,m=e.apply(n,t)}function A(time){return k=time,y=setTimeout($,t),w?S(time):m}function E(time){var e=time-_;return void 0===_||e>=t||e<0||x&&time-k>=v}function $(){var time=o();if(E(time))return P(time);y=setTimeout($,function(time){var e=t-(time-_);return x?f(e,v-(time-k)):e}(time))}function P(time){return y=void 0,F&&d?S(time):(d=h=void 0,m)}function j(){var time=o(),e=E(time);if(d=arguments,h=this,_=time,e){if(void 0===y)return A(_);if(x)return clearTimeout(y),y=setTimeout($,t),S(_)}return void 0===y&&(y=setTimeout($,t)),m}return t=l(t)||0,r(n)&&(w=!!n.leading,v=(x="maxWait"in n)?c(l(n.maxWait)||0,t):v,F="trailing"in n?!!n.trailing:F),j.cancel=function(){void 0!==y&&clearTimeout(y),k=0,d=_=h=y=void 0},j.flush=function(){return void 0===y?m:P(o())},j}},224:function(e,t,n){var r=n(212);e.exports=function(){return r.Date.now()}},225:function(e,t,n){(function(t){var n="object"==typeof t&&t&&t.Object===Object&&t;e.exports=n}).call(this,n(44))},226:function(e,t,n){var r=n(227),o=n(211),l=n(229),c=/^[-+]0x[0-9a-f]+$/i,f=/^0b[01]+$/i,d=/^0o[0-7]+$/i,h=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(l(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=r(e);var n=f.test(e);return n||d.test(e)?h(e.slice(2),n?2:8):c.test(e)?NaN:+e}},227:function(e,t,n){var r=n(228),o=/^\s+/;e.exports=function(e){return e?e.slice(0,r(e)+1).replace(o,""):e}},228:function(e,t){var n=/\s/;e.exports=function(e){for(var t=e.length;t--&&n.test(e.charAt(t)););return t}},229:function(e,t,n){var r=n(230),o=n(233);e.exports=function(e){return"symbol"==typeof e||o(e)&&"[object Symbol]"==r(e)}},230:function(e,t,n){var r=n(213),o=n(231),l=n(232),c=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":c&&c in Object(e)?o(e):l(e)}},231:function(e,t,n){var r=n(213),o=Object.prototype,l=o.hasOwnProperty,c=o.toString,f=r?r.toStringTag:void 0;e.exports=function(e){var t=l.call(e,f),n=e[f];try{e[f]=void 0;var r=!0}catch(e){}var o=c.call(e);return r&&(t?e[f]=n:delete e[f]),o}},232:function(e,t){var n=Object.prototype.toString;e.exports=function(e){return n.call(e)}},233:function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},234:function(e,t,n){var r;r=function(){return function(){var e={134:function(e,t,n){"use strict";n.d(t,{default:function(){return A}});var r=n(279),o=n.n(r),l=n(370),c=n.n(l),f=n(817),d=n.n(f);function h(e){return(h="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function v(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var m=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.resolveOptions(t),this.initSelection()}var t,n,r;return t=e,(n=[{key:"resolveOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=e.action,this.container=e.container,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"createFakeElement",value:function(){var e="rtl"===document.documentElement.getAttribute("dir");this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var t=window.pageYOffset||document.documentElement.scrollTop;return this.fakeElem.style.top="".concat(t,"px"),this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.fakeElem}},{key:"selectFake",value:function(){var e=this,t=this.createFakeElement();this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.container.appendChild(t),this.selectedText=d()(t),this.copyText(),this.removeFake()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=d()(this.target),this.copyText()}},{key:"copyText",value:function(){var e;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(e){this.emitter.emit(e?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(e){if(void 0!==e){if(!e||"object"!==h(e)||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function(){return this._target}}])&&v(t.prototype,n),r&&v(t,r),e}();function y(e){return(y="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function k(e,p){return(k=Object.setPrototypeOf||function(e,p){return e.__proto__=p,e})(e,p)}function w(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=F(e);if(t){var o=F(this).constructor;n=Reflect.construct(r,arguments,o)}else n=r.apply(this,arguments);return x(this,n)}}function x(e,t){return!t||"object"!==y(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function F(e){return(F=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function S(e,element){var t="data-clipboard-".concat(e);if(element.hasAttribute(t))return element.getAttribute(t)}var A=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&k(e,t)}(l,e);var t,n,r,o=w(l);function l(e,t){var n;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,l),(n=o.call(this)).resolveOptions(t),n.listenClick(e),n}return t=l,r=[{key:"isSupported",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],t="string"==typeof e?[e]:e,n=!!document.queryCommandSupported;return t.forEach((function(e){n=n&&!!document.queryCommandSupported(e)})),n}}],(n=[{key:"resolveOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===y(e.container)?e.container:document.body}},{key:"listenClick",value:function(e){var t=this;this.listener=c()(e,"click",(function(e){return t.onClick(e)}))}},{key:"onClick",value:function(e){var t=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new m({action:this.action(t),target:this.target(t),text:this.text(t),container:this.container,trigger:t,emitter:this})}},{key:"defaultAction",value:function(e){return S("action",e)}},{key:"defaultTarget",value:function(e){var t=S("target",e);if(t)return document.querySelector(t)}},{key:"defaultText",value:function(e){return S("text",e)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}])&&_(t.prototype,n),r&&_(t,r),l}(o())},828:function(e){if("undefined"!=typeof Element&&!Element.prototype.matches){var t=Element.prototype;t.matches=t.matchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector||t.webkitMatchesSelector}e.exports=function(element,e){for(;element&&9!==element.nodeType;){if("function"==typeof element.matches&&element.matches(e))return element;element=element.parentNode}}},438:function(e,t,n){var r=n(828);function o(element,e,t,n,r){var o=l.apply(this,arguments);return element.addEventListener(t,o,r),{destroy:function(){element.removeEventListener(t,o,r)}}}function l(element,e,t,n){return function(t){t.delegateTarget=r(t.target,e),t.delegateTarget&&n.call(element,t)}}e.exports=function(e,t,n,r,l){return"function"==typeof e.addEventListener?o.apply(null,arguments):"function"==typeof n?o.bind(null,document).apply(null,arguments):("string"==typeof e&&(e=document.querySelectorAll(e)),Array.prototype.map.call(e,(function(element){return o(element,t,n,r,l)})))}},879:function(e,t){t.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},t.nodeList=function(e){var n=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===n||"[object HTMLCollection]"===n)&&"length"in e&&(0===e.length||t.node(e[0]))},t.string=function(e){return"string"==typeof e||e instanceof String},t.fn=function(e){return"[object Function]"===Object.prototype.toString.call(e)}},370:function(e,t,n){var r=n(879),o=n(438);e.exports=function(e,t,n){if(!e&&!t&&!n)throw new Error("Missing required arguments");if(!r.string(t))throw new TypeError("Second argument must be a String");if(!r.fn(n))throw new TypeError("Third argument must be a Function");if(r.node(e))return function(e,t,n){return e.addEventListener(t,n),{destroy:function(){e.removeEventListener(t,n)}}}(e,t,n);if(r.nodeList(e))return function(e,t,n){return Array.prototype.forEach.call(e,(function(e){e.addEventListener(t,n)})),{destroy:function(){Array.prototype.forEach.call(e,(function(e){e.removeEventListener(t,n)}))}}}(e,t,n);if(r.string(e))return function(e,t,n){return o(document.body,e,t,n)}(e,t,n);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}},817:function(e){e.exports=function(element){var e;if("SELECT"===element.nodeName)element.focus(),e=element.value;else if("INPUT"===element.nodeName||"TEXTAREA"===element.nodeName){var t=element.hasAttribute("readonly");t||element.setAttribute("readonly",""),element.select(),element.setSelectionRange(0,element.value.length),t||element.removeAttribute("readonly"),e=element.value}else{element.hasAttribute("contenteditable")&&element.focus();var n=window.getSelection(),r=document.createRange();r.selectNodeContents(element),n.removeAllRanges(),n.addRange(r),e=n.toString()}return e}},279:function(e){function t(){}t.prototype={on:function(e,t,n){var r=this.e||(this.e={});return(r[e]||(r[e]=[])).push({fn:t,ctx:n}),this},once:function(e,t,n){var r=this;function o(){r.off(e,o),t.apply(n,arguments)}return o._=t,this.on(e,o,n)},emit:function(e){for(var data=[].slice.call(arguments,1),t=((this.e||(this.e={}))[e]||[]).slice(),i=0,n=t.length;i<n;i++)t[i].fn.apply(t[i].ctx,data);return this},off:function(e,t){var n=this.e||(this.e={}),r=n[e],o=[];if(r&&t)for(var i=0,l=r.length;i<l;i++)r[i].fn!==t&&r[i].fn._!==t&&o.push(r[i]);return o.length?n[e]=o:delete n[e],this}},e.exports=t,e.exports.TinyEmitter=t}},t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}return n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n(134)}().default},e.exports=r()},237:function(e,t,n){(function(t){var n=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,n=0,r={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof o?new o(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function e(t,n){var o,l;switch(n=n||{},r.util.type(t)){case"Object":if(l=r.util.objId(t),n[l])return n[l];for(var c in o={},n[l]=o,t)t.hasOwnProperty(c)&&(o[c]=e(t[c],n));return o;case"Array":return l=r.util.objId(t),n[l]?n[l]:(o=[],n[l]=o,t.forEach((function(t,i){o[i]=e(t,n)})),o);default:return t}},getLanguage:function(element){for(;element&&!t.test(element.className);)element=element.parentElement;return element?(element.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(n){var e=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(n.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var i in t)if(t[i].src==e)return t[i]}return null}},isActive:function(element,e,t){for(var n="no-"+e;element;){var r=element.classList;if(r.contains(e))return!0;if(r.contains(n))return!1;element=element.parentElement}return!!t}},languages:{extend:function(e,t){var n=r.util.clone(r.languages[e]);for(var o in t)n[o]=t[o];return n},insertBefore:function(e,t,n,o){var l=(o=o||r.languages)[e],c={};for(var f in l)if(l.hasOwnProperty(f)){if(f==t)for(var d in n)n.hasOwnProperty(d)&&(c[d]=n[d]);n.hasOwnProperty(f)||(c[f]=l[f])}var h=o[e];return o[e]=c,r.languages.DFS(r.languages,(function(t,n){n===h&&t!=e&&(this[t]=c)})),c},DFS:function e(t,n,o,l){l=l||{};var c=r.util.objId;for(var i in t)if(t.hasOwnProperty(i)){n.call(t,i,t[i],o||i);var f=t[i],d=r.util.type(f);"Object"!==d||l[c(f)]?"Array"!==d||l[c(f)]||(l[c(f)]=!0,e(f,n,i,l)):(l[c(f)]=!0,e(f,n,null,l))}}},plugins:{},highlightAll:function(e,t){r.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var o={callback:n,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};r.hooks.run("before-highlightall",o),o.elements=Array.prototype.slice.apply(o.container.querySelectorAll(o.selector)),r.hooks.run("before-all-elements-highlight",o);for(var element,i=0;element=o.elements[i++];)r.highlightElement(element,!0===t,o.callback)},highlightElement:function(element,n,o){var l=r.util.getLanguage(element),c=r.languages[l];element.className=element.className.replace(t,"").replace(/\s+/g," ")+" language-"+l;var f=element.parentElement;f&&"pre"===f.nodeName.toLowerCase()&&(f.className=f.className.replace(t,"").replace(/\s+/g," ")+" language-"+l);var d={element:element,language:l,grammar:c,code:element.textContent};function h(e){d.highlightedCode=e,r.hooks.run("before-insert",d),d.element.innerHTML=d.highlightedCode,r.hooks.run("after-highlight",d),r.hooks.run("complete",d),o&&o.call(d.element)}if(r.hooks.run("before-sanity-check",d),!d.code)return r.hooks.run("complete",d),void(o&&o.call(d.element));if(r.hooks.run("before-highlight",d),d.grammar)if(n&&e.Worker){var v=new Worker(r.filename);v.onmessage=function(e){h(e.data)},v.postMessage(JSON.stringify({language:d.language,code:d.code,immediateClose:!0}))}else h(r.highlight(d.code,d.grammar,d.language));else h(r.util.encode(d.code))},highlight:function(text,e,t){var n={code:text,grammar:e,language:t};return r.hooks.run("before-tokenize",n),n.tokens=r.tokenize(n.code,n.grammar),r.hooks.run("after-tokenize",n),o.stringify(r.util.encode(n.tokens),n.language)},tokenize:function(text,e){var t=e.rest;if(t){for(var n in t)e[n]=t[n];delete e.rest}var r=new f;return d(r,r.head,text),c(text,r,e,r.head,0),function(e){var t=[],n=e.head.next;for(;n!==e.tail;)t.push(n.value),n=n.next;return t}(r)},hooks:{all:{},add:function(e,t){var n=r.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=r.hooks.all[e];if(n&&n.length)for(var o,i=0;o=n[i++];)o(t)}},Token:o};function o(e,content,t,n){this.type=e,this.content=content,this.alias=t,this.length=0|(n||"").length}function l(pattern,e,text,t){pattern.lastIndex=e;var n=pattern.exec(text);if(n&&t&&n[1]){var r=n[1].length;n.index+=r,n[0]=n[0].slice(r)}return n}function c(text,e,t,n,f,v){for(var m in t)if(t.hasOwnProperty(m)&&t[m]){var y=t[m];y=Array.isArray(y)?y:[y];for(var _=0;_<y.length;++_){if(v&&v.cause==m+","+_)return;var k=y[_],w=k.inside,x=!!k.lookbehind,F=!!k.greedy,S=k.alias;if(F&&!k.pattern.global){var A=k.pattern.toString().match(/[imsuy]*$/)[0];k.pattern=RegExp(k.pattern.source,A+"g")}for(var pattern=k.pattern||k,E=n.next,$=f;E!==e.tail&&!(v&&$>=v.reach);$+=E.value.length,E=E.next){var P=E.value;if(e.length>text.length)return;if(!(P instanceof o)){var j,C=1;if(F){if(!(j=l(pattern,$,text,x)))break;var z=j.index,O=j.index+j[0].length,p=$;for(p+=E.value.length;z>=p;)p+=(E=E.next).value.length;if($=p-=E.value.length,E.value instanceof o)continue;for(var T=E;T!==e.tail&&(p<O||"string"==typeof T.value);T=T.next)C++,p+=T.value.length;C--,P=text.slice($,p),j.index-=$}else if(!(j=l(pattern,0,P,x)))continue;z=j.index;var L=j[0],N=P.slice(0,z),M=P.slice(z+L.length),D=$+P.length;v&&D>v.reach&&(v.reach=D);var R=E.prev;N&&(R=d(e,R,N),$+=N.length),h(e,R,C),E=d(e,R,new o(m,w?r.tokenize(L,w):L,S,L)),M&&d(e,E,M),C>1&&c(text,e,t,E.prev,$,{cause:m+","+_,reach:D})}}}}}function f(){var head={value:null,prev:null,next:null},e={value:null,prev:head,next:null};head.next=e,this.head=head,this.tail=e,this.length=0}function d(e,t,n){var r=t.next,o={value:n,prev:t,next:r};return t.next=o,r.prev=o,e.length++,o}function h(e,t,n){for(var r=t.next,i=0;i<n&&r!==e.tail;i++)r=r.next;t.next=r,r.prev=t,e.length-=i}if(e.Prism=r,o.stringify=function e(t,n){if("string"==typeof t)return t;if(Array.isArray(t)){var s="";return t.forEach((function(t){s+=e(t,n)})),s}var o={type:t.type,content:e(t.content,n),tag:"span",classes:["token",t.type],attributes:{},language:n},l=t.alias;l&&(Array.isArray(l)?Array.prototype.push.apply(o.classes,l):o.classes.push(l)),r.hooks.run("wrap",o);var c="";for(var f in o.attributes)c+=" "+f+'="'+(o.attributes[f]||"").replace(/"/g,""")+'"';return"<"+o.tag+' class="'+o.classes.join(" ")+'"'+c+">"+o.content+"</"+o.tag+">"},!e.document)return e.addEventListener?(r.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var n=JSON.parse(t.data),o=n.language,code=n.code,l=n.immediateClose;e.postMessage(r.highlight(code,r.languages[o],o)),l&&e.close()}),!1),r):r;var script=r.util.currentScript();function v(){r.manual||r.highlightAll()}if(script&&(r.filename=script.src,script.hasAttribute("data-manual")&&(r.manual=!0)),!r.manual){var m=document.readyState;"loading"===m||"interactive"===m&&script&&script.defer?document.addEventListener("DOMContentLoaded",v):window.requestAnimationFrame?window.requestAnimationFrame(v):window.setTimeout(v,16)}return r}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=n),void 0!==t&&(t.Prism=n),n.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},n.languages.markup.tag.inside["attr-value"].inside.entity=n.languages.markup.entity,n.languages.markup.doctype.inside["internal-subset"].inside=n.languages.markup,n.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(n.languages.markup.tag,"addInlined",{value:function(e,t){var r={};r["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:n.languages[t]},r.cdata=/^<!\[CDATA\[|\]\]>$/i;var o={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:r}};o["language-"+t]={pattern:/[\s\S]+/,inside:n.languages[t]};var l={};l[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:o},n.languages.insertBefore("markup","cdata",l)}}),n.languages.html=n.languages.markup,n.languages.mathml=n.languages.markup,n.languages.svg=n.languages.markup,n.languages.xml=n.languages.extend("markup",{}),n.languages.ssml=n.languages.xml,n.languages.atom=n.languages.xml,n.languages.rss=n.languages.xml,function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:e.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},n.tag))}(n),n.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},n.languages.javascript=n.languages.extend("clike",{"class-name":[n.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)(?:catch|finally)\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|for|from|function|(?:get|set)(?=\s*[\[$\w\xA0-\uFFFF])|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),n.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,n.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:n.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:n.languages.javascript},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,inside:n.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:n.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:n.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),n.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:n.languages.javascript}},string:/[\s\S]+/}}}),n.languages.markup&&n.languages.markup.tag.addInlined("script","javascript"),n.languages.js=n.languages.javascript,function(){if("undefined"!=typeof self&&self.Prism&&self.document){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var e=window.Prism,t={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},n="data-src-status",r="loading",o="loaded",l='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])',c=/\blang(?:uage)?-([\w-]+)\b/i;e.hooks.add("before-highlightall",(function(e){e.selector+=", "+l})),e.hooks.add("before-sanity-check",(function(c){var pre=c.element;if(pre.matches(l)){c.code="",pre.setAttribute(n,r);var code=pre.appendChild(document.createElement("CODE"));code.textContent="Loading…";var f=pre.getAttribute("data-src"),h=c.language;if("none"===h){var v=(/\.(\w+)$/.exec(f)||[,"none"])[1];h=t[v]||v}d(code,h),d(pre,h);var m=e.plugins.autoloader;m&&m.loadLanguages(h);var y=new XMLHttpRequest;y.open("GET",f,!0),y.onreadystatechange=function(){var t,r;4==y.readyState&&(y.status<400&&y.responseText?(pre.setAttribute(n,o),code.textContent=y.responseText,e.highlightElement(code)):(pre.setAttribute(n,"failed"),y.status>=400?code.textContent=(t=y.status,r=y.statusText,"✖ Error "+t+" while fetching file: "+r):code.textContent="✖ Error: File does not exist or is empty"))},y.send(null)}})),e.plugins.fileHighlight={highlight:function(t){for(var element,n=(t||document).querySelectorAll(l),i=0;element=n[i++];)e.highlightElement(element)}};var f=!1;e.fileHighlight=function(){f||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),f=!0),e.plugins.fileHighlight.highlight.apply(this,arguments)}}function d(element,e){var t=element.className;t=t.replace(c," ")+" language-"+e,element.className=t.replace(/\s+/g," ").trim()}}()}).call(this,n(44))},238:function(e,t){!function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?!\n|\r\n?))/.source;function n(pattern){return pattern=pattern.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+pattern+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),l=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"font-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+l+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+l+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+l+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/``.+?``|`[^`\r\n]+`/,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~)<inner>)+?\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},url:{pattern:n(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var i=0,n=t.length;i<n;i++){var r=t[i];if("code"===r.type){var o=r.content[1],l=r.content[3];if(o&&l&&"code-language"===o.type&&"code-block"===l.type&&"string"==typeof o.content){var c=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),f="language-"+(c=(/[a-z][\w-]*/i.exec(c)||[""])[0].toLowerCase());l.alias?"string"==typeof l.alias?l.alias=[l.alias,f]:l.alias.push(f):l.alias=[f]}}else e(r.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var n="",i=0,r=t.classes.length;i<r;i++){var o=t.classes[i],l=/language-(.+)/.exec(o);if(l){n=l[1];break}}var c=e.languages[n];if(c){var code=t.content.replace(/</g,"<").replace(/&/g,"&");t.content=e.highlight(code,c,n)}else if(n&&"none"!==n&&e.plugins.autoloader){var f="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=f,e.plugins.autoloader.loadLanguages(n,(function(){var t=document.getElementById(f);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[n],n))}))}}})),e.languages.md=e.languages.markdown}(Prism)},239:function(e,t){!function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},keyword:/\b(?:abstract|as|asserts|async|await|break|case|catch|class|const|constructor|continue|debugger|declare|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|is|keyof|let|module|namespace|new|null|of|package|private|protected|public|readonly|return|require|set|static|super|switch|this|throw|try|type|typeof|undefined|var|void|while|with|yield)\b/,builtin:/\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/}),delete e.languages.typescript.parameter;var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(Prism)},240:function(e,t){Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var r={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:Prism.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},Prism.languages.insertBefore("markup","cdata",o)}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml},241:function(e,t){!function(e){var t=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),string:{pattern:t,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),e.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:e.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},n.tag))}(Prism)},242:function(e,t){!function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],o=[];/^\w+$/.test(n)||o.push(/\w+/.exec(n)[0]),"diff"===n&&o.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(Prism)},243:function(e,t){!function(){if("undefined"!=typeof Prism){var e=/^diff-([\w-]+)/i,t=/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi,n=RegExp(/(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))/.source.replace(/__/g,(function(){return t.source})),"gi"),r=!1;Prism.hooks.add("before-sanity-check",(function(t){var n=t.language;e.test(n)&&!t.grammar&&(t.grammar=Prism.languages[n]=Prism.languages.diff)})),Prism.hooks.add("before-tokenize",(function(t){r||Prism.languages.diff||Prism.plugins.autoloader||(r=!0,console.warn("Prism's Diff Highlight plugin requires the Diff language definition (prism-diff.js).Make sure the language definition is loaded or use Prism's Autoloader plugin."));var n=t.language;e.test(n)&&!Prism.languages[n]&&(Prism.languages[n]=Prism.languages.diff)})),Prism.hooks.add("wrap",(function(r){var o,l;if("diff"!==r.language){var c=e.exec(r.language);if(!c)return;o=c[1],l=Prism.languages[o]}var f=Prism.languages.diff&&Prism.languages.diff.PREFIXES;if(f&&r.type in f){var d,h=r.content.replace(t,"").replace(/</g,"<").replace(/&/g,"&"),code=h.replace(/(^|[\r\n])./g,"$1");d=l?Prism.highlight(code,l,o):Prism.util.encode(code);var v,m=new Prism.Token("prefix",f[r.type],[/\w+/.exec(r.type)[0]]),y=Prism.Token.stringify(m,r.language),_=[];for(n.lastIndex=0;v=n.exec(d);)_.push(y+v[0]);/(?:^|[\r\n]).$/.test(h)&&_.push(y),r.content=_.join(""),l&&r.classes.push("language-"+o)}}))}}()},245:function(e,t,n){"use strict";n(246)("link",(function(e){return function(t){return e(this,"a","href",t)}}))},246:function(e,t,n){var r=n(4),o=n(10),l=n(40),c=/"/g,f=function(e,t,n,r){var o=String(l(e)),f="<"+t;return""!==n&&(f+=" "+n+'="'+String(r).replace(c,""")+'"'),f+">"+o+"</"+t+">"};e.exports=function(e,t){var n={};n[e]=t(f),r(r.P+r.F*o((function(){var t=""[e]('"');return t!==t.toLowerCase()||t.split('"').length>3})),"String",n)}}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a09bb2b5a3ee6724fd5d.js b/handbook/_nuxt/js/a09bb2b5a3ee6724fd5d.js
deleted file mode 100644
index 093029a..0000000
--- a/handbook/_nuxt/js/a09bb2b5a3ee6724fd5d.js
+++ /dev/null
@@ -1 +0,0 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{248:function(t,e,n){var r=n(249),o=n(250),c=n(251),h=n(252),l=n(253);function f(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return y(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return y(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,h=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return c=t.done,t},e:function(t){h=!0,o=t},f:function(){try{c||null==n.return||n.return()}finally{if(h)throw o}}}}function y(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}n(20),n(24),n(28),n(42),n(31),n(21),n(65),n(254),n(255),n(22),n(15),n(17),n(16),n(27),n(25),n(26);var d=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return Object.keys(t).filter((function(t){return e.includes(t)})).reduce((function(e,n){return Object.assign(e,l({},n,t[n]))}),{})},v=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[];return Object.keys(t).filter((function(t){return!e.includes(t)})).reduce((function(e,n){return Object.assign(e,l({},n,t[n]))}),{})},m=function(){"use strict";function t(e,n){var r=e.query,path=e.path,o=e.init,text=e.text,h=e.postprocess,l=void 0===h?[]:h;c(this,t),this.query=r,this.path=path,this.init=o,this.postprocess=l,this.options=n||{},this.onlyKeys=null,this.withoutKeys=null,this.sortKeys=[],this.limitN=null,this.skipN=null,text||this.postprocess.unshift((function(data){return data.map((function(t){return v(t,["text"])}))}))}var e;return h(t,[{key:"only",value:function(t){return this.onlyKeys=Array.isArray(t)?t:[t],this}},{key:"without",value:function(t){return this.withoutKeys=Array.isArray(t)?t:[t],this}},{key:"sortBy",value:function(t,e){return this.sortKeys.push([t,"desc"===e]),this}},{key:"where",value:function(t){return this.query=this.query.find(t),this}},{key:"search",value:function(t,e){return t?(n="object"===o(t)?t:e?{query:{type:"match",field:t,value:e,prefix_length:1,fuzziness:1,extended:!0,minimum_should_match:1}}:{query:{type:"bool",should:this.options.fullTextSearchFields.map((function(e){return{type:"match",field:e,value:t,prefix_length:1,operator:"and",minimum_should_match:1,fuzziness:1,extended:!0}}))}},this.query=this.query.find({$fts:n}).sortByScoring(),this):this;var n}},{key:"surround",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.before,r=void 0===n?1:n,o=e.after,c=void 0===o?1:o,h=0===t.indexOf("/")?"path":"slug";this.onlyKeys&&this.onlyKeys.push(h),this.withoutKeys&&(this.withoutKeys=this.withoutKeys.filter((function(t){return t!==h})));var l=function(data){var e=data.findIndex((function(e){return e[h]===t})),n=new Array(r+c).fill(null,0);if(-1===e)return n;for(var o=data.slice(e-r,e),l=data.slice(e+1,e+1+c),f=0,i=r-1;i>=0;i--)n[i]=o[f]||null,f++;for(var y=0,d=r;d<=c;d++)n[d]=l[y]||null,y++;return n};return this.postprocess.push(l),this}},{key:"limit",value:function(t){return"string"==typeof t&&(t=parseInt(t)),this.limitN=t,this}},{key:"skip",value:function(t){return"string"==typeof t&&(t=parseInt(t)),this.skipN=t,this}},{key:"fetch",value:(e=r(regeneratorRuntime.mark((function t(){var data,e,n,r,o,c,h=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:this.sortKeys&&this.sortKeys.length&&(this.query=this.query.compoundsort(this.sortKeys)),this.skipN&&(this.query=this.query.offset(this.skipN)),this.limitN&&(this.query=this.query.limit(this.limitN)),data=this.query.data({removeMeta:!0}),this.onlyKeys&&(this.options.watch&&this.onlyKeys.push("path","extension"),e=function(data){return data.map((function(t){return d(t,h.onlyKeys)}))},this.postprocess.unshift(e)),this.withoutKeys&&(this.options.watch&&(this.withoutKeys=this.withoutKeys.filter((function(t){return!["path","extension"].includes(t)}))),n=function(data){return data.map((function(t){return v(t,h.withoutKeys)}))},this.postprocess.unshift(n)),r=f(this.postprocess);try{for(r.s();!(o=r.n()).done;)c=o.value,data=c(data)}catch(t){r.e(t)}finally{r.f()}if(data){t.next=10;break}throw new Error("".concat(this.path," not found"));case 10:return t.abrupt("return",JSON.parse(JSON.stringify(data)));case 11:case"end":return t.stop()}}),t,this)}))),function(){return e.apply(this,arguments)})}]),t}();t.exports=m},260:function(t,e,n){"use strict";n.r(e);var r=n(12),o=(n(16),n(27),n(25),n(15),n(26),n(32),n(65),n(109),n(248)),c=n.n(o),h=n(257),l=n.n(h),f=n(258);n.n(f).a.register();var y,d,v=["/","/en","/zh","/en/application","/en/basics","/en/best-practice","/en/concepts","/en/meta","/zh/application","/zh/basics","/zh/best-practice","/zh/concepts","/zh/meta","/en/application/chart-types","/en/application/cross-platform","/en/application/data","/en/application/interaction","/en/application/label","/en/basics/release-note","/en/best-practice/specification","/en/best-practice/design","/zh/application/chart-types","/zh/application/animation","/zh/application/data","/zh/application/cross-platform","/zh/application/label","/zh/application/interaction","/zh/basics/release-note","/zh/best-practice/design","/zh/best-practice/specification","/en/application/chart-types/bar","/en/application/chart-types/line","/en/application/chart-types/pie","/en/application/chart-types/scatter","/en/best-practice/specification/bar","/en/best-practice/specification/line","/en/best-practice/specification/pie","/en/best-practice/specification/scatter","/zh/application/chart-types/bar","/zh/application/chart-types/pie","/zh/application/chart-types/scatter","/zh/application/chart-types/line","/zh/best-practice/specification/bar","/zh/best-practice/specification/line","/zh/best-practice/specification/scatter","/zh/best-practice/specification/pie","/en/posts","/zh/posts"],m=function(){var t={},e=[];Array.from(arguments).forEach((function(n){"string"==typeof n?e.push(n):"object"===Object(r.a)(n)&&(t=n)}));var n=t,o=n.text,text=void 0!==o&&o,h=n.deep,l=void 0!==h&&h,path="/".concat(e.join("/").replace(/\/+/g,"/")),f=!path||!!v.find((function(t){return t===path})),y=f?{dir:l?{$regex:new RegExp("^".concat(path))}:path}:{path:path},m=f?[]:[function(data){return data[0]}];return new c.a({query:d.chain().find(y,!f),path:path,postprocess:m,text:text},{fullTextSearchFields:["title","description","slug","text"]})};e.default=function(t){return(y=new l.a("content.db")).loadJSONObject(t),d=y.getCollection("items"),m}}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a0d901b415da8e86775e.js b/handbook/_nuxt/js/a0d901b415da8e86775e.js
new file mode 100644
index 0000000..fa0af38
--- /dev/null
+++ b/handbook/_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 strict";n.d(e,"a",(function(){return o}));var r=n(72);function o(t,i){return function(t){if(Array.isArray(t))return t}(t)||function(t,i){var e=t&&("undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"]);if(null!=e){var n,r,o=[],c=!0,f=!1;try{for(e=e.call(t);!(c=(n=e.next()).done)&&(o.push(n.value),!i||o.length!==i);c=!0);}catch(t){f=!0,r=t}finally{try{c||null==e.return||e.return()}finally{if(f)throw r}}return o}}(t,i)||Object(r.a)(t,i)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},function(t,e,n){var r=n(6),o=n(29),c=n(30),f=n(14),l=n(32),d=function(t,e,source){var n,h,v,m,y=t&d.F,_=t&d.G,w=t&d.S,x=t&d.P,O=t&d.B,S=_?r:w?r[e]||(r[e]={}):(r[e]||{}).prototype,$=_?o:o[e]||(o[e]={}),k=$.prototype||($.prototype={});for(n in _&&(source=e),source)v=((h=!y&&S&&void 0!==S[n])?S:source)[n],m=O&&h?l(v,r):x&&"function"==typeof v?l(Function.call,v):v,S&&f(S,n,v,t&d.U),$[n]!=v&&c($,n,m),x&&k[n]!=v&&(k[n]=v)};r.core=o,d.F=1,d.G=2,d.S=4,d.P=8,d.B=16,d.W=32,d.U=64,d.R=128,t.exports=d},function(t,e,n){var r=n(62)("wks"),o=n(48),c=n(6).Symbol,f="function"==typeof c;(t.exports=function(t){return r[t]||(r[t]=f&&c[t]||(f?c:o)("Symbol."+t))}).store=r},function(t,e){var n=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(t,e,n){"use strict";function r(t,e,n,r,o,c,f,l){var d,h="function"==typeof t?t.options:t;if(e&&(h.render=e,h.staticRenderFns=n,h._compiled=!0),r&&(h.functional=!0),c&&(h._scopeId="data-v-"+c),f?(d=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(f)},h._ssrRegister=d):o&&(d=l?function(){o.call(this,(h.functional?this.parent:this).$root.$options.shadowRoot)}:o),d)if(h.functional){h._injectStyles=d;var v=h.render;h.render=function(t,e){return d.call(e),v(t,e)}}else{var m=h.beforeCreate;h.beforeCreate=m?[].concat(m,d):[d]}return{exports:t,options:h}}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(13);t.exports=function(t){if(!r(t))throw TypeError(t+" is not an object!");return t}},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,n){t.exports=!n(9)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(t,e,n){"use strict";function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}n.d(e,"a",(function(){return r}))},function(t,e,n){var r=n(8),o=n(104),c=n(61),f=Object.defineProperty;e.f=n(10)?Object.defineProperty:function(t,e,n){if(r(t),e=c(e,!0),r(n),o)try{return f(t,e,n)}catch(t){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(t[e]=n.value),t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,n){var r=n(6),o=n(30),c=n(31),f=n(48)("src"),l=n(143),d="toString",h=(""+l).split(d);n(29).inspectSource=function(t){return l.call(t)},(t.exports=function(t,e,n,l){var d="function"==typeof n;d&&(c(n,"name")||o(n,"name",e)),t[e]!==n&&(d&&(c(n,f)||o(n,f,t[e]?""+t[e]:h.join(String(e)))),t===r?t[e]=n:l?t[e]?t[e]=n:o(t,e,n):(delete t[e],o(t,e,n)))})(Function.prototype,d,(function(){return"function"==typeof this&&this[f]||l.call(this)}))},function(t,e,n){"use strict";function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";var r=n(66),o={};o[n(5)("toStringTag")]="z",o+""!="[object z]"&&n(14)(Object.prototype,"toString",(function(){return"[object "+r(this)+"]"}),!0)},function(t,e,n){"use strict";var r=n(6),o=n(31),c=n(10),f=n(4),l=n(14),d=n(76).KEY,h=n(9),v=n(62),m=n(51),y=n(48),_=n(5),w=n(106),x=n(144),O=n(145),S=n(109),$=n(8),k=n(13),A=n(40),C=n(24),E=n(61),T=n(47),j=n(65),I=n(147),M=n(54),N=n(64),P=n(12),L=n(39),R=M.f,F=P.f,D=I.f,U=r.Symbol,H=r.JSON,B=H&&H.stringify,V=_("_hidden"),z=_("toPrimitive"),K={}.propertyIsEnumerable,G=v("symbol-registry"),W=v("symbols"),J=v("op-symbols"),X=Object.prototype,Y="function"==typeof U&&!!N.f,Z=r.QObject,Q=!Z||!Z.prototype||!Z.prototype.findChild,tt=c&&h((function(){return 7!=j(F({},"a",{get:function(){return F(this,"a",{value:7}).a}})).a}))?function(t,e,n){var r=R(X,e);r&&delete X[e],F(t,e,n),r&&t!==X&&F(X,e,r)}:F,et=function(t){var e=W[t]=j(U.prototype);return e._k=t,e},nt=Y&&"symbol"==typeof U.iterator?function(t){return"symbol"==typeof t}:function(t){return t instanceof U},ot=function(t,e,n){return t===X&&ot(J,e,n),$(t),e=E(e,!0),$(n),o(W,e)?(n.enumerable?(o(t,V)&&t[V][e]&&(t[V][e]=!1),n=j(n,{enumerable:T(0,!1)})):(o(t,V)||F(t,V,T(1,{})),t[V][e]=!0),tt(t,e,n)):F(t,e,n)},it=function(t,e){$(t);for(var n,r=O(e=C(e)),i=0,o=r.length;o>i;)ot(t,n=r[i++],e[n]);return t},at=function(t){var e=K.call(this,t=E(t,!0));return!(this===X&&o(W,t)&&!o(J,t))&&(!(e||!o(this,t)||!o(W,t)||o(this,V)&&this[V][t])||e)},st=function(t,e){if(t=C(t),e=E(e,!0),t!==X||!o(W,e)||o(J,e)){var n=R(t,e);return!n||!o(W,e)||o(t,V)&&t[V][e]||(n.enumerable=!0),n}},ct=function(t){for(var e,n=D(C(t)),r=[],i=0;n.length>i;)o(W,e=n[i++])||e==V||e==d||r.push(e);return r},ut=function(t){for(var e,n=t===X,r=D(n?J:C(t)),c=[],i=0;r.length>i;)!o(W,e=r[i++])||n&&!o(X,e)||c.push(W[e]);return c};Y||(l((U=function(){if(this instanceof U)throw TypeError("Symbol is not a constructor!");var t=y(arguments.length>0?arguments[0]:void 0),e=function(n){this===X&&e.call(J,n),o(this,V)&&o(this[V],t)&&(this[V][t]=!1),tt(this,t,T(1,n))};return c&&Q&&tt(X,t,{configurable:!0,set:e}),et(t)}).prototype,"toString",(function(){return this._k})),M.f=st,P.f=ot,n(53).f=I.f=ct,n(52).f=at,N.f=ut,c&&!n(49)&&l(X,"propertyIsEnumerable",at,!0),w.f=function(t){return et(_(t))}),f(f.G+f.W+f.F*!Y,{Symbol:U});for(var ft="hasInstance,isConcatSpreadable,iterator,match,replace,search,species,split,toPrimitive,toStringTag,unscopables".split(","),lt=0;ft.length>lt;)_(ft[lt++]);for(var pt=L(_.store),ht=0;pt.length>ht;)x(pt[ht++]);f(f.S+f.F*!Y,"Symbol",{for:function(t){return o(G,t+="")?G[t]:G[t]=U(t)},keyFor:function(t){if(!nt(t))throw TypeError(t+" is not a symbol!");for(var e in G)if(G[e]===t)return e},useSetter:function(){Q=!0},useSimple:function(){Q=!1}}),f(f.S+f.F*!Y,"Object",{create:function(t,e){return void 0===e?j(t):it(j(t),e)},defineProperty:ot,defineProperties:it,getOwnPropertyDescriptor:st,getOwnPropertyNames:ct,getOwnPropertySymbols:ut});var vt=h((function(){N.f(1)}));f(f.S+f.F*vt,"Object",{getOwnPropertySymbols:function(t){return N.f(A(t))}}),H&&f(f.S+f.F*(!Y||h((function(){var t=U();return"[null]"!=B([t])||"{}"!=B({a:t})||"{}"!=B(Object(t))}))),"JSON",{stringify:function(t){for(var e,n,r=[t],i=1;arguments.length>i;)r.push(arguments[i++]);if(n=e=r[1],(k(e)||void 0!==t)&&!nt(t))return S(e)||(e=function(t,e){if("function"==typeof n&&(e=n.call(this,t,e)),!nt(e))return e}),r[1]=e,B.apply(H,r)}}),U.prototype[z]||n(30)(U.prototype,z,U.prototype.valueOf),m(U,"Symbol"),m(Math,"Math",!0),m(r.JSON,"JSON",!0)},function(t,e,n){"use strict";n.d(e,"a",(function(){return lt})),n.d(e,"b",(function(){return ct})),n.d(e,"c",(function(){return ft})),n.d(e,"d",(function(){return at})),n.d(e,"e",(function(){return et}));n(20),n(17),n(34),n(27),n(28),n(42),n(43);var r=n(3),o=n(11),c=n(15);function f(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}n(71),n(36),n(60),n(22),n(35),n(123),n(70),n(139),n(23),n(25),n(16),n(95),n(96);function d(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(object);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,n)}return e}function h(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?d(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):d(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function v(t,e){var n="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!n){if(Array.isArray(t)||(n=function(t,e){if(!t)return;if("string"==typeof t)return m(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);"Object"===n&&t.constructor&&(n=t.constructor.name);if("Map"===n||"Set"===n)return Array.from(t);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return m(t,e)}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,f=!1;return{s:function(){n=n.call(t)},n:function(){var t=n.next();return c=t.done,t},e:function(t){f=!0,o=t},f:function(){try{c||null==n.return||n.return()}finally{if(f)throw o}}}}function m(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var y=/[^\0-\x7E]/,_=/[\x2E\u3002\uFF0E\uFF61]/g,w={overflow:"Overflow Error","not-basic":"Illegal Input","invalid-input":"Invalid Input"},x=Math.floor,O=String.fromCharCode;function s(t){throw new RangeError(w[t])}var S=function(t,e){return t+22+75*(t<26)-((0!=e)<<5)},u=function(t,e,n){var r=0;for(t=n?x(t/700):t>>1,t+=x(t/e);t>455;r+=36)t=x(t/35);return x(r+36*t/(t+38))};function $(t){return n=(e=t).split("@"),r="",n.length>1&&(r=n[0]+"@",e=n[1]),r+function(t,e){for(var n=[],r=t.length;r--;)n[r]=e(t[r]);return n}((e=e.replace(_,".")).split("."),(function(t){return y.test(t)?"xn--"+function(t){var e,n=[],r=(t=function(t){for(var e=[],n=0,r=t.length;n<r;){var o=t.charCodeAt(n++);if(o>=55296&&o<=56319&&n<r){var c=t.charCodeAt(n++);56320==(64512&c)?e.push(((1023&o)<<10)+(1023&c)+65536):(e.push(o),n--)}else e.push(o)}return e}(t)).length,o=128,i=0,c=72,f=v(t);try{for(f.s();!(e=f.n()).done;){var l=e.value;l<128&&n.push(O(l))}}catch(t){f.e(t)}finally{f.f()}var d=n.length,p=d;for(d&&n.push("-");p<r;){var h,m=2147483647,y=v(t);try{for(y.s();!(h=y.n()).done;){var _=h.value;_>=o&&_<m&&(m=_)}}catch(t){y.e(t)}finally{y.f()}var a=p+1;m-o>x((2147483647-i)/a)&&s("overflow"),i+=(m-o)*a,o=m;var w,$=v(t);try{for($.s();!(w=$.n()).done;){var k=w.value;if(k<o&&++i>2147483647&&s("overflow"),k==o){for(var A=i,C=36;;C+=36){var E=C<=c?1:C>=c+26?26:C-c;if(A<E)break;var T=A-E,j=36-E;n.push(O(S(E+T%j,0))),A=x(T/j)}n.push(O(S(A,0))),c=u(i,a,p==d),i=0,++p}}}catch(t){$.e(t)}finally{$.f()}++i,++o}return n.join("")}(t):t})).join(".");var e,n,r}var k=/#/g,A=/&/g,C=/=/g,E=/\?/g,T=/\+/g,j=/%5B/g,I=/%5D/g,M=/%5E/g,N=/%60/g,P=/%7B/g,L=/%7C/g,R=/%7D/g,F=/%20/g,D=/%2F/g,U=/%252F/g;function H(text){return encodeURI(""+text).replace(L,"|").replace(j,"[").replace(I,"]")}function B(text){return H(text).replace(T,"%2B").replace(F,"+").replace(k,"%23").replace(A,"%26").replace(N,"`").replace(P,"{").replace(R,"}").replace(M,"^")}function V(text){return B(text).replace(C,"%3D")}function z(text){return H(text).replace(k,"%23").replace(E,"%3F").replace(U,"%2F")}function K(){var text=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";try{return decodeURIComponent(""+text)}catch(t){return""+text}}function G(text){return K(text.replace(D,"%252F"))}function W(text){return K(text.replace(T," "))}function J(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return $(t)}function X(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",e={};"?"===t[0]&&(t=t.substr(1));var n,r=v(t.split("&"));try{for(r.s();!(n=r.n()).done;){var param=n.value,o=param.match(/([^=]+)=?(.*)/)||[];if(!(o.length<2)){var c=K(o[1]);if("__proto__"!==c&&"constructor"!==c){var f=W(o[2]||"");e[c]?Array.isArray(e[c])?e[c].push(f):e[c]=[e[c],f]:e[c]=f}}}}catch(t){r.e(t)}finally{r.f()}return e}function Y(t){return Object.keys(t).map((function(e){return n=e,(r=t[e])?Array.isArray(r)?r.map((function(t){return"".concat(V(n),"=").concat(B(t))})).join("&"):"".concat(V(n),"=").concat(B(r)):V(n);var n,r})).join("&")}var Z=function(){function t(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if(f(this,t),this.query={},"string"!=typeof input)throw new TypeError("URL input should be string received ".concat(Object(c.a)(input)," (").concat(input,")"));var e=pt(input);this.protocol=K(e.protocol),this.host=K(e.host),this.auth=K(e.auth),this.pathname=G(e.pathname),this.query=X(e.search),this.hash=K(e.hash)}var e,n,r;return e=t,(n=[{key:"hostname",get:function(){return mt(this.host).hostname}},{key:"port",get:function(){return mt(this.host).port||""}},{key:"username",get:function(){return vt(this.auth).username}},{key:"password",get:function(){return vt(this.auth).password||""}},{key:"hasProtocol",get:function(){return this.protocol.length}},{key:"isAbsolute",get:function(){return this.hasProtocol||"/"===this.pathname[0]}},{key:"search",get:function(){var q=Y(this.query);return q.length?"?"+q:""}},{key:"searchParams",get:function(){var t=this,p=new URLSearchParams,e=function(e){var n=t.query[e];Array.isArray(n)?n.forEach((function(t){return p.append(e,t)})):p.append(e,n||"")};for(var n in this.query)e(n);return p}},{key:"origin",get:function(){return(this.protocol?this.protocol+"//":"")+J(this.host)}},{key:"fullpath",get:function(){return z(this.pathname)+this.search+H(this.hash).replace(P,"{").replace(R,"}").replace(M,"^")}},{key:"encodedAuth",get:function(){if(!this.auth)return"";var t=vt(this.auth),e=t.username,n=t.password;return encodeURIComponent(e)+(n?":"+encodeURIComponent(n):"")}},{key:"href",get:function(){var t=this.encodedAuth,e=(this.protocol?this.protocol+"//":"")+(t?t+"@":"")+J(this.host);return this.hasProtocol&&this.isAbsolute?e+this.fullpath:this.fullpath}},{key:"append",value:function(t){if(t.hasProtocol)throw new Error("Cannot append a URL with protocol");Object.assign(this.query,t.query),t.pathname&&(this.pathname=nt(this.pathname)+it(t.pathname)),t.hash&&(this.hash=t.hash)}},{key:"toJSON",value:function(){return this.href}},{key:"toString",value:function(){return this.href}}])&&l(e.prototype,n),r&&l(e,r),t}();function Q(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return/^\w+:\/\/.+/.test(t)||e&&/^\/\/[^/]+/.test(t)}function tt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.endsWith("/")}function et(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(tt(input)?input.slice(0,-1):input)||"/"}function nt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.endsWith("/")?input:input+"/"}function ot(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return input.startsWith("/")}function it(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(ot(input)?input.substr(1):input)||"/"}function at(input,t){var e=pt(input),n=h(h({},X(e.search)),t);return e.search=Y(n),function(t){var e=t.pathname+(t.search?"?"+t.search:"")+t.hash;if(!t.protocol)return e;return t.protocol+"//"+(t.auth?t.auth+"@":"")+t.host+e}(e)}function st(t){return t&&"/"!==t}function ct(base){for(var t=base||"",e=arguments.length,input=new Array(e>1?e-1:0),n=1;n<e;n++)input[n-1]=arguments[n];var r,o=v(input.filter(st));try{for(o.s();!(r=o.n()).done;){var i=r.value;t=t?nt(t)+it(i):i}}catch(t){o.e(t)}finally{o.f()}return t}function ut(input){return new Z(input)}function ft(input){return ut(input).toString()}function lt(t,e){return K(et(t))===K(et(e))}function pt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1?arguments[1]:void 0;if(!Q(input,!0))return t?pt(t+input):ht(input);var e=(input.match(/([^:/]+:)?\/\/([^/@]+@)?(.*)/)||[]).splice(1),n=Object(r.a)(e,3),o=n[0],c=void 0===o?"":o,f=n[1],l=n[2],d=(l.match(/([^/]*)(.*)?/)||[]).splice(1),h=Object(r.a)(d,2),v=h[0],m=void 0===v?"":v,y=h[1],path=void 0===y?"":y,_=ht(path),w=_.pathname,x=_.search,O=_.hash;return{protocol:c,auth:f?f.substr(0,f.length-1):"",host:m,pathname:w,search:x,hash:O}}function ht(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=(input.match(/([^#?]*)(\?[^#]*)?(#.*)?/)||[]).splice(1),e=Object(r.a)(t,3),n=e[0],o=void 0===n?"":n,c=e[1],f=void 0===c?"":c,l=e[2],d=void 0===l?"":l;return{pathname:o,search:f,hash:d}}function vt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=input.split(":"),e=Object(r.a)(t,2),n=e[0],o=e[1];return{username:K(n),password:K(o)}}function mt(){var input=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=(input.match(/([^/]*)(:0-9+)?/)||[]).splice(1),e=Object(r.a)(t,2),n=e[0],o=e[1];return{hostname:K(n),port:o}}},function(t,e,n){var r=n(50),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e,n){var r=n(12).f,o=Function.prototype,c=/^\s*function ([^ (]*)/,f="name";f in o||n(10)&&r(o,f,{configurable:!0,get:function(){try{return(""+this).match(c)[1]}catch(t){return""}}})},function(t,e,n){var r=function(t){"use strict";var e,n=Object.prototype,r=n.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},c=o.iterator||"@@iterator",f=o.asyncIterator||"@@asyncIterator",l=o.toStringTag||"@@toStringTag";function d(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{d({},"")}catch(t){d=function(t,e,n){return t[e]=n}}function h(t,e,n,r){var o=e&&e.prototype instanceof O?e:O,c=Object.create(o.prototype),f=new P(r||[]);return c._invoke=function(t,e,n){var r=m;return function(o,c){if(r===_)throw new Error("Generator is already running");if(r===w){if("throw"===o)throw c;return R()}for(n.method=o,n.arg=c;;){var f=n.delegate;if(f){var l=I(f,n);if(l){if(l===x)continue;return l}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(r===m)throw r=w,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r=_;var d=v(t,e,n);if("normal"===d.type){if(r=n.done?w:y,d.arg===x)continue;return{value:d.arg,done:n.done}}"throw"===d.type&&(r=w,n.method="throw",n.arg=d.arg)}}}(t,n,f),c}function v(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=h;var m="suspendedStart",y="suspendedYield",_="executing",w="completed",x={};function O(){}function S(){}function $(){}var k={};k[c]=function(){return this};var A=Object.getPrototypeOf,C=A&&A(A(L([])));C&&C!==n&&r.call(C,c)&&(k=C);var E=$.prototype=O.prototype=Object.create(k);function T(t){["next","throw","return"].forEach((function(e){d(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function n(o,c,f,l){var d=v(t[o],t,c);if("throw"!==d.type){var h=d.arg,m=h.value;return m&&"object"==typeof m&&r.call(m,"__await")?e.resolve(m.__await).then((function(t){n("next",t,f,l)}),(function(t){n("throw",t,f,l)})):e.resolve(m).then((function(t){h.value=t,f(h)}),(function(t){return n("throw",t,f,l)}))}l(d.arg)}var o;this._invoke=function(t,r){function c(){return new e((function(e,o){n(t,r,e,o)}))}return o=o?o.then(c,c):c()}}function I(t,n){var r=t.iterator[n.method];if(r===e){if(n.delegate=null,"throw"===n.method){if(t.iterator.return&&(n.method="return",n.arg=e,I(t,n),"throw"===n.method))return x;n.method="throw",n.arg=new TypeError("The iterator does not provide a 'throw' method")}return x}var o=v(r,t.iterator,n.arg);if("throw"===o.type)return n.method="throw",n.arg=o.arg,n.delegate=null,x;var c=o.arg;return c?c.done?(n[t.resultName]=c.value,n.next=t.nextLoc,"return"!==n.method&&(n.method="next",n.arg=e),n.delegate=null,x):c:(n.method="throw",n.arg=new TypeError("iterator result is not an object"),n.delegate=null,x)}function M(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function N(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function P(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(M,this),this.reset(!0)}function L(t){if(t){var n=t[c];if(n)return n.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var i=-1,o=function n(){for(;++i<t.length;)if(r.call(t,i))return n.value=t[i],n.done=!1,n;return n.value=e,n.done=!0,n};return o.next=o}}return{next:R}}function R(){return{value:e,done:!0}}return S.prototype=E.constructor=$,$.constructor=S,S.displayName=d($,l,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===S||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,$):(t.__proto__=$,d(t,l,"GeneratorFunction")),t.prototype=Object.create(E),t},t.awrap=function(t){return{__await:t}},T(j.prototype),j.prototype[f]=function(){return this},t.AsyncIterator=j,t.async=function(e,n,r,o,c){void 0===c&&(c=Promise);var f=new j(h(e,n,r,o),c);return t.isGeneratorFunction(n)?f:f.next().then((function(t){return t.done?t.value:f.next()}))},T(E),d(E,l,"Generator"),E[c]=function(){return this},E.toString=function(){return"[object Generator]"},t.keys=function(object){var t=[];for(var e in object)t.push(e);return t.reverse(),function e(){for(;t.length;){var n=t.pop();if(n in object)return e.value=n,e.done=!1,e}return e.done=!0,e}},t.values=L,P.prototype={constructor:P,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(N),!t)for(var n in this)"t"===n.charAt(0)&&r.call(this,n)&&!isNaN(+n.slice(1))&&(this[n]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var n=this;function o(r,o){return f.type="throw",f.arg=t,n.next=r,o&&(n.method="next",n.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var c=this.tryEntries[i],f=c.completion;if("root"===c.tryLoc)return o("end");if(c.tryLoc<=this.prev){var l=r.call(c,"catchLoc"),d=r.call(c,"finallyLoc");if(l&&d){if(this.prev<c.catchLoc)return o(c.catchLoc,!0);if(this.prev<c.finallyLoc)return o(c.finallyLoc)}else if(l){if(this.prev<c.catchLoc)return o(c.catchLoc,!0)}else{if(!d)throw new Error("try statement without catch or finally");if(this.prev<c.finallyLoc)return o(c.finallyLoc)}}}},abrupt:function(t,e){for(var i=this.tryEntries.length-1;i>=0;--i){var n=this.tryEntries[i];if(n.tryLoc<=this.prev&&r.call(n,"finallyLoc")&&this.prev<n.finallyLoc){var o=n;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var c=o?o.completion:{};return c.type=t,c.arg=e,o?(this.method="next",this.next=o.finallyLoc,x):this.complete(c)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),x},finish:function(t){for(var i=this.tryEntries.length-1;i>=0;--i){var e=this.tryEntries[i];if(e.finallyLoc===t)return this.complete(e.completion,e.afterLoc),N(e),x}},catch:function(t){for(var i=this.tryEntries.length-1;i>=0;--i){var e=this.tryEntries[i];if(e.tryLoc===t){var n=e.completion;if("throw"===n.type){var r=n.arg;N(e)}return r}}throw new Error("illegal catch attempt")},delegateYield:function(t,n,r){return this.delegate={iterator:L(t),resultName:n,nextLoc:r},"next"===this.method&&(this.arg=e),x}},t}(t.exports);try{regeneratorRuntime=r}catch(t){Function("r","regeneratorRuntime = r")(r)}},function(t,e,n){"use strict";var r=n(4),o=n(88)(1);r(r.P+r.F*!n(119)([].map,!0),"Array",{map:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(4),html=n(75),o=n(33),c=n(105),f=n(19),l=[].slice;r(r.P+r.F*n(9)((function(){html&&l.call(html)})),"Array",{slice:function(t,e){var n=f(this.length),r=o(this);if(e=void 0===e?n:e,"Array"==r)return l.call(this,t,e);for(var d=c(t,n),h=c(e,n),v=f(h-d),m=new Array(v),i=0;i<v;i++)m[i]="String"==r?this.charAt(d+i):this[d+i];return m}})},function(t,e,n){var r=n(77),o=n(38);t.exports=function(t){return r(o(t))}},function(t,e,n){"use strict";var r=n(4),o=n(88)(2);r(r.P+r.F*!n(119)([].filter,!0),"Array",{filter:function(t){return o(this,t,arguments[1])}})},,function(t,e,n){"use strict";var r=n(121)(!0);n(82)(String,"String",(function(t){this._t=String(t),this._i=0}),(function(){var t,e=this._t,n=this._i;return n>=e.length?{value:void 0,done:!0}:(t=r(e,n),this._i+=t.length,{value:t,done:!1})}))},function(t,e,n){for(var r=n(114),o=n(39),c=n(14),f=n(6),l=n(30),d=n(55),h=n(5),v=h("iterator"),m=h("toStringTag"),y=d.Array,_={CSSRuleList:!0,CSSStyleDeclaration:!1,CSSValueList:!1,ClientRectList:!1,DOMRectList:!1,DOMStringList:!1,DOMTokenList:!0,DataTransferItemList:!1,FileList:!1,HTMLAllCollection:!1,HTMLCollection:!1,HTMLFormElement:!1,HTMLSelectElement:!1,MediaList:!0,MimeTypeArray:!1,NamedNodeMap:!1,NodeList:!0,PaintRequestList:!1,Plugin:!1,PluginArray:!1,SVGLengthList:!1,SVGNumberList:!1,SVGPathSegList:!1,SVGPointList:!1,SVGStringList:!1,SVGTransformList:!1,SourceBufferList:!1,StyleSheetList:!0,TextTrackCueList:!1,TextTrackList:!1,TouchList:!1},w=o(_),i=0;i<w.length;i++){var x,O=w[i],S=_[O],$=f[O],k=$&&$.prototype;if(k&&(k[v]||l(k,v,y),k[m]||l(k,m,O),d[O]=y,S))for(x in r)k[x]||c(k,x,r[x],!0)}},function(t,e){var n=t.exports={version:"2.6.12"};"number"==typeof __e&&(__e=n)},function(t,e,n){var r=n(12),o=n(47);t.exports=n(10)?function(object,t,e){return r.f(object,t,o(1,e))}:function(object,t,e){return object[t]=e,object}},function(t,e){var n={}.hasOwnProperty;t.exports=function(t,e){return n.call(t,e)}},function(t,e,n){var r=n(63);t.exports=function(t,e,n){if(r(t),void 0===e)return t;switch(n){case 1:return function(a){return t.call(e,a)};case 2:return function(a,b){return t.call(e,a,b)};case 3:return function(a,b,n){return t.call(e,a,b,n)}}return function(){return t.apply(e,arguments)}}},function(t,e){var n={}.toString;t.exports=function(t){return n.call(t).slice(8,-1)}},function(t,e,n){"use strict";var r=n(32),o=n(4),c=n(40),f=n(110),l=n(111),d=n(19),h=n(112),v=n(113);o(o.S+o.F*!n(80)((function(t){Array.from(t)})),"Array",{from:function(t){var e,n,o,m,y=c(t),_="function"==typeof this?this:Array,w=arguments.length,x=w>1?arguments[1]:void 0,O=void 0!==x,S=0,$=v(y);if(O&&(x=r(x,w>2?arguments[2]:void 0,2)),null==$||_==Array&&l($))for(n=new _(e=d(y.length));e>S;S++)h(n,S,O?x(y[S],S):y[S]);else for(m=$.call(y),n=new _;!(o=m.next()).done;S++)h(n,S,O?f(m,x,[o.value,S],!0):o.value);return n.length=S,n}})},function(t,e,n){var r=n(40),o=n(39);n(120)("keys",(function(){return function(t){return o(r(t))}}))},function(t,e,n){"use strict";var r=n(8),o=n(40),c=n(19),f=n(50),l=n(92),d=n(67),h=Math.max,v=Math.min,m=Math.floor,y=/\$([$&`']|\d\d?|<[^>]*>)/g,_=/\$([$&`']|\d\d?)/g;n(68)("replace",2,(function(t,e,n,w){return[function(r,o){var c=t(this),f=null==r?void 0:r[e];return void 0!==f?f.call(r,c,o):n.call(String(c),r,o)},function(t,e){var o=w(n,t,this,e);if(o.done)return o.value;var m=r(t),y=String(this),_="function"==typeof e;_||(e=String(e));var O=m.global;if(O){var S=m.unicode;m.lastIndex=0}for(var $=[];;){var k=d(m,y);if(null===k)break;if($.push(k),!O)break;""===String(k[0])&&(m.lastIndex=l(y,c(m.lastIndex),S))}for(var A,C="",E=0,i=0;i<$.length;i++){k=$[i];for(var T=String(k[0]),j=h(v(f(k.index),y.length),0),I=[],M=1;M<k.length;M++)I.push(void 0===(A=k[M])?A:String(A));var N=k.groups;if(_){var P=[T].concat(I,j,y);void 0!==N&&P.push(N);var L=String(e.apply(void 0,P))}else L=x(T,y,j,I,N,e);j>=E&&(C+=y.slice(E,j)+L,E=j+T.length)}return C+y.slice(E)}];function x(t,e,r,c,f,l){var d=r+t.length,h=c.length,v=_;return void 0!==f&&(f=o(f),v=y),n.call(l,v,(function(n,o){var l;switch(o.charAt(0)){case"$":return"$";case"&":return t;case"`":return e.slice(0,r);case"'":return e.slice(d);case"<":l=f[o.slice(1,-1)];break;default:var v=+o;if(0===v)return n;if(v>h){var y=m(v/10);return 0===y?n:y<=h?void 0===c[y-1]?o.charAt(1):c[y-1]+o.charAt(1):n}l=c[v-1]}return void 0===l?"":l}))}}))},function(t,e,n){"use strict";var r=n(4),o=n(108)(!0);r(r.P,"Array",{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),n(81)("includes")},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e,n){var r=n(107),o=n(79);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(38);t.exports=function(t){return Object(r(t))}},function(t,e,n){"use strict";var r=n(4),o=n(89),c="includes";r(r.P+r.F*n(91)(c),"String",{includes:function(t){return!!~o(this,t,c).indexOf(t,arguments.length>1?arguments[1]:void 0)}})},function(t,e,n){var r=n(24),o=n(54).f;n(120)("getOwnPropertyDescriptor",(function(){return function(t,e){return o(r(t),e)}}))},function(t,e,n){var r=n(4),o=n(160),c=n(24),f=n(54),l=n(112);r(r.S,"Object",{getOwnPropertyDescriptors:function(object){for(var t,desc,e=c(object),n=f.f,r=o(e),d={},i=0;r.length>i;)void 0!==(desc=n(e,t=r[i++]))&&l(d,t,desc);return d}})},function(t,e){var g;g=function(){return this}();try{g=g||new Function("return this")()}catch(t){"object"==typeof window&&(g=window)}t.exports=g},,,function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e){t.exports=!1},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(12).f,o=n(31),c=n(5)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,c)&&r(t,c,{configurable:!0,value:e})}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(107),o=n(79).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return r(t,o)}},function(t,e,n){var r=n(52),o=n(47),c=n(24),f=n(61),l=n(31),d=n(104),h=Object.getOwnPropertyDescriptor;e.f=n(10)?h:function(t,e){if(t=c(t),e=f(e,!0),d)try{return h(t,e)}catch(t){}if(l(t,e))return o(!r.f.call(t,e),t[e])}},function(t,e){t.exports={}},,function(t,e,n){"use strict";function r(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";(function(t){var r=n(132),o=n.n(r);function c(t){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function f(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function l(t,e){var n;if("undefined"==typeof Symbol||null==t[Symbol.iterator]){if(Array.isArray(t)||(n=function(t,e){if(t){if("string"==typeof t)return f(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?f(t,e):void 0}}(t))||e&&t&&"number"==typeof t.length){n&&(t=n);var i=0,r=function(){};return{s:r,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:r}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){n=t[Symbol.iterator]()},n:function(){var t=n.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==n.return||n.return()}finally{if(l)throw o}}}}function d(t){return Array.isArray(t)}function h(t){return void 0===t}function v(t){return"object"===c(t)}function m(t){return"object"===c(t)&&null!==t}function y(t){return"function"==typeof t}var _=(function(){try{return!h(window)}catch(t){return!1}}()?window:t).console||{};function w(t){_&&_.warn&&_.warn(t)}var x=function(t){return w("".concat(t," is not supported in browser builds"))},O={title:void 0,titleChunk:"",titleTemplate:"%s",htmlAttrs:{},bodyAttrs:{},headAttrs:{},base:[],link:[],meta:[],style:[],script:[],noscript:[],__dangerouslyDisableSanitizers:[],__dangerouslyDisableSanitizersByTagID:{}},S="metaInfo",$="data-vue-meta",k="data-vue-meta-server-rendered",A="vmid",C="content",E="template",T=!0,j=10,I="ssr",M=Object.keys(O),N=[M[12],M[13]],P=[M[1],M[2],"changed"].concat(N),L=[M[3],M[4],M[5]],R=["link","style","script"],F=["once","skip","template"],D=["body","pbody"],U=["allowfullscreen","amp","amp-boilerplate","async","autofocus","autoplay","checked","compact","controls","declare","default","defaultchecked","defaultmuted","defaultselected","defer","disabled","enabled","formnovalidate","hidden","indeterminate","inert","ismap","itemscope","loop","multiple","muted","nohref","noresize","noshade","novalidate","nowrap","open","pauseonexit","readonly","required","reversed","scoped","seamless","selected","sortable","truespeed","typemustmatch","visible"],H=null;function B(t,e,n){var r=t.debounceWait;e._vueMeta.initialized||!e._vueMeta.initializing&&"watcher"!==n||(e._vueMeta.initialized=null),e._vueMeta.initialized&&!e._vueMeta.pausing&&function(t,e){if(!(e=void 0===e?10:e))return void t();clearTimeout(H),H=setTimeout((function(){t()}),e)}((function(){e.$meta().refresh()}),r)}function V(t,e,n){if(!Array.prototype.findIndex){for(var r=0;r<t.length;r++)if(e.call(n,t[r],r,t))return r;return-1}return t.findIndex(e,n)}function z(t){return Array.from?Array.from(t):Array.prototype.slice.call(t)}function K(t,e){if(!Array.prototype.includes){for(var n in t)if(t[n]===e)return!0;return!1}return t.includes(e)}var G=function(t,e){return(e||document).querySelectorAll(t)};function W(t,e){return t[e]||(t[e]=document.getElementsByTagName(e)[0]),t[e]}function J(t,e,n){var r=e.appId,o=e.attribute,c=e.type,f=e.tagIDKeyName;n=n||{};var l=["".concat(c,"[").concat(o,'="').concat(r,'"]'),"".concat(c,"[data-").concat(f,"]")].map((function(t){for(var e in n){var r=n[e],o=r&&!0!==r?'="'.concat(r,'"'):"";t+="[data-".concat(e).concat(o,"]")}return t}));return z(G(l.join(", "),t))}function X(t,e){t.removeAttribute(e)}function Y(t){return(t=t||this)&&(!0===t._vueMeta||v(t._vueMeta))}function Z(t,e){return t._vueMeta.pausing=!0,function(){return Q(t,e)}}function Q(t,e){if(t._vueMeta.pausing=!1,e||void 0===e)return t.$meta().refresh()}function tt(t){var e=t.$router;!t._vueMeta.navGuards&&e&&(t._vueMeta.navGuards=!0,e.beforeEach((function(e,n,r){Z(t),r()})),e.afterEach((function(){t.$nextTick((function(){var e=Q(t).metaInfo;e&&y(e.afterNavigation)&&e.afterNavigation(e)}))})))}var et=1;function nt(t,e){var n=["activated","deactivated","beforeMount"],r=!1;return{beforeCreate:function(){var o=this,c=this.$root,f=this.$options,l=t.config.devtools;if(Object.defineProperty(this,"_hasMetaInfo",{configurable:!0,get:function(){return l&&!c._vueMeta.deprecationWarningShown&&(w("VueMeta DeprecationWarning: _hasMetaInfo has been deprecated and will be removed in a future version. Please use hasMetaInfo(vm) instead"),c._vueMeta.deprecationWarningShown=!0),Y(this)}}),this===c&&c.$once("hook:beforeMount",(function(){if(!(r=this.$el&&1===this.$el.nodeType&&this.$el.hasAttribute("data-server-rendered"))&&c._vueMeta&&1===c._vueMeta.appId){var t=W({},"html");r=t&&t.hasAttribute(e.ssrAttribute)}})),!h(f[e.keyName])&&null!==f[e.keyName]){if(c._vueMeta||(c._vueMeta={appId:et},et++,l&&c.$options[e.keyName]&&this.$nextTick((function(){var t=function(t,e,n){if(Array.prototype.find)return t.find(e,n);for(var r=0;r<t.length;r++)if(e.call(n,t[r],r,t))return t[r]}(c.$children,(function(t){return t.$vnode&&t.$vnode.fnOptions}));t&&t.$vnode.fnOptions[e.keyName]&&w("VueMeta has detected a possible global mixin which adds a ".concat(e.keyName," property to all Vue components on the page. This could cause severe performance issues. If possible, use $meta().addApp to add meta information instead"))}))),!this._vueMeta){this._vueMeta=!0;for(var d=this.$parent;d&&d!==c;)h(d._vueMeta)&&(d._vueMeta=!1),d=d.$parent}y(f[e.keyName])&&(f.computed=f.computed||{},f.computed.$metaInfo=f[e.keyName],this.$isServer||this.$on("hook:created",(function(){this.$watch("$metaInfo",(function(){B(e,this.$root,"watcher")}))}))),h(c._vueMeta.initialized)&&(c._vueMeta.initialized=this.$isServer,c._vueMeta.initialized||(c._vueMeta.initializedSsr||(c._vueMeta.initializedSsr=!0,this.$on("hook:beforeMount",(function(){var t=this.$root;r&&(t._vueMeta.appId=e.ssrAppId)}))),this.$on("hook:mounted",(function(){var t=this.$root;t._vueMeta.initialized||(t._vueMeta.initializing=!0,this.$nextTick((function(){var n=t.$meta().refresh(),r=n.tags,o=n.metaInfo;!1===r&&null===t._vueMeta.initialized&&this.$nextTick((function(){return B(e,t,"init")})),t._vueMeta.initialized=!0,delete t._vueMeta.initializing,!e.refreshOnceOnNavigation&&o.afterNavigation&&tt(t)})))})),e.refreshOnceOnNavigation&&tt(c))),this.$on("hook:destroyed",(function(){var t=this;this.$parent&&Y(this)&&(delete this._hasMetaInfo,this.$nextTick((function(){if(e.waitOnDestroyed&&t.$el&&t.$el.offsetParent)var n=setInterval((function(){t.$el&&null!==t.$el.offsetParent||(clearInterval(n),B(e,t.$root,"destroyed"))}),50);else B(e,t.$root,"destroyed")})))})),this.$isServer||n.forEach((function(t){o.$on("hook:".concat(t),(function(){B(e,this.$root,t)}))}))}}}}function ot(t,e){return e&&v(t)?(d(t[e])||(t[e]=[]),t):d(t)?t:[]}var it=[[/&/g,"&"],[/</g,"<"],[/>/g,">"],[/"/g,'"'],[/'/g,"'"]];function at(t,e,n,r){var o=e.tagIDKeyName,c=n.doEscape,f=void 0===c?function(t){return t}:c,l={};for(var h in t){var v=t[h];if(K(P,h))l[h]=v;else{var y=N[0];if(n[y]&&K(n[y],h))l[h]=v;else{var _=t[o];if(_&&(y=N[1],n[y]&&n[y][_]&&K(n[y][_],h)))l[h]=v;else if("string"==typeof v?l[h]=f(v):d(v)?l[h]=v.map((function(t){return m(t)?at(t,e,n,!0):f(t)})):m(v)?l[h]=at(v,e,n,!0):l[h]=v,r){var w=f(h);h!==w&&(l[w]=l[h],delete l[h])}}}}return l}function st(t,e,n){n=n||[];var r={doEscape:function(t){return n.reduce((function(t,e){return t.replace(e[0],e[1])}),t)}};return N.forEach((function(t,n){if(0===n)ot(e,t);else if(1===n)for(var o in e[t])ot(e[t],o);r[t]=e[t]})),at(e,t,r)}function ct(t,e,template,n){var component=t.component,r=t.metaTemplateKeyName,o=t.contentKeyName;return!0!==template&&!0!==e[r]&&(h(template)&&e[r]&&(template=e[r],e[r]=!0),template?(h(n)&&(n=e[o]),e[o]=y(template)?template.call(component,n):template.replace(/%s/g,n),!0):(delete e[r],!1))}var ut=!1;function ft(t,source,e){return e=e||{},void 0===source.title&&delete source.title,L.forEach((function(t){if(source[t])for(var e in source[t])e in source[t]&&void 0===source[t][e]&&(K(U,e)&&!ut&&(w("VueMeta: Please note that since v2 the value undefined is not used to indicate boolean attributes anymore, see migration guide for details"),ut=!0),delete source[t][e])})),o()(t,source,{arrayMerge:function(t,s){return function(t,e,source){var component=t.component,n=t.tagIDKeyName,r=t.metaTemplateKeyName,o=t.contentKeyName,c=[];return e.length||source.length?(e.forEach((function(t,e){if(t[n]){var f=V(source,(function(e){return e[n]===t[n]})),l=source[f];if(-1!==f){if(o in l&&void 0===l[o]||"innerHTML"in l&&void 0===l.innerHTML)return c.push(t),void source.splice(f,1);if(null!==l[o]&&null!==l.innerHTML){var d=t[r];if(d){if(!l[r])return ct({component:component,metaTemplateKeyName:r,contentKeyName:o},l,d),void(l.template=!0);l[o]||ct({component:component,metaTemplateKeyName:r,contentKeyName:o},l,void 0,t[o])}}else source.splice(f,1)}else c.push(t)}else c.push(t)})),c.concat(source)):c}(e,t,s)}})}function lt(t,component){return pt(t||{},component,O)}function pt(t,component,e){if(e=e||{},component._inactive)return e;var n=(t=t||{}).keyName,r=component.$metaInfo,o=component.$options,c=component.$children;if(o[n]){var data=r||o[n];v(data)&&(e=ft(e,data,t))}return c.length&&c.forEach((function(n){(function(t){return(t=t||this)&&!h(t._vueMeta)})(n)&&(e=pt(t,n,e))})),e}var ht=[];function vt(t,e,n,r){var o=t.tagIDKeyName,c=!1;return n.forEach((function(t){t[o]&&t.callback&&(c=!0,function(t,e){1===arguments.length&&(e=t,t=""),ht.push([t,e])}("".concat(e,"[data-").concat(o,'="').concat(t[o],'"]'),t.callback))})),r&&c?mt():c}function mt(){var t;"complete"!==(t||document).readyState?document.onreadystatechange=function(){yt()}:yt()}function yt(t){ht.forEach((function(e){var n=e[0],r=e[1],o="".concat(n,'[onload="this.__vm_l=1"]'),c=[];t||(c=z(G(o))),t&&t.matches(o)&&(c=[t]),c.forEach((function(element){if(!element.__vm_cb){var t=function(){element.__vm_cb=!0,X(element,"onload"),r(element)};element.__vm_l?t():element.__vm_ev||(element.__vm_ev=!0,element.addEventListener("load",t))}}))}))}var gt,bt={};function _t(t,e,n,r,o){var c=(e||{}).attribute,f=o.getAttribute(c);f&&(bt[n]=JSON.parse(decodeURI(f)),X(o,c));var data=bt[n]||{},l=[];for(var d in data)void 0!==data[d]&&t in data[d]&&(l.push(d),r[d]||delete data[d][t]);for(var h in r){var v=data[h];v&&v[t]===r[h]||(l.push(h),void 0!==r[h]&&(data[h]=data[h]||{},data[h][t]=r[h]))}for(var m=0,y=l;m<y.length;m++){var _=y[m],w=data[_],x=[];for(var O in w)Array.prototype.push.apply(x,[].concat(w[O]));if(x.length){var S=K(U,_)&&x.some(Boolean)?"":x.filter((function(t){return void 0!==t})).join(" ");o.setAttribute(_,S)}else X(o,_)}bt[n]=data}function wt(t,e,n,r,head,body){var o=e||{},c=o.attribute,f=o.tagIDKeyName,l=D.slice();l.push(f);var d=[],h={appId:t,attribute:c,type:n,tagIDKeyName:f},v={head:J(head,h),pbody:J(body,h,{pbody:!0}),body:J(body,h,{body:!0})};if(r.length>1){var m=[];r=r.filter((function(t){var e=JSON.stringify(t),n=!K(m,e);return m.push(e),n}))}r.forEach((function(e){if(!e.skip){var r=document.createElement(n);e.once||r.setAttribute(c,t),Object.keys(e).forEach((function(t){if(!K(F,t))if("innerHTML"!==t)if("json"!==t)if("cssText"!==t)if("callback"!==t){var n=K(l,t)?"data-".concat(t):t,o=K(U,t);if(!o||e[t]){var c=o?"":e[t];r.setAttribute(n,c)}}else r.onload=function(){return e[t](r)};else r.styleSheet?r.styleSheet.cssText=e.cssText:r.appendChild(document.createTextNode(e.cssText));else r.innerHTML=JSON.stringify(e.json);else r.innerHTML=e.innerHTML}));var o,f=v[function(t){var body=t.body,e=t.pbody;return body?"body":e?"pbody":"head"}(e)];f.some((function(t,e){return o=e,r.isEqualNode(t)}))&&(o||0===o)?f.splice(o,1):d.push(r)}}));var y=[];for(var _ in v)Array.prototype.push.apply(y,v[_]);return y.forEach((function(element){element.parentNode.removeChild(element)})),d.forEach((function(element){element.hasAttribute("data-body")?body.appendChild(element):element.hasAttribute("data-pbody")?body.insertBefore(element,body.firstChild):head.appendChild(element)})),{oldTags:y,newTags:d}}function xt(t,e,n){var r=e=e||{},o=r.ssrAttribute,c=r.ssrAppId,f={},l=W(f,"html");if(t===c&&l.hasAttribute(o)){X(l,o);var h=!1;return R.forEach((function(t){n[t]&&vt(e,t,n[t])&&(h=!0)})),h&&mt(),!1}var title,v={},m={};for(var y in n)if(!K(P,y))if("title"!==y){if(K(L,y)){var _=y.substr(0,4);_t(t,e,y,n[y],W(f,_))}else if(d(n[y])){var w=wt(t,e,y,n[y],W(f,"head"),W(f,"body")),x=w.oldTags,O=w.newTags;O.length&&(v[y]=O,m[y]=x)}}else((title=n.title)||""===title)&&(document.title=title);return{tagsAdded:v,tagsRemoved:m}}function Ot(t,e,n){return{set:function(r){return function(t,e,n,r){if(t&&t.$el)return xt(e,n,r);(gt=gt||{})[e]=r}(t,e,n,r)},remove:function(){return function(t,e,n){if(t&&t.$el){var r,o={},c=l(L);try{for(c.s();!(r=c.n()).done;){var f=r.value,d=f.substr(0,4);_t(e,n,f,{},W(o,d))}}catch(t){c.e(t)}finally{c.f()}return function(t,e){var n=t.attribute;z(G("[".concat(n,'="').concat(e,'"]'))).map((function(t){return t.remove()}))}(n,e)}gt[e]&&(delete gt[e],$t())}(t,e,n)}}}function St(){return gt}function $t(t){!t&&Object.keys(gt).length||(gt=void 0)}function kt(t,e){if(e=e||{},!t._vueMeta)return w("This vue app/component has no vue-meta configuration"),{};var n=function(t,e,n,component){n=n||[];var r=(t=t||{}).tagIDKeyName;return e.title&&(e.titleChunk=e.title),e.titleTemplate&&"%s"!==e.titleTemplate&&ct({component:component,contentKeyName:"title"},e,e.titleTemplate,e.titleChunk||""),e.base&&(e.base=Object.keys(e.base).length?[e.base]:[]),e.meta&&(e.meta=e.meta.filter((function(t,e,n){return!t[r]||e===V(n,(function(e){return e[r]===t[r]}))})),e.meta.forEach((function(e){return ct(t,e)}))),st(t,e,n)}(e,lt(e,t),it,t),r=xt(t._vueMeta.appId,e,n);r&&y(n.changed)&&(n.changed(n,r.tagsAdded,r.tagsRemoved),r={addedTags:r.tagsAdded,removedTags:r.tagsRemoved});var o=St();if(o){for(var c in o)xt(c,e,o[c]),delete o[c];$t(!0)}return{vm:t,metaInfo:n,tags:r}}function At(t){t=t||{};var e=this.$root;return{getOptions:function(){return function(t){var e={};for(var n in t)e[n]=t[n];return e}(t)},setOptions:function(n){var r="refreshOnceOnNavigation";n&&n[r]&&(t.refreshOnceOnNavigation=!!n[r],tt(e));var o="debounceWait";if(n&&o in n){var c=parseInt(n.debounceWait);isNaN(c)||(t.debounceWait=c)}var f="waitOnDestroyed";n&&f in n&&(t.waitOnDestroyed=!!n.waitOnDestroyed)},refresh:function(){return kt(e,t)},inject:function(t){return x("inject")},pause:function(){return Z(e)},resume:function(){return Q(e)},addApp:function(n){return Ot(e,n,t)}}}function Ct(t,e){t.__vuemeta_installed||(t.__vuemeta_installed=!0,e=function(t){return{keyName:(t=v(t)?t:{}).keyName||S,attribute:t.attribute||$,ssrAttribute:t.ssrAttribute||k,tagIDKeyName:t.tagIDKeyName||A,contentKeyName:t.contentKeyName||C,metaTemplateKeyName:t.metaTemplateKeyName||E,debounceWait:h(t.debounceWait)?j:t.debounceWait,waitOnDestroyed:h(t.waitOnDestroyed)?T:t.waitOnDestroyed,ssrAppId:t.ssrAppId||I,refreshOnceOnNavigation:!!t.refreshOnceOnNavigation}}(e),t.prototype.$meta=function(){return At.call(this,e)},t.mixin(nt(t,e)))}h(window)||h(window.Vue)||Ct(window.Vue);var Et={version:"2.4.0",install:Ct,generate:function(t,e){return x("generate")},hasMetaInfo:Y};e.a=Et}).call(this,n(44))},function(t,e,n){"use strict";(function(t){var n=("undefined"!=typeof window?window:void 0!==t?t:{}).__VUE_DEVTOOLS_GLOBAL_HOOK__;function r(t,e){if(void 0===e&&(e=[]),null===t||"object"!=typeof t)return t;var n,o=(n=function(e){return e.original===t},e.filter(n)[0]);if(o)return o.copy;var c=Array.isArray(t)?[]:{};return e.push({original:t,copy:c}),Object.keys(t).forEach((function(n){c[n]=r(t[n],e)})),c}function o(t,e){Object.keys(t).forEach((function(n){return e(t[n],n)}))}function c(t){return null!==t&&"object"==typeof t}var f=function(t,e){this.runtime=e,this._children=Object.create(null),this._rawModule=t;var n=t.state;this.state=("function"==typeof n?n():n)||{}},l={namespaced:{configurable:!0}};l.namespaced.get=function(){return!!this._rawModule.namespaced},f.prototype.addChild=function(t,e){this._children[t]=e},f.prototype.removeChild=function(t){delete this._children[t]},f.prototype.getChild=function(t){return this._children[t]},f.prototype.hasChild=function(t){return t in this._children},f.prototype.update=function(t){this._rawModule.namespaced=t.namespaced,t.actions&&(this._rawModule.actions=t.actions),t.mutations&&(this._rawModule.mutations=t.mutations),t.getters&&(this._rawModule.getters=t.getters)},f.prototype.forEachChild=function(t){o(this._children,t)},f.prototype.forEachGetter=function(t){this._rawModule.getters&&o(this._rawModule.getters,t)},f.prototype.forEachAction=function(t){this._rawModule.actions&&o(this._rawModule.actions,t)},f.prototype.forEachMutation=function(t){this._rawModule.mutations&&o(this._rawModule.mutations,t)},Object.defineProperties(f.prototype,l);var d=function(t){this.register([],t,!1)};function h(path,t,e){if(t.update(e),e.modules)for(var n in e.modules){if(!t.getChild(n))return void 0;h(path.concat(n),t.getChild(n),e.modules[n])}}d.prototype.get=function(path){return path.reduce((function(t,e){return t.getChild(e)}),this.root)},d.prototype.getNamespace=function(path){var t=this.root;return path.reduce((function(e,n){return e+((t=t.getChild(n)).namespaced?n+"/":"")}),"")},d.prototype.update=function(t){h([],this.root,t)},d.prototype.register=function(path,t,e){var n=this;void 0===e&&(e=!0);var r=new f(t,e);0===path.length?this.root=r:this.get(path.slice(0,-1)).addChild(path[path.length-1],r);t.modules&&o(t.modules,(function(t,r){n.register(path.concat(r),t,e)}))},d.prototype.unregister=function(path){var t=this.get(path.slice(0,-1)),e=path[path.length-1],n=t.getChild(e);n&&n.runtime&&t.removeChild(e)},d.prototype.isRegistered=function(path){var t=this.get(path.slice(0,-1)),e=path[path.length-1];return!!t&&t.hasChild(e)};var v;var m=function(t){var e=this;void 0===t&&(t={}),!v&&"undefined"!=typeof window&&window.Vue&&k(window.Vue);var r=t.plugins;void 0===r&&(r=[]);var o=t.strict;void 0===o&&(o=!1),this._committing=!1,this._actions=Object.create(null),this._actionSubscribers=[],this._mutations=Object.create(null),this._wrappedGetters=Object.create(null),this._modules=new d(t),this._modulesNamespaceMap=Object.create(null),this._subscribers=[],this._watcherVM=new v,this._makeLocalGettersCache=Object.create(null);var c=this,f=this.dispatch,l=this.commit;this.dispatch=function(t,e){return f.call(c,t,e)},this.commit=function(t,e,n){return l.call(c,t,e,n)},this.strict=o;var h=this._modules.root.state;O(this,h,[],this._modules.root),x(this,h),r.forEach((function(t){return t(e)})),(void 0!==t.devtools?t.devtools:v.config.devtools)&&function(t){n&&(t._devtoolHook=n,n.emit("vuex:init",t),n.on("vuex:travel-to-state",(function(e){t.replaceState(e)})),t.subscribe((function(t,e){n.emit("vuex:mutation",t,e)}),{prepend:!0}),t.subscribeAction((function(t,e){n.emit("vuex:action",t,e)}),{prepend:!0}))}(this)},y={state:{configurable:!0}};function _(t,e,n){return e.indexOf(t)<0&&(n&&n.prepend?e.unshift(t):e.push(t)),function(){var i=e.indexOf(t);i>-1&&e.splice(i,1)}}function w(t,e){t._actions=Object.create(null),t._mutations=Object.create(null),t._wrappedGetters=Object.create(null),t._modulesNamespaceMap=Object.create(null);var n=t.state;O(t,n,[],t._modules.root,!0),x(t,n,e)}function x(t,e,n){var r=t._vm;t.getters={},t._makeLocalGettersCache=Object.create(null);var c=t._wrappedGetters,f={};o(c,(function(e,n){f[n]=function(t,e){return function(){return t(e)}}(e,t),Object.defineProperty(t.getters,n,{get:function(){return t._vm[n]},enumerable:!0})}));var l=v.config.silent;v.config.silent=!0,t._vm=new v({data:{$$state:e},computed:f}),v.config.silent=l,t.strict&&function(t){t._vm.$watch((function(){return this._data.$$state}),(function(){0}),{deep:!0,sync:!0})}(t),r&&(n&&t._withCommit((function(){r._data.$$state=null})),v.nextTick((function(){return r.$destroy()})))}function O(t,e,path,n,r){var o=!path.length,c=t._modules.getNamespace(path);if(n.namespaced&&(t._modulesNamespaceMap[c],t._modulesNamespaceMap[c]=n),!o&&!r){var f=S(e,path.slice(0,-1)),l=path[path.length-1];t._withCommit((function(){v.set(f,l,n.state)}))}var d=n.context=function(t,e,path){var n=""===e,r={dispatch:n?t.dispatch:function(n,r,o){var c=$(n,r,o),f=c.payload,l=c.options,d=c.type;return l&&l.root||(d=e+d),t.dispatch(d,f)},commit:n?t.commit:function(n,r,o){var c=$(n,r,o),f=c.payload,l=c.options,d=c.type;l&&l.root||(d=e+d),t.commit(d,f,l)}};return Object.defineProperties(r,{getters:{get:n?function(){return t.getters}:function(){return function(t,e){if(!t._makeLocalGettersCache[e]){var n={},r=e.length;Object.keys(t.getters).forEach((function(o){if(o.slice(0,r)===e){var c=o.slice(r);Object.defineProperty(n,c,{get:function(){return t.getters[o]},enumerable:!0})}})),t._makeLocalGettersCache[e]=n}return t._makeLocalGettersCache[e]}(t,e)}},state:{get:function(){return S(t.state,path)}}}),r}(t,c,path);n.forEachMutation((function(e,n){!function(t,e,n,r){(t._mutations[e]||(t._mutations[e]=[])).push((function(e){n.call(t,r.state,e)}))}(t,c+n,e,d)})),n.forEachAction((function(e,n){var r=e.root?n:c+n,o=e.handler||e;!function(t,e,n,r){(t._actions[e]||(t._actions[e]=[])).push((function(e){var o,c=n.call(t,{dispatch:r.dispatch,commit:r.commit,getters:r.getters,state:r.state,rootGetters:t.getters,rootState:t.state},e);return(o=c)&&"function"==typeof o.then||(c=Promise.resolve(c)),t._devtoolHook?c.catch((function(e){throw t._devtoolHook.emit("vuex:error",e),e})):c}))}(t,r,o,d)})),n.forEachGetter((function(e,n){!function(t,e,n,r){if(t._wrappedGetters[e])return void 0;t._wrappedGetters[e]=function(t){return n(r.state,r.getters,t.state,t.getters)}}(t,c+n,e,d)})),n.forEachChild((function(n,o){O(t,e,path.concat(o),n,r)}))}function S(t,path){return path.reduce((function(t,e){return t[e]}),t)}function $(t,e,n){return c(t)&&t.type&&(n=e,e=t,t=t.type),{type:t,payload:e,options:n}}function k(t){v&&t===v||function(t){if(Number(t.version.split(".")[0])>=2)t.mixin({beforeCreate:n});else{var e=t.prototype._init;t.prototype._init=function(t){void 0===t&&(t={}),t.init=t.init?[n].concat(t.init):n,e.call(this,t)}}function n(){var t=this.$options;t.store?this.$store="function"==typeof t.store?t.store():t.store:t.parent&&t.parent.$store&&(this.$store=t.parent.$store)}}(v=t)}y.state.get=function(){return this._vm._data.$$state},y.state.set=function(t){0},m.prototype.commit=function(t,e,n){var r=this,o=$(t,e,n),c=o.type,f=o.payload,l=(o.options,{type:c,payload:f}),d=this._mutations[c];d&&(this._withCommit((function(){d.forEach((function(t){t(f)}))})),this._subscribers.slice().forEach((function(sub){return sub(l,r.state)})))},m.prototype.dispatch=function(t,e){var n=this,r=$(t,e),o=r.type,c=r.payload,f={type:o,payload:c},l=this._actions[o];if(l){try{this._actionSubscribers.slice().filter((function(sub){return sub.before})).forEach((function(sub){return sub.before(f,n.state)}))}catch(t){0}var d=l.length>1?Promise.all(l.map((function(t){return t(c)}))):l[0](c);return new Promise((function(t,e){d.then((function(e){try{n._actionSubscribers.filter((function(sub){return sub.after})).forEach((function(sub){return sub.after(f,n.state)}))}catch(t){0}t(e)}),(function(t){try{n._actionSubscribers.filter((function(sub){return sub.error})).forEach((function(sub){return sub.error(f,n.state,t)}))}catch(t){0}e(t)}))}))}},m.prototype.subscribe=function(t,e){return _(t,this._subscribers,e)},m.prototype.subscribeAction=function(t,e){return _("function"==typeof t?{before:t}:t,this._actionSubscribers,e)},m.prototype.watch=function(t,e,n){var r=this;return this._watcherVM.$watch((function(){return t(r.state,r.getters)}),e,n)},m.prototype.replaceState=function(t){var e=this;this._withCommit((function(){e._vm._data.$$state=t}))},m.prototype.registerModule=function(path,t,e){void 0===e&&(e={}),"string"==typeof path&&(path=[path]),this._modules.register(path,t),O(this,this.state,path,this._modules.get(path),e.preserveState),x(this,this.state)},m.prototype.unregisterModule=function(path){var t=this;"string"==typeof path&&(path=[path]),this._modules.unregister(path),this._withCommit((function(){var e=S(t.state,path.slice(0,-1));v.delete(e,path[path.length-1])})),w(this)},m.prototype.hasModule=function(path){return"string"==typeof path&&(path=[path]),this._modules.isRegistered(path)},m.prototype.hotUpdate=function(t){this._modules.update(t),w(this,!0)},m.prototype._withCommit=function(t){var e=this._committing;this._committing=!0,t(),this._committing=e},Object.defineProperties(m.prototype,y);var A=I((function(t,e){var n={};return j(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){var e=this.$store.state,n=this.$store.getters;if(t){var r=M(this.$store,"mapState",t);if(!r)return;e=r.context.state,n=r.context.getters}return"function"==typeof o?o.call(this,e,n):e[o]},n[r].vuex=!0})),n})),C=I((function(t,e){var n={};return j(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.commit;if(t){var c=M(this.$store,"mapMutations",t);if(!c)return;r=c.context.commit}return"function"==typeof o?o.apply(this,[r].concat(e)):r.apply(this.$store,[o].concat(e))}})),n})),E=I((function(t,e){var n={};return j(e).forEach((function(e){var r=e.key,o=e.val;o=t+o,n[r]=function(){if(!t||M(this.$store,"mapGetters",t))return this.$store.getters[o]},n[r].vuex=!0})),n})),T=I((function(t,e){var n={};return j(e).forEach((function(e){var r=e.key,o=e.val;n[r]=function(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var r=this.$store.dispatch;if(t){var c=M(this.$store,"mapActions",t);if(!c)return;r=c.context.dispatch}return"function"==typeof o?o.apply(this,[r].concat(e)):r.apply(this.$store,[o].concat(e))}})),n}));function j(map){return function(map){return Array.isArray(map)||c(map)}(map)?Array.isArray(map)?map.map((function(t){return{key:t,val:t}})):Object.keys(map).map((function(t){return{key:t,val:map[t]}})):[]}function I(t){return function(e,map){return"string"!=typeof e?(map=e,e=""):"/"!==e.charAt(e.length-1)&&(e+="/"),t(e,map)}}function M(t,e,n){return t._modulesNamespaceMap[n]}function N(t,e,n){var r=n?t.groupCollapsed:t.group;try{r.call(t,e)}catch(n){t.log(e)}}function P(t){try{t.groupEnd()}catch(e){t.log("—— log end ——")}}function L(){var time=new Date;return" @ "+R(time.getHours(),2)+":"+R(time.getMinutes(),2)+":"+R(time.getSeconds(),2)+"."+R(time.getMilliseconds(),3)}function R(t,e){return n="0",r=e-t.toString().length,new Array(r+1).join(n)+t;var n,r}var F={Store:m,install:k,version:"3.6.2",mapState:A,mapMutations:C,mapGetters:E,mapActions:T,createNamespacedHelpers:function(t){return{mapState:A.bind(null,t),mapGetters:E.bind(null,t),mapMutations:C.bind(null,t),mapActions:T.bind(null,t)}},createLogger:function(t){void 0===t&&(t={});var e=t.collapsed;void 0===e&&(e=!0);var filter=t.filter;void 0===filter&&(filter=function(t,e,n){return!0});var n=t.transformer;void 0===n&&(n=function(t){return t});var o=t.mutationTransformer;void 0===o&&(o=function(t){return t});var c=t.actionFilter;void 0===c&&(c=function(t,e){return!0});var f=t.actionTransformer;void 0===f&&(f=function(t){return t});var l=t.logMutations;void 0===l&&(l=!0);var d=t.logActions;void 0===d&&(d=!0);var h=t.logger;return void 0===h&&(h=console),function(t){var v=r(t.state);void 0!==h&&(l&&t.subscribe((function(t,c){var f=r(c);if(filter(t,v,f)){var l=L(),d=o(t),m="mutation "+t.type+l;N(h,m,e),h.log("%c prev state","color: #9E9E9E; font-weight: bold",n(v)),h.log("%c mutation","color: #03A9F4; font-weight: bold",d),h.log("%c next state","color: #4CAF50; font-weight: bold",n(f)),P(h)}v=f})),d&&t.subscribeAction((function(t,n){if(c(t,n)){var r=L(),o=f(t),l="action "+t.type+r;N(h,l,e),h.log("%c action","color: #03A9F4; font-weight: bold",o),P(h)}})))}}};e.a=F}).call(this,n(44))},function(t,e,n){"use strict";var r=n(8),o=n(19),c=n(92),f=n(67);n(68)("match",1,(function(t,e,n,l){return[function(n){var r=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=l(n,t,this);if(e.done)return e.value;var d=r(t),h=String(this);if(!d.global)return f(d,h);var v=d.unicode;d.lastIndex=0;for(var m,y=[],_=0;null!==(m=f(d,h));){var w=String(m[0]);y[_]=w,""===w&&(d.lastIndex=c(h,o(d.lastIndex),v)),_++}return 0===_?null:y}]}))},function(t,e,n){var r=n(13);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r=n(29),o=n(6),c="__core-js_shared__",f=o[c]||(o[c]={});(t.exports=function(t,e){return f[t]||(f[t]=void 0!==e?e:{})})("versions",[]).push({version:r.version,mode:n(49)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,n){var r=n(8),o=n(146),c=n(79),f=n(78)("IE_PROTO"),l=function(){},d=function(){var t,iframe=n(74)("iframe"),i=c.length;for(iframe.style.display="none",n(75).appendChild(iframe),iframe.src="javascript:",(t=iframe.contentWindow.document).open(),t.write("<script>document.F=Object<\/script>"),t.close(),d=t.F;i--;)delete d.prototype[c[i]];return d()};t.exports=Object.create||function(t,e){var n;return null!==t?(l.prototype=r(t),n=new l,l.prototype=null,n[f]=t):n=d(),void 0===e?n:o(n,e)}},function(t,e,n){var r=n(33),o=n(5)("toStringTag"),c="Arguments"==r(function(){return arguments}());t.exports=function(t){var e,n,f;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?n:c?r(e):"Object"==(f=r(e))&&"function"==typeof e.callee?"Arguments":f}},function(t,e,n){"use strict";var r=n(66),o=RegExp.prototype.exec;t.exports=function(t,e){var n=t.exec;if("function"==typeof n){var c=n.call(t,e);if("object"!=typeof c)throw new TypeError("RegExp exec method returned something other than an Object or null");return c}if("RegExp"!==r(t))throw new TypeError("RegExp#exec called on incompatible receiver");return o.call(t,e)}},function(t,e,n){"use strict";n(162);var r=n(14),o=n(30),c=n(9),f=n(38),l=n(5),d=n(93),h=l("species"),v=!c((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$<a>")})),m=function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var n="ab".split(t);return 2===n.length&&"a"===n[0]&&"b"===n[1]}();t.exports=function(t,e,n){var y=l(t),_=!c((function(){var e={};return e[y]=function(){return 7},7!=""[t](e)})),w=_?!c((function(){var e=!1,n=/a/;return n.exec=function(){return e=!0,null},"split"===t&&(n.constructor={},n.constructor[h]=function(){return n}),n[y](""),!e})):void 0;if(!_||!w||"replace"===t&&!v||"split"===t&&!m){var x=/./[y],O=n(f,y,""[t],(function(t,e,n,r,o){return e.exec===d?_&&!o?{done:!0,value:x.call(e,n,r)}:{done:!0,value:t.call(n,e,r)}:{done:!1}})),S=O[0],$=O[1];r(String.prototype,t,S),o(RegExp.prototype,y,2==e?function(t,e){return $.call(t,this,e)}:function(t){return $.call(t,this)})}}},function(t,e,n){"use strict";var r=n(8);t.exports=function(){var t=r(this),e="";return t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.unicode&&(e+="u"),t.sticky&&(e+="y"),e}},function(t,e,n){"use strict";var r=n(4),o=n(19),c=n(89),f="startsWith",l="".startsWith;r(r.P+r.F*n(91)(f),"String",{startsWith:function(t){var e=c(this,t,f),n=o(Math.min(arguments.length>1?arguments[1]:void 0,e.length)),r=String(t);return l?l.call(e,r,n):e.slice(n,n+r.length)===r}})},function(t,e,n){"use strict";var r=n(90),o=n(8),c=n(85),f=n(92),l=n(19),d=n(67),h=n(93),v=n(9),m=Math.min,y=[].push,_=4294967295,w=!v((function(){RegExp(_,"y")}));n(68)("split",2,(function(t,e,n,v){var x;return x="c"=="abbc".split(/(b)*/)[1]||4!="test".split(/(?:)/,-1).length||2!="ab".split(/(?:ab)*/).length||4!=".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length?function(t,e){var o=String(this);if(void 0===t&&0===e)return[];if(!r(t))return n.call(o,t,e);for(var c,f,l,output=[],d=(t.ignoreCase?"i":"")+(t.multiline?"m":"")+(t.unicode?"u":"")+(t.sticky?"y":""),v=0,m=void 0===e?_:e>>>0,w=new RegExp(t.source,d+"g");(c=h.call(w,o))&&!((f=w.lastIndex)>v&&(output.push(o.slice(v,c.index)),c.length>1&&c.index<o.length&&y.apply(output,c.slice(1)),l=c[0].length,v=f,output.length>=m));)w.lastIndex===c.index&&w.lastIndex++;return v===o.length?!l&&w.test("")||output.push(""):output.push(o.slice(v)),output.length>m?output.slice(0,m):output}:"0".split(void 0,0).length?function(t,e){return void 0===t&&0===e?[]:n.call(this,t,e)}:n,[function(n,r){var o=t(this),c=null==n?void 0:n[e];return void 0!==c?c.call(n,o,r):x.call(String(o),n,r)},function(t,e){var r=v(x,t,this,e,x!==n);if(r.done)return r.value;var h=o(t),y=String(this),O=c(h,RegExp),S=h.unicode,$=(h.ignoreCase?"i":"")+(h.multiline?"m":"")+(h.unicode?"u":"")+(w?"y":"g"),k=new O(w?h:"^(?:"+h.source+")",$),A=void 0===e?_:e>>>0;if(0===A)return[];if(0===y.length)return null===d(k,y)?[y]:[];for(var p=0,q=0,C=[];q<y.length;){k.lastIndex=w?q:0;var E,T=d(k,w?y:y.slice(q));if(null===T||(E=m(l(k.lastIndex+(w?0:q)),y.length))===p)q=f(y,q,S);else{if(C.push(y.slice(p,q)),C.length===A)return C;for(var i=1;i<=T.length-1;i++)if(C.push(T[i]),C.length===A)return C;q=p=E}}return C.push(y.slice(p)),C}]}))},function(t,e,n){"use strict";n.d(e,"a",(function(){return o}));var r=n(57);function o(t,e){if(t){if("string"==typeof t)return Object(r.a)(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?Object(r.a)(t,e):void 0}}},,function(t,e,n){var r=n(13),o=n(6).document,c=r(o)&&r(o.createElement);t.exports=function(t){return c?o.createElement(t):{}}},function(t,e,n){var r=n(6).document;t.exports=r&&r.documentElement},function(t,e,n){var r=n(48)("meta"),o=n(13),c=n(31),f=n(12).f,l=0,d=Object.isExtensible||function(){return!0},h=!n(9)((function(){return d(Object.preventExtensions({}))})),v=function(t){f(t,r,{value:{i:"O"+ ++l,w:{}}})},meta=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!c(t,r)){if(!d(t))return"F";if(!e)return"E";v(t)}return t[r].i},getWeak:function(t,e){if(!c(t,r)){if(!d(t))return!0;if(!e)return!1;v(t)}return t[r].w},onFreeze:function(t){return h&&meta.NEED&&d(t)&&!c(t,r)&&v(t),t}}},function(t,e,n){var r=n(33);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(62)("keys"),o=n(48);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(5)("iterator"),o=!1;try{var c=[7][r]();c.return=function(){o=!0},Array.from(c,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var c=[7],f=c[r]();f.next=function(){return{done:n=!0}},c[r]=function(){return f},t(c)}catch(t){}return n}},function(t,e,n){var r=n(5)("unscopables"),o=Array.prototype;null==o[r]&&n(30)(o,r,{}),t.exports=function(t){o[r][t]=!0}},function(t,e,n){"use strict";var r=n(49),o=n(4),c=n(14),f=n(30),l=n(55),d=n(148),h=n(51),v=n(149),m=n(5)("iterator"),y=!([].keys&&"next"in[].keys()),_="keys",w="values",x=function(){return this};t.exports=function(t,e,n,O,S,$,k){d(n,e,O);var A,C,E,T=function(t){if(!y&&t in N)return N[t];switch(t){case _:case w:return function(){return new n(this,t)}}return function(){return new n(this,t)}},j=e+" Iterator",I=S==w,M=!1,N=t.prototype,P=N[m]||N["@@iterator"]||S&&N[S],L=P||T(S),R=S?I?T("entries"):L:void 0,F="Array"==e&&N.entries||P;if(F&&(E=v(F.call(new t)))!==Object.prototype&&E.next&&(h(E,j,!0),r||"function"==typeof E[m]||f(E,m,x)),I&&P&&P.name!==w&&(M=!0,L=function(){return P.call(this)}),r&&!k||!y&&!M&&N[m]||f(N,m,L),l[e]=L,l[j]=x,S)if(A={values:I?L:T(w),keys:$?L:T(_),entries:R},k)for(C in A)C in N||c(N,C,A[C]);else o(o.P+o.F*(y||M),e,A);return A}},function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},function(t,e,n){var r=n(32),o=n(110),c=n(111),f=n(8),l=n(19),d=n(113),h={},v={};(e=t.exports=function(t,e,n,m,y){var _,w,x,O,S=y?function(){return t}:d(t),$=r(n,m,e?2:1),k=0;if("function"!=typeof S)throw TypeError(t+" is not iterable!");if(c(S)){for(_=l(t.length);_>k;k++)if((O=e?$(f(w=t[k])[0],w[1]):$(t[k]))===h||O===v)return O}else for(x=S.call(t);!(w=x.next()).done;)if((O=o(x,$,w.value,e))===h||O===v)return O}).BREAK=h,e.RETURN=v},function(t,e,n){var r=n(8),o=n(63),c=n(5)("species");t.exports=function(t,e){var n,f=r(t).constructor;return void 0===f||null==(n=r(f)[c])?e:o(n)}},function(t,e,n){var r=n(14);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){"use strict";var r=n(6),o=n(12),c=n(10),f=n(5)("species");t.exports=function(t){var e=r[t];c&&e&&!e[f]&&o.f(e,f,{configurable:!0,get:function(){return this}})}},function(t,e,n){var r=n(32),o=n(77),c=n(40),f=n(19),l=n(158);t.exports=function(t,e){var n=1==t,d=2==t,h=3==t,v=4==t,m=6==t,y=5==t||m,_=e||l;return function(e,l,w){for(var x,O,S=c(e),$=o(S),k=r(l,w,3),A=f($.length),C=0,E=n?_(e,A):d?_(e,0):void 0;A>C;C++)if((y||C in $)&&(O=k(x=$[C],C,S),t))if(n)E[C]=O;else if(O)switch(t){case 3:return!0;case 5:return x;case 6:return C;case 2:E.push(x)}else if(v)return!1;return m?-1:h||v?v:E}}},function(t,e,n){var r=n(90),o=n(38);t.exports=function(t,e,n){if(r(e))throw TypeError("String#"+n+" doesn't accept regex!");return String(o(t))}},function(t,e,n){var r=n(13),o=n(33),c=n(5)("match");t.exports=function(t){var e;return r(t)&&(void 0!==(e=t[c])?!!e:"RegExp"==o(t))}},function(t,e,n){var r=n(5)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(n){try{return e[r]=!1,!"/./"[t](e)}catch(t){}}return!0}},function(t,e,n){"use strict";var r=n(121)(!0);t.exports=function(t,e,n){return e+(n?r(t,e).length:1)}},function(t,e,n){"use strict";var r,o,c=n(69),f=RegExp.prototype.exec,l=String.prototype.replace,d=f,h=(r=/a/,o=/b*/g,f.call(r,"a"),f.call(o,"a"),0!==r.lastIndex||0!==o.lastIndex),v=void 0!==/()??/.exec("")[1];(h||v)&&(d=function(t){var e,n,r,i,o=this;return v&&(n=new RegExp("^"+o.source+"$(?!\\s)",c.call(o))),h&&(e=o.lastIndex),r=f.call(o,t),h&&r&&(o.lastIndex=o.global?r.index+r[0].length:e),v&&r&&r.length>1&&l.call(r[0],n,(function(){for(i=1;i<arguments.length-2;i++)void 0===arguments[i]&&(r[i]=void 0)})),r}),t.exports=d},function(t,e,n){var r=n(13),o=n(164).set;t.exports=function(t,e,n){var c,f=e.constructor;return f!==n&&"function"==typeof f&&(c=f.prototype)!==n.prototype&&r(c)&&o&&o(t,c),t}},function(t,e,n){var r=Date.prototype,o="Invalid Date",c="toString",f=r.toString,l=r.getTime;new Date(NaN)+""!=o&&n(14)(r,c,(function(){var t=l.call(this);return t==t?f.call(this):o}))},function(t,e,n){"use strict";n(165);var r=n(8),o=n(69),c=n(10),f="toString",l=/./.toString,d=function(t){n(14)(RegExp.prototype,f,t,!0)};n(9)((function(){return"/a/b"!=l.call({source:"a",flags:"b"})}))?d((function(){var t=r(this);return"/".concat(t.source,"/","flags"in t?t.flags:!c&&t instanceof RegExp?o.call(t):void 0)})):l.name!=f&&d((function(){return l.call(this)}))},function(t,e,n){"use strict";var r=n(4),o=n(88)(5),c="find",f=!0;c in[]&&Array(1).find((function(){f=!1})),r(r.P+r.F*f,"Array",{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),n(81)(c)},,function(t,e,n){"use strict";function r(a,b){for(var t in b)a[t]=b[t];return a}var o=/[!'()*]/g,c=function(t){return"%"+t.charCodeAt(0).toString(16)},f=/%2C/g,l=function(t){return encodeURIComponent(t).replace(o,c).replace(f,",")};function d(t){try{return decodeURIComponent(t)}catch(t){0}return t}var h=function(t){return null==t||"object"==typeof t?t:String(t)};function v(t){var e={};return(t=t.trim().replace(/^(\?|#|&)/,""))?(t.split("&").forEach((function(param){var t=param.replace(/\+/g," ").split("="),n=d(t.shift()),r=t.length>0?d(t.join("=")):null;void 0===e[n]?e[n]=r:Array.isArray(e[n])?e[n].push(r):e[n]=[e[n],r]})),e):e}function m(t){var e=t?Object.keys(t).map((function(e){var n=t[e];if(void 0===n)return"";if(null===n)return l(e);if(Array.isArray(n)){var r=[];return n.forEach((function(t){void 0!==t&&(null===t?r.push(l(e)):r.push(l(e)+"="+l(t)))})),r.join("&")}return l(e)+"="+l(n)})).filter((function(t){return t.length>0})).join("&"):null;return e?"?"+e:""}var y=/\/?$/;function _(t,e,n,r){var o=r&&r.options.stringifyQuery,c=e.query||{};try{c=w(c)}catch(t){}var f={name:e.name||t&&t.name,meta:t&&t.meta||{},path:e.path||"/",hash:e.hash||"",query:c,params:e.params||{},fullPath:S(e,o),matched:t?O(t):[]};return n&&(f.redirectedFrom=S(n,o)),Object.freeze(f)}function w(t){if(Array.isArray(t))return t.map(w);if(t&&"object"==typeof t){var e={};for(var n in t)e[n]=w(t[n]);return e}return t}var x=_(null,{path:"/"});function O(t){for(var e=[];t;)e.unshift(t),t=t.parent;return e}function S(t,e){var path=t.path,n=t.query;void 0===n&&(n={});var r=t.hash;return void 0===r&&(r=""),(path||"/")+(e||m)(n)+r}function $(a,b,t){return b===x?a===b:!!b&&(a.path&&b.path?a.path.replace(y,"")===b.path.replace(y,"")&&(t||a.hash===b.hash&&k(a.query,b.query)):!(!a.name||!b.name)&&(a.name===b.name&&(t||a.hash===b.hash&&k(a.query,b.query)&&k(a.params,b.params))))}function k(a,b){if(void 0===a&&(a={}),void 0===b&&(b={}),!a||!b)return a===b;var t=Object.keys(a).sort(),e=Object.keys(b).sort();return t.length===e.length&&t.every((function(t,i){var n=a[t];if(e[i]!==t)return!1;var r=b[t];return null==n||null==r?n===r:"object"==typeof n&&"object"==typeof r?k(n,r):String(n)===String(r)}))}function A(t){for(var i=0;i<t.matched.length;i++){var e=t.matched[i];for(var n in e.instances){var r=e.instances[n],o=e.enteredCbs[n];if(r&&o){delete e.enteredCbs[n];for(var c=0;c<o.length;c++)r._isBeingDestroyed||o[c](r)}}}}var C={name:"RouterView",functional:!0,props:{name:{type:String,default:"default"}},render:function(t,e){var n=e.props,o=e.children,c=e.parent,data=e.data;data.routerView=!0;for(var f=c.$createElement,l=n.name,d=c.$route,h=c._routerViewCache||(c._routerViewCache={}),v=0,m=!1;c&&c._routerRoot!==c;){var y=c.$vnode?c.$vnode.data:{};y.routerView&&v++,y.keepAlive&&c._directInactive&&c._inactive&&(m=!0),c=c.$parent}if(data.routerViewDepth=v,m){var _=h[l],w=_&&_.component;return w?(_.configProps&&E(w,data,_.route,_.configProps),f(w,data,o)):f()}var x=d.matched[v],component=x&&x.components[l];if(!x||!component)return h[l]=null,f();h[l]={component:component},data.registerRouteInstance=function(t,e){var n=x.instances[l];(e&&n!==t||!e&&n===t)&&(x.instances[l]=e)},(data.hook||(data.hook={})).prepatch=function(t,e){x.instances[l]=e.componentInstance},data.hook.init=function(t){t.data.keepAlive&&t.componentInstance&&t.componentInstance!==x.instances[l]&&(x.instances[l]=t.componentInstance),A(d)};var O=x.props&&x.props[l];return O&&(r(h[l],{route:d,configProps:O}),E(component,data,d,O)),f(component,data,o)}};function E(component,data,t,e){var n=data.props=function(t,e){switch(typeof e){case"undefined":return;case"object":return e;case"function":return e(t);case"boolean":return e?t.params:void 0;default:0}}(t,e);if(n){n=data.props=r({},n);var o=data.attrs=data.attrs||{};for(var c in n)component.props&&c in component.props||(o[c]=n[c],delete n[c])}}function T(t,base,e){var n=t.charAt(0);if("/"===n)return t;if("?"===n||"#"===n)return base+t;var r=base.split("/");e&&r[r.length-1]||r.pop();for(var o=t.replace(/^\//,"").split("/"),i=0;i<o.length;i++){var c=o[i];".."===c?r.pop():"."!==c&&r.push(c)}return""!==r[0]&&r.unshift(""),r.join("/")}function j(path){return path.replace(/\/\//g,"/")}var I=Array.isArray||function(t){return"[object Array]"==Object.prototype.toString.call(t)},M=W,N=D,P=function(t,e){return H(D(t,e),e)},L=H,R=G,F=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function D(t,e){for(var n,r=[],o=0,c=0,path="",f=e&&e.delimiter||"/";null!=(n=F.exec(t));){var l=n[0],d=n[1],h=n.index;if(path+=t.slice(c,h),c=h+l.length,d)path+=d[1];else{var v=t[c],m=n[2],y=n[3],_=n[4],w=n[5],x=n[6],O=n[7];path&&(r.push(path),path="");var S=null!=m&&null!=v&&v!==m,$="+"===x||"*"===x,k="?"===x||"*"===x,A=n[2]||f,pattern=_||w;r.push({name:y||o++,prefix:m||"",delimiter:A,optional:k,repeat:$,partial:S,asterisk:!!O,pattern:pattern?V(pattern):O?".*":"[^"+B(A)+"]+?"})}}return c<t.length&&(path+=t.substr(c)),path&&r.push(path),r}function U(t){return encodeURI(t).replace(/[\/?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function H(t,e){for(var n=new Array(t.length),i=0;i<t.length;i++)"object"==typeof t[i]&&(n[i]=new RegExp("^(?:"+t[i].pattern+")$",K(e)));return function(e,r){for(var path="",data=e||{},o=(r||{}).pretty?U:encodeURIComponent,i=0;i<t.length;i++){var c=t[i];if("string"!=typeof c){var f,l=data[c.name];if(null==l){if(c.optional){c.partial&&(path+=c.prefix);continue}throw new TypeError('Expected "'+c.name+'" to be defined')}if(I(l)){if(!c.repeat)throw new TypeError('Expected "'+c.name+'" to not repeat, but received `'+JSON.stringify(l)+"`");if(0===l.length){if(c.optional)continue;throw new TypeError('Expected "'+c.name+'" to not be empty')}for(var d=0;d<l.length;d++){if(f=o(l[d]),!n[i].test(f))throw new TypeError('Expected all "'+c.name+'" to match "'+c.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===d?c.prefix:c.delimiter)+f}}else{if(f=c.asterisk?encodeURI(l).replace(/[?#]/g,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()})):o(l),!n[i].test(f))throw new TypeError('Expected "'+c.name+'" to match "'+c.pattern+'", but received "'+f+'"');path+=c.prefix+f}}else path+=c}return path}}function B(t){return t.replace(/([.+*?=^!:${}()[\]|\/\\])/g,"\\$1")}function V(t){return t.replace(/([=!:$\/()])/g,"\\$1")}function z(t,e){return t.keys=e,t}function K(t){return t&&t.sensitive?"":"i"}function G(t,e,n){I(e)||(n=e||n,e=[]);for(var r=(n=n||{}).strict,o=!1!==n.end,c="",i=0;i<t.length;i++){var f=t[i];if("string"==typeof f)c+=B(f);else{var l=B(f.prefix),d="(?:"+f.pattern+")";e.push(f),f.repeat&&(d+="(?:"+l+d+")*"),c+=d=f.optional?f.partial?l+"("+d+")?":"(?:"+l+"("+d+"))?":l+"("+d+")"}}var h=B(n.delimiter||"/"),v=c.slice(-h.length)===h;return r||(c=(v?c.slice(0,-h.length):c)+"(?:"+h+"(?=$))?"),c+=o?"$":r&&v?"":"(?="+h+"|$)",z(new RegExp("^"+c,K(n)),e)}function W(path,t,e){return I(t)||(e=t||e,t=[]),e=e||{},path instanceof RegExp?function(path,t){var e=path.source.match(/\((?!\?)/g);if(e)for(var i=0;i<e.length;i++)t.push({name:i,prefix:null,delimiter:null,optional:!1,repeat:!1,partial:!1,asterisk:!1,pattern:null});return z(path,t)}(path,t):I(path)?function(path,t,e){for(var n=[],i=0;i<path.length;i++)n.push(W(path[i],t,e).source);return z(new RegExp("(?:"+n.join("|")+")",K(e)),t)}(path,t,e):function(path,t,e){return G(D(path,e),t,e)}(path,t,e)}M.parse=N,M.compile=P,M.tokensToFunction=L,M.tokensToRegExp=R;var J=Object.create(null);function X(path,t,e){t=t||{};try{var n=J[path]||(J[path]=M.compile(path));return"string"==typeof t.pathMatch&&(t[0]=t.pathMatch),n(t,{pretty:!0})}catch(t){return""}finally{delete t[0]}}function Y(t,e,n,o){var c="string"==typeof t?{path:t}:t;if(c._normalized)return c;if(c.name){var f=(c=r({},t)).params;return f&&"object"==typeof f&&(c.params=r({},f)),c}if(!c.path&&c.params&&e){(c=r({},c))._normalized=!0;var l=r(r({},e.params),c.params);if(e.name)c.name=e.name,c.params=l;else if(e.matched.length){var d=e.matched[e.matched.length-1].path;c.path=X(d,l,e.path)}else 0;return c}var m=function(path){var t="",e="",n=path.indexOf("#");n>=0&&(t=path.slice(n),path=path.slice(0,n));var r=path.indexOf("?");return r>=0&&(e=path.slice(r+1),path=path.slice(0,r)),{path:path,query:e,hash:t}}(c.path||""),y=e&&e.path||"/",path=m.path?T(m.path,y,n||c.append):y,_=function(t,e,n){void 0===e&&(e={});var r,o=n||v;try{r=o(t||"")}catch(t){r={}}for(var c in e){var f=e[c];r[c]=Array.isArray(f)?f.map(h):h(f)}return r}(m.query,c.query,o&&o.options.parseQuery),w=c.hash||m.hash;return w&&"#"!==w.charAt(0)&&(w="#"+w),{_normalized:!0,path:path,query:_,hash:w}}var Z,Q=function(){},tt={name:"RouterLink",props:{to:{type:[String,Object],required:!0},tag:{type:String,default:"a"},custom:Boolean,exact:Boolean,exactPath:Boolean,append:Boolean,replace:Boolean,activeClass:String,exactActiveClass:String,ariaCurrentValue:{type:String,default:"page"},event:{type:[String,Array],default:"click"}},render:function(t){var e=this,n=this.$router,o=this.$route,c=n.resolve(this.to,o,this.append),f=c.location,l=c.route,d=c.href,h={},v=n.options.linkActiveClass,m=n.options.linkExactActiveClass,w=null==v?"router-link-active":v,x=null==m?"router-link-exact-active":m,O=null==this.activeClass?w:this.activeClass,S=null==this.exactActiveClass?x:this.exactActiveClass,k=l.redirectedFrom?_(null,Y(l.redirectedFrom),null,n):l;h[S]=$(o,k,this.exactPath),h[O]=this.exact||this.exactPath?h[S]:function(t,e){return 0===t.path.replace(y,"/").indexOf(e.path.replace(y,"/"))&&(!e.hash||t.hash===e.hash)&&function(t,e){for(var n in e)if(!(n in t))return!1;return!0}(t.query,e.query)}(o,k);var A=h[S]?this.ariaCurrentValue:null,C=function(t){et(t)&&(e.replace?n.replace(f,Q):n.push(f,Q))},E={click:et};Array.isArray(this.event)?this.event.forEach((function(t){E[t]=C})):E[this.event]=C;var data={class:h},T=!this.$scopedSlots.$hasNormal&&this.$scopedSlots.default&&this.$scopedSlots.default({href:d,route:l,navigate:C,isActive:h[O],isExactActive:h[S]});if(T){if(1===T.length)return T[0];if(T.length>1||!T.length)return 0===T.length?t():t("span",{},T)}if("a"===this.tag)data.on=E,data.attrs={href:d,"aria-current":A};else{var a=nt(this.$slots.default);if(a){a.isStatic=!1;var j=a.data=r({},a.data);for(var I in j.on=j.on||{},j.on){var M=j.on[I];I in E&&(j.on[I]=Array.isArray(M)?M:[M])}for(var N in E)N in j.on?j.on[N].push(E[N]):j.on[N]=C;var P=a.data.attrs=r({},a.data.attrs);P.href=d,P["aria-current"]=A}else data.on=E}return t(this.tag,data,this.$slots.default)}};function et(t){if(!(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.defaultPrevented||void 0!==t.button&&0!==t.button)){if(t.currentTarget&&t.currentTarget.getAttribute){var e=t.currentTarget.getAttribute("target");if(/\b_blank\b/i.test(e))return}return t.preventDefault&&t.preventDefault(),!0}}function nt(t){if(t)for(var e,i=0;i<t.length;i++){if("a"===(e=t[i]).tag)return e;if(e.children&&(e=nt(e.children)))return e}}var ot="undefined"!=typeof window;function it(t,e,n,r,o){var c=e||[],f=n||Object.create(null),l=r||Object.create(null);t.forEach((function(t){at(c,f,l,t,o)}));for(var i=0,d=c.length;i<d;i++)"*"===c[i]&&(c.push(c.splice(i,1)[0]),d--,i--);return{pathList:c,pathMap:f,nameMap:l}}function at(t,e,n,r,o,c){var path=r.path,f=r.name;var l=r.pathToRegexpOptions||{},d=function(path,t,e){e||(path=path.replace(/\/$/,""));if("/"===path[0])return path;if(null==t)return path;return j(t.path+"/"+path)}(path,o,l.strict);"boolean"==typeof r.caseSensitive&&(l.sensitive=r.caseSensitive);var h={path:d,regex:st(d,l),components:r.components||{default:r.component},alias:r.alias?"string"==typeof r.alias?[r.alias]:r.alias:[],instances:{},enteredCbs:{},name:f,parent:o,matchAs:c,redirect:r.redirect,beforeEnter:r.beforeEnter,meta:r.meta||{},props:null==r.props?{}:r.components?r.props:{default:r.props}};if(r.children&&r.children.forEach((function(r){var o=c?j(c+"/"+r.path):void 0;at(t,e,n,r,h,o)})),e[h.path]||(t.push(h.path),e[h.path]=h),void 0!==r.alias)for(var v=Array.isArray(r.alias)?r.alias:[r.alias],i=0;i<v.length;++i){0;var m={path:v[i],children:r.children};at(t,e,n,m,o,h.path||"/")}f&&(n[f]||(n[f]=h))}function st(path,t){return M(path,[],t)}function ct(t,e){var n=it(t),r=n.pathList,o=n.pathMap,c=n.nameMap;function f(t,n,f){var l=Y(t,n,!1,e),h=l.name;if(h){var v=c[h];if(!v)return d(null,l);var m=v.regex.keys.filter((function(t){return!t.optional})).map((function(t){return t.name}));if("object"!=typeof l.params&&(l.params={}),n&&"object"==typeof n.params)for(var y in n.params)!(y in l.params)&&m.indexOf(y)>-1&&(l.params[y]=n.params[y]);return l.path=X(v.path,l.params),d(v,l,f)}if(l.path){l.params={};for(var i=0;i<r.length;i++){var path=r[i],_=o[path];if(ut(_.regex,l.path,l.params))return d(_,l,f)}}return d(null,l)}function l(t,n){var r=t.redirect,o="function"==typeof r?r(_(t,n,null,e)):r;if("string"==typeof o&&(o={path:o}),!o||"object"!=typeof o)return d(null,n);var l=o,h=l.name,path=l.path,v=n.query,m=n.hash,y=n.params;if(v=l.hasOwnProperty("query")?l.query:v,m=l.hasOwnProperty("hash")?l.hash:m,y=l.hasOwnProperty("params")?l.params:y,h){c[h];return f({_normalized:!0,name:h,query:v,hash:m,params:y},void 0,n)}if(path){var w=function(path,t){return T(path,t.parent?t.parent.path:"/",!0)}(path,t);return f({_normalized:!0,path:X(w,y),query:v,hash:m},void 0,n)}return d(null,n)}function d(t,n,r){return t&&t.redirect?l(t,r||n):t&&t.matchAs?function(t,e,n){var r=f({_normalized:!0,path:X(n,e.params)});if(r){var o=r.matched,c=o[o.length-1];return e.params=r.params,d(c,e)}return d(null,e)}(0,n,t.matchAs):_(t,n,r,e)}return{match:f,addRoute:function(t,e){var n="object"!=typeof t?c[t]:void 0;it([e||t],r,o,c,n),n&&it(n.alias.map((function(t){return{path:t,children:[e]}})),r,o,c,n)},getRoutes:function(){return r.map((function(path){return o[path]}))},addRoutes:function(t){it(t,r,o,c)}}}function ut(t,path,e){var n=path.match(t);if(!n)return!1;if(!e)return!0;for(var i=1,r=n.length;i<r;++i){var o=t.keys[i-1];o&&(e[o.name||"pathMatch"]="string"==typeof n[i]?d(n[i]):n[i])}return!0}var ft=ot&&window.performance&&window.performance.now?window.performance:Date;function lt(){return ft.now().toFixed(3)}var pt=lt();function ht(){return pt}function vt(t){return pt=t}var mt=Object.create(null);function yt(){"scrollRestoration"in window.history&&(window.history.scrollRestoration="manual");var t=window.location.protocol+"//"+window.location.host,e=window.location.href.replace(t,""),n=r({},window.history.state);return n.key=ht(),window.history.replaceState(n,"",e),window.addEventListener("popstate",_t),function(){window.removeEventListener("popstate",_t)}}function gt(t,e,n,r){if(t.app){var o=t.options.scrollBehavior;o&&t.app.$nextTick((function(){var c=function(){var t=ht();if(t)return mt[t]}(),f=o.call(t,e,n,r?c:null);f&&("function"==typeof f.then?f.then((function(t){$t(t,c)})).catch((function(t){0})):$t(f,c))}))}}function bt(){var t=ht();t&&(mt[t]={x:window.pageXOffset,y:window.pageYOffset})}function _t(t){bt(),t.state&&t.state.key&&vt(t.state.key)}function wt(t){return Ot(t.x)||Ot(t.y)}function xt(t){return{x:Ot(t.x)?t.x:window.pageXOffset,y:Ot(t.y)?t.y:window.pageYOffset}}function Ot(t){return"number"==typeof t}var St=/^#\d/;function $t(t,e){var n,r="object"==typeof t;if(r&&"string"==typeof t.selector){var o=St.test(t.selector)?document.getElementById(t.selector.slice(1)):document.querySelector(t.selector);if(o){var c=t.offset&&"object"==typeof t.offset?t.offset:{};e=function(t,e){var n=document.documentElement.getBoundingClientRect(),r=t.getBoundingClientRect();return{x:r.left-n.left-e.x,y:r.top-n.top-e.y}}(o,c={x:Ot((n=c).x)?n.x:0,y:Ot(n.y)?n.y:0})}else wt(t)&&(e=xt(t))}else r&&wt(t)&&(e=xt(t));e&&("scrollBehavior"in document.documentElement.style?window.scrollTo({left:e.x,top:e.y,behavior:t.behavior}):window.scrollTo(e.x,e.y))}var kt,At=ot&&((-1===(kt=window.navigator.userAgent).indexOf("Android 2.")&&-1===kt.indexOf("Android 4.0")||-1===kt.indexOf("Mobile Safari")||-1!==kt.indexOf("Chrome")||-1!==kt.indexOf("Windows Phone"))&&window.history&&"function"==typeof window.history.pushState);function Ct(t,e){bt();var n=window.history;try{if(e){var o=r({},n.state);o.key=ht(),n.replaceState(o,"",t)}else n.pushState({key:vt(lt())},"",t)}catch(n){window.location[e?"replace":"assign"](t)}}function Et(t){Ct(t,!0)}function Tt(t,e,n){var r=function(o){o>=t.length?n():t[o]?e(t[o],(function(){r(o+1)})):r(o+1)};r(0)}var jt={redirected:2,aborted:4,cancelled:8,duplicated:16};function It(t,e){return Nt(t,e,jt.redirected,'Redirected when going from "'+t.fullPath+'" to "'+function(t){if("string"==typeof t)return t;if("path"in t)return t.path;var e={};return Pt.forEach((function(n){n in t&&(e[n]=t[n])})),JSON.stringify(e,null,2)}(e)+'" via a navigation guard.')}function Mt(t,e){return Nt(t,e,jt.cancelled,'Navigation cancelled from "'+t.fullPath+'" to "'+e.fullPath+'" with a new navigation.')}function Nt(t,e,n,r){var o=new Error(r);return o._isRouter=!0,o.from=t,o.to=e,o.type=n,o}var Pt=["params","query","hash"];function Lt(t){return Object.prototype.toString.call(t).indexOf("Error")>-1}function Rt(t,e){return Lt(t)&&t._isRouter&&(null==e||t.type===e)}function Ft(t){return function(e,n,r){var o=!1,c=0,f=null;Dt(t,(function(t,e,n,l){if("function"==typeof t&&void 0===t.cid){o=!0,c++;var d,h=Bt((function(e){var o;((o=e).__esModule||Ht&&"Module"===o[Symbol.toStringTag])&&(e=e.default),t.resolved="function"==typeof e?e:Z.extend(e),n.components[l]=e,--c<=0&&r()})),v=Bt((function(t){var e="Failed to resolve async component "+l+": "+t;f||(f=Lt(t)?t:new Error(e),r(f))}));try{d=t(h,v)}catch(t){v(t)}if(d)if("function"==typeof d.then)d.then(h,v);else{var m=d.component;m&&"function"==typeof m.then&&m.then(h,v)}}})),o||r()}}function Dt(t,e){return Ut(t.map((function(t){return Object.keys(t.components).map((function(n){return e(t.components[n],t.instances[n],t,n)}))})))}function Ut(t){return Array.prototype.concat.apply([],t)}var Ht="function"==typeof Symbol&&"symbol"==typeof Symbol.toStringTag;function Bt(t){var e=!1;return function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];if(!e)return e=!0,t.apply(this,n)}}var Vt=function(t,base){this.router=t,this.base=function(base){if(!base)if(ot){var t=document.querySelector("base");base=(base=t&&t.getAttribute("href")||"/").replace(/^https?:\/\/[^\/]+/,"")}else base="/";"/"!==base.charAt(0)&&(base="/"+base);return base.replace(/\/$/,"")}(base),this.current=x,this.pending=null,this.ready=!1,this.readyCbs=[],this.readyErrorCbs=[],this.errorCbs=[],this.listeners=[]};function zt(t,e,n,r){var o=Dt(t,(function(t,r,o,c){var f=function(t,e){"function"!=typeof t&&(t=Z.extend(t));return t.options[e]}(t,e);if(f)return Array.isArray(f)?f.map((function(t){return n(t,r,o,c)})):n(f,r,o,c)}));return Ut(r?o.reverse():o)}function Kt(t,e){if(e)return function(){return t.apply(e,arguments)}}Vt.prototype.listen=function(t){this.cb=t},Vt.prototype.onReady=function(t,e){this.ready?t():(this.readyCbs.push(t),e&&this.readyErrorCbs.push(e))},Vt.prototype.onError=function(t){this.errorCbs.push(t)},Vt.prototype.transitionTo=function(t,e,n){var r,o=this;try{r=this.router.match(t,this.current)}catch(t){throw this.errorCbs.forEach((function(e){e(t)})),t}var c=this.current;this.confirmTransition(r,(function(){o.updateRoute(r),e&&e(r),o.ensureURL(),o.router.afterHooks.forEach((function(t){t&&t(r,c)})),o.ready||(o.ready=!0,o.readyCbs.forEach((function(t){t(r)})))}),(function(t){n&&n(t),t&&!o.ready&&(Rt(t,jt.redirected)&&c===x||(o.ready=!0,o.readyErrorCbs.forEach((function(e){e(t)}))))}))},Vt.prototype.confirmTransition=function(t,e,n){var r=this,o=this.current;this.pending=t;var c,f,l=function(t){!Rt(t)&&Lt(t)&&(r.errorCbs.length?r.errorCbs.forEach((function(e){e(t)})):console.error(t)),n&&n(t)},d=t.matched.length-1,h=o.matched.length-1;if($(t,o)&&d===h&&t.matched[d]===o.matched[h])return this.ensureURL(),l(((f=Nt(c=o,t,jt.duplicated,'Avoided redundant navigation to current location: "'+c.fullPath+'".')).name="NavigationDuplicated",f));var v=function(t,e){var i,n=Math.max(t.length,e.length);for(i=0;i<n&&t[i]===e[i];i++);return{updated:e.slice(0,i),activated:e.slice(i),deactivated:t.slice(i)}}(this.current.matched,t.matched),m=v.updated,y=v.deactivated,_=v.activated,w=[].concat(function(t){return zt(t,"beforeRouteLeave",Kt,!0)}(y),this.router.beforeHooks,function(t){return zt(t,"beforeRouteUpdate",Kt)}(m),_.map((function(t){return t.beforeEnter})),Ft(_)),x=function(e,n){if(r.pending!==t)return l(Mt(o,t));try{e(t,o,(function(e){!1===e?(r.ensureURL(!0),l(function(t,e){return Nt(t,e,jt.aborted,'Navigation aborted from "'+t.fullPath+'" to "'+e.fullPath+'" via a navigation guard.')}(o,t))):Lt(e)?(r.ensureURL(!0),l(e)):"string"==typeof e||"object"==typeof e&&("string"==typeof e.path||"string"==typeof e.name)?(l(It(o,t)),"object"==typeof e&&e.replace?r.replace(e):r.push(e)):n(e)}))}catch(t){l(t)}};Tt(w,x,(function(){Tt(function(t){return zt(t,"beforeRouteEnter",(function(t,e,n,r){return function(t,e,n){return function(r,o,c){return t(r,o,(function(t){"function"==typeof t&&(e.enteredCbs[n]||(e.enteredCbs[n]=[]),e.enteredCbs[n].push(t)),c(t)}))}}(t,n,r)}))}(_).concat(r.router.resolveHooks),x,(function(){if(r.pending!==t)return l(Mt(o,t));r.pending=null,e(t),r.router.app&&r.router.app.$nextTick((function(){A(t)}))}))}))},Vt.prototype.updateRoute=function(t){this.current=t,this.cb&&this.cb(t)},Vt.prototype.setupListeners=function(){},Vt.prototype.teardown=function(){this.listeners.forEach((function(t){t()})),this.listeners=[],this.current=x,this.pending=null};var qt=function(t){function e(e,base){t.call(this,e,base),this._startLocation=Gt(this.base)}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router,n=e.options.scrollBehavior,r=At&&n;r&&this.listeners.push(yt());var o=function(){var n=t.current,o=Gt(t.base);t.current===x&&o===t._startLocation||t.transitionTo(o,(function(t){r&>(e,t,n,!0)}))};window.addEventListener("popstate",o),this.listeners.push((function(){window.removeEventListener("popstate",o)}))}},e.prototype.go=function(t){window.history.go(t)},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Ct(j(r.base+t.fullPath)),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Et(j(r.base+t.fullPath)),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.ensureURL=function(t){if(Gt(this.base)!==this.current.fullPath){var e=j(this.base+this.current.fullPath);t?Ct(e):Et(e)}},e.prototype.getCurrentLocation=function(){return Gt(this.base)},e}(Vt);function Gt(base){var path=window.location.pathname;return base&&0===path.toLowerCase().indexOf(base.toLowerCase())&&(path=path.slice(base.length)),(path||"/")+window.location.search+window.location.hash}var Wt=function(t){function e(e,base,n){t.call(this,e,base),n&&function(base){var t=Gt(base);if(!/^\/#/.test(t))return window.location.replace(j(base+"/#"+t)),!0}(this.base)||Jt()}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.setupListeners=function(){var t=this;if(!(this.listeners.length>0)){var e=this.router.options.scrollBehavior,n=At&&e;n&&this.listeners.push(yt());var r=function(){var e=t.current;Jt()&&t.transitionTo(Xt(),(function(r){n&>(t.router,r,e,!0),At||Qt(r.fullPath)}))},o=At?"popstate":"hashchange";window.addEventListener(o,r),this.listeners.push((function(){window.removeEventListener(o,r)}))}},e.prototype.push=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Zt(t.fullPath),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this,o=this.current;this.transitionTo(t,(function(t){Qt(t.fullPath),gt(r.router,t,o,!1),e&&e(t)}),n)},e.prototype.go=function(t){window.history.go(t)},e.prototype.ensureURL=function(t){var e=this.current.fullPath;Xt()!==e&&(t?Zt(e):Qt(e))},e.prototype.getCurrentLocation=function(){return Xt()},e}(Vt);function Jt(){var path=Xt();return"/"===path.charAt(0)||(Qt("/"+path),!1)}function Xt(){var t=window.location.href,e=t.indexOf("#");return e<0?"":t=t.slice(e+1)}function Yt(path){var t=window.location.href,i=t.indexOf("#");return(i>=0?t.slice(0,i):t)+"#"+path}function Zt(path){At?Ct(Yt(path)):window.location.hash=path}function Qt(path){At?Et(Yt(path)):window.location.replace(Yt(path))}var te=function(t){function e(e,base){t.call(this,e,base),this.stack=[],this.index=-1}return t&&(e.__proto__=t),e.prototype=Object.create(t&&t.prototype),e.prototype.constructor=e,e.prototype.push=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index+1).concat(t),r.index++,e&&e(t)}),n)},e.prototype.replace=function(t,e,n){var r=this;this.transitionTo(t,(function(t){r.stack=r.stack.slice(0,r.index).concat(t),e&&e(t)}),n)},e.prototype.go=function(t){var e=this,n=this.index+t;if(!(n<0||n>=this.stack.length)){var r=this.stack[n];this.confirmTransition(r,(function(){var t=e.current;e.index=n,e.updateRoute(r),e.router.afterHooks.forEach((function(e){e&&e(r,t)}))}),(function(t){Rt(t,jt.duplicated)&&(e.index=n)}))}},e.prototype.getCurrentLocation=function(){var t=this.stack[this.stack.length-1];return t?t.fullPath:"/"},e.prototype.ensureURL=function(){},e}(Vt),ee=function(t){void 0===t&&(t={}),this.app=null,this.apps=[],this.options=t,this.beforeHooks=[],this.resolveHooks=[],this.afterHooks=[],this.matcher=ct(t.routes||[],this);var e=t.mode||"hash";switch(this.fallback="history"===e&&!At&&!1!==t.fallback,this.fallback&&(e="hash"),ot||(e="abstract"),this.mode=e,e){case"history":this.history=new qt(this,t.base);break;case"hash":this.history=new Wt(this,t.base,this.fallback);break;case"abstract":this.history=new te(this,t.base);break;default:0}},ne={currentRoute:{configurable:!0}};function re(t,e){return t.push(e),function(){var i=t.indexOf(e);i>-1&&t.splice(i,1)}}ee.prototype.match=function(t,e,n){return this.matcher.match(t,e,n)},ne.currentRoute.get=function(){return this.history&&this.history.current},ee.prototype.init=function(t){var e=this;if(this.apps.push(t),t.$once("hook:destroyed",(function(){var n=e.apps.indexOf(t);n>-1&&e.apps.splice(n,1),e.app===t&&(e.app=e.apps[0]||null),e.app||e.history.teardown()})),!this.app){this.app=t;var n=this.history;if(n instanceof qt||n instanceof Wt){var r=function(t){n.setupListeners(),function(t){var r=n.current,o=e.options.scrollBehavior;At&&o&&"fullPath"in t&>(e,t,r,!1)}(t)};n.transitionTo(n.getCurrentLocation(),r,r)}n.listen((function(t){e.apps.forEach((function(e){e._route=t}))}))}},ee.prototype.beforeEach=function(t){return re(this.beforeHooks,t)},ee.prototype.beforeResolve=function(t){return re(this.resolveHooks,t)},ee.prototype.afterEach=function(t){return re(this.afterHooks,t)},ee.prototype.onReady=function(t,e){this.history.onReady(t,e)},ee.prototype.onError=function(t){this.history.onError(t)},ee.prototype.push=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.push(t,e,n)}));this.history.push(t,e,n)},ee.prototype.replace=function(t,e,n){var r=this;if(!e&&!n&&"undefined"!=typeof Promise)return new Promise((function(e,n){r.history.replace(t,e,n)}));this.history.replace(t,e,n)},ee.prototype.go=function(t){this.history.go(t)},ee.prototype.back=function(){this.go(-1)},ee.prototype.forward=function(){this.go(1)},ee.prototype.getMatchedComponents=function(t){var e=t?t.matched?t:this.resolve(t).route:this.currentRoute;return e?[].concat.apply([],e.matched.map((function(t){return Object.keys(t.components).map((function(e){return t.components[e]}))}))):[]},ee.prototype.resolve=function(t,e,n){var r=Y(t,e=e||this.history.current,n,this),o=this.match(r,e),c=o.redirectedFrom||o.fullPath;return{location:r,route:o,href:function(base,t,e){var path="hash"===e?"#"+t:t;return base?j(base+"/"+path):path}(this.history.base,c,this.mode),normalizedTo:r,resolved:o}},ee.prototype.getRoutes=function(){return this.matcher.getRoutes()},ee.prototype.addRoute=function(t,e){this.matcher.addRoute(t,e),this.history.current!==x&&this.history.transitionTo(this.history.getCurrentLocation())},ee.prototype.addRoutes=function(t){this.matcher.addRoutes(t),this.history.current!==x&&this.history.transitionTo(this.history.getCurrentLocation())},Object.defineProperties(ee.prototype,ne),ee.install=function t(e){if(!t.installed||Z!==e){t.installed=!0,Z=e;var n=function(t){return void 0!==t},r=function(t,e){var i=t.$options._parentVnode;n(i)&&n(i=i.data)&&n(i=i.registerRouteInstance)&&i(t,e)};e.mixin({beforeCreate:function(){n(this.$options.router)?(this._routerRoot=this,this._router=this.$options.router,this._router.init(this),e.util.defineReactive(this,"_route",this._router.history.current)):this._routerRoot=this.$parent&&this.$parent._routerRoot||this,r(this,this)},destroyed:function(){r(this)}}),Object.defineProperty(e.prototype,"$router",{get:function(){return this._routerRoot._router}}),Object.defineProperty(e.prototype,"$route",{get:function(){return this._routerRoot._route}}),e.component("RouterView",C),e.component("RouterLink",tt);var o=e.config.optionMergeStrategies;o.beforeRouteEnter=o.beforeRouteLeave=o.beforeRouteUpdate=o.created}},ee.version="3.5.1",ee.isNavigationFailure=Rt,ee.NavigationFailureType=jt,ee.START_LOCATION=x,ot&&window.Vue&&window.Vue.use(ee),e.a=ee},function(t,e,n){var r,o;!function(c){if(void 0===(o="function"==typeof(r=c)?r.call(e,n,e,t):r)||(t.exports=o),!0,t.exports=c(),!!0){var f=window.Cookies,l=window.Cookies=c();l.noConflict=function(){return window.Cookies=f,l}}}((function(){function t(){for(var i=0,t={};i<arguments.length;i++){var e=arguments[i];for(var n in e)t[n]=e[n]}return t}function e(s){return s.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)}return function n(r){function o(){}function c(e,n,c){if("undefined"!=typeof document){"number"==typeof(c=t({path:"/"},o.defaults,c)).expires&&(c.expires=new Date(1*new Date+864e5*c.expires)),c.expires=c.expires?c.expires.toUTCString():"";try{var f=JSON.stringify(n);/^[\{\[]/.test(f)&&(n=f)}catch(t){}n=r.write?r.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var l="";for(var d in c)c[d]&&(l+="; "+d,!0!==c[d]&&(l+="="+c[d].split(";")[0]));return document.cookie=e+"="+n+l}}function f(t,n){if("undefined"!=typeof document){for(var o={},c=document.cookie?document.cookie.split("; "):[],i=0;i<c.length;i++){var f=c[i].split("="),l=f.slice(1).join("=");n||'"'!==l.charAt(0)||(l=l.slice(1,-1));try{var d=e(f[0]);if(l=(r.read||r)(l,d)||e(l),n)try{l=JSON.parse(l)}catch(t){}if(o[d]=l,t===d)break}catch(t){}}return t?o[t]:o}}return o.set=c,o.get=function(t){return f(t,!1)},o.getJSON=function(t){return f(t,!0)},o.remove=function(e,n){c(e,"",t(n,{expires:-1}))},o.defaults={},o.withConverter=n,o}((function(){}))}))},,,function(t,e,n){var r=n(6),o=n(94),c=n(12).f,f=n(53).f,l=n(90),d=n(69),h=r.RegExp,v=h,m=h.prototype,y=/a/g,_=/a/g,w=new h(y)!==y;if(n(10)&&(!w||n(9)((function(){return _[n(5)("match")]=!1,h(y)!=y||h(_)==_||"/a/i"!=h(y,"i")})))){h=function(p,t){var e=this instanceof h,n=l(p),r=void 0===t;return!e&&n&&p.constructor===h&&r?p:o(w?new v(n&&!r?p.source:p,t):v((n=p instanceof h)?p.source:p,n&&r?d.call(p):t),e?this:m,h)};for(var x=function(t){t in h||c(h,t,{configurable:!0,get:function(){return v[t]},set:function(e){v[t]=e}})},O=f(v),i=0;O.length>i;)x(O[i++]);m.constructor=h,h.prototype=m,n(14)(r,"RegExp",h)}n(87)("RegExp")},function(t,e,n){t.exports=!n(10)&&!n(9)((function(){return 7!=Object.defineProperty(n(74)("div"),"a",{get:function(){return 7}}).a}))},function(t,e,n){var r=n(50),o=Math.max,c=Math.min;t.exports=function(t,e){return(t=r(t))<0?o(t+e,0):c(t,e)}},function(t,e,n){e.f=n(5)},function(t,e,n){var r=n(31),o=n(24),c=n(108)(!1),f=n(78)("IE_PROTO");t.exports=function(object,t){var e,n=o(object),i=0,l=[];for(e in n)e!=f&&r(n,e)&&l.push(e);for(;t.length>i;)r(n,e=t[i++])&&(~c(l,e)||l.push(e));return l}},function(t,e,n){var r=n(24),o=n(19),c=n(105);t.exports=function(t){return function(e,n,f){var l,d=r(e),h=o(d.length),v=c(f,h);if(t&&n!=n){for(;h>v;)if((l=d[v++])!=l)return!0}else for(;h>v;v++)if((t||v in d)&&d[v]===n)return t||v||0;return!t&&-1}}},function(t,e,n){var r=n(33);t.exports=Array.isArray||function(t){return"Array"==r(t)}},function(t,e,n){var r=n(8);t.exports=function(t,e,n,o){try{return o?e(r(n)[0],n[1]):e(n)}catch(e){var c=t.return;throw void 0!==c&&r(c.call(t)),e}}},function(t,e,n){var r=n(55),o=n(5)("iterator"),c=Array.prototype;t.exports=function(t){return void 0!==t&&(r.Array===t||c[o]===t)}},function(t,e,n){"use strict";var r=n(12),o=n(47);t.exports=function(object,t,e){t in object?r.f(object,t,o(0,e)):object[t]=e}},function(t,e,n){var r=n(66),o=n(5)("iterator"),c=n(55);t.exports=n(29).getIteratorMethod=function(t){if(null!=t)return t[o]||t["@@iterator"]||c[r(t)]}},function(t,e,n){"use strict";var r=n(81),o=n(115),c=n(55),f=n(24);t.exports=n(82)(Array,"Array",(function(t,e){this._t=f(t),this._i=0,this._k=e}),(function(){var t=this._t,e=this._k,n=this._i++;return!t||n>=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])}),"values"),c.Arguments=c.Array,r("keys"),r("values"),r("entries")},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r,o,c,f=n(32),l=n(151),html=n(75),d=n(74),h=n(6),v=h.process,m=h.setImmediate,y=h.clearImmediate,_=h.MessageChannel,w=h.Dispatch,x=0,O={},S="onreadystatechange",$=function(){var t=+this;if(O.hasOwnProperty(t)){var e=O[t];delete O[t],e()}},k=function(t){$.call(t.data)};m&&y||(m=function(t){for(var e=[],i=1;arguments.length>i;)e.push(arguments[i++]);return O[++x]=function(){l("function"==typeof t?t:Function(t),e)},r(x),x},y=function(t){delete O[t]},"process"==n(33)(v)?r=function(t){v.nextTick(f($,t,1))}:w&&w.now?r=function(t){w.now(f($,t,1))}:_?(c=(o=new _).port2,o.port1.onmessage=k,r=f(c.postMessage,c,1)):h.addEventListener&&"function"==typeof postMessage&&!h.importScripts?(r=function(t){h.postMessage(t+"","*")},h.addEventListener("message",k,!1)):r=S in d("script")?function(t){html.appendChild(d("script")).onreadystatechange=function(){html.removeChild(this),$.call(t)}}:function(t){setTimeout(f($,t,1),0)}),t.exports={set:m,clear:y}},function(t,e,n){"use strict";var r=n(63);function o(t){var e,n;this.promise=new t((function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r})),this.resolve=r(e),this.reject=r(n)}t.exports.f=function(t){return new o(t)}},function(t,e,n){var r=n(8),o=n(13),c=n(117);t.exports=function(t,e){if(r(t),o(e)&&e.constructor===t)return e;var n=c.f(t);return(0,n.resolve)(e),n.promise}},function(t,e,n){"use strict";var r=n(9);t.exports=function(t,e){return!!t&&r((function(){e?t.call(null,(function(){}),1):t.call(null)}))}},function(t,e,n){var r=n(4),o=n(29),c=n(9);t.exports=function(t,e){var n=(o.Object||{})[t]||Object[t],f={};f[t]=e(n),r(r.S+r.F*c((function(){n(1)})),"Object",f)}},function(t,e,n){var r=n(50),o=n(38);t.exports=function(t){return function(e,n){var a,b,s=String(o(e)),i=r(n),c=s.length;return i<0||i>=c?t?"":void 0:(a=s.charCodeAt(i))<55296||a>56319||i+1===c||(b=s.charCodeAt(i+1))<56320||b>57343?t?s.charAt(i):a:t?s.slice(i,i+2):b-56320+(a-55296<<10)+65536}}},function(t,e,n){var r=n(4),o=n(161)(!0);r(r.S,"Object",{entries:function(t){return o(t)}})},function(t,e,n){"use strict";var r=n(8),o=n(163),c=n(67);n(68)("search",1,(function(t,e,n,f){return[function(n){var r=t(this),o=null==n?void 0:n[e];return void 0!==o?o.call(n,r):new RegExp(n)[e](String(r))},function(t){var e=f(n,t,this);if(e.done)return e.value;var l=r(t),d=String(this),h=l.lastIndex;o(h,0)||(l.lastIndex=0);var v=c(l,d);return o(l.lastIndex,h)||(l.lastIndex=h),null===v?-1:v.index}]}))},,,,,,,function(t,e,n){var r=n(13);t.exports=function(t,e){if(!r(t)||t._t!==e)throw TypeError("Incompatible receiver, "+e+" required!");return t}},,,,,,,function(t,e,n){"use strict";n.d(e,"a",(function(){return c}));var r=n(57);var o=n(72);function c(t){return function(t){if(Array.isArray(t))return Object(r.a)(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||Object(o.a)(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}},function(t,e,n){"use strict";function r(source,t){if(null==source)return{};var e,i,n=function(source,t){if(null==source)return{};var e,i,n={},r=Object.keys(source);for(i=0;i<r.length;i++)e=r[i],t.indexOf(e)>=0||(n[e]=source[e]);return n}(source,t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(source);for(i=0;i<r.length;i++)e=r[i],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(source,e)&&(n[e]=source[e])}return n}n.d(e,"a",(function(){return r}))},function(t,e,n){"use strict";var r=n(4),o=n(19),c=n(89),f="endsWith",l="".endsWith;r(r.P+r.F*n(91)(f),"String",{endsWith:function(t){var e=c(this,t,f),n=arguments.length>1?arguments[1]:void 0,r=o(e.length),d=void 0===n?r:Math.min(o(n),r),h=String(t);return l?l.call(e,h,d):e.slice(d-h.length,d)===h}})},function(t,e,n){"use strict";var r=n(6),o=n(31),c=n(33),f=n(94),l=n(61),d=n(9),h=n(53).f,v=n(54).f,m=n(12).f,y=n(175).trim,_="Number",w=r.Number,x=w,O=w.prototype,S=c(n(65)(O))==_,$="trim"in String.prototype,k=function(t){var e=l(t,!1);if("string"==typeof e&&e.length>2){var n,r,o,c=(e=$?e.trim():y(e,3)).charCodeAt(0);if(43===c||45===c){if(88===(n=e.charCodeAt(2))||120===n)return NaN}else if(48===c){switch(e.charCodeAt(1)){case 66:case 98:r=2,o=49;break;case 79:case 111:r=8,o=55;break;default:return+e}for(var code,f=e.slice(2),i=0,d=f.length;i<d;i++)if((code=f.charCodeAt(i))<48||code>o)return NaN;return parseInt(f,r)}}return+e};if(!w(" 0o1")||!w("0b1")||w("+0x1")){w=function(t){var e=arguments.length<1?0:t,n=this;return n instanceof w&&(S?d((function(){O.valueOf.call(n)})):c(n)!=_)?f(new x(k(e)),n,w):k(e)};for(var A,C=n(10)?h(x):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,isFinite,isInteger,isNaN,isSafeInteger,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,parseFloat,parseInt,isInteger".split(","),E=0;C.length>E;E++)o(x,A=C[E])&&!o(w,A)&&m(w,A,v(x,A));w.prototype=O,O.constructor=w,n(14)(r,_,w)}},,,function(t,e,n){t.exports=n(62)("native-function-to-string",Function.toString)},function(t,e,n){var r=n(6),o=n(29),c=n(49),f=n(106),l=n(12).f;t.exports=function(t){var e=o.Symbol||(o.Symbol=c?{}:r.Symbol||{});"_"==t.charAt(0)||t in e||l(e,t,{value:f.f(t)})}},function(t,e,n){var r=n(39),o=n(64),c=n(52);t.exports=function(t){var e=r(t),n=o.f;if(n)for(var f,l=n(t),d=c.f,i=0;l.length>i;)d.call(t,f=l[i++])&&e.push(f);return e}},function(t,e,n){var r=n(12),o=n(8),c=n(39);t.exports=n(10)?Object.defineProperties:function(t,e){o(t);for(var n,f=c(e),l=f.length,i=0;l>i;)r.f(t,n=f[i++],e[n]);return t}},function(t,e,n){var r=n(24),o=n(53).f,c={}.toString,f="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return f&&"[object Window]"==c.call(t)?function(t){try{return o(t)}catch(t){return f.slice()}}(t):o(r(t))}},function(t,e,n){"use strict";var r=n(65),o=n(47),c=n(51),f={};n(30)(f,n(5)("iterator"),(function(){return this})),t.exports=function(t,e,n){t.prototype=r(f,{next:o(1,n)}),c(t,e+" Iterator")}},function(t,e,n){var r=n(31),o=n(40),c=n(78)("IE_PROTO"),f=Object.prototype;t.exports=Object.getPrototypeOf||function(t){return t=o(t),r(t,c)?t[c]:"function"==typeof t.constructor&&t instanceof t.constructor?t.constructor.prototype:t instanceof Object?f:null}},function(t,e,n){"use strict";var r,o,c,f,l=n(49),d=n(6),h=n(32),v=n(66),m=n(4),y=n(13),_=n(63),w=n(83),x=n(84),O=n(85),S=n(116).set,$=n(152)(),k=n(117),A=n(153),C=n(154),E=n(118),T="Promise",j=d.TypeError,I=d.process,M=I&&I.versions,N=M&&M.v8||"",P=d.Promise,L="process"==v(I),R=function(){},F=o=k.f,D=!!function(){try{var t=P.resolve(1),e=(t.constructor={})[n(5)("species")]=function(t){t(R,R)};return(L||"function"==typeof PromiseRejectionEvent)&&t.then(R)instanceof e&&0!==N.indexOf("6.6")&&-1===C.indexOf("Chrome/66")}catch(t){}}(),U=function(t){var e;return!(!y(t)||"function"!=typeof(e=t.then))&&e},H=function(t,e){if(!t._n){t._n=!0;var n=t._c;$((function(){for(var r=t._v,o=1==t._s,i=0,c=function(e){var n,c,f,l=o?e.ok:e.fail,d=e.resolve,h=e.reject,v=e.domain;try{l?(o||(2==t._h&&z(t),t._h=1),!0===l?n=r:(v&&v.enter(),n=l(r),v&&(v.exit(),f=!0)),n===e.promise?h(j("Promise-chain cycle")):(c=U(n))?c.call(n,d,h):d(n)):h(r)}catch(t){v&&!f&&v.exit(),h(t)}};n.length>i;)c(n[i++]);t._c=[],t._n=!1,e&&!t._h&&B(t)}))}},B=function(t){S.call(d,(function(){var e,n,r,o=t._v,c=V(t);if(c&&(e=A((function(){L?I.emit("unhandledRejection",o,t):(n=d.onunhandledrejection)?n({promise:t,reason:o}):(r=d.console)&&r.error&&r.error("Unhandled promise rejection",o)})),t._h=L||V(t)?2:1),t._a=void 0,c&&e.e)throw e.v}))},V=function(t){return 1!==t._h&&0===(t._a||t._c).length},z=function(t){S.call(d,(function(){var e;L?I.emit("rejectionHandled",t):(e=d.onrejectionhandled)&&e({promise:t,reason:t._v})}))},K=function(t){var e=this;e._d||(e._d=!0,(e=e._w||e)._v=t,e._s=2,e._a||(e._a=e._c.slice()),H(e,!0))},G=function(t){var e,n=this;if(!n._d){n._d=!0,n=n._w||n;try{if(n===t)throw j("Promise can't be resolved itself");(e=U(t))?$((function(){var r={_w:n,_d:!1};try{e.call(t,h(G,r,1),h(K,r,1))}catch(t){K.call(r,t)}})):(n._v=t,n._s=1,H(n,!1))}catch(t){K.call({_w:n,_d:!1},t)}}};D||(P=function(t){w(this,P,T,"_h"),_(t),r.call(this);try{t(h(G,this,1),h(K,this,1))}catch(t){K.call(this,t)}},(r=function(t){this._c=[],this._a=void 0,this._s=0,this._d=!1,this._v=void 0,this._h=0,this._n=!1}).prototype=n(86)(P.prototype,{then:function(t,e){var n=F(O(this,P));return n.ok="function"!=typeof t||t,n.fail="function"==typeof e&&e,n.domain=L?I.domain:void 0,this._c.push(n),this._a&&this._a.push(n),this._s&&H(this,!1),n.promise},catch:function(t){return this.then(void 0,t)}}),c=function(){var t=new r;this.promise=t,this.resolve=h(G,t,1),this.reject=h(K,t,1)},k.f=F=function(t){return t===P||t===f?new c(t):o(t)}),m(m.G+m.W+m.F*!D,{Promise:P}),n(51)(P,T),n(87)(T),f=n(29).Promise,m(m.S+m.F*!D,T,{reject:function(t){var e=F(this);return(0,e.reject)(t),e.promise}}),m(m.S+m.F*(l||!D),T,{resolve:function(t){return E(l&&this===f?P:this,t)}}),m(m.S+m.F*!(D&&n(80)((function(t){P.all(t).catch(R)}))),T,{all:function(t){var e=this,n=F(e),r=n.resolve,o=n.reject,c=A((function(){var n=[],c=0,f=1;x(t,!1,(function(t){var l=c++,d=!1;n.push(void 0),f++,e.resolve(t).then((function(t){d||(d=!0,n[l]=t,--f||r(n))}),o)})),--f||r(n)}));return c.e&&o(c.v),n.promise},race:function(t){var e=this,n=F(e),r=n.reject,o=A((function(){x(t,!1,(function(t){e.resolve(t).then(n.resolve,r)}))}));return o.e&&r(o.v),n.promise}})},function(t,e){t.exports=function(t,e,n){var r=void 0===n;switch(e.length){case 0:return r?t():t.call(n);case 1:return r?t(e[0]):t.call(n,e[0]);case 2:return r?t(e[0],e[1]):t.call(n,e[0],e[1]);case 3:return r?t(e[0],e[1],e[2]):t.call(n,e[0],e[1],e[2]);case 4:return r?t(e[0],e[1],e[2],e[3]):t.call(n,e[0],e[1],e[2],e[3])}return t.apply(n,e)}},function(t,e,n){var r=n(6),o=n(116).set,c=r.MutationObserver||r.WebKitMutationObserver,f=r.process,l=r.Promise,d="process"==n(33)(f);t.exports=function(){var head,t,e,n=function(){var n,r;for(d&&(n=f.domain)&&n.exit();head;){r=head.fn,head=head.next;try{r()}catch(n){throw head?e():t=void 0,n}}t=void 0,n&&n.enter()};if(d)e=function(){f.nextTick(n)};else if(!c||r.navigator&&r.navigator.standalone)if(l&&l.resolve){var h=l.resolve(void 0);e=function(){h.then(n)}}else e=function(){o.call(r,n)};else{var v=!0,m=document.createTextNode("");new c(n).observe(m,{characterData:!0}),e=function(){m.data=v=!v}}return function(n){var r={fn:n,next:void 0};t&&(t.next=r),head||(head=r,e()),t=r}}},function(t,e){t.exports=function(t){try{return{e:!1,v:t()}}catch(t){return{e:!0,v:t}}}},function(t,e,n){var r=n(6).navigator;t.exports=r&&r.userAgent||""},function(t,e,n){var r=n(4);r(r.S+r.F,"Object",{assign:n(156)})},function(t,e,n){"use strict";var r=n(10),o=n(39),c=n(64),f=n(52),l=n(40),d=n(77),h=Object.assign;t.exports=!h||n(9)((function(){var t={},e={},n=Symbol(),r="abcdefghijklmnopqrst";return t[n]=7,r.split("").forEach((function(t){e[t]=t})),7!=h({},t)[n]||Object.keys(h({},e)).join("")!=r}))?function(t,source){for(var e=l(t),n=arguments.length,h=1,v=c.f,m=f.f;n>h;)for(var y,_=d(arguments[h++]),w=v?o(_).concat(v(_)):o(_),x=w.length,O=0;x>O;)y=w[O++],r&&!m.call(_,y)||(e[y]=_[y]);return e}:h},function(t,e,n){"use strict";var r=n(4),o=n(29),c=n(6),f=n(85),l=n(118);r(r.P+r.R,"Promise",{finally:function(t){var e=f(this,o.Promise||c.Promise),n="function"==typeof t;return this.then(n?function(n){return l(e,t()).then((function(){return n}))}:t,n?function(n){return l(e,t()).then((function(){throw n}))}:t)}})},function(t,e,n){var r=n(159);t.exports=function(t,e){return new(r(t))(e)}},function(t,e,n){var r=n(13),o=n(109),c=n(5)("species");t.exports=function(t){var e;return o(t)&&("function"!=typeof(e=t.constructor)||e!==Array&&!o(e.prototype)||(e=void 0),r(e)&&null===(e=e[c])&&(e=void 0)),void 0===e?Array:e}},function(t,e,n){var r=n(53),o=n(64),c=n(8),f=n(6).Reflect;t.exports=f&&f.ownKeys||function(t){var e=r.f(c(t)),n=o.f;return n?e.concat(n(t)):e}},function(t,e,n){var r=n(10),o=n(39),c=n(24),f=n(52).f;t.exports=function(t){return function(e){for(var n,l=c(e),d=o(l),h=d.length,i=0,v=[];h>i;)n=d[i++],r&&!f.call(l,n)||v.push(t?[n,l[n]]:l[n]);return v}}},function(t,e,n){"use strict";var r=n(93);n(4)({target:"RegExp",proto:!0,forced:r!==/./.exec},{exec:r})},function(t,e){t.exports=Object.is||function(t,e){return t===e?0!==t||1/t==1/e:t!=t&&e!=e}},function(t,e,n){var r=n(13),o=n(8),c=function(t,e){if(o(t),!r(e)&&null!==e)throw TypeError(e+": can't set as prototype!")};t.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(t,e,r){try{(r=n(32)(Function.call,n(54).f(Object.prototype,"__proto__").set,2))(t,[]),e=!(t instanceof Array)}catch(t){e=!0}return function(t,n){return c(t,n),e?t.__proto__=n:r(t,n),t}}({},!1):void 0),check:c}},function(t,e,n){n(10)&&"g"!=/./g.flags&&n(12).f(RegExp.prototype,"flags",{configurable:!0,get:n(69)})},function(t,e,n){var r=n(4);r(r.P,"String",{repeat:n(167)})},function(t,e,n){"use strict";var r=n(50),o=n(38);t.exports=function(t){var e=String(o(this)),n="",c=r(t);if(c<0||c==1/0)throw RangeError("Count can't be negative");for(;c>0;(c>>>=1)&&(e+=e))1&c&&(n+=e);return n}},function(t,e,n){"use strict";(function(e,n){var r=Object.freeze({});function o(t){return null==t}function c(t){return null!=t}function f(t){return!0===t}function i(t){return"string"==typeof t||"number"==typeof t||"symbol"==typeof t||"boolean"==typeof t}function l(t){return null!==t&&"object"==typeof t}var a=Object.prototype.toString;function s(t){return"[object Object]"===a.call(t)}function d(t){var e=parseFloat(String(t));return e>=0&&Math.floor(e)===e&&isFinite(t)}function u(t){return c(t)&&"function"==typeof t.then&&"function"==typeof t.catch}function h(t){return null==t?"":Array.isArray(t)||s(t)&&t.toString===a?JSON.stringify(t,null,2):String(t)}function v(t){var e=parseFloat(t);return isNaN(e)?t:e}function p(t,e){for(var n=Object.create(null),r=t.split(","),i=0;i<r.length;i++)n[r[i]]=!0;return e?function(t){return n[t.toLowerCase()]}:function(t){return n[t]}}var m=p("slot,component",!0),y=p("key,ref,slot,slot-scope,is");function _(t,e){if(t.length){var n=t.indexOf(e);if(n>-1)return t.splice(n,1)}}var w=Object.prototype.hasOwnProperty;function x(t,e){return w.call(t,e)}function g(t){var e=Object.create(null);return function(n){return e[n]||(e[n]=t(n))}}var O=/-(\w)/g,b=g((function(t){return t.replace(O,(function(t,e){return e?e.toUpperCase():""}))})),S=g((function(t){return t.charAt(0).toUpperCase()+t.slice(1)})),$=/\B([A-Z])/g,k=g((function(t){return t.replace($,"-$1").toLowerCase()})),A=Function.prototype.bind?function(t,e){return t.bind(e)}:function(t,e){function n(n){var r=arguments.length;return r?r>1?t.apply(e,arguments):t.call(e,n):t.call(e)}return n._length=t.length,n};function C(t,e){e=e||0;for(var n=t.length-e,r=new Array(n);n--;)r[n]=t[n+e];return r}function E(t,e){for(var n in e)t[n]=e[n];return t}function T(t){for(var e={},n=0;n<t.length;n++)t[n]&&E(e,t[n]);return e}function j(t,e,n){}var I=function(t,e,n){return!1},M=function(t){return t};function N(t,e){if(t===e)return!0;var n=l(t),r=l(e);if(!n||!r)return!n&&!r&&String(t)===String(e);try{var i=Array.isArray(t),a=Array.isArray(e);if(i&&a)return t.length===e.length&&t.every((function(t,n){return N(t,e[n])}));if(t instanceof Date&&e instanceof Date)return t.getTime()===e.getTime();if(i||a)return!1;var s=Object.keys(t),o=Object.keys(e);return s.length===o.length&&s.every((function(n){return N(t[n],e[n])}))}catch(t){return!1}}function P(t,e){for(var n=0;n<t.length;n++)if(N(t[n],e))return n;return-1}function L(t){var e=!1;return function(){e||(e=!0,t.apply(this,arguments))}}var R="data-server-rendered",F=["component","directive","filter"],D=["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed","activated","deactivated","errorCaptured","serverPrefetch"],U={optionMergeStrategies:Object.create(null),silent:!1,productionTip:!1,devtools:!1,performance:!1,errorHandler:null,warnHandler:null,ignoredElements:[],keyCodes:Object.create(null),isReservedTag:I,isReservedAttr:I,isUnknownElement:I,getTagNamespace:j,parsePlatformTagName:M,mustUseProp:I,async:!0,_lifecycleHooks:D},H=/a-zA-Z\u00B7\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u037D\u037F-\u1FFF\u200C-\u200D\u203F-\u2040\u2070-\u218F\u2C00-\u2FEF\u3001-\uD7FF\uF900-\uFDCF\uFDF0-\uFFFD/;function B(t,e,n,r){Object.defineProperty(t,e,{value:n,enumerable:!!r,writable:!0,configurable:!0})}var V,z=new RegExp("[^"+H.source+".$_\\d]"),K="__proto__"in{},G="undefined"!=typeof window,W="undefined"!=typeof WXEnvironment&&!!WXEnvironment.platform,J=W&&WXEnvironment.platform.toLowerCase(),X=G&&window.navigator.userAgent.toLowerCase(),q=X&&/msie|trident/.test(X),Y=X&&X.indexOf("msie 9.0")>0,Z=X&&X.indexOf("edge/")>0,Q=(X&&X.indexOf("android"),X&&/iphone|ipad|ipod|ios/.test(X)||"ios"===J),tt=(X&&/chrome\/\d+/.test(X),X&&/phantomjs/.test(X),X&&X.match(/firefox\/(\d+)/)),et={}.watch,nt=!1;if(G)try{var ot={};Object.defineProperty(ot,"passive",{get:function(){nt=!0}}),window.addEventListener("test-passive",null,ot)}catch(r){}var it=function(){return void 0===V&&(V=!G&&!W&&void 0!==e&&e.process&&"server"===e.process.env.VUE_ENV),V},at=G&&window.__VUE_DEVTOOLS_GLOBAL_HOOK__;function st(t){return"function"==typeof t&&/native code/.test(t.toString())}var ct,ut="undefined"!=typeof Symbol&&st(Symbol)&&"undefined"!=typeof Reflect&&st(Reflect.ownKeys);ct="undefined"!=typeof Set&&st(Set)?Set:function(){function t(){this.set=Object.create(null)}return t.prototype.has=function(t){return!0===this.set[t]},t.prototype.add=function(t){this.set[t]=!0},t.prototype.clear=function(){this.set=Object.create(null)},t}();var ft=j,lt=0,pt=function(){this.id=lt++,this.subs=[]};pt.prototype.addSub=function(t){this.subs.push(t)},pt.prototype.removeSub=function(t){_(this.subs,t)},pt.prototype.depend=function(){pt.target&&pt.target.addDep(this)},pt.prototype.notify=function(){for(var t=this.subs.slice(),e=0,n=t.length;e<n;e++)t[e].update()},pt.target=null;var ht=[];function vt(t){ht.push(t),pt.target=t}function mt(){ht.pop(),pt.target=ht[ht.length-1]}var yt=function(t,e,n,r,i,o,a,s){this.tag=t,this.data=e,this.children=n,this.text=r,this.elm=i,this.ns=void 0,this.context=o,this.fnContext=void 0,this.fnOptions=void 0,this.fnScopeId=void 0,this.key=e&&e.key,this.componentOptions=a,this.componentInstance=void 0,this.parent=void 0,this.raw=!1,this.isStatic=!1,this.isRootInsert=!0,this.isComment=!1,this.isCloned=!1,this.isOnce=!1,this.asyncFactory=s,this.asyncMeta=void 0,this.isAsyncPlaceholder=!1},gt={child:{configurable:!0}};gt.child.get=function(){return this.componentInstance},Object.defineProperties(yt.prototype,gt);var bt=function(t){void 0===t&&(t="");var e=new yt;return e.text=t,e.isComment=!0,e};function _t(t){return new yt(void 0,void 0,void 0,String(t))}function wt(t){var e=new yt(t.tag,t.data,t.children&&t.children.slice(),t.text,t.elm,t.context,t.componentOptions,t.asyncFactory);return e.ns=t.ns,e.isStatic=t.isStatic,e.key=t.key,e.isComment=t.isComment,e.fnContext=t.fnContext,e.fnOptions=t.fnOptions,e.fnScopeId=t.fnScopeId,e.asyncMeta=t.asyncMeta,e.isCloned=!0,e}var xt=Array.prototype,Ot=Object.create(xt);["push","pop","shift","unshift","splice","sort","reverse"].forEach((function(t){var e=xt[t];B(Ot,t,(function(){for(var n=[],r=arguments.length;r--;)n[r]=arguments[r];var i,o=e.apply(this,n),a=this.__ob__;switch(t){case"push":case"unshift":i=n;break;case"splice":i=n.slice(2)}return i&&a.observeArray(i),a.dep.notify(),o}))}));var St=Object.getOwnPropertyNames(Ot),$t=!0;function kt(t){$t=t}var At=function(t){var e;this.value=t,this.dep=new pt,this.vmCount=0,B(t,"__ob__",this),Array.isArray(t)?(K?(e=Ot,t.__proto__=e):function(t,e,n){for(var r=0,i=n.length;r<i;r++){var o=n[r];B(t,o,e[o])}}(t,Ot,St),this.observeArray(t)):this.walk(t)};function Ct(t,e){var n;if(l(t)&&!(t instanceof yt))return x(t,"__ob__")&&t.__ob__ instanceof At?n=t.__ob__:$t&&!it()&&(Array.isArray(t)||s(t))&&Object.isExtensible(t)&&!t._isVue&&(n=new At(t)),e&&n&&n.vmCount++,n}function Et(t,e,n,r,i){var o=new pt,a=Object.getOwnPropertyDescriptor(t,e);if(!a||!1!==a.configurable){var s=a&&a.get,c=a&&a.set;s&&!c||2!==arguments.length||(n=t[e]);var u=!i&&Ct(n);Object.defineProperty(t,e,{enumerable:!0,configurable:!0,get:function(){var e=s?s.call(t):n;return pt.target&&(o.depend(),u&&(u.dep.depend(),Array.isArray(e)&&function t(e){for(var n=void 0,r=0,i=e.length;r<i;r++)(n=e[r])&&n.__ob__&&n.__ob__.dep.depend(),Array.isArray(n)&&t(n)}(e))),e},set:function(e){var r=s?s.call(t):n;e===r||e!=e&&r!=r||s&&!c||(c?c.call(t,e):n=e,u=!i&&Ct(e),o.notify())}})}}function Tt(t,e,n){if(Array.isArray(t)&&d(e))return t.length=Math.max(t.length,e),t.splice(e,1,n),n;if(e in t&&!(e in Object.prototype))return t[e]=n,n;var r=t.__ob__;return t._isVue||r&&r.vmCount?n:r?(Et(r.value,e,n),r.dep.notify(),n):(t[e]=n,n)}function jt(t,e){if(Array.isArray(t)&&d(e))t.splice(e,1);else{var n=t.__ob__;t._isVue||n&&n.vmCount||x(t,e)&&(delete t[e],n&&n.dep.notify())}}At.prototype.walk=function(t){for(var e=Object.keys(t),n=0;n<e.length;n++)Et(t,e[n])},At.prototype.observeArray=function(t){for(var e=0,n=t.length;e<n;e++)Ct(t[e])};var It=U.optionMergeStrategies;function Mt(t,e){if(!e)return t;for(var n,r,i,o=ut?Reflect.ownKeys(e):Object.keys(e),a=0;a<o.length;a++)"__ob__"!==(n=o[a])&&(r=t[n],i=e[n],x(t,n)?r!==i&&s(r)&&s(i)&&Mt(r,i):Tt(t,n,i));return t}function Nt(t,e,n){return n?function(){var r="function"==typeof e?e.call(n,n):e,i="function"==typeof t?t.call(n,n):t;return r?Mt(r,i):i}:e?t?function(){return Mt("function"==typeof e?e.call(this,this):e,"function"==typeof t?t.call(this,this):t)}:e:t}function Pt(t,e){var n=e?t?t.concat(e):Array.isArray(e)?e:[e]:t;return n?function(t){for(var e=[],n=0;n<t.length;n++)-1===e.indexOf(t[n])&&e.push(t[n]);return e}(n):n}function Lt(t,e,n,r){var i=Object.create(t||null);return e?E(i,e):i}It.data=function(t,e,n){return n?Nt(t,e,n):e&&"function"!=typeof e?t:Nt(t,e)},D.forEach((function(t){It[t]=Pt})),F.forEach((function(t){It[t+"s"]=Lt})),It.watch=function(t,e,n,r){if(t===et&&(t=void 0),e===et&&(e=void 0),!e)return Object.create(t||null);if(!t)return e;var i={};for(var o in E(i,t),e){var a=i[o],s=e[o];a&&!Array.isArray(a)&&(a=[a]),i[o]=a?a.concat(s):Array.isArray(s)?s:[s]}return i},It.props=It.methods=It.inject=It.computed=function(t,e,n,r){if(!t)return e;var i=Object.create(null);return E(i,t),e&&E(i,e),i},It.provide=Nt;var Rt=function(t,e){return void 0===e?t:e};function Ft(t,e,n){if("function"==typeof e&&(e=e.options),function(t,e){var n=t.props;if(n){var r,i,o={};if(Array.isArray(n))for(r=n.length;r--;)"string"==typeof(i=n[r])&&(o[b(i)]={type:null});else if(s(n))for(var a in n)i=n[a],o[b(a)]=s(i)?i:{type:i};t.props=o}}(e),function(t,e){var n=t.inject;if(n){var r=t.inject={};if(Array.isArray(n))for(var i=0;i<n.length;i++)r[n[i]]={from:n[i]};else if(s(n))for(var o in n){var a=n[o];r[o]=s(a)?E({from:o},a):{from:a}}}}(e),function(t){var e=t.directives;if(e)for(var n in e){var r=e[n];"function"==typeof r&&(e[n]={bind:r,update:r})}}(e),!e._base&&(e.extends&&(t=Ft(t,e.extends,n)),e.mixins))for(var r=0,i=e.mixins.length;r<i;r++)t=Ft(t,e.mixins[r],n);var o,a={};for(o in t)c(o);for(o in e)x(t,o)||c(o);function c(r){var i=It[r]||Rt;a[r]=i(t[r],e[r],n,r)}return a}function Dt(t,e,n,r){if("string"==typeof n){var i=t[e];if(x(i,n))return i[n];var o=b(n);if(x(i,o))return i[o];var a=S(o);return x(i,a)?i[a]:i[n]||i[o]||i[a]}}function Ut(t,e,n,r){var i=e[t],o=!x(n,t),a=n[t],s=Vt(Boolean,i.type);if(s>-1)if(o&&!x(i,"default"))a=!1;else if(""===a||a===k(t)){var c=Vt(String,i.type);(c<0||s<c)&&(a=!0)}if(void 0===a){a=function(t,e,n){if(x(e,"default")){var r=e.default;return t&&t.$options.propsData&&void 0===t.$options.propsData[n]&&void 0!==t._props[n]?t._props[n]:"function"==typeof r&&"Function"!==Ht(e.type)?r.call(t):r}}(r,i,t);var u=$t;kt(!0),Ct(a),kt(u)}return a}function Ht(t){var e=t&&t.toString().match(/^\s*function (\w+)/);return e?e[1]:""}function Bt(t,e){return Ht(t)===Ht(e)}function Vt(t,e){if(!Array.isArray(e))return Bt(e,t)?0:-1;for(var n=0,r=e.length;n<r;n++)if(Bt(e[n],t))return n;return-1}function zt(t,e,n){vt();try{if(e)for(var r=e;r=r.$parent;){var i=r.$options.errorCaptured;if(i)for(var o=0;o<i.length;o++)try{if(!1===i[o].call(r,t,e,n))return}catch(t){qt(t,r,"errorCaptured hook")}}qt(t,e,n)}finally{mt()}}function Kt(t,e,n,r,i){var o;try{(o=n?t.apply(e,n):t.call(e))&&!o._isVue&&u(o)&&!o._handled&&(o.catch((function(t){return zt(t,r,i+" (Promise/async)")})),o._handled=!0)}catch(t){zt(t,r,i)}return o}function qt(t,e,n){if(U.errorHandler)try{return U.errorHandler.call(null,t,e,n)}catch(e){e!==t&&Gt(e,null,"config.errorHandler")}Gt(t,e,n)}function Gt(t,e,n){if(!G&&!W||"undefined"==typeof console)throw t;console.error(t)}var Wt,Jt=!1,Xt=[],Yt=!1;function Zt(){Yt=!1;var t=Xt.slice(0);Xt.length=0;for(var e=0;e<t.length;e++)t[e]()}if("undefined"!=typeof Promise&&st(Promise)){var Qt=Promise.resolve();Wt=function(){Qt.then(Zt),Q&&setTimeout(j)},Jt=!0}else if(q||"undefined"==typeof MutationObserver||!st(MutationObserver)&&"[object MutationObserverConstructor]"!==MutationObserver.toString())Wt=void 0!==n&&st(n)?function(){n(Zt)}:function(){setTimeout(Zt,0)};else{var te=1,ee=new MutationObserver(Zt),ne=document.createTextNode(String(te));ee.observe(ne,{characterData:!0}),Wt=function(){te=(te+1)%2,ne.data=String(te)},Jt=!0}function re(t,e){var n;if(Xt.push((function(){if(t)try{t.call(e)}catch(t){zt(t,e,"nextTick")}else n&&n(e)})),Yt||(Yt=!0,Wt()),!t&&"undefined"!=typeof Promise)return new Promise((function(t){n=t}))}var oe=new ct;function ie(t){!function t(e,n){var r,i,a=Array.isArray(e);if(!(!a&&!l(e)||Object.isFrozen(e)||e instanceof yt)){if(e.__ob__){var s=e.__ob__.dep.id;if(n.has(s))return;n.add(s)}if(a)for(r=e.length;r--;)t(e[r],n);else for(r=(i=Object.keys(e)).length;r--;)t(e[i[r]],n)}}(t,oe),oe.clear()}var ae=g((function(t){var e="&"===t.charAt(0),n="~"===(t=e?t.slice(1):t).charAt(0),r="!"===(t=n?t.slice(1):t).charAt(0);return{name:t=r?t.slice(1):t,once:n,capture:r,passive:e}}));function se(t,e){function n(){var t=arguments,r=n.fns;if(!Array.isArray(r))return Kt(r,null,arguments,e,"v-on handler");for(var i=r.slice(),o=0;o<i.length;o++)Kt(i[o],null,t,e,"v-on handler")}return n.fns=t,n}function rt(t,e,i,n,a,s){var r,u,c,l;for(r in t)u=t[r],c=e[r],l=ae(r),o(u)||(o(c)?(o(u.fns)&&(u=t[r]=se(u,s)),f(l.once)&&(u=t[r]=a(l.name,u,l.capture)),i(l.name,u,l.capture,l.passive,l.params)):u!==c&&(c.fns=u,t[r]=c));for(r in e)o(t[r])&&n((l=ae(r)).name,e[r],l.capture)}function ce(t,i,e){var a;t instanceof yt&&(t=t.data.hook||(t.data.hook={}));var s=t[i];function n(){e.apply(this,arguments),_(a.fns,n)}o(s)?a=se([n]):c(s.fns)&&f(s.merged)?(a=s).fns.push(n):a=se([s,n]),a.merged=!0,t[i]=a}function ue(t,e,n,i,r){if(c(e)){if(x(e,n))return t[n]=e[n],r||delete e[n],!0;if(x(e,i))return t[n]=e[i],r||delete e[i],!0}return!1}function fe(t){return i(t)?[_t(t)]:Array.isArray(t)?function t(e,a){var n,u,r,l,s=[];for(n=0;n<e.length;n++)o(u=e[n])||"boolean"==typeof u||(l=s[r=s.length-1],Array.isArray(u)?u.length>0&&(le((u=t(u,(a||"")+"_"+n))[0])&&le(l)&&(s[r]=_t(l.text+u[0].text),u.shift()),s.push.apply(s,u)):i(u)?le(l)?s[r]=_t(l.text+u):""!==u&&s.push(_t(u)):le(u)&&le(l)?s[r]=_t(l.text+u.text):(f(e._isVList)&&c(u.tag)&&o(u.key)&&c(a)&&(u.key="__vlist"+a+"_"+n+"__"),s.push(u)));return s}(t):void 0}function le(t){return c(t)&&c(t.text)&&!1===t.isComment}function pe(t,e){if(t){for(var n=Object.create(null),r=ut?Reflect.ownKeys(t):Object.keys(t),i=0;i<r.length;i++){var o=r[i];if("__ob__"!==o){for(var a=t[o].from,s=e;s;){if(s._provided&&x(s._provided,a)){n[o]=s._provided[a];break}s=s.$parent}if(!s&&"default"in t[o]){var c=t[o].default;n[o]="function"==typeof c?c.call(e):c}}}return n}}function de(t,e){if(!t||!t.length)return{};for(var n={},r=0,i=t.length;r<i;r++){var o=t[r],a=o.data;if(a&&a.attrs&&a.attrs.slot&&delete a.attrs.slot,o.context!==e&&o.fnContext!==e||!a||null==a.slot)(n.default||(n.default=[])).push(o);else{var s=a.slot,c=n[s]||(n[s]=[]);"template"===o.tag?c.push.apply(c,o.children||[]):c.push(o)}}for(var u in n)n[u].every(he)&&delete n[u];return n}function he(t){return t.isComment&&!t.asyncFactory||" "===t.text}function ve(t,e,n){var i,o=Object.keys(e).length>0,a=t?!!t.$stable:!o,s=t&&t.$key;if(t){if(t._normalized)return t._normalized;if(a&&n&&n!==r&&s===n.$key&&!o&&!n.$hasNormal)return n;for(var c in i={},t)t[c]&&"$"!==c[0]&&(i[c]=me(e,c,t[c]))}else i={};for(var u in e)u in i||(i[u]=dt(e,u));return t&&Object.isExtensible(t)&&(t._normalized=i),B(i,"$stable",a),B(i,"$key",s),B(i,"$hasNormal",o),i}function me(t,e,n){var r=function(){var t=arguments.length?n.apply(null,arguments):n({});return(t=t&&"object"==typeof t&&!Array.isArray(t)?[t]:fe(t))&&(0===t.length||1===t.length&&t[0].isComment)?void 0:t};return n.proxy&&Object.defineProperty(t,e,{get:r,enumerable:!0,configurable:!0}),r}function dt(t,e){return function(){return t[e]}}function ye(t,e){var n,i,a,s,r;if(Array.isArray(t)||"string"==typeof t)for(n=new Array(t.length),i=0,a=t.length;i<a;i++)n[i]=e(t[i],i);else if("number"==typeof t)for(n=new Array(t),i=0;i<t;i++)n[i]=e(i+1,i);else if(l(t))if(ut&&t[Symbol.iterator]){n=[];for(var u=t[Symbol.iterator](),o=u.next();!o.done;)n.push(e(o.value,n.length)),o=u.next()}else for(s=Object.keys(t),n=new Array(s.length),i=0,a=s.length;i<a;i++)r=s[i],n[i]=e(t[r],r,i);return c(n)||(n=[]),n._isVList=!0,n}function ge(t,e,n,r){var i,o=this.$scopedSlots[t];o?(n=n||{},r&&(n=E(E({},r),n)),i=o(n)||e):i=this.$slots[t]||e;var a=n&&n.slot;return a?this.$createElement("template",{slot:a},i):i}function be(t){return Dt(this.$options,"filters",t)||M}function _e(t,e){return Array.isArray(t)?-1===t.indexOf(e):t!==e}function we(t,e,n,r,i){var o=U.keyCodes[e]||n;return i&&r&&!U.keyCodes[e]?_e(i,r):o?_e(o,t):r?k(r)!==e:void 0}function xe(t,e,n,r,i){if(n&&l(n)){var a;Array.isArray(n)&&(n=T(n));var s=function(o){if("class"===o||"style"===o||y(o))a=t;else{var s=t.attrs&&t.attrs.type;a=r||U.mustUseProp(e,s,o)?t.domProps||(t.domProps={}):t.attrs||(t.attrs={})}var c=b(o),u=k(o);c in a||u in a||(a[o]=n[o],i&&((t.on||(t.on={}))["update:"+o]=function(t){n[o]=t}))};for(var o in n)s(o)}return t}function Oe(t,e){var n=this._staticTrees||(this._staticTrees=[]),r=n[t];return r&&!e||$e(r=n[t]=this.$options.staticRenderFns[t].call(this._renderProxy,null,this),"__static__"+t,!1),r}function Se(t,e,n){return $e(t,"__once__"+e+(n?"_"+n:""),!0),t}function $e(t,e,n){if(Array.isArray(t))for(var r=0;r<t.length;r++)t[r]&&"string"!=typeof t[r]&&ke(t[r],e+"_"+r,n);else ke(t,e,n)}function ke(t,e,n){t.isStatic=!0,t.key=e,t.isOnce=n}function Ae(t,e){if(e&&s(e)){var n=t.on=t.on?E({},t.on):{};for(var r in e){var i=n[r],o=e[r];n[r]=i?[].concat(i,o):o}}return t}function Ce(t,e,n,r){e=e||{$stable:!n};for(var i=0;i<t.length;i++){var o=t[i];Array.isArray(o)?Ce(o,e,n):o&&(o.proxy&&(o.fn.proxy=!0),e[o.key]=o.fn)}return r&&(e.$key=r),e}function Ee(t,e){for(var n=0;n<e.length;n+=2){var r=e[n];"string"==typeof r&&r&&(t[e[n]]=e[n+1])}return t}function Te(t,e){return"string"==typeof t?e+t:t}function je(t){t._o=Se,t._n=v,t._s=h,t._l=ye,t._t=ge,t._q=N,t._i=P,t._m=Oe,t._f=be,t._k=we,t._b=xe,t._v=_t,t._e=bt,t._u=Ce,t._g=Ae,t._d=Ee,t._p=Te}function Ie(t,e,i,n,a){var s,o=this,u=a.options;x(n,"_uid")?(s=Object.create(n))._original=n:(s=n,n=n._original);var c=f(u._compiled),l=!c;this.data=t,this.props=e,this.children=i,this.parent=n,this.listeners=t.on||r,this.injections=pe(u.inject,n),this.slots=function(){return o.$slots||ve(t.scopedSlots,o.$slots=de(i,n)),o.$slots},Object.defineProperty(this,"scopedSlots",{enumerable:!0,get:function(){return ve(t.scopedSlots,this.slots())}}),c&&(this.$options=u,this.$slots=this.slots(),this.$scopedSlots=ve(t.scopedSlots,this.$slots)),u._scopeId?this._c=function(t,e,r,o){var i=De(s,t,e,r,o,l);return i&&!Array.isArray(i)&&(i.fnScopeId=u._scopeId,i.fnContext=n),i}:this._c=function(t,e,n,r){return De(s,t,e,n,r,l)}}function Me(t,e,n,r,i){var o=wt(t);return o.fnContext=n,o.fnOptions=r,e.slot&&((o.data||(o.data={})).slot=e.slot),o}function Ne(t,e){for(var n in e)t[b(n)]=e[n]}je(Ie.prototype);var Pe={init:function(t,e){if(t.componentInstance&&!t.componentInstance._isDestroyed&&t.data.keepAlive){var n=t;Pe.prepatch(n,n)}else(t.componentInstance=function(t,e){var n={_isComponent:!0,_parentVnode:t,parent:e},i=t.data.inlineTemplate;return c(i)&&(n.render=i.render,n.staticRenderFns=i.staticRenderFns),new t.componentOptions.Ctor(n)}(t,Je)).$mount(e?t.elm:void 0,e)},prepatch:function(t,e){var n=e.componentOptions;!function(t,e,n,i,o){var a=i.data.scopedSlots,s=t.$scopedSlots,c=!!(a&&!a.$stable||s!==r&&!s.$stable||a&&t.$scopedSlots.$key!==a.$key),u=!!(o||t.$options._renderChildren||c);if(t.$options._parentVnode=i,t.$vnode=i,t._vnode&&(t._vnode.parent=i),t.$options._renderChildren=o,t.$attrs=i.data.attrs||r,t.$listeners=n||r,e&&t.$options.props){kt(!1);for(var f=t._props,l=t.$options._propKeys||[],p=0;p<l.length;p++){var d=l[p],h=t.$options.props;f[d]=Ut(d,h,e,t)}kt(!0),t.$options.propsData=e}n=n||r;var v=t.$options._parentListeners;t.$options._parentListeners=n,We(t,n,v),u&&(t.$slots=de(o,i.context),t.$forceUpdate())}(e.componentInstance=t.componentInstance,n.propsData,n.listeners,e,n.children)},insert:function(t){var e,n=t.context,r=t.componentInstance;r._isMounted||(r._isMounted=!0,Qe(r,"mounted")),t.data.keepAlive&&(n._isMounted?((e=r)._inactive=!1,en.push(e)):Ze(r,!0))},destroy:function(t){var e=t.componentInstance;e._isDestroyed||(t.data.keepAlive?function t(e,n){if(!(n&&(e._directInactive=!0,Ye(e))||e._inactive)){e._inactive=!0;for(var r=0;r<e.$children.length;r++)t(e.$children[r]);Qe(e,"deactivated")}}(e,!0):e.$destroy())}},Le=Object.keys(Pe);function Re(i,a,s,t,e){if(!o(i)){var n=s.$options._base;if(l(i)&&(i=n.extend(i)),"function"==typeof i){var p;if(o(i.cid)&&void 0===(i=function(t,i){if(f(t.error)&&c(t.errorComp))return t.errorComp;if(c(t.resolved))return t.resolved;var a=He;if(a&&c(t.owners)&&-1===t.owners.indexOf(a)&&t.owners.push(a),f(t.loading)&&c(t.loadingComp))return t.loadingComp;if(a&&!c(t.owners)){var s=t.owners=[a],e=!0,n=null,r=null;a.$on("hook:destroyed",(function(){return _(s,a)}));var p=function(t){for(var e=0,o=s.length;e<o;e++)s[e].$forceUpdate();t&&(s.length=0,null!==n&&(clearTimeout(n),n=null),null!==r&&(clearTimeout(r),r=null))},d=L((function(n){t.resolved=Be(n,i),e?s.length=0:p(!0)})),h=L((function(e){c(t.errorComp)&&(t.error=!0,p(!0))})),v=t(d,h);return l(v)&&(u(v)?o(t.resolved)&&v.then(d,h):u(v.component)&&(v.component.then(d,h),c(v.error)&&(t.errorComp=Be(v.error,i)),c(v.loading)&&(t.loadingComp=Be(v.loading,i),0===v.delay?t.loading=!0:n=setTimeout((function(){n=null,o(t.resolved)&&o(t.error)&&(t.loading=!0,p(!1))}),v.delay||200)),c(v.timeout)&&(r=setTimeout((function(){r=null,o(t.resolved)&&h(null)}),v.timeout)))),e=!1,t.loading?t.loadingComp:t.resolved}}(p=i,n)))return function(t,e,n,r,i){var o=bt();return o.asyncFactory=t,o.asyncMeta={data:e,context:n,children:r,tag:i},o}(p,a,s,t,e);a=a||{},wn(i),c(a.model)&&function(t,e){var n=t.model&&t.model.prop||"value",i=t.model&&t.model.event||"input";(e.attrs||(e.attrs={}))[n]=e.model.value;var r=e.on||(e.on={}),a=r[i],s=e.model.callback;c(a)?(Array.isArray(a)?-1===a.indexOf(s):a!==s)&&(r[i]=[s].concat(a)):r[i]=s}(i.options,a);var d=function(t,e,i){var n=e.options.props;if(!o(n)){var a={},s=t.attrs,r=t.props;if(c(s)||c(r))for(var u in n){var f=k(u);ue(a,r,u,f,!0)||ue(a,s,u,f,!1)}return a}}(a,i);if(f(i.options.functional))return function(t,e,i,n,a){var s=t.options,o={},u=s.props;if(c(u))for(var f in u)o[f]=Ut(f,u,e||r);else c(i.attrs)&&Ne(o,i.attrs),c(i.props)&&Ne(o,i.props);var l=new Ie(i,o,a,n,t),p=s.render.call(null,l._c,l);if(p instanceof yt)return Me(p,i,l.parent,s);if(Array.isArray(p)){for(var d=fe(p)||[],h=new Array(d.length),v=0;v<d.length;v++)h[v]=Me(d[v],i,l.parent,s);return h}}(i,d,a,s,t);var h=a.on;if(a.on=a.nativeOn,f(i.options.abstract)){var v=a.slot;a={},v&&(a.slot=v)}!function(t){for(var e=t.hook||(t.hook={}),n=0;n<Le.length;n++){var r=Le[n],i=e[r],o=Pe[r];i===o||i&&i._merged||(e[r]=i?Fe(o,i):o)}}(a);var m=i.options.name||e;return new yt("vue-component-"+i.cid+(m?"-"+m:""),a,void 0,void 0,void 0,s,{Ctor:i,propsData:d,listeners:h,tag:e,children:t},p)}}}function Fe(t,e){var n=function(n,r){t(n,r),e(n,r)};return n._merged=!0,n}function De(t,a,s,e,u,n){return(Array.isArray(s)||i(s))&&(u=e,e=s,s=void 0),f(n)&&(u=2),function(t,i,a,s,e){if(c(a)&&c(a.__ob__))return bt();if(c(a)&&c(a.is)&&(i=a.is),!i)return bt();var u,n,r;(Array.isArray(s)&&"function"==typeof s[0]&&((a=a||{}).scopedSlots={default:s[0]},s.length=0),2===e?s=fe(s):1===e&&(s=function(t){for(var e=0;e<t.length;e++)if(Array.isArray(t[e]))return Array.prototype.concat.apply([],t);return t}(s)),"string"==typeof i)?(n=t.$vnode&&t.$vnode.ns||U.getTagNamespace(i),u=U.isReservedTag(i)?new yt(U.parsePlatformTagName(i),a,s,void 0,void 0,t):a&&a.pre||!c(r=Dt(t.$options,"components",i))?new yt(i,a,s,void 0,void 0,t):Re(r,a,t,s,i)):u=Re(i,a,t,s);return Array.isArray(u)?u:c(u)?(c(n)&&function t(i,e,a){if(i.ns=e,"foreignObject"===i.tag&&(e=void 0,a=!0),c(i.children))for(var s=0,n=i.children.length;s<n;s++){var u=i.children[s];c(u.tag)&&(o(u.ns)||f(a)&&"svg"!==u.tag)&&t(u,e,a)}}(u,n),c(a)&&function(t){l(t.style)&&ie(t.style),l(t.class)&&ie(t.class)}(a),u):bt()}(t,a,s,e,u)}var Ue,He=null;function Be(t,e){return(t.__esModule||ut&&"Module"===t[Symbol.toStringTag])&&(t=t.default),l(t)?e.extend(t):t}function Ve(t){return t.isComment&&t.asyncFactory}function ze(t){if(Array.isArray(t))for(var e=0;e<t.length;e++){var n=t[e];if(c(n)&&(c(n.componentOptions)||Ve(n)))return n}}function Ke(t,e){Ue.$on(t,e)}function qe(t,e){Ue.$off(t,e)}function Ge(t,e){var n=Ue;return function r(){null!==e.apply(null,arguments)&&n.$off(t,r)}}function We(t,e,n){Ue=t,rt(e,n||{},Ke,qe,Ge,t),Ue=void 0}var Je=null;function Xe(t){var e=Je;return Je=t,function(){Je=e}}function Ye(t){for(;t&&(t=t.$parent);)if(t._inactive)return!0;return!1}function Ze(t,e){if(e){if(t._directInactive=!1,Ye(t))return}else if(t._directInactive)return;if(t._inactive||null===t._inactive){t._inactive=!1;for(var n=0;n<t.$children.length;n++)Ze(t.$children[n]);Qe(t,"activated")}}function Qe(t,e){vt();var n=t.$options[e],r=e+" hook";if(n)for(var i=0,o=n.length;i<o;i++)Kt(n[i],t,null,t,r);t._hasHookEvent&&t.$emit("hook:"+e),mt()}var tn=[],en=[],nn={},rn=!1,on=!1,an=0,sn=0,cn=Date.now;if(G&&!q){var un=window.performance;un&&"function"==typeof un.now&&cn()>document.createEvent("Event").timeStamp&&(cn=function(){return un.now()})}function fn(){var t,e;for(sn=cn(),on=!0,tn.sort((function(t,e){return t.id-e.id})),an=0;an<tn.length;an++)(t=tn[an]).before&&t.before(),e=t.id,nn[e]=null,t.run();var n=en.slice(),r=tn.slice();an=tn.length=en.length=0,nn={},rn=on=!1,function(t){for(var e=0;e<t.length;e++)t[e]._inactive=!0,Ze(t[e],!0)}(n),function(t){for(var e=t.length;e--;){var n=t[e],r=n.vm;r._watcher===n&&r._isMounted&&!r._isDestroyed&&Qe(r,"updated")}}(r),at&&U.devtools&&at.emit("flush")}var ln=0,pn=function(t,e,n,r,i){this.vm=t,i&&(t._watcher=this),t._watchers.push(this),r?(this.deep=!!r.deep,this.user=!!r.user,this.lazy=!!r.lazy,this.sync=!!r.sync,this.before=r.before):this.deep=this.user=this.lazy=this.sync=!1,this.cb=n,this.id=++ln,this.active=!0,this.dirty=this.lazy,this.deps=[],this.newDeps=[],this.depIds=new ct,this.newDepIds=new ct,this.expression="","function"==typeof e?this.getter=e:(this.getter=function(t){if(!z.test(t)){var e=t.split(".");return function(t){for(var n=0;n<e.length;n++){if(!t)return;t=t[e[n]]}return t}}}(e),this.getter||(this.getter=j)),this.value=this.lazy?void 0:this.get()};pn.prototype.get=function(){var t;vt(this);var e=this.vm;try{t=this.getter.call(e,e)}catch(t){if(!this.user)throw t;zt(t,e,'getter for watcher "'+this.expression+'"')}finally{this.deep&&ie(t),mt(),this.cleanupDeps()}return t},pn.prototype.addDep=function(t){var e=t.id;this.newDepIds.has(e)||(this.newDepIds.add(e),this.newDeps.push(t),this.depIds.has(e)||t.addSub(this))},pn.prototype.cleanupDeps=function(){for(var t=this.deps.length;t--;){var e=this.deps[t];this.newDepIds.has(e.id)||e.removeSub(this)}var n=this.depIds;this.depIds=this.newDepIds,this.newDepIds=n,this.newDepIds.clear(),n=this.deps,this.deps=this.newDeps,this.newDeps=n,this.newDeps.length=0},pn.prototype.update=function(){this.lazy?this.dirty=!0:this.sync?this.run():function(t){var e=t.id;if(null==nn[e]){if(nn[e]=!0,on){for(var n=tn.length-1;n>an&&tn[n].id>t.id;)n--;tn.splice(n+1,0,t)}else tn.push(t);rn||(rn=!0,re(fn))}}(this)},pn.prototype.run=function(){if(this.active){var t=this.get();if(t!==this.value||l(t)||this.deep){var e=this.value;if(this.value=t,this.user)try{this.cb.call(this.vm,t,e)}catch(t){zt(t,this.vm,'callback for watcher "'+this.expression+'"')}else this.cb.call(this.vm,t,e)}}},pn.prototype.evaluate=function(){this.value=this.get(),this.dirty=!1},pn.prototype.depend=function(){for(var t=this.deps.length;t--;)this.deps[t].depend()},pn.prototype.teardown=function(){if(this.active){this.vm._isBeingDestroyed||_(this.vm._watchers,this);for(var t=this.deps.length;t--;)this.deps[t].removeSub(this);this.active=!1}};var dn={enumerable:!0,configurable:!0,get:j,set:j};function hn(t,e,n){dn.get=function(){return this[e][n]},dn.set=function(t){this[e][n]=t},Object.defineProperty(t,n,dn)}var vn={lazy:!0};function mn(t,e,n){var r=!it();"function"==typeof n?(dn.get=r?yn(e):gn(n),dn.set=j):(dn.get=n.get?r&&!1!==n.cache?yn(e):gn(n.get):j,dn.set=n.set||j),Object.defineProperty(t,e,dn)}function yn(t){return function(){var e=this._computedWatchers&&this._computedWatchers[t];if(e)return e.dirty&&e.evaluate(),pt.target&&e.depend(),e.value}}function gn(t){return function(){return t.call(this,this)}}function bn(t,e,n,r){return s(n)&&(r=n,n=n.handler),"string"==typeof n&&(n=t[n]),t.$watch(e,n,r)}var _n=0;function wn(t){var e=t.options;if(t.super){var n=wn(t.super);if(n!==t.superOptions){t.superOptions=n;var r=function(t){var e,n=t.options,r=t.sealedOptions;for(var i in n)n[i]!==r[i]&&(e||(e={}),e[i]=n[i]);return e}(t);r&&E(t.extendOptions,r),(e=t.options=Ft(n,t.extendOptions)).name&&(e.components[e.name]=t)}}return e}function xn(t){this._init(t)}function On(t){return t&&(t.Ctor.options.name||t.tag)}function Sn(t,e){return Array.isArray(t)?t.indexOf(e)>-1:"string"==typeof t?t.split(",").indexOf(e)>-1:(n=t,"[object RegExp]"===a.call(n)&&t.test(e));var n}function $n(t,e){var n=t.cache,r=t.keys,i=t._vnode;for(var o in n){var a=n[o];if(a){var s=On(a.componentOptions);s&&!e(s)&&kn(n,o,r,i)}}}function kn(t,e,n,r){var i=t[e];!i||r&&i.tag===r.tag||i.componentInstance.$destroy(),t[e]=null,_(n,e)}!function(t){t.prototype._init=function(t){var e=this;e._uid=_n++,e._isVue=!0,t&&t._isComponent?function(t,e){var n=t.$options=Object.create(t.constructor.options),r=e._parentVnode;n.parent=e.parent,n._parentVnode=r;var i=r.componentOptions;n.propsData=i.propsData,n._parentListeners=i.listeners,n._renderChildren=i.children,n._componentTag=i.tag,e.render&&(n.render=e.render,n.staticRenderFns=e.staticRenderFns)}(e,t):e.$options=Ft(wn(e.constructor),t||{},e),e._renderProxy=e,e._self=e,function(t){var e=t.$options,n=e.parent;if(n&&!e.abstract){for(;n.$options.abstract&&n.$parent;)n=n.$parent;n.$children.push(t)}t.$parent=n,t.$root=n?n.$root:t,t.$children=[],t.$refs={},t._watcher=null,t._inactive=null,t._directInactive=!1,t._isMounted=!1,t._isDestroyed=!1,t._isBeingDestroyed=!1}(e),function(t){t._events=Object.create(null),t._hasHookEvent=!1;var e=t.$options._parentListeners;e&&We(t,e)}(e),function(t){t._vnode=null,t._staticTrees=null;var e=t.$options,n=t.$vnode=e._parentVnode,i=n&&n.context;t.$slots=de(e._renderChildren,i),t.$scopedSlots=r,t._c=function(e,n,r,i){return De(t,e,n,r,i,!1)},t.$createElement=function(e,n,r,i){return De(t,e,n,r,i,!0)};var o=n&&n.data;Et(t,"$attrs",o&&o.attrs||r,null,!0),Et(t,"$listeners",e._parentListeners||r,null,!0)}(e),Qe(e,"beforeCreate"),function(t){var e=pe(t.$options.inject,t);e&&(kt(!1),Object.keys(e).forEach((function(n){Et(t,n,e[n])})),kt(!0))}(e),function(t){t._watchers=[];var e=t.$options;e.props&&function(t,e){var n=t.$options.propsData||{},r=t._props={},i=t.$options._propKeys=[];t.$parent&&kt(!1);var o=function(o){i.push(o);var a=Ut(o,e,n,t);Et(r,o,a),o in t||hn(t,"_props",o)};for(var a in e)o(a);kt(!0)}(t,e.props),e.methods&&function(t,e){for(var n in t.$options.props,e)t[n]="function"!=typeof e[n]?j:A(e[n],t)}(t,e.methods),e.data?function(t){var e=t.$options.data;s(e=t._data="function"==typeof e?function(t,e){vt();try{return t.call(e,e)}catch(t){return zt(t,e,"data()"),{}}finally{mt()}}(e,t):e||{})||(e={});for(var a,n=Object.keys(e),r=t.$options.props,i=(t.$options.methods,n.length);i--;){var o=n[i];r&&x(r,o)||36!==(a=(o+"").charCodeAt(0))&&95!==a&&hn(t,"_data",o)}Ct(e,!0)}(t):Ct(t._data={},!0),e.computed&&function(t,e){var n=t._computedWatchers=Object.create(null),r=it();for(var i in e){var o=e[i],a="function"==typeof o?o:o.get;r||(n[i]=new pn(t,a||j,j,vn)),i in t||mn(t,i,o)}}(t,e.computed),e.watch&&e.watch!==et&&function(t,e){for(var n in e){var r=e[n];if(Array.isArray(r))for(var i=0;i<r.length;i++)bn(t,n,r[i]);else bn(t,n,r)}}(t,e.watch)}(e),function(t){var e=t.$options.provide;e&&(t._provided="function"==typeof e?e.call(t):e)}(e),Qe(e,"created"),e.$options.el&&e.$mount(e.$options.el)}}(xn),function(t){Object.defineProperty(t.prototype,"$data",{get:function(){return this._data}}),Object.defineProperty(t.prototype,"$props",{get:function(){return this._props}}),t.prototype.$set=Tt,t.prototype.$delete=jt,t.prototype.$watch=function(t,e,n){if(s(e))return bn(this,t,e,n);(n=n||{}).user=!0;var r=new pn(this,t,e,n);if(n.immediate)try{e.call(this,r.value)}catch(t){zt(t,this,'callback for immediate watcher "'+r.expression+'"')}return function(){r.teardown()}}}(xn),function(t){var e=/^hook:/;t.prototype.$on=function(t,n){var r=this;if(Array.isArray(t))for(var i=0,o=t.length;i<o;i++)r.$on(t[i],n);else(r._events[t]||(r._events[t]=[])).push(n),e.test(t)&&(r._hasHookEvent=!0);return r},t.prototype.$once=function(t,e){var n=this;function r(){n.$off(t,r),e.apply(n,arguments)}return r.fn=e,n.$on(t,r),n},t.prototype.$off=function(t,e){var n=this;if(!arguments.length)return n._events=Object.create(null),n;if(Array.isArray(t)){for(var r=0,i=t.length;r<i;r++)n.$off(t[r],e);return n}var o,a=n._events[t];if(!a)return n;if(!e)return n._events[t]=null,n;for(var s=a.length;s--;)if((o=a[s])===e||o.fn===e){a.splice(s,1);break}return n},t.prototype.$emit=function(t){var e=this._events[t];if(e){e=e.length>1?C(e):e;for(var n=C(arguments,1),r='event handler for "'+t+'"',i=0,o=e.length;i<o;i++)Kt(e[i],this,n,this,r)}return this}}(xn),function(t){t.prototype._update=function(t,e){var n=this,r=n.$el,i=n._vnode,o=Xe(n);n._vnode=t,n.$el=i?n.__patch__(i,t):n.__patch__(n.$el,t,e,!1),o(),r&&(r.__vue__=null),n.$el&&(n.$el.__vue__=n),n.$vnode&&n.$parent&&n.$vnode===n.$parent._vnode&&(n.$parent.$el=n.$el)},t.prototype.$forceUpdate=function(){this._watcher&&this._watcher.update()},t.prototype.$destroy=function(){var t=this;if(!t._isBeingDestroyed){Qe(t,"beforeDestroy"),t._isBeingDestroyed=!0;var e=t.$parent;!e||e._isBeingDestroyed||t.$options.abstract||_(e.$children,t),t._watcher&&t._watcher.teardown();for(var n=t._watchers.length;n--;)t._watchers[n].teardown();t._data.__ob__&&t._data.__ob__.vmCount--,t._isDestroyed=!0,t.__patch__(t._vnode,null),Qe(t,"destroyed"),t.$off(),t.$el&&(t.$el.__vue__=null),t.$vnode&&(t.$vnode.parent=null)}}}(xn),function(t){je(t.prototype),t.prototype.$nextTick=function(t){return re(t,this)},t.prototype._render=function(){var t,e=this,n=e.$options,r=n.render,i=n._parentVnode;i&&(e.$scopedSlots=ve(i.data.scopedSlots,e.$slots,e.$scopedSlots)),e.$vnode=i;try{He=e,t=r.call(e._renderProxy,e.$createElement)}catch(n){zt(n,e,"render"),t=e._vnode}finally{He=null}return Array.isArray(t)&&1===t.length&&(t=t[0]),t instanceof yt||(t=bt()),t.parent=i,t}}(xn);var An=[String,RegExp,Array],Cn={KeepAlive:{name:"keep-alive",abstract:!0,props:{include:An,exclude:An,max:[String,Number]},created:function(){this.cache=Object.create(null),this.keys=[]},destroyed:function(){for(var t in this.cache)kn(this.cache,t,this.keys)},mounted:function(){var t=this;this.$watch("include",(function(e){$n(t,(function(t){return Sn(e,t)}))})),this.$watch("exclude",(function(e){$n(t,(function(t){return!Sn(e,t)}))}))},render:function(){var t=this.$slots.default,e=ze(t),n=e&&e.componentOptions;if(n){var r=On(n),i=this.include,o=this.exclude;if(i&&(!r||!Sn(i,r))||o&&r&&Sn(o,r))return e;var a=this.cache,s=this.keys,c=null==e.key?n.Ctor.cid+(n.tag?"::"+n.tag:""):e.key;a[c]?(e.componentInstance=a[c].componentInstance,_(s,c),s.push(c)):(a[c]=e,s.push(c),this.max&&s.length>parseInt(this.max)&&kn(a,s[0],s,this._vnode)),e.data.keepAlive=!0}return e||t&&t[0]}}};!function(t){var e={get:function(){return U}};Object.defineProperty(t,"config",e),t.util={warn:ft,extend:E,mergeOptions:Ft,defineReactive:Et},t.set=Tt,t.delete=jt,t.nextTick=re,t.observable=function(t){return Ct(t),t},t.options=Object.create(null),F.forEach((function(e){t.options[e+"s"]=Object.create(null)})),t.options._base=t,E(t.options.components,Cn),function(t){t.use=function(t){var e=this._installedPlugins||(this._installedPlugins=[]);if(e.indexOf(t)>-1)return this;var n=C(arguments,1);return n.unshift(this),"function"==typeof t.install?t.install.apply(t,n):"function"==typeof t&&t.apply(null,n),e.push(t),this}}(t),function(t){t.mixin=function(t){return this.options=Ft(this.options,t),this}}(t),function(t){t.cid=0;var e=1;t.extend=function(t){t=t||{};var n=this,r=n.cid,i=t._Ctor||(t._Ctor={});if(i[r])return i[r];var o=t.name||n.options.name,a=function(t){this._init(t)};return(a.prototype=Object.create(n.prototype)).constructor=a,a.cid=e++,a.options=Ft(n.options,t),a.super=n,a.options.props&&function(t){var e=t.options.props;for(var n in e)hn(t.prototype,"_props",n)}(a),a.options.computed&&function(t){var e=t.options.computed;for(var n in e)mn(t.prototype,n,e[n])}(a),a.extend=n.extend,a.mixin=n.mixin,a.use=n.use,F.forEach((function(t){a[t]=n[t]})),o&&(a.options.components[o]=a),a.superOptions=n.options,a.extendOptions=t,a.sealedOptions=E({},a.options),i[r]=a,a}}(t),function(t){F.forEach((function(e){t[e]=function(t,n){return n?("component"===e&&s(n)&&(n.name=n.name||t,n=this.options._base.extend(n)),"directive"===e&&"function"==typeof n&&(n={bind:n,update:n}),this.options[e+"s"][t]=n,n):this.options[e+"s"][t]}}))}(t)}(xn),Object.defineProperty(xn.prototype,"$isServer",{get:it}),Object.defineProperty(xn.prototype,"$ssrContext",{get:function(){return this.$vnode&&this.$vnode.ssrContext}}),Object.defineProperty(xn,"FunctionalRenderContext",{value:Ie}),xn.version="2.6.12";var En=p("style,class"),Tn=p("input,textarea,option,select,progress"),jn=function(t,e,n){return"value"===n&&Tn(t)&&"button"!==e||"selected"===n&&"option"===t||"checked"===n&&"input"===t||"muted"===n&&"video"===t},In=p("contenteditable,draggable,spellcheck"),Mn=p("events,caret,typing,plaintext-only"),Nn=p("allowfullscreen,async,autofocus,autoplay,checked,compact,controls,declare,default,defaultchecked,defaultmuted,defaultselected,defer,disabled,enabled,formnovalidate,hidden,indeterminate,inert,ismap,itemscope,loop,multiple,muted,nohref,noresize,noshade,novalidate,nowrap,open,pauseonexit,readonly,required,reversed,scoped,seamless,selected,sortable,translate,truespeed,typemustmatch,visible"),Pn="http://www.w3.org/1999/xlink",Ln=function(t){return":"===t.charAt(5)&&"xlink"===t.slice(0,5)},Rn=function(t){return Ln(t)?t.slice(6,t.length):""},Fn=function(t){return null==t||!1===t};function Dn(t,e){return{staticClass:Un(t.staticClass,e.staticClass),class:c(t.class)?[t.class,e.class]:e.class}}function Un(t,e){return t?e?t+" "+e:t:e||""}function Hn(t){return Array.isArray(t)?function(t){for(var e,n="",i=0,r=t.length;i<r;i++)c(e=Hn(t[i]))&&""!==e&&(n&&(n+=" "),n+=e);return n}(t):l(t)?function(t){var e="";for(var n in t)t[n]&&(e&&(e+=" "),e+=n);return e}(t):"string"==typeof t?t:""}var Bn={svg:"http://www.w3.org/2000/svg",math:"http://www.w3.org/1998/Math/MathML"},Vn=p("html,body,base,head,link,meta,style,title,address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,div,dd,dl,dt,figcaption,figure,picture,hr,img,li,main,ol,p,pre,ul,a,b,abbr,bdi,bdo,br,cite,code,data,dfn,em,i,kbd,mark,q,rp,rt,rtc,ruby,s,samp,small,span,strong,sub,sup,time,u,var,wbr,area,audio,map,track,video,embed,object,param,source,canvas,script,noscript,del,ins,caption,col,colgroup,table,thead,tbody,td,th,tr,button,datalist,fieldset,form,input,label,legend,meter,optgroup,option,output,progress,select,textarea,details,dialog,menu,menuitem,summary,content,element,shadow,template,blockquote,iframe,tfoot"),zn=p("svg,animate,circle,clippath,cursor,defs,desc,ellipse,filter,font-face,foreignObject,g,glyph,image,line,marker,mask,missing-glyph,path,pattern,polygon,polyline,rect,switch,symbol,text,textpath,tspan,use,view",!0),Kn=function(t){return Vn(t)||zn(t)};function qn(t){return zn(t)?"svg":"math"===t?"math":void 0}var Gn=Object.create(null),Wn=p("text,number,password,search,email,tel,url");function Jn(t){return"string"==typeof t?document.querySelector(t)||document.createElement("div"):t}var Xn=Object.freeze({createElement:function(t,e){var n=document.createElement(t);return"select"!==t||e.data&&e.data.attrs&&void 0!==e.data.attrs.multiple&&n.setAttribute("multiple","multiple"),n},createElementNS:function(t,e){return document.createElementNS(Bn[t],e)},createTextNode:function(t){return document.createTextNode(t)},createComment:function(t){return document.createComment(t)},insertBefore:function(t,e,n){t.insertBefore(e,n)},removeChild:function(t,e){t.removeChild(e)},appendChild:function(t,e){t.appendChild(e)},parentNode:function(t){return t.parentNode},nextSibling:function(t){return t.nextSibling},tagName:function(t){return t.tagName},setTextContent:function(t,e){t.textContent=e},setStyleScope:function(t,e){t.setAttribute(e,"")}}),Yn={create:function(t,e){tr(e)},update:function(t,e){t.data.ref!==e.data.ref&&(tr(t,!0),tr(e))},destroy:function(t){tr(t,!0)}};function tr(t,e){var n=t.data.ref;if(c(n)){var i=t.context,r=t.componentInstance||t.elm,a=i.$refs;e?Array.isArray(a[n])?_(a[n],r):a[n]===r&&(a[n]=void 0):t.data.refInFor?Array.isArray(a[n])?a[n].indexOf(r)<0&&a[n].push(r):a[n]=[r]:a[n]=r}}var Zn=new yt("",{},[]),Qn=["create","activate","update","remove","destroy"];function er(t,i){return t.key===i.key&&(t.tag===i.tag&&t.isComment===i.isComment&&c(t.data)===c(i.data)&&function(t,e){if("input"!==t.tag)return!0;var n,i=c(n=t.data)&&c(n=n.attrs)&&n.type,r=c(n=e.data)&&c(n=n.attrs)&&n.type;return i===r||Wn(i)&&Wn(r)}(t,i)||f(t.isAsyncPlaceholder)&&t.asyncFactory===i.asyncFactory&&o(i.asyncFactory.error))}function nr(t,e,n){var i,r,a={};for(i=e;i<=n;++i)c(r=t[i].key)&&(a[r]=i);return a}var rr={create:or,update:or,destroy:function(t){or(t,Zn)}};function or(t,e){(t.data.directives||e.data.directives)&&function(t,e){var n,r,i,o=t===Zn,a=e===Zn,s=ar(t.data.directives,t.context),c=ar(e.data.directives,e.context),u=[],f=[];for(n in c)r=s[n],i=c[n],r?(i.oldValue=r.value,i.oldArg=r.arg,cr(i,"update",e,t),i.def&&i.def.componentUpdated&&f.push(i)):(cr(i,"bind",e,t),i.def&&i.def.inserted&&u.push(i));if(u.length){var l=function(){for(var n=0;n<u.length;n++)cr(u[n],"inserted",e,t)};o?ce(e,"insert",l):l()}if(f.length&&ce(e,"postpatch",(function(){for(var n=0;n<f.length;n++)cr(f[n],"componentUpdated",e,t)})),!o)for(n in s)c[n]||cr(s[n],"unbind",t,t,a)}(t,e)}var ir=Object.create(null);function ar(t,e){var n,r,i=Object.create(null);if(!t)return i;for(n=0;n<t.length;n++)(r=t[n]).modifiers||(r.modifiers=ir),i[sr(r)]=r,r.def=Dt(e.$options,"directives",r.name);return i}function sr(t){return t.rawName||t.name+"."+Object.keys(t.modifiers||{}).join(".")}function cr(t,e,n,r,i){var o=t.def&&t.def[e];if(o)try{o(n.elm,t,n,r,i)}catch(r){zt(r,n.context,"directive "+t.name+" "+e+" hook")}}var ur=[Yn,rr];function fr(t,e){var i=e.componentOptions;if(!(c(i)&&!1===i.Ctor.options.inheritAttrs||o(t.data.attrs)&&o(e.data.attrs))){var n,a,s=e.elm,r=t.data.attrs||{},u=e.data.attrs||{};for(n in c(u.__ob__)&&(u=e.data.attrs=E({},u)),u)a=u[n],r[n]!==a&&lr(s,n,a);for(n in(q||Z)&&u.value!==r.value&&lr(s,"value",u.value),r)o(u[n])&&(Ln(n)?s.removeAttributeNS(Pn,Rn(n)):In(n)||s.removeAttribute(n))}}function lr(t,e,n){t.tagName.indexOf("-")>-1?hr(t,e,n):Nn(e)?Fn(n)?t.removeAttribute(e):(n="allowfullscreen"===e&&"EMBED"===t.tagName?"true":e,t.setAttribute(e,n)):In(e)?t.setAttribute(e,function(t,e){return Fn(e)||"false"===e?"false":"contenteditable"===t&&Mn(e)?e:"true"}(e,n)):Ln(e)?Fn(n)?t.removeAttributeNS(Pn,Rn(e)):t.setAttributeNS(Pn,e,n):hr(t,e,n)}function hr(t,e,n){if(Fn(n))t.removeAttribute(e);else{if(q&&!Y&&"TEXTAREA"===t.tagName&&"placeholder"===e&&""!==n&&!t.__ieph){var r=function(e){e.stopImmediatePropagation(),t.removeEventListener("input",r)};t.addEventListener("input",r),t.__ieph=!0}t.setAttribute(e,n)}}var pr={create:fr,update:fr};function dr(t,e){var i=e.elm,n=e.data,a=t.data;if(!(o(n.staticClass)&&o(n.class)&&(o(a)||o(a.staticClass)&&o(a.class)))){var s=function(t){for(var e=t.data,n=t,i=t;c(i.componentInstance);)(i=i.componentInstance._vnode)&&i.data&&(e=Dn(i.data,e));for(;c(n=n.parent);)n&&n.data&&(e=Dn(e,n.data));return function(t,e){return c(t)||c(e)?Un(t,Hn(e)):""}(e.staticClass,e.class)}(e),r=i._transitionClasses;c(r)&&(s=Un(s,Hn(r))),s!==i._prevClass&&(i.setAttribute("class",s),i._prevClass=s)}}var vr,mr,br,yr,gr,_r,wr={create:dr,update:dr},xr=/[\w).+\-_$\]]/;function Or(t){var e,n,r,i,o,a=!1,s=!1,c=!1,u=!1,f=0,l=0,p=0,d=0;for(r=0;r<t.length;r++)if(n=e,e=t.charCodeAt(r),a)39===e&&92!==n&&(a=!1);else if(s)34===e&&92!==n&&(s=!1);else if(c)96===e&&92!==n&&(c=!1);else if(u)47===e&&92!==n&&(u=!1);else if(124!==e||124===t.charCodeAt(r+1)||124===t.charCodeAt(r-1)||f||l||p){switch(e){case 34:s=!0;break;case 39:a=!0;break;case 96:c=!0;break;case 40:p++;break;case 41:p--;break;case 91:l++;break;case 93:l--;break;case 123:f++;break;case 125:f--}if(47===e){for(var h=r-1,v=void 0;h>=0&&" "===(v=t.charAt(h));h--);v&&xr.test(v)||(u=!0)}}else void 0===i?(d=r+1,i=t.slice(0,r).trim()):m();function m(){(o||(o=[])).push(t.slice(d,r).trim()),d=r+1}if(void 0===i?i=t.slice(0,r).trim():0!==d&&m(),o)for(r=0;r<o.length;r++)i=Sr(i,o[r]);return i}function Sr(t,e){var n=e.indexOf("(");if(n<0)return'_f("'+e+'")('+t+")";var r=e.slice(0,n),i=e.slice(n+1);return'_f("'+r+'")('+t+(")"!==i?","+i:i)}function $r(t,e){console.error("[Vue compiler]: "+t)}function kr(t,e){return t?t.map((function(t){return t[e]})).filter((function(t){return t})):[]}function Ar(t,e,n,r,i){(t.props||(t.props=[])).push(Lr({name:e,value:n,dynamic:i},r)),t.plain=!1}function Cr(t,e,n,r,i){(i?t.dynamicAttrs||(t.dynamicAttrs=[]):t.attrs||(t.attrs=[])).push(Lr({name:e,value:n,dynamic:i},r)),t.plain=!1}function Er(t,e,n,r){t.attrsMap[e]=n,t.attrsList.push(Lr({name:e,value:n},r))}function Tr(t,e,n,r,i,o,a,s){(t.directives||(t.directives=[])).push(Lr({name:e,rawName:n,value:r,arg:i,isDynamicArg:o,modifiers:a},s)),t.plain=!1}function jr(t,e,n){return n?"_p("+e+',"'+t+'")':t+e}function Ir(t,e,n,i,o,a,s,c){var u;(i=i||r).right?c?e="("+e+")==='click'?'contextmenu':("+e+")":"click"===e&&(e="contextmenu",delete i.right):i.middle&&(c?e="("+e+")==='click'?'mouseup':("+e+")":"click"===e&&(e="mouseup")),i.capture&&(delete i.capture,e=jr("!",e,c)),i.once&&(delete i.once,e=jr("~",e,c)),i.passive&&(delete i.passive,e=jr("&",e,c)),i.native?(delete i.native,u=t.nativeEvents||(t.nativeEvents={})):u=t.events||(t.events={});var f=Lr({value:n.trim(),dynamic:c},s);i!==r&&(f.modifiers=i);var l=u[e];Array.isArray(l)?o?l.unshift(f):l.push(f):u[e]=l?o?[f,l]:[l,f]:f,t.plain=!1}function Mr(t,e,n){var r=Nr(t,":"+e)||Nr(t,"v-bind:"+e);if(null!=r)return Or(r);if(!1!==n){var i=Nr(t,e);if(null!=i)return JSON.stringify(i)}}function Nr(t,e,n){var r;if(null!=(r=t.attrsMap[e]))for(var i=t.attrsList,o=0,a=i.length;o<a;o++)if(i[o].name===e){i.splice(o,1);break}return n&&delete t.attrsMap[e],r}function Pr(t,e){for(var n=t.attrsList,r=0,i=n.length;r<i;r++){var o=n[r];if(e.test(o.name))return n.splice(r,1),o}}function Lr(t,e){return e&&(null!=e.start&&(t.start=e.start),null!=e.end&&(t.end=e.end)),t}function Rr(t,e,n){var r=n||{},i=r.number,o="$$v";r.trim&&(o="(typeof $$v === 'string'? $$v.trim(): $$v)"),i&&(o="_n("+o+")");var a=Fr(e,o);t.model={value:"("+e+")",expression:JSON.stringify(e),callback:"function ($$v) {"+a+"}"}}function Fr(t,e){var n=function(t){if(t=t.trim(),vr=t.length,t.indexOf("[")<0||t.lastIndexOf("]")<vr-1)return(yr=t.lastIndexOf("."))>-1?{exp:t.slice(0,yr),key:'"'+t.slice(yr+1)+'"'}:{exp:t,key:null};for(mr=t,yr=gr=_r=0;!Ur();)Hr(br=Dr())?Vr(br):91===br&&Br(br);return{exp:t.slice(0,gr),key:t.slice(gr+1,_r)}}(t);return null===n.key?t+"="+e:"$set("+n.exp+", "+n.key+", "+e+")"}function Dr(){return mr.charCodeAt(++yr)}function Ur(){return yr>=vr}function Hr(t){return 34===t||39===t}function Br(t){var e=1;for(gr=yr;!Ur();)if(Hr(t=Dr()))Vr(t);else if(91===t&&e++,93===t&&e--,0===e){_r=yr;break}}function Vr(t){for(var e=t;!Ur()&&(t=Dr())!==e;);}var zr,Kr="__r";function qr(t,e,n){var r=zr;return function i(){null!==e.apply(null,arguments)&&Jr(t,i,n,r)}}var Gr=Jt&&!(tt&&Number(tt[1])<=53);function Wr(t,e,n,r){if(Gr){var i=sn,o=e;e=o._wrapper=function(t){if(t.target===t.currentTarget||t.timeStamp>=i||t.timeStamp<=0||t.target.ownerDocument!==document)return o.apply(this,arguments)}}zr.addEventListener(t,e,nt?{capture:n,passive:r}:n)}function Jr(t,e,n,r){(r||zr).removeEventListener(t,e._wrapper||e,n)}function Xr(t,e){if(!o(t.data.on)||!o(e.data.on)){var i=e.data.on||{},n=t.data.on||{};zr=e.elm,function(t){if(c(t.__r)){var e=q?"change":"input";t[e]=[].concat(t.__r,t[e]||[]),delete t.__r}c(t.__c)&&(t.change=[].concat(t.__c,t.change||[]),delete t.__c)}(i),rt(i,n,Wr,Jr,qr,e.context),zr=void 0}}var Yr,Zr={create:Xr,update:Xr};function Qr(t,e){if(!o(t.data.domProps)||!o(e.data.domProps)){var i,n,a=e.elm,s=t.data.domProps||{},r=e.data.domProps||{};for(i in c(r.__ob__)&&(r=e.data.domProps=E({},r)),s)i in r||(a[i]="");for(i in r){if(n=r[i],"textContent"===i||"innerHTML"===i){if(e.children&&(e.children.length=0),n===s[i])continue;1===a.childNodes.length&&a.removeChild(a.childNodes[0])}if("value"===i&&"PROGRESS"!==a.tagName){a._value=n;var u=o(n)?"":String(n);to(a,u)&&(a.value=u)}else if("innerHTML"===i&&zn(a.tagName)&&o(a.innerHTML)){(Yr=Yr||document.createElement("div")).innerHTML="<svg>"+n+"</svg>";for(var f=Yr.firstChild;a.firstChild;)a.removeChild(a.firstChild);for(;f.firstChild;)a.appendChild(f.firstChild)}else if(n!==s[i])try{a[i]=n}catch(t){}}}}function to(t,e){return!t.composing&&("OPTION"===t.tagName||function(t,e){var n=!0;try{n=document.activeElement!==t}catch(t){}return n&&t.value!==e}(t,e)||function(t,e){var n=t.value,i=t._vModifiers;if(c(i)){if(i.number)return v(n)!==v(e);if(i.trim)return n.trim()!==e.trim()}return n!==e}(t,e))}var eo={create:Qr,update:Qr},no=g((function(t){var e={},n=/:(.+)/;return t.split(/;(?![^(]*\))/g).forEach((function(t){if(t){var r=t.split(n);r.length>1&&(e[r[0].trim()]=r[1].trim())}})),e}));function ro(t){var e=oo(t.style);return t.staticStyle?E(t.staticStyle,e):e}function oo(t){return Array.isArray(t)?T(t):"string"==typeof t?no(t):t}var io,li=/^--/,ao=/\s*!important$/,so=function(t,e,n){if(li.test(e))t.style.setProperty(e,n);else if(ao.test(n))t.style.setProperty(k(e),n.replace(ao,""),"important");else{var r=uo(e);if(Array.isArray(n))for(var i=0,o=n.length;i<o;i++)t.style[r]=n[i];else t.style[r]=n}},co=["Webkit","Moz","ms"],uo=g((function(t){if(io=io||document.createElement("div").style,"filter"!==(t=b(t))&&t in io)return t;for(var e=t.charAt(0).toUpperCase()+t.slice(1),n=0;n<co.length;n++){var r=co[n]+e;if(r in io)return r}}));function fo(t,e){var i=e.data,n=t.data;if(!(o(i.staticStyle)&&o(i.style)&&o(n.staticStyle)&&o(n.style))){var a,s,r=e.elm,u=n.staticStyle,f=n.normalizedStyle||n.style||{},l=u||f,p=oo(e.data.style)||{};e.data.normalizedStyle=c(p.__ob__)?E({},p):p;var d=function(t,e){for(var n,r={},i=t;i.componentInstance;)(i=i.componentInstance._vnode)&&i.data&&(n=ro(i.data))&&E(r,n);(n=ro(t.data))&&E(r,n);for(var o=t;o=o.parent;)o.data&&(n=ro(o.data))&&E(r,n);return r}(e);for(s in l)o(d[s])&&so(r,s,"");for(s in d)(a=d[s])!==l[s]&&so(r,s,null==a?"":a)}}var lo={create:fo,update:fo},po=/\s+/;function ho(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(po).forEach((function(e){return t.classList.add(e)})):t.classList.add(e);else{var n=" "+(t.getAttribute("class")||"")+" ";n.indexOf(" "+e+" ")<0&&t.setAttribute("class",(n+e).trim())}}function vo(t,e){if(e&&(e=e.trim()))if(t.classList)e.indexOf(" ")>-1?e.split(po).forEach((function(e){return t.classList.remove(e)})):t.classList.remove(e),t.classList.length||t.removeAttribute("class");else{for(var n=" "+(t.getAttribute("class")||"")+" ",r=" "+e+" ";n.indexOf(r)>=0;)n=n.replace(r," ");(n=n.trim())?t.setAttribute("class",n):t.removeAttribute("class")}}function mo(t){if(t){if("object"==typeof t){var e={};return!1!==t.css&&E(e,yo(t.name||"v")),E(e,t),e}return"string"==typeof t?yo(t):void 0}}var yo=g((function(t){return{enterClass:t+"-enter",enterToClass:t+"-enter-to",enterActiveClass:t+"-enter-active",leaveClass:t+"-leave",leaveToClass:t+"-leave-to",leaveActiveClass:t+"-leave-active"}})),go=G&&!Y,bo="transition",_o="animation",wo="transition",xo="transitionend",Oo="animation",So="animationend";go&&(void 0===window.ontransitionend&&void 0!==window.onwebkittransitionend&&(wo="WebkitTransition",xo="webkitTransitionEnd"),void 0===window.onanimationend&&void 0!==window.onwebkitanimationend&&(Oo="WebkitAnimation",So="webkitAnimationEnd"));var $o=G?window.requestAnimationFrame?window.requestAnimationFrame.bind(window):setTimeout:function(t){return t()};function ko(t){$o((function(){$o(t)}))}function Ao(t,e){var n=t._transitionClasses||(t._transitionClasses=[]);n.indexOf(e)<0&&(n.push(e),ho(t,e))}function Co(t,e){t._transitionClasses&&_(t._transitionClasses,e),vo(t,e)}function Eo(t,e,n){var r=jo(t,e),i=r.type,o=r.timeout,a=r.propCount;if(!i)return n();var s=i===bo?xo:So,c=0,u=function(){t.removeEventListener(s,f),n()},f=function(e){e.target===t&&++c>=a&&u()};setTimeout((function(){c<a&&u()}),o+1),t.addEventListener(s,f)}var To=/\b(transform|all)(,|$)/;function jo(t,e){var n,r=window.getComputedStyle(t),i=(r[wo+"Delay"]||"").split(", "),o=(r[wo+"Duration"]||"").split(", "),a=Io(i,o),s=(r[Oo+"Delay"]||"").split(", "),c=(r[Oo+"Duration"]||"").split(", "),u=Io(s,c),f=0,l=0;return e===bo?a>0&&(n=bo,f=a,l=o.length):e===_o?u>0&&(n=_o,f=u,l=c.length):l=(n=(f=Math.max(a,u))>0?a>u?bo:_o:null)?n===bo?o.length:c.length:0,{type:n,timeout:f,propCount:l,hasTransform:n===bo&&To.test(r[wo+"Property"])}}function Io(t,e){for(;t.length<e.length;)t=t.concat(t);return Math.max.apply(null,e.map((function(e,n){return Mo(e)+Mo(t[n])})))}function Mo(t){return 1e3*Number(t.slice(0,-1).replace(",","."))}function No(t,e){var i=t.elm;c(i._leaveCb)&&(i._leaveCb.cancelled=!0,i._leaveCb());var a=mo(t.data.transition);if(!o(a)&&!c(i._enterCb)&&1===i.nodeType){for(var s=a.css,n=a.type,u=a.enterClass,r=a.enterToClass,p=a.enterActiveClass,f=a.appearClass,d=a.appearToClass,h=a.appearActiveClass,m=a.beforeEnter,y=a.enter,g=a.afterEnter,_=a.enterCancelled,b=a.beforeAppear,w=a.appear,x=a.afterAppear,O=a.appearCancelled,S=a.duration,$=Je,k=Je.$vnode;k&&k.parent;)$=k.context,k=k.parent;var A=!$._isMounted||!t.isRootInsert;if(!A||w||""===w){var C=A&&f?f:u,E=A&&h?h:p,T=A&&d?d:r,j=A&&b||m,I=A&&"function"==typeof w?w:y,M=A&&x||g,N=A&&O||_,P=v(l(S)?S.enter:S),R=!1!==s&&!Y,F=Ro(I),D=i._enterCb=L((function(){R&&(Co(i,T),Co(i,E)),D.cancelled?(R&&Co(i,C),N&&N(i)):M&&M(i),i._enterCb=null}));t.data.show||ce(t,"insert",(function(){var e=i.parentNode,n=e&&e._pending&&e._pending[t.key];n&&n.tag===t.tag&&n.elm._leaveCb&&n.elm._leaveCb(),I&&I(i,D)})),j&&j(i),R&&(Ao(i,C),Ao(i,E),ko((function(){Co(i,C),D.cancelled||(Ao(i,T),F||(Lo(P)?setTimeout(D,P):Eo(i,n,D)))}))),t.data.show&&(e&&e(),I&&I(i,D)),R||F||D()}}}function Po(t,e){var i=t.elm;c(i._enterCb)&&(i._enterCb.cancelled=!0,i._enterCb());var a=mo(t.data.transition);if(o(a)||1!==i.nodeType)return e();if(!c(i._leaveCb)){var s=a.css,n=a.type,u=a.leaveClass,r=a.leaveToClass,p=a.leaveActiveClass,f=a.beforeLeave,d=a.leave,h=a.afterLeave,m=a.leaveCancelled,y=a.delayLeave,g=a.duration,_=!1!==s&&!Y,b=Ro(d),w=v(l(g)?g.leave:g),x=i._leaveCb=L((function(){i.parentNode&&i.parentNode._pending&&(i.parentNode._pending[t.key]=null),_&&(Co(i,r),Co(i,p)),x.cancelled?(_&&Co(i,u),m&&m(i)):(e(),h&&h(i)),i._leaveCb=null}));y?y(O):O()}function O(){x.cancelled||(!t.data.show&&i.parentNode&&((i.parentNode._pending||(i.parentNode._pending={}))[t.key]=t),f&&f(i),_&&(Ao(i,u),Ao(i,p),ko((function(){Co(i,u),x.cancelled||(Ao(i,r),b||(Lo(w)?setTimeout(x,w):Eo(i,n,x)))}))),d&&d(i,x),_||b||x())}}function Lo(t){return"number"==typeof t&&!isNaN(t)}function Ro(t){if(o(t))return!1;var e=t.fns;return c(e)?Ro(Array.isArray(e)?e[0]:e):(t._length||t.length)>1}function Fo(t,e){!0!==e.data.show&&No(e)}var Do=function(t){var e,a,s={},n=t.modules,u=t.nodeOps;for(e=0;e<Qn.length;++e)for(s[Qn[e]]=[],a=0;a<n.length;++a)c(n[a][Qn[e]])&&s[Qn[e]].push(n[a][Qn[e]]);function r(t){var e=u.parentNode(t);c(e)&&u.removeChild(e,t)}function l(t,e,i,n,a,r,o){if(c(t.elm)&&c(r)&&(t=r[o]=wt(t)),t.isRootInsert=!a,!function(t,e,i,n){var a=t.data;if(c(a)){var r=c(t.componentInstance)&&a.keepAlive;if(c(a=a.hook)&&c(a=a.init)&&a(t,!1),c(t.componentInstance))return d(t,e),h(i,t.elm,n),f(r)&&function(t,e,n,i){for(var r,a=t;a.componentInstance;)if(c(r=(a=a.componentInstance._vnode).data)&&c(r=r.transition)){for(r=0;r<s.activate.length;++r)s.activate[r](Zn,a);e.push(a);break}h(n,t.elm,i)}(t,e,i,n),!0}}(t,e,i,n)){var l=t.data,p=t.children,m=t.tag;c(m)?(t.elm=t.ns?u.createElementNS(t.ns,m):u.createElement(m,t),g(t),v(t,p,e),c(l)&&y(t,e),h(i,t.elm,n)):f(t.isComment)?(t.elm=u.createComment(t.text),h(i,t.elm,n)):(t.elm=u.createTextNode(t.text),h(i,t.elm,n))}}function d(t,e){c(t.data.pendingInsert)&&(e.push.apply(e,t.data.pendingInsert),t.data.pendingInsert=null),t.elm=t.componentInstance.$el,m(t)?(y(t,e),g(t)):(tr(t),e.push(t))}function h(t,e,n){c(t)&&(c(n)?u.parentNode(n)===t&&u.insertBefore(t,e,n):u.appendChild(t,e))}function v(t,e,n){if(Array.isArray(e))for(var r=0;r<e.length;++r)l(e[r],n,t.elm,null,!0,e,r);else i(t.text)&&u.appendChild(t.elm,u.createTextNode(String(t.text)))}function m(t){for(;t.componentInstance;)t=t.componentInstance._vnode;return c(t.tag)}function y(t,n){for(var r=0;r<s.create.length;++r)s.create[r](Zn,t);c(e=t.data.hook)&&(c(e.create)&&e.create(Zn,t),c(e.insert)&&n.push(t))}function g(t){var e;if(c(e=t.fnScopeId))u.setStyleScope(t.elm,e);else for(var n=t;n;)c(e=n.context)&&c(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e),n=n.parent;c(e=Je)&&e!==t.context&&e!==t.fnContext&&c(e=e.$options._scopeId)&&u.setStyleScope(t.elm,e)}function _(t,e,n,r,i,o){for(;r<=i;++r)l(n[r],o,t,e,!1,n,r)}function b(t){var e,n,i=t.data;if(c(i))for(c(e=i.hook)&&c(e=e.destroy)&&e(t),e=0;e<s.destroy.length;++e)s.destroy[e](t);if(c(e=t.children))for(n=0;n<t.children.length;++n)b(t.children[n])}function w(t,e,n){for(;e<=n;++e){var i=t[e];c(i)&&(c(i.tag)?(x(i),b(i)):r(i.elm))}}function x(t,e){if(c(e)||c(t.data)){var n,i=s.remove.length+1;for(c(e)?e.listeners+=i:e=function(t,e){function n(){0==--n.listeners&&r(t)}return n.listeners=e,n}(t.elm,i),c(n=t.componentInstance)&&c(n=n._vnode)&&c(n.data)&&x(n,e),n=0;n<s.remove.length;++n)s.remove[n](t,e);c(n=t.data.hook)&&c(n=n.remove)?n(t,e):e()}else r(t.elm)}function O(t,e,n,i){for(var r=n;r<i;r++){var a=e[r];if(c(a)&&er(t,a))return r}}function S(t,i,e,a,n,r){if(t!==i){c(i.elm)&&c(a)&&(i=a[n]=wt(i));var p=i.elm=t.elm;if(f(t.isAsyncPlaceholder))c(i.asyncFactory.resolved)?A(t.elm,i,e):i.isAsyncPlaceholder=!0;else if(f(i.isStatic)&&f(t.isStatic)&&i.key===t.key&&(f(i.isCloned)||f(i.isOnce)))i.componentInstance=t.componentInstance;else{var d,h=i.data;c(h)&&c(d=h.hook)&&c(d=d.prepatch)&&d(t,i);var v=t.children,y=i.children;if(c(h)&&m(i)){for(d=0;d<s.update.length;++d)s.update[d](t,i);c(d=h.hook)&&c(d=d.update)&&d(t,i)}o(i.text)?c(v)&&c(y)?v!==y&&function(t,e,i,n,a){for(var s,r,f,p=0,d=0,h=e.length-1,v=e[0],m=e[h],y=i.length-1,g=i[0],b=i[y],x=!a;p<=h&&d<=y;)o(v)?v=e[++p]:o(m)?m=e[--h]:er(v,g)?(S(v,g,n,i,d),v=e[++p],g=i[++d]):er(m,b)?(S(m,b,n,i,y),m=e[--h],b=i[--y]):er(v,b)?(S(v,b,n,i,y),x&&u.insertBefore(t,v.elm,u.nextSibling(m.elm)),v=e[++p],b=i[--y]):er(m,g)?(S(m,g,n,i,d),x&&u.insertBefore(t,m.elm,v.elm),m=e[--h],g=i[++d]):(o(s)&&(s=nr(e,p,h)),o(r=c(g.key)?s[g.key]:O(g,e,p,h))?l(g,n,t,v.elm,!1,i,d):er(f=e[r],g)?(S(f,g,n,i,d),e[r]=void 0,x&&u.insertBefore(t,f.elm,v.elm)):l(g,n,t,v.elm,!1,i,d),g=i[++d]);p>h?_(t,o(i[y+1])?null:i[y+1].elm,i,d,y,n):d>y&&w(e,p,h)}(p,v,y,e,r):c(y)?(c(t.text)&&u.setTextContent(p,""),_(p,null,y,0,y.length-1,e)):c(v)?w(v,0,v.length-1):c(t.text)&&u.setTextContent(p,""):t.text!==i.text&&u.setTextContent(p,i.text),c(h)&&c(d=h.hook)&&c(d=d.postpatch)&&d(t,i)}}}function $(t,e,i){if(f(i)&&c(t.parent))t.parent.data.pendingInsert=e;else for(var n=0;n<e.length;++n)e[n].data.hook.insert(e[n])}var k=p("attrs,class,staticClass,staticStyle,key");function A(t,e,i,n){var a,s=e.tag,r=e.data,u=e.children;if(n=n||r&&r.pre,e.elm=t,f(e.isComment)&&c(e.asyncFactory))return e.isAsyncPlaceholder=!0,!0;if(c(r)&&(c(a=r.hook)&&c(a=a.init)&&a(e,!0),c(a=e.componentInstance)))return d(e,i),!0;if(c(s)){if(c(u))if(t.hasChildNodes())if(c(a=r)&&c(a=a.domProps)&&c(a=a.innerHTML)){if(a!==t.innerHTML)return!1}else{for(var o=!0,l=t.firstChild,p=0;p<u.length;p++){if(!l||!A(l,u[p],i,n)){o=!1;break}l=l.nextSibling}if(!o||l)return!1}else v(e,u,i);if(c(r)){var h=!1;for(var m in r)if(!k(m)){h=!0,y(e,i);break}!h&&r.class&&ie(r.class)}}else t.data!==e.text&&(t.data=e.text);return!0}return function(t,i,e,a){if(!o(i)){var n,r=!1,p=[];if(o(t))r=!0,l(i,p);else{var d=c(t.nodeType);if(!d&&er(t,i))S(t,i,p,null,null,a);else{if(d){if(1===t.nodeType&&t.hasAttribute(R)&&(t.removeAttribute(R),e=!0),f(e)&&A(t,i,p))return $(i,p,!0),t;n=t,t=new yt(u.tagName(n).toLowerCase(),{},[],void 0,n)}var h=t.elm,v=u.parentNode(h);if(l(i,p,h._leaveCb?null:v,u.nextSibling(h)),c(i.parent))for(var y=i.parent,g=m(i);y;){for(var _=0;_<s.destroy.length;++_)s.destroy[_](y);if(y.elm=i.elm,g){for(var x=0;x<s.create.length;++x)s.create[x](Zn,y);var O=y.data.hook.insert;if(O.merged)for(var k=1;k<O.fns.length;k++)O.fns[k]()}else tr(y);y=y.parent}c(v)?w([t],0,0):c(t.tag)&&b(t)}}return $(i,p,r),i.elm}c(t)&&b(t)}}({nodeOps:Xn,modules:[pr,wr,Zr,eo,lo,G?{create:Fo,activate:Fo,remove:function(t,e){!0!==t.data.show?Po(t,e):e()}}:{}].concat(ur)});Y&&document.addEventListener("selectionchange",(function(){var t=document.activeElement;t&&t.vmodel&&Go(t,"input")}));var Uo={inserted:function(t,e,n,r){"select"===n.tag?(r.elm&&!r.elm._vOptions?ce(n,"postpatch",(function(){Uo.componentUpdated(t,e,n)})):Ho(t,e,n.context),t._vOptions=[].map.call(t.options,zo)):("textarea"===n.tag||Wn(t.type))&&(t._vModifiers=e.modifiers,e.modifiers.lazy||(t.addEventListener("compositionstart",Ko),t.addEventListener("compositionend",qo),t.addEventListener("change",qo),Y&&(t.vmodel=!0)))},componentUpdated:function(t,e,n){if("select"===n.tag){Ho(t,e,n.context);var r=t._vOptions,i=t._vOptions=[].map.call(t.options,zo);i.some((function(t,e){return!N(t,r[e])}))&&(t.multiple?e.value.some((function(t){return Vo(t,i)})):e.value!==e.oldValue&&Vo(e.value,i))&&Go(t,"change")}}};function Ho(t,e,n){Bo(t,e,n),(q||Z)&&setTimeout((function(){Bo(t,e,n)}),0)}function Bo(t,e,n){var r=e.value,i=t.multiple;if(!i||Array.isArray(r)){for(var o,a,s=0,c=t.options.length;s<c;s++)if(a=t.options[s],i)o=P(r,zo(a))>-1,a.selected!==o&&(a.selected=o);else if(N(zo(a),r))return void(t.selectedIndex!==s&&(t.selectedIndex=s));i||(t.selectedIndex=-1)}}function Vo(t,e){return e.every((function(e){return!N(e,t)}))}function zo(t){return"_value"in t?t._value:t.value}function Ko(t){t.target.composing=!0}function qo(t){t.target.composing&&(t.target.composing=!1,Go(t.target,"input"))}function Go(t,e){var n=document.createEvent("HTMLEvents");n.initEvent(e,!0,!0),t.dispatchEvent(n)}function Wo(t){return!t.componentInstance||t.data&&t.data.transition?t:Wo(t.componentInstance._vnode)}var Jo={model:Uo,show:{bind:function(t,e,n){var r=e.value,i=(n=Wo(n)).data&&n.data.transition,o=t.__vOriginalDisplay="none"===t.style.display?"":t.style.display;r&&i?(n.data.show=!0,No(n,(function(){t.style.display=o}))):t.style.display=r?o:"none"},update:function(t,e,n){var r=e.value;!r!=!e.oldValue&&((n=Wo(n)).data&&n.data.transition?(n.data.show=!0,r?No(n,(function(){t.style.display=t.__vOriginalDisplay})):Po(n,(function(){t.style.display="none"}))):t.style.display=r?t.__vOriginalDisplay:"none")},unbind:function(t,e,n,r,i){i||(t.style.display=t.__vOriginalDisplay)}}},Xo={name:String,appear:Boolean,css:Boolean,mode:String,type:String,enterClass:String,leaveClass:String,enterToClass:String,leaveToClass:String,enterActiveClass:String,leaveActiveClass:String,appearClass:String,appearActiveClass:String,appearToClass:String,duration:[Number,String,Object]};function Yo(t){var e=t&&t.componentOptions;return e&&e.Ctor.options.abstract?Yo(ze(e.children)):t}function Zo(t){var e={},n=t.$options;for(var r in n.propsData)e[r]=t[r];var i=n._parentListeners;for(var o in i)e[b(o)]=i[o];return e}function Qo(t,e){if(/\d-keep-alive$/.test(e.tag))return t("keep-alive",{props:e.componentOptions.propsData})}var ti=function(t){return t.tag||Ve(t)},ei=function(t){return"show"===t.name},ni={name:"transition",props:Xo,abstract:!0,render:function(t){var e=this,n=this.$slots.default;if(n&&(n=n.filter(ti)).length){var r=this.mode,o=n[0];if(function(t){for(;t=t.parent;)if(t.data.transition)return!0}(this.$vnode))return o;var a=Yo(o);if(!a)return o;if(this._leaving)return Qo(t,o);var s="__transition-"+this._uid+"-";a.key=null==a.key?a.isComment?s+"comment":s+a.tag:i(a.key)?0===String(a.key).indexOf(s)?a.key:s+a.key:a.key;var c=(a.data||(a.data={})).transition=Zo(this),u=this._vnode,f=Yo(u);if(a.data.directives&&a.data.directives.some(ei)&&(a.data.show=!0),f&&f.data&&!function(t,e){return e.key===t.key&&e.tag===t.tag}(a,f)&&!Ve(f)&&(!f.componentInstance||!f.componentInstance._vnode.isComment)){var l=f.data.transition=E({},c);if("out-in"===r)return this._leaving=!0,ce(l,"afterLeave",(function(){e._leaving=!1,e.$forceUpdate()})),Qo(t,o);if("in-out"===r){if(Ve(a))return u;var p,d=function(){p()};ce(c,"afterEnter",d),ce(c,"enterCancelled",d),ce(l,"delayLeave",(function(t){p=t}))}}return o}}},ri=E({tag:String,moveClass:String},Xo);function oi(t){t.elm._moveCb&&t.elm._moveCb(),t.elm._enterCb&&t.elm._enterCb()}function ii(t){t.data.newPos=t.elm.getBoundingClientRect()}function ai(t){var e=t.data.pos,n=t.data.newPos,r=e.left-n.left,i=e.top-n.top;if(r||i){t.data.moved=!0;var o=t.elm.style;o.transform=o.WebkitTransform="translate("+r+"px,"+i+"px)",o.transitionDuration="0s"}}delete ri.mode;var si={Transition:ni,TransitionGroup:{props:ri,beforeMount:function(){var t=this,e=this._update;this._update=function(n,r){var i=Xe(t);t.__patch__(t._vnode,t.kept,!1,!0),t._vnode=t.kept,i(),e.call(t,n,r)}},render:function(t){for(var e=this.tag||this.$vnode.data.tag||"span",n=Object.create(null),r=this.prevChildren=this.children,i=this.$slots.default||[],o=this.children=[],a=Zo(this),s=0;s<i.length;s++){var c=i[s];c.tag&&null!=c.key&&0!==String(c.key).indexOf("__vlist")&&(o.push(c),n[c.key]=c,(c.data||(c.data={})).transition=a)}if(r){for(var u=[],f=[],l=0;l<r.length;l++){var p=r[l];p.data.transition=a,p.data.pos=p.elm.getBoundingClientRect(),n[p.key]?u.push(p):f.push(p)}this.kept=t(e,null,u),this.removed=f}return t(e,null,o)},updated:function(){var t=this.prevChildren,e=this.moveClass||(this.name||"v")+"-move";t.length&&this.hasMove(t[0].elm,e)&&(t.forEach(oi),t.forEach(ii),t.forEach(ai),this._reflow=document.body.offsetHeight,t.forEach((function(t){if(t.data.moved){var n=t.elm,r=n.style;Ao(n,e),r.transform=r.WebkitTransform=r.transitionDuration="",n.addEventListener(xo,n._moveCb=function t(r){r&&r.target!==n||r&&!/transform$/.test(r.propertyName)||(n.removeEventListener(xo,t),n._moveCb=null,Co(n,e))})}})))},methods:{hasMove:function(t,e){if(!go)return!1;if(this._hasMove)return this._hasMove;var n=t.cloneNode();t._transitionClasses&&t._transitionClasses.forEach((function(t){vo(n,t)})),ho(n,e),n.style.display="none",this.$el.appendChild(n);var r=jo(n);return this.$el.removeChild(n),this._hasMove=r.hasTransform}}}};xn.config.mustUseProp=jn,xn.config.isReservedTag=Kn,xn.config.isReservedAttr=En,xn.config.getTagNamespace=qn,xn.config.isUnknownElement=function(t){if(!G)return!0;if(Kn(t))return!1;if(t=t.toLowerCase(),null!=Gn[t])return Gn[t];var e=document.createElement(t);return t.indexOf("-")>-1?Gn[t]=e.constructor===window.HTMLUnknownElement||e.constructor===window.HTMLElement:Gn[t]=/HTMLUnknownElement/.test(e.toString())},E(xn.options.directives,Jo),E(xn.options.components,si),xn.prototype.__patch__=G?Do:j,xn.prototype.$mount=function(t,e){return function(t,e,n){var r;return t.$el=e,t.$options.render||(t.$options.render=bt),Qe(t,"beforeMount"),r=function(){t._update(t._render(),n)},new pn(t,r,j,{before:function(){t._isMounted&&!t._isDestroyed&&Qe(t,"beforeUpdate")}},!0),n=!1,null==t.$vnode&&(t._isMounted=!0,Qe(t,"mounted")),t}(this,t=t&&G?Jn(t):void 0,e)},G&&setTimeout((function(){U.devtools&&at&&at.emit("init",xn)}),0);var ci,ui=/\{\{((?:.|\r?\n)+?)\}\}/g,fi=/[-.*+?^${}()|[\]\/\\]/g,pi=g((function(t){var e=t[0].replace(fi,"\\$&"),n=t[1].replace(fi,"\\$&");return new RegExp(e+"((?:.|\\n)+?)"+n,"g")})),di={staticKeys:["staticClass"],transformNode:function(t,e){e.warn;var n=Nr(t,"class");n&&(t.staticClass=JSON.stringify(n));var r=Mr(t,"class",!1);r&&(t.classBinding=r)},genData:function(t){var e="";return t.staticClass&&(e+="staticClass:"+t.staticClass+","),t.classBinding&&(e+="class:"+t.classBinding+","),e}},hi={staticKeys:["staticStyle"],transformNode:function(t,e){e.warn;var n=Nr(t,"style");n&&(t.staticStyle=JSON.stringify(no(n)));var r=Mr(t,"style",!1);r&&(t.styleBinding=r)},genData:function(t){var e="";return t.staticStyle&&(e+="staticStyle:"+t.staticStyle+","),t.styleBinding&&(e+="style:("+t.styleBinding+"),"),e}},vi=p("area,base,br,col,embed,frame,hr,img,input,isindex,keygen,link,meta,param,source,track,wbr"),mi=p("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr,source"),yi=p("address,article,aside,base,blockquote,body,caption,col,colgroup,dd,details,dialog,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,head,header,hgroup,hr,html,legend,li,menuitem,meta,optgroup,option,param,rp,rt,source,style,summary,tbody,td,tfoot,th,thead,title,tr,track"),gi=/^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,bi=/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/,_i="[a-zA-Z_][\\-\\.0-9_a-zA-Z"+H.source+"]*",wi="((?:"+_i+"\\:)?"+_i+")",xi=new RegExp("^<"+wi),Oi=/^\s*(\/?)>/,Si=new RegExp("^<\\/"+wi+"[^>]*>"),$i=/^<!DOCTYPE [^>]+>/i,ki=/^<!\--/,Ai=/^<!\[/,Ci=p("script,style,textarea",!0),Ei={},Ti={"<":"<",">":">",""":'"',"&":"&"," ":"\n","	":"\t","'":"'"},ji=/&(?:lt|gt|quot|amp|#39);/g,Ii=/&(?:lt|gt|quot|amp|#39|#10|#9);/g,Mi=p("pre,textarea",!0),Ni=function(t,e){return t&&Mi(t)&&"\n"===e[0]};function Pi(t,e){var n=e?Ii:ji;return t.replace(n,(function(t){return Ti[t]}))}var Li,Ri,Fi,Di,Ui,Hi,Bi,Vi,zi=/^@|^v-on:/,Ki=/^v-|^@|^:|^#/,qi=/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/,Gi=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,Wi=/^\(|\)$/g,Ji=/^\[.*\]$/,Xi=/:(.*)$/,Yi=/^:|^\.|^v-bind:/,Zi=/\.[^.\]]+(?=[^\]]*$)/g,Qi=/^v-slot(:|$)|^#/,ta=/[\r\n]/,ea=/\s+/g,na=g((function(t){return(ci=ci||document.createElement("div")).innerHTML=t,ci.textContent})),ra="_empty_";function oa(t,e,n){return{type:1,tag:t,attrsList:e,attrsMap:fa(e),rawAttrsMap:{},parent:n,children:[]}}function ia(t,e){var n,r;(r=Mr(n=t,"key"))&&(n.key=r),t.plain=!t.key&&!t.scopedSlots&&!t.attrsList.length,function(t){var e=Mr(t,"ref");e&&(t.ref=e,t.refInFor=function(t){for(var e=t;e;){if(void 0!==e.for)return!0;e=e.parent}return!1}(t))}(t),function(t){var e;"template"===t.tag?(e=Nr(t,"scope"),t.slotScope=e||Nr(t,"slot-scope")):(e=Nr(t,"slot-scope"))&&(t.slotScope=e);var n=Mr(t,"slot");if(n&&(t.slotTarget='""'===n?'"default"':n,t.slotTargetDynamic=!(!t.attrsMap[":slot"]&&!t.attrsMap["v-bind:slot"]),"template"===t.tag||t.slotScope||Cr(t,"slot",n,function(t,e){return t.rawAttrsMap[":"+e]||t.rawAttrsMap["v-bind:"+e]||t.rawAttrsMap[e]}(t,"slot"))),"template"===t.tag){var r=Pr(t,Qi);if(r){var i=ca(r),o=i.name,a=i.dynamic;t.slotTarget=o,t.slotTargetDynamic=a,t.slotScope=r.value||ra}}else{var s=Pr(t,Qi);if(s){var c=t.scopedSlots||(t.scopedSlots={}),u=ca(s),f=u.name,l=u.dynamic,p=c[f]=oa("template",[],t);p.slotTarget=f,p.slotTargetDynamic=l,p.children=t.children.filter((function(t){if(!t.slotScope)return t.parent=p,!0})),p.slotScope=s.value||ra,t.children=[],t.plain=!1}}}(t),function(t){"slot"===t.tag&&(t.slotName=Mr(t,"name"))}(t),function(t){var e;(e=Mr(t,"is"))&&(t.component=e),null!=Nr(t,"inline-template")&&(t.inlineTemplate=!0)}(t);for(var i=0;i<Fi.length;i++)t=Fi[i](t,e)||t;return function(t){var e,n,r,i,o,a,s,c,u=t.attrsList;for(e=0,n=u.length;e<n;e++)if(r=i=u[e].name,o=u[e].value,Ki.test(r))if(t.hasBindings=!0,(a=ua(r.replace(Ki,"")))&&(r=r.replace(Zi,"")),Yi.test(r))r=r.replace(Yi,""),o=Or(o),(c=Ji.test(r))&&(r=r.slice(1,-1)),a&&(a.prop&&!c&&"innerHtml"===(r=b(r))&&(r="innerHTML"),a.camel&&!c&&(r=b(r)),a.sync&&(s=Fr(o,"$event"),c?Ir(t,'"update:"+('+r+")",s,null,!1,0,u[e],!0):(Ir(t,"update:"+b(r),s,null,!1,0,u[e]),k(r)!==b(r)&&Ir(t,"update:"+k(r),s,null,!1,0,u[e])))),a&&a.prop||!t.component&&Bi(t.tag,t.attrsMap.type,r)?Ar(t,r,o,u[e],c):Cr(t,r,o,u[e],c);else if(zi.test(r))r=r.replace(zi,""),(c=Ji.test(r))&&(r=r.slice(1,-1)),Ir(t,r,o,a,!1,0,u[e],c);else{var f=(r=r.replace(Ki,"")).match(Xi),l=f&&f[1];c=!1,l&&(r=r.slice(0,-(l.length+1)),Ji.test(l)&&(l=l.slice(1,-1),c=!0)),Tr(t,r,i,o,l,c,a,u[e])}else Cr(t,r,JSON.stringify(o),u[e]),!t.component&&"muted"===r&&Bi(t.tag,t.attrsMap.type,r)&&Ar(t,r,"true",u[e])}(t),t}function aa(t){var e;if(e=Nr(t,"v-for")){var n=function(t){var e=t.match(qi);if(e){var n={};n.for=e[2].trim();var r=e[1].trim().replace(Wi,""),i=r.match(Gi);return i?(n.alias=r.replace(Gi,"").trim(),n.iterator1=i[1].trim(),i[2]&&(n.iterator2=i[2].trim())):n.alias=r,n}}(e);n&&E(t,n)}}function sa(t,e){t.ifConditions||(t.ifConditions=[]),t.ifConditions.push(e)}function ca(t){var e=t.name.replace(Qi,"");return e||"#"!==t.name[0]&&(e="default"),Ji.test(e)?{name:e.slice(1,-1),dynamic:!0}:{name:'"'+e+'"',dynamic:!1}}function ua(t){var e=t.match(Zi);if(e){var n={};return e.forEach((function(t){n[t.slice(1)]=!0})),n}}function fa(t){for(var e={},n=0,r=t.length;n<r;n++)e[t[n].name]=t[n].value;return e}var la=/^xmlns:NS\d+/,pa=/^NS\d+:/;function da(t){return oa(t.tag,t.attrsList.slice(),t.parent)}var ha,va,ma=[di,hi,{preTransformNode:function(t,e){if("input"===t.tag){var n,r=t.attrsMap;if(!r["v-model"])return;if((r[":type"]||r["v-bind:type"])&&(n=Mr(t,"type")),r.type||n||!r["v-bind"]||(n="("+r["v-bind"]+").type"),n){var i=Nr(t,"v-if",!0),o=i?"&&("+i+")":"",a=null!=Nr(t,"v-else",!0),s=Nr(t,"v-else-if",!0),c=da(t);aa(c),Er(c,"type","checkbox"),ia(c,e),c.processed=!0,c.if="("+n+")==='checkbox'"+o,sa(c,{exp:c.if,block:c});var u=da(t);Nr(u,"v-for",!0),Er(u,"type","radio"),ia(u,e),sa(c,{exp:"("+n+")==='radio'"+o,block:u});var f=da(t);return Nr(f,"v-for",!0),Er(f,":type",n),ia(f,e),sa(c,{exp:i,block:f}),a?c.else=!0:s&&(c.elseif=s),c}}}}],ya={expectHTML:!0,modules:ma,directives:{model:function(t,e,n){var r=e.value,i=e.modifiers,o=t.tag,a=t.attrsMap.type;if(t.component)return Rr(t,r,i),!1;if("select"===o)!function(t,e,n){var r='var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return '+(n&&n.number?"_n(val)":"val")+"});";Ir(t,"change",r=r+" "+Fr(e,"$event.target.multiple ? $$selectedVal : $$selectedVal[0]"),null,!0)}(t,r,i);else if("input"===o&&"checkbox"===a)!function(t,e,n){var r=n&&n.number,i=Mr(t,"value")||"null",o=Mr(t,"true-value")||"true",a=Mr(t,"false-value")||"false";Ar(t,"checked","Array.isArray("+e+")?_i("+e+","+i+")>-1"+("true"===o?":("+e+")":":_q("+e+","+o+")")),Ir(t,"change","var $$a="+e+",$$el=$event.target,$$c=$$el.checked?("+o+"):("+a+");if(Array.isArray($$a)){var $$v="+(r?"_n("+i+")":i)+",$$i=_i($$a,$$v);if($$el.checked){$$i<0&&("+Fr(e,"$$a.concat([$$v])")+")}else{$$i>-1&&("+Fr(e,"$$a.slice(0,$$i).concat($$a.slice($$i+1))")+")}}else{"+Fr(e,"$$c")+"}",null,!0)}(t,r,i);else if("input"===o&&"radio"===a)!function(t,e,n){var r=n&&n.number,i=Mr(t,"value")||"null";Ar(t,"checked","_q("+e+","+(i=r?"_n("+i+")":i)+")"),Ir(t,"change",Fr(e,i),null,!0)}(t,r,i);else if("input"===o||"textarea"===o)!function(t,e,n){var r=t.attrsMap.type,i=n||{},o=i.lazy,a=i.number,s=i.trim,c=!o&&"range"!==r,u=o?"change":"range"===r?Kr:"input",f="$event.target.value";s&&(f="$event.target.value.trim()"),a&&(f="_n("+f+")");var l=Fr(e,f);c&&(l="if($event.target.composing)return;"+l),Ar(t,"value","("+e+")"),Ir(t,u,l,null,!0),(s||a)&&Ir(t,"blur","$forceUpdate()")}(t,r,i);else if(!U.isReservedTag(o))return Rr(t,r,i),!1;return!0},text:function(t,e){e.value&&Ar(t,"textContent","_s("+e.value+")",e)},html:function(t,e){e.value&&Ar(t,"innerHTML","_s("+e.value+")",e)}},isPreTag:function(t){return"pre"===t},isUnaryTag:vi,mustUseProp:jn,canBeLeftOpenTag:mi,isReservedTag:Kn,getTagNamespace:qn,staticKeys:function(t){return t.reduce((function(t,e){return t.concat(e.staticKeys||[])}),[]).join(",")}(ma)},ga=g((function(t){return p("type,tag,attrsList,attrsMap,plain,parent,children,attrs,start,end,rawAttrsMap"+(t?","+t:""))}));var ba=/^([\w$_]+|\([^)]*?\))\s*=>|^function(?:\s+[\w$]+)?\s*\(/,_a=/\([^)]*?\);*$/,wa=/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/,xa={esc:27,tab:9,enter:13,space:32,up:38,left:37,right:39,down:40,delete:[8,46]},Oa={esc:["Esc","Escape"],tab:"Tab",enter:"Enter",space:[" ","Spacebar"],up:["Up","ArrowUp"],left:["Left","ArrowLeft"],right:["Right","ArrowRight"],down:["Down","ArrowDown"],delete:["Backspace","Delete","Del"]},Sa=function(t){return"if("+t+")return null;"},$a={stop:"$event.stopPropagation();",prevent:"$event.preventDefault();",self:Sa("$event.target !== $event.currentTarget"),ctrl:Sa("!$event.ctrlKey"),shift:Sa("!$event.shiftKey"),alt:Sa("!$event.altKey"),meta:Sa("!$event.metaKey"),left:Sa("'button' in $event && $event.button !== 0"),middle:Sa("'button' in $event && $event.button !== 1"),right:Sa("'button' in $event && $event.button !== 2")};function ka(t,e){var n=e?"nativeOn:":"on:",r="",i="";for(var o in t){var a=Aa(t[o]);t[o]&&t[o].dynamic?i+=o+","+a+",":r+='"'+o+'":'+a+","}return r="{"+r.slice(0,-1)+"}",i?n+"_d("+r+",["+i.slice(0,-1)+"])":n+r}function Aa(t){if(!t)return"function(){}";if(Array.isArray(t))return"["+t.map((function(t){return Aa(t)})).join(",")+"]";var e=wa.test(t.value),n=ba.test(t.value),r=wa.test(t.value.replace(_a,""));if(t.modifiers){var i="",o="",a=[];for(var s in t.modifiers)if($a[s])o+=$a[s],xa[s]&&a.push(s);else if("exact"===s){var c=t.modifiers;o+=Sa(["ctrl","shift","alt","meta"].filter((function(t){return!c[t]})).map((function(t){return"$event."+t+"Key"})).join("||"))}else a.push(s);return a.length&&(i+=function(t){return"if(!$event.type.indexOf('key')&&"+t.map(Ca).join("&&")+")return null;"}(a)),o&&(i+=o),"function($event){"+i+(e?"return "+t.value+"($event)":n?"return ("+t.value+")($event)":r?"return "+t.value:t.value)+"}"}return e||n?t.value:"function($event){"+(r?"return "+t.value:t.value)+"}"}function Ca(t){var e=parseInt(t,10);if(e)return"$event.keyCode!=="+e;var n=xa[t],r=Oa[t];return"_k($event.keyCode,"+JSON.stringify(t)+","+JSON.stringify(n)+",$event.key,"+JSON.stringify(r)+")"}var Ea={on:function(t,e){t.wrapListeners=function(t){return"_g("+t+","+e.value+")"}},bind:function(t,e){t.wrapData=function(n){return"_b("+n+",'"+t.tag+"',"+e.value+","+(e.modifiers&&e.modifiers.prop?"true":"false")+(e.modifiers&&e.modifiers.sync?",true":"")+")"}},cloak:j},Ta=function(t){this.options=t,this.warn=t.warn||$r,this.transforms=kr(t.modules,"transformCode"),this.dataGenFns=kr(t.modules,"genData"),this.directives=E(E({},Ea),t.directives);var e=t.isReservedTag||I;this.maybeComponent=function(t){return!!t.component||!e(t.tag)},this.onceId=0,this.staticRenderFns=[],this.pre=!1};function ja(t,e){var n=new Ta(e);return{render:"with(this){return "+(t?Ia(t,n):'_c("div")')+"}",staticRenderFns:n.staticRenderFns}}function Ia(t,e){if(t.parent&&(t.pre=t.pre||t.parent.pre),t.staticRoot&&!t.staticProcessed)return Ma(t,e);if(t.once&&!t.onceProcessed)return Na(t,e);if(t.for&&!t.forProcessed)return La(t,e);if(t.if&&!t.ifProcessed)return Pa(t,e);if("template"!==t.tag||t.slotTarget||e.pre){if("slot"===t.tag)return function(t,e){var n=t.slotName||'"default"',r=Ua(t,e),i="_t("+n+(r?","+r:""),o=t.attrs||t.dynamicAttrs?Va((t.attrs||[]).concat(t.dynamicAttrs||[]).map((function(t){return{name:b(t.name),value:t.value,dynamic:t.dynamic}}))):null,a=t.attrsMap["v-bind"];return!o&&!a||r||(i+=",null"),o&&(i+=","+o),a&&(i+=(o?"":",null")+","+a),i+")"}(t,e);var n;if(t.component)n=function(t,e,n){var r=e.inlineTemplate?null:Ua(e,n,!0);return"_c("+t+","+Ra(e,n)+(r?","+r:"")+")"}(t.component,t,e);else{var r;(!t.plain||t.pre&&e.maybeComponent(t))&&(r=Ra(t,e));var i=t.inlineTemplate?null:Ua(t,e,!0);n="_c('"+t.tag+"'"+(r?","+r:"")+(i?","+i:"")+")"}for(var o=0;o<e.transforms.length;o++)n=e.transforms[o](t,n);return n}return Ua(t,e)||"void 0"}function Ma(t,e){t.staticProcessed=!0;var n=e.pre;return t.pre&&(e.pre=t.pre),e.staticRenderFns.push("with(this){return "+Ia(t,e)+"}"),e.pre=n,"_m("+(e.staticRenderFns.length-1)+(t.staticInFor?",true":"")+")"}function Na(t,e){if(t.onceProcessed=!0,t.if&&!t.ifProcessed)return Pa(t,e);if(t.staticInFor){for(var n="",r=t.parent;r;){if(r.for){n=r.key;break}r=r.parent}return n?"_o("+Ia(t,e)+","+e.onceId+++","+n+")":Ia(t,e)}return Ma(t,e)}function Pa(t,e,n,r){return t.ifProcessed=!0,function t(e,n,r,i){if(!e.length)return i||"_e()";var o=e.shift();return o.exp?"("+o.exp+")?"+a(o.block)+":"+t(e,n,r,i):""+a(o.block);function a(t){return r?r(t,n):t.once?Na(t,n):Ia(t,n)}}(t.ifConditions.slice(),e,n,r)}function La(t,e,n,r){var i=t.for,o=t.alias,a=t.iterator1?","+t.iterator1:"",s=t.iterator2?","+t.iterator2:"";return t.forProcessed=!0,(r||"_l")+"(("+i+"),function("+o+a+s+"){return "+(n||Ia)(t,e)+"})"}function Ra(t,e){var n="{",r=function(t,e){var n=t.directives;if(n){var r,i,o,a,s="directives:[",c=!1;for(r=0,i=n.length;r<i;r++){o=n[r],a=!0;var u=e.directives[o.name];u&&(a=!!u(t,o,e.warn)),a&&(c=!0,s+='{name:"'+o.name+'",rawName:"'+o.rawName+'"'+(o.value?",value:("+o.value+"),expression:"+JSON.stringify(o.value):"")+(o.arg?",arg:"+(o.isDynamicArg?o.arg:'"'+o.arg+'"'):"")+(o.modifiers?",modifiers:"+JSON.stringify(o.modifiers):"")+"},")}return c?s.slice(0,-1)+"]":void 0}}(t,e);r&&(n+=r+","),t.key&&(n+="key:"+t.key+","),t.ref&&(n+="ref:"+t.ref+","),t.refInFor&&(n+="refInFor:true,"),t.pre&&(n+="pre:true,"),t.component&&(n+='tag:"'+t.tag+'",');for(var i=0;i<e.dataGenFns.length;i++)n+=e.dataGenFns[i](t);if(t.attrs&&(n+="attrs:"+Va(t.attrs)+","),t.props&&(n+="domProps:"+Va(t.props)+","),t.events&&(n+=ka(t.events,!1)+","),t.nativeEvents&&(n+=ka(t.nativeEvents,!0)+","),t.slotTarget&&!t.slotScope&&(n+="slot:"+t.slotTarget+","),t.scopedSlots&&(n+=function(t,e,n){var r=t.for||Object.keys(e).some((function(t){var n=e[t];return n.slotTargetDynamic||n.if||n.for||Fa(n)})),i=!!t.if;if(!r)for(var o=t.parent;o;){if(o.slotScope&&o.slotScope!==ra||o.for){r=!0;break}o.if&&(i=!0),o=o.parent}var a=Object.keys(e).map((function(t){return Da(e[t],n)})).join(",");return"scopedSlots:_u(["+a+"]"+(r?",null,true":"")+(!r&&i?",null,false,"+function(t){for(var e=5381,n=t.length;n;)e=33*e^t.charCodeAt(--n);return e>>>0}(a):"")+")"}(t,t.scopedSlots,e)+","),t.model&&(n+="model:{value:"+t.model.value+",callback:"+t.model.callback+",expression:"+t.model.expression+"},"),t.inlineTemplate){var o=function(t,e){var n=t.children[0];if(n&&1===n.type){var r=ja(n,e.options);return"inlineTemplate:{render:function(){"+r.render+"},staticRenderFns:["+r.staticRenderFns.map((function(t){return"function(){"+t+"}"})).join(",")+"]}"}}(t,e);o&&(n+=o+",")}return n=n.replace(/,$/,"")+"}",t.dynamicAttrs&&(n="_b("+n+',"'+t.tag+'",'+Va(t.dynamicAttrs)+")"),t.wrapData&&(n=t.wrapData(n)),t.wrapListeners&&(n=t.wrapListeners(n)),n}function Fa(t){return 1===t.type&&("slot"===t.tag||t.children.some(Fa))}function Da(t,e){var n=t.attrsMap["slot-scope"];if(t.if&&!t.ifProcessed&&!n)return Pa(t,e,Da,"null");if(t.for&&!t.forProcessed)return La(t,e,Da);var r=t.slotScope===ra?"":String(t.slotScope),i="function("+r+"){return "+("template"===t.tag?t.if&&n?"("+t.if+")?"+(Ua(t,e)||"undefined")+":undefined":Ua(t,e)||"undefined":Ia(t,e))+"}",o=r?"":",proxy:true";return"{key:"+(t.slotTarget||'"default"')+",fn:"+i+o+"}"}function Ua(t,e,n,r,i){var o=t.children;if(o.length){var a=o[0];if(1===o.length&&a.for&&"template"!==a.tag&&"slot"!==a.tag){var s=n?e.maybeComponent(a)?",1":",0":"";return""+(r||Ia)(a,e)+s}var c=n?function(t,e){for(var n=0,r=0;r<t.length;r++){var i=t[r];if(1===i.type){if(Ha(i)||i.ifConditions&&i.ifConditions.some((function(t){return Ha(t.block)}))){n=2;break}(e(i)||i.ifConditions&&i.ifConditions.some((function(t){return e(t.block)})))&&(n=1)}}return n}(o,e.maybeComponent):0,u=i||Ba;return"["+o.map((function(t){return u(t,e)})).join(",")+"]"+(c?","+c:"")}}function Ha(t){return void 0!==t.for||"template"===t.tag||"slot"===t.tag}function Ba(t,e){return 1===t.type?Ia(t,e):3===t.type&&t.isComment?(r=t,"_e("+JSON.stringify(r.text)+")"):"_v("+(2===(n=t).type?n.expression:za(JSON.stringify(n.text)))+")";var n,r}function Va(t){for(var e="",n="",r=0;r<t.length;r++){var i=t[r],o=za(i.value);i.dynamic?n+=i.name+","+o+",":e+='"'+i.name+'":'+o+","}return e="{"+e.slice(0,-1)+"}",n?"_d("+e+",["+n.slice(0,-1)+"])":e}function za(t){return t.replace(/\u2028/g,"\\u2028").replace(/\u2029/g,"\\u2029")}function Ka(t,e){try{return new Function(t)}catch(n){return e.push({err:n,code:t}),j}}function qa(t){var e=Object.create(null);return function(n,r,i){(r=E({},r)).warn,delete r.warn;var o=r.delimiters?String(r.delimiters)+n:n;if(e[o])return e[o];var a=t(n,r),s={},c=[];return s.render=Ka(a.render,c),s.staticRenderFns=a.staticRenderFns.map((function(t){return Ka(t,c)})),e[o]=s}}new RegExp("\\b"+"do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,super,throw,while,yield,delete,export,import,return,switch,default,extends,finally,continue,debugger,function,arguments".split(",").join("\\b|\\b")+"\\b");var Ga,Wa,Ja=(Ga=function(t,e){var n=function(t,e){Li=e.warn||$r,Hi=e.isPreTag||I,Bi=e.mustUseProp||I,Vi=e.getTagNamespace||I,e.isReservedTag,Fi=kr(e.modules,"transformNode"),Di=kr(e.modules,"preTransformNode"),Ui=kr(e.modules,"postTransformNode"),Ri=e.delimiters;var n,r,i=[],o=!1!==e.preserveWhitespace,a=e.whitespace,s=!1,c=!1;function u(t){if(f(t),s||t.processed||(t=ia(t,e)),i.length||t===n||n.if&&(t.elseif||t.else)&&sa(n,{exp:t.elseif,block:t}),r&&!t.forbidden)if(t.elseif||t.else)a=t,(u=function(t){for(var e=t.length;e--;){if(1===t[e].type)return t[e];t.pop()}}(r.children))&&u.if&&sa(u,{exp:a.elseif,block:a});else{if(t.slotScope){var o=t.slotTarget||'"default"';(r.scopedSlots||(r.scopedSlots={}))[o]=t}r.children.push(t),t.parent=r}var a,u;t.children=t.children.filter((function(t){return!t.slotScope})),f(t),t.pre&&(s=!1),Hi(t.tag)&&(c=!1);for(var l=0;l<Ui.length;l++)Ui[l](t,e)}function f(t){if(!c)for(var e;(e=t.children[t.children.length-1])&&3===e.type&&" "===e.text;)t.children.pop()}return function(t,e){for(var n,r,i=[],o=e.expectHTML,a=e.isUnaryTag||I,s=e.canBeLeftOpenTag||I,c=0;t;){if(n=t,r&&Ci(r)){var u=0,f=r.toLowerCase(),l=Ei[f]||(Ei[f]=new RegExp("([\\s\\S]*?)(</"+f+"[^>]*>)","i")),p=t.replace(l,(function(t,n,r){return u=r.length,Ci(f)||"noscript"===f||(n=n.replace(/<!\--([\s\S]*?)-->/g,"$1").replace(/<!\[CDATA\[([\s\S]*?)]]>/g,"$1")),Ni(f,n)&&(n=n.slice(1)),e.chars&&e.chars(n),""}));c+=t.length-p.length,t=p,k(f,c-u,c)}else{var d=t.indexOf("<");if(0===d){if(ki.test(t)){var h=t.indexOf("--\x3e");if(h>=0){e.shouldKeepComment&&e.comment(t.substring(4,h),c,c+h+3),O(h+3);continue}}if(Ai.test(t)){var v=t.indexOf("]>");if(v>=0){O(v+2);continue}}var m=t.match($i);if(m){O(m[0].length);continue}var y=t.match(Si);if(y){var g=c;O(y[0].length),k(y[1],g,c);continue}var _=S();if(_){$(_),Ni(_.tagName,t)&&O(1);continue}}var b=void 0,w=void 0,x=void 0;if(d>=0){for(w=t.slice(d);!(Si.test(w)||xi.test(w)||ki.test(w)||Ai.test(w)||(x=w.indexOf("<",1))<0);)d+=x,w=t.slice(d);b=t.substring(0,d)}d<0&&(b=t),b&&O(b.length),e.chars&&b&&e.chars(b,c-b.length,c)}if(t===n){e.chars&&e.chars(t);break}}function O(e){c+=e,t=t.substring(e)}function S(){var e=t.match(xi);if(e){var n,r,i={tagName:e[1],attrs:[],start:c};for(O(e[0].length);!(n=t.match(Oi))&&(r=t.match(bi)||t.match(gi));)r.start=c,O(r[0].length),r.end=c,i.attrs.push(r);if(n)return i.unarySlash=n[1],O(n[0].length),i.end=c,i}}function $(t){var n=t.tagName,c=t.unarySlash;o&&("p"===r&&yi(n)&&k(r),s(n)&&r===n&&k(n));for(var u=a(n)||!!c,f=t.attrs.length,l=new Array(f),p=0;p<f;p++){var d=t.attrs[p],h=d[3]||d[4]||d[5]||"",v="a"===n&&"href"===d[1]?e.shouldDecodeNewlinesForHref:e.shouldDecodeNewlines;l[p]={name:d[1],value:Pi(h,v)}}u||(i.push({tag:n,lowerCasedTag:n.toLowerCase(),attrs:l,start:t.start,end:t.end}),r=n),e.start&&e.start(n,l,u,t.start,t.end)}function k(t,n,o){var a,s;if(null==n&&(n=c),null==o&&(o=c),t)for(s=t.toLowerCase(),a=i.length-1;a>=0&&i[a].lowerCasedTag!==s;a--);else a=0;if(a>=0){for(var u=i.length-1;u>=a;u--)e.end&&e.end(i[u].tag,n,o);i.length=a,r=a&&i[a-1].tag}else"br"===s?e.start&&e.start(t,[],!0,n,o):"p"===s&&(e.start&&e.start(t,[],!1,n,o),e.end&&e.end(t,n,o))}k()}(t,{warn:Li,expectHTML:e.expectHTML,isUnaryTag:e.isUnaryTag,canBeLeftOpenTag:e.canBeLeftOpenTag,shouldDecodeNewlines:e.shouldDecodeNewlines,shouldDecodeNewlinesForHref:e.shouldDecodeNewlinesForHref,shouldKeepComment:e.comments,outputSourceRange:e.outputSourceRange,start:function(t,o,a,f,l){var p=r&&r.ns||Vi(t);q&&"svg"===p&&(o=function(t){for(var e=[],n=0;n<t.length;n++){var r=t[n];la.test(r.name)||(r.name=r.name.replace(pa,""),e.push(r))}return e}(o));var d,h=oa(t,o,r);p&&(h.ns=p),"style"!==(d=h).tag&&("script"!==d.tag||d.attrsMap.type&&"text/javascript"!==d.attrsMap.type)||it()||(h.forbidden=!0);for(var v=0;v<Di.length;v++)h=Di[v](h,e)||h;s||(function(t){null!=Nr(t,"v-pre")&&(t.pre=!0)}(h),h.pre&&(s=!0)),Hi(h.tag)&&(c=!0),s?function(t){var e=t.attrsList,n=e.length;if(n)for(var r=t.attrs=new Array(n),i=0;i<n;i++)r[i]={name:e[i].name,value:JSON.stringify(e[i].value)},null!=e[i].start&&(r[i].start=e[i].start,r[i].end=e[i].end);else t.pre||(t.plain=!0)}(h):h.processed||(aa(h),function(t){var e=Nr(t,"v-if");if(e)t.if=e,sa(t,{exp:e,block:t});else{null!=Nr(t,"v-else")&&(t.else=!0);var n=Nr(t,"v-else-if");n&&(t.elseif=n)}}(h),function(t){null!=Nr(t,"v-once")&&(t.once=!0)}(h)),n||(n=h),a?u(h):(r=h,i.push(h))},end:function(t,e,n){var o=i[i.length-1];i.length-=1,r=i[i.length-1],u(o)},chars:function(t,e,n){if(r&&(!q||"textarea"!==r.tag||r.attrsMap.placeholder!==t)){var i,u,f,l=r.children;(t=c||t.trim()?"script"===(i=r).tag||"style"===i.tag?t:na(t):l.length?a?"condense"===a&&ta.test(t)?"":" ":o?" ":"":"")&&(c||"condense"!==a||(t=t.replace(ea," ")),!s&&" "!==t&&(u=function(t,e){var n=e?pi(e):ui;if(n.test(t)){for(var r,i,o,a=[],s=[],c=n.lastIndex=0;r=n.exec(t);){(i=r.index)>c&&(s.push(o=t.slice(c,i)),a.push(JSON.stringify(o)));var u=Or(r[1].trim());a.push("_s("+u+")"),s.push({"@binding":u}),c=i+r[0].length}return c<t.length&&(s.push(o=t.slice(c)),a.push(JSON.stringify(o))),{expression:a.join("+"),tokens:s}}}(t,Ri))?f={type:2,expression:u.expression,tokens:u.tokens,text:t}:" "===t&&l.length&&" "===l[l.length-1].text||(f={type:3,text:t}),f&&l.push(f))}},comment:function(t,e,n){if(r){var i={type:3,text:t,isComment:!0};r.children.push(i)}}}),n}(t.trim(),e);!1!==e.optimize&&function(t,e){t&&(ha=ga(e.staticKeys||""),va=e.isReservedTag||I,function t(e){if(e.static=function(t){return 2!==t.type&&(3===t.type||!(!t.pre&&(t.hasBindings||t.if||t.for||m(t.tag)||!va(t.tag)||function(t){for(;t.parent;){if("template"!==(t=t.parent).tag)return!1;if(t.for)return!0}return!1}(t)||!Object.keys(t).every(ha))))}(e),1===e.type){if(!va(e.tag)&&"slot"!==e.tag&&null==e.attrsMap["inline-template"])return;for(var n=0,r=e.children.length;n<r;n++){var i=e.children[n];t(i),i.static||(e.static=!1)}if(e.ifConditions)for(var o=1,a=e.ifConditions.length;o<a;o++){var s=e.ifConditions[o].block;t(s),s.static||(e.static=!1)}}}(t),function t(e,n){if(1===e.type){if((e.static||e.once)&&(e.staticInFor=n),e.static&&e.children.length&&(1!==e.children.length||3!==e.children[0].type))return void(e.staticRoot=!0);if(e.staticRoot=!1,e.children)for(var r=0,i=e.children.length;r<i;r++)t(e.children[r],n||!!e.for);if(e.ifConditions)for(var o=1,a=e.ifConditions.length;o<a;o++)t(e.ifConditions[o].block,n)}}(t,!1))}(n,e);var r=ja(n,e);return{ast:n,render:r.render,staticRenderFns:r.staticRenderFns}},function(t){function e(e,n){var r=Object.create(t),i=[],o=[];if(n)for(var a in n.modules&&(r.modules=(t.modules||[]).concat(n.modules)),n.directives&&(r.directives=E(Object.create(t.directives||null),n.directives)),n)"modules"!==a&&"directives"!==a&&(r[a]=n[a]);r.warn=function(t,e,n){(n?o:i).push(t)};var s=Ga(e.trim(),r);return s.errors=i,s.tips=o,s}return{compile:e,compileToFunctions:qa(e)}})(ya),Xa=(Ja.compile,Ja.compileToFunctions);function Ya(t){return(Wa=Wa||document.createElement("div")).innerHTML=t?'<a href="\n"/>':'<div a="\n"/>',Wa.innerHTML.indexOf(" ")>0}var Za=!!G&&Ya(!1),Qa=!!G&&Ya(!0),ts=g((function(t){var e=Jn(t);return e&&e.innerHTML})),es=xn.prototype.$mount;xn.prototype.$mount=function(t,e){if((t=t&&Jn(t))===document.body||t===document.documentElement)return this;var n=this.$options;if(!n.render){var r=n.template;if(r)if("string"==typeof r)"#"===r.charAt(0)&&(r=ts(r));else{if(!r.nodeType)return this;r=r.innerHTML}else t&&(r=function(t){if(t.outerHTML)return t.outerHTML;var e=document.createElement("div");return e.appendChild(t.cloneNode(!0)),e.innerHTML}(t));if(r){var i=Xa(r,{outputSourceRange:!1,shouldDecodeNewlines:Za,shouldDecodeNewlinesForHref:Qa,delimiters:n.delimiters,comments:n.comments},this),o=i.render,a=i.staticRenderFns;n.render=o,n.staticRenderFns=a}}return es.call(this,t,e)},xn.compile=Xa,t.exports=xn}).call(this,n(44),n(169).setImmediate)},function(t,e,n){(function(t){var r=void 0!==t&&t||"undefined"!=typeof self&&self||window,o=Function.prototype.apply;function c(t,e){this._id=t,this._clearFn=e}e.setTimeout=function(){return new c(o.call(setTimeout,r,arguments),clearTimeout)},e.setInterval=function(){return new c(o.call(setInterval,r,arguments),clearInterval)},e.clearTimeout=e.clearInterval=function(t){t&&t.close()},c.prototype.unref=c.prototype.ref=function(){},c.prototype.close=function(){this._clearFn.call(r,this._id)},e.enroll=function(t,e){clearTimeout(t._idleTimeoutId),t._idleTimeout=e},e.unenroll=function(t){clearTimeout(t._idleTimeoutId),t._idleTimeout=-1},e._unrefActive=e.active=function(t){clearTimeout(t._idleTimeoutId);var e=t._idleTimeout;e>=0&&(t._idleTimeoutId=setTimeout((function(){t._onTimeout&&t._onTimeout()}),e))},n(170),e.setImmediate="undefined"!=typeof self&&self.setImmediate||void 0!==t&&t.setImmediate||this&&this.setImmediate,e.clearImmediate="undefined"!=typeof self&&self.clearImmediate||void 0!==t&&t.clearImmediate||this&&this.clearImmediate}).call(this,n(44))},function(t,e,n){(function(t,e){!function(t,n){"use strict";if(!t.setImmediate){var r,html,o,c,f,l=1,d={},h=!1,v=t.document,m=Object.getPrototypeOf&&Object.getPrototypeOf(t);m=m&&m.setTimeout?m:t,"[object process]"==={}.toString.call(t.process)?r=function(t){e.nextTick((function(){_(t)}))}:!function(){if(t.postMessage&&!t.importScripts){var e=!0,n=t.onmessage;return t.onmessage=function(){e=!1},t.postMessage("","*"),t.onmessage=n,e}}()?t.MessageChannel?((o=new MessageChannel).port1.onmessage=function(t){_(t.data)},r=function(t){o.port2.postMessage(t)}):v&&"onreadystatechange"in v.createElement("script")?(html=v.documentElement,r=function(t){var script=v.createElement("script");script.onreadystatechange=function(){_(t),script.onreadystatechange=null,html.removeChild(script),script=null},html.appendChild(script)}):r=function(t){setTimeout(_,0,t)}:(c="setImmediate$"+Math.random()+"$",f=function(e){e.source===t&&"string"==typeof e.data&&0===e.data.indexOf(c)&&_(+e.data.slice(c.length))},t.addEventListener?t.addEventListener("message",f,!1):t.attachEvent("onmessage",f),r=function(e){t.postMessage(c+e,"*")}),m.setImmediate=function(t){"function"!=typeof t&&(t=new Function(""+t));for(var e=new Array(arguments.length-1),i=0;i<e.length;i++)e[i]=arguments[i+1];var n={callback:t,args:e};return d[l]=n,r(l),l++},m.clearImmediate=y}function y(t){delete d[t]}function _(t){if(h)setTimeout(_,0,t);else{var e=d[t];if(e){h=!0;try{!function(t){var e=t.callback,n=t.args;switch(n.length){case 0:e();break;case 1:e(n[0]);break;case 2:e(n[0],n[1]);break;case 3:e(n[0],n[1],n[2]);break;default:e.apply(void 0,n)}}(e)}finally{y(t),h=!1}}}}}("undefined"==typeof self?void 0===t?this:t:self)}).call(this,n(44),n(171))},function(t,e){var n,r,o=t.exports={};function c(){throw new Error("setTimeout has not been defined")}function f(){throw new Error("clearTimeout has not been defined")}function l(t){if(n===setTimeout)return setTimeout(t,0);if((n===c||!n)&&setTimeout)return n=setTimeout,setTimeout(t,0);try{return n(t,0)}catch(e){try{return n.call(null,t,0)}catch(e){return n.call(this,t,0)}}}!function(){try{n="function"==typeof setTimeout?setTimeout:c}catch(t){n=c}try{r="function"==typeof clearTimeout?clearTimeout:f}catch(t){r=f}}();var d,h=[],v=!1,m=-1;function y(){v&&d&&(v=!1,d.length?h=d.concat(h):m=-1,h.length&&_())}function _(){if(!v){var t=l(y);v=!0;for(var e=h.length;e;){for(d=h,h=[];++m<e;)d&&d[m].run();m=-1,e=h.length}d=null,v=!1,function(marker){if(r===clearTimeout)return clearTimeout(marker);if((r===f||!r)&&clearTimeout)return r=clearTimeout,clearTimeout(marker);try{r(marker)}catch(t){try{return r.call(null,marker)}catch(t){return r.call(this,marker)}}}(t)}}function w(t,e){this.fun=t,this.array=e}function x(){}o.nextTick=function(t){var e=new Array(arguments.length-1);if(arguments.length>1)for(var i=1;i<arguments.length;i++)e[i-1]=arguments[i];h.push(new w(t,e)),1!==h.length||v||l(_)},w.prototype.run=function(){this.fun.apply(null,this.array)},o.title="browser",o.browser=!0,o.env={},o.argv=[],o.version="",o.versions={},o.on=x,o.addListener=x,o.once=x,o.off=x,o.removeListener=x,o.removeAllListeners=x,o.emit=x,o.prependListener=x,o.prependOnceListener=x,o.listeners=function(t){return[]},o.binding=function(t){throw new Error("process.binding is not supported")},o.cwd=function(){return"/"},o.chdir=function(t){throw new Error("process.chdir is not supported")},o.umask=function(){return 0}},,,,function(t,e,n){var r=n(4),o=n(38),c=n(9),f=n(176),l="["+f+"]",d=RegExp("^"+l+l+"*"),h=RegExp(l+l+"*$"),v=function(t,e,n){var o={},l=c((function(){return!!f[t]()||"
"!="
"[t]()})),d=o[t]=l?e(m):f[t];n&&(o[n]=d),r(r.P+r.F*l,"String",o)},m=v.trim=function(t,e){return t=String(o(t)),1&e&&(t=t.replace(d,"")),2&e&&(t=t.replace(h,"")),t};t.exports=v},function(t,e){t.exports="\t\n\v\f\r \u2028\u2029\ufeff"},,,,,,function(t,e,n){"use strict";e.parse=function(t,e){if("string"!=typeof t)throw new TypeError("argument str must be a string");for(var n={},o=e||{},f=t.split(c),d=o.decode||r,i=0;i<f.length;i++){var h=f[i],v=h.indexOf("=");if(!(v<0)){var m=h.substr(0,v).trim(),y=h.substr(++v,h.length).trim();'"'==y[0]&&(y=y.slice(1,-1)),null==n[m]&&(n[m]=l(y,d))}}return n},e.serialize=function(t,e,n){var r=n||{},c=r.encode||o;if("function"!=typeof c)throw new TypeError("option encode is invalid");if(!f.test(t))throw new TypeError("argument name is invalid");var l=c(e);if(l&&!f.test(l))throw new TypeError("argument val is invalid");var d=t+"="+l;if(null!=r.maxAge){var h=r.maxAge-0;if(isNaN(h))throw new Error("maxAge should be a Number");d+="; Max-Age="+Math.floor(h)}if(r.domain){if(!f.test(r.domain))throw new TypeError("option domain is invalid");d+="; Domain="+r.domain}if(r.path){if(!f.test(r.path))throw new TypeError("option path is invalid");d+="; Path="+r.path}if(r.expires){if("function"!=typeof r.expires.toUTCString)throw new TypeError("option expires is invalid");d+="; Expires="+r.expires.toUTCString()}r.httpOnly&&(d+="; HttpOnly");r.secure&&(d+="; Secure");if(r.sameSite){switch("string"==typeof r.sameSite?r.sameSite.toLowerCase():r.sameSite){case!0:d+="; SameSite=Strict";break;case"lax":d+="; SameSite=Lax";break;case"strict":d+="; SameSite=Strict";break;default:throw new TypeError("option sameSite is invalid")}}return d};var r=decodeURIComponent,o=encodeURIComponent,c=/; */,f=/^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;function l(t,e){try{return e(t)}catch(e){return t}}},function(t,e,n){"use strict";var strong=n(184),r=n(130),o="Map";t.exports=n(185)(o,(function(t){return function(){return t(this,arguments.length>0?arguments[0]:void 0)}}),{get:function(t){var e=strong.getEntry(r(this,o),t);return e&&e.v},set:function(t,e){return strong.def(r(this,o),0===t?0:t,e)}},strong,!0)},function(t,e,n){"use strict";var r=n(12).f,o=n(65),c=n(86),f=n(32),l=n(83),d=n(84),h=n(82),v=n(115),m=n(87),y=n(10),_=n(76).fastKey,w=n(130),x=y?"_s":"size",O=function(t,e){var n,r=_(e);if("F"!==r)return t._i[r];for(n=t._f;n;n=n.n)if(n.k==e)return n};t.exports={getConstructor:function(t,e,n,h){var v=t((function(t,r){l(t,v,e,"_i"),t._t=e,t._i=o(null),t._f=void 0,t._l=void 0,t[x]=0,null!=r&&d(r,n,t[h],t)}));return c(v.prototype,{clear:function(){for(var t=w(this,e),data=t._i,n=t._f;n;n=n.n)n.r=!0,n.p&&(n.p=n.p.n=void 0),delete data[n.i];t._f=t._l=void 0,t[x]=0},delete:function(t){var n=w(this,e),r=O(n,t);if(r){var o=r.n,c=r.p;delete n._i[r.i],r.r=!0,c&&(c.n=o),o&&(o.p=c),n._f==r&&(n._f=o),n._l==r&&(n._l=c),n[x]--}return!!r},forEach:function(t){w(this,e);for(var n,r=f(t,arguments.length>1?arguments[1]:void 0,3);n=n?n.n:this._f;)for(r(n.v,n.k,this);n&&n.r;)n=n.p},has:function(t){return!!O(w(this,e),t)}}),y&&r(v.prototype,"size",{get:function(){return w(this,e)[x]}}),v},def:function(t,e,n){var r,o,c=O(t,e);return c?c.v=n:(t._l=c={i:o=_(e,!0),k:e,v:n,p:r=t._l,n:void 0,r:!1},t._f||(t._f=c),r&&(r.n=c),t[x]++,"F"!==o&&(t._i[o]=c)),t},getEntry:O,setStrong:function(t,e,n){h(t,e,(function(t,n){this._t=w(t,e),this._k=n,this._l=void 0}),(function(){for(var t=this,e=t._k,n=t._l;n&&n.r;)n=n.p;return t._t&&(t._l=n=n?n.n:t._t._f)?v(0,"keys"==e?n.k:"values"==e?n.v:[n.k,n.v]):(t._t=void 0,v(1))}),n?"entries":"values",!n,!0),m(e)}}},function(t,e,n){"use strict";var r=n(6),o=n(4),c=n(14),f=n(86),meta=n(76),l=n(84),d=n(83),h=n(13),v=n(9),m=n(80),y=n(51),_=n(94);t.exports=function(t,e,n,w,x,O){var S=r[t],$=S,k=x?"set":"add",A=$&&$.prototype,C={},E=function(t){var e=A[t];c(A,t,"delete"==t||"has"==t?function(a){return!(O&&!h(a))&&e.call(this,0===a?0:a)}:"get"==t?function(a){return O&&!h(a)?void 0:e.call(this,0===a?0:a)}:"add"==t?function(a){return e.call(this,0===a?0:a),this}:function(a,b){return e.call(this,0===a?0:a,b),this})};if("function"==typeof $&&(O||A.forEach&&!v((function(){(new $).entries().next()})))){var T=new $,j=T[k](O?{}:-0,1)!=T,I=v((function(){T.has(1)})),M=m((function(t){new $(t)})),N=!O&&v((function(){for(var t=new $,e=5;e--;)t[k](e,e);return!t.has(-0)}));M||(($=e((function(e,n){d(e,$,t);var r=_(new S,e,$);return null!=n&&l(n,x,r[k],r),r}))).prototype=A,A.constructor=$),(I||N)&&(E("delete"),E("has"),x&&E("get")),(N||j)&&E(k),O&&A.clear&&delete A.clear}else $=w.getConstructor(e,t,x,k),f($.prototype,n),meta.NEED=!0;return y($,t),C[t]=$,o(o.G+o.W+o.F*($!=S),C),O||w.setStrong($,t,x),$}}]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a11fd8f9dfebc2c4e2fc.js b/handbook/_nuxt/js/a11fd8f9dfebc2c4e2fc.js
new file mode 100644
index 0000000..18ffbb9
--- /dev/null
+++ b/handbook/_nuxt/js/a11fd8f9dfebc2c4e2fc.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[40],{334: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">\n</iframe>\n\nA grouped bar chart usually used to compare several groups of data that included the same kind of variables. Same as the bar chart, the length of the bars is proportional related to the categorical data. Every series have an individual color or different saturation of the same color system so that the user can distinguish and compare each set of data.\n\n<iframe max-width="830" width="100%" height="400" \n src="https://gallery.echartsjs.com/view-lite.html?cid=xry8WsXdOW&v=3">\n</iframe>\n\n\n## Suggestion for Using Grouped Bar Chart\n\n1. The difficulty of chart reading will be tremendous if there are many series in one group. Therefore, we suggest you use a stacked bar chart rather than a grouped bar chart in this situation.\n\n2. The gap between the two groups should be bigger than the gap inside the group, to avoid visually incorrect classification.'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a6a3fe16e7a764a89cd3.js b/handbook/_nuxt/js/a6a3fe16e7a764a89cd3.js
new file mode 100644
index 0000000..cc988e1
--- /dev/null
+++ b/handbook/_nuxt/js/a6a3fe16e7a764a89cd3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[111],{405: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 个序列、特征及相关值,使用气泡图是一个不错的选择。如下图气泡的位置显示了代码提交的日期、具体的时间点,气泡的大小说明了提交的代码量。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=scatter-punchCard">\n</iframe>\n\n2、我们还可以给气泡加入颜色编码。例如下图用不同的颜色将三个地区的空气数据分类标注,红色代表北京,黄色代表上海、蓝色代表广州,可以直观地对比分析三地的空气质量情况。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xr1kK7LoEf&v=1">\n</iframe>\n\n3、气泡图还经常用于和地图结合,其中 x 轴和 y 轴是经度和纬度的数据定位,气泡的大小可以表明该位置数量的多少。\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=scatter-world-population">\n</iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a6d33d615c47551931a3.js b/handbook/_nuxt/js/a6d33d615c47551931a3.js
new file mode 100644
index 0000000..104284d
--- /dev/null
+++ b/handbook/_nuxt/js/a6d33d615c47551931a3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[28],{322: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 the community for help.\n\nTherefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:\n\n- [API](${mainSitePath}/api.html)\n- [Option Manual](${mainSitePath}/option.html): you can try to use the search function\n- Articles in this handbook\n- [FAQ](${mainSitePath}/faq.html)\n- Searching in [GitHub issue](https://github.com/apache/echarts/issues)\n- Using the search engine\n\n### Create the Minimal Reproducible Demo\n\nCreate an example on [Codepen](https://codepen.io/Ovilia/pen/dyYWXWM), [Codesandbox](https://codesandbox.io/s/mystifying-bash-2uthz), which will make it easier for others to reproduce your problem.\n\nThe example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See [How to Create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) for a more detailed description.\n\n### Determining if It's a Bug\n\n#### Report a Bug or Request a New Feature\n\nIf it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the [issue template](https://ecomfe.github.io/echarts-issue-helper/) to create a new issue and follow the prompts to describe it in detail.\n\n#### How-To Questions\n\nIf it's not a bug, but you don't know how to achieve something, try the <a href=\"https://stackoverflow.com\">stackoverflow.com</a>\n\nIf you don't get an answer, you can also send an email to the email group [dev@echarts.apache.org](mailto:dev@echarts.apache.org). In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.\n\n## Non-technical questions\n\nOther questions can be sent in English to the mail group [dev@echarts.apache.org](mailto:dev@echarts.apache.org).\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js b/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js
deleted file mode 100644
index 484bfd6..0000000
--- a/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! For license information please see ../LICENSES */
-(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{101:function(e,n,t){"use strict";e.exports=function(e){return e.toLowerCase()}},102:function(e,n,t){"use strict";var l={name:"ClientOnly",functional:!0,props:{placeholder:String,placeholderTag:{type:String,default:"div"}},render:function(e,n){var t=n.parent,l=n.slots,r=n.props,o=l(),c=o.default;void 0===c&&(c=[]);var f=o.placeholder;return t._isMounted?c:(t.$once("hook:mounted",(function(){t.$forceUpdate()})),r.placeholderTag&&(r.placeholder||f)?e(r.placeholderTag,{class:["client-only-placeholder"]},r.placeholder||f):c.length>0?c.map((function(){return e(!1)})):e(!1))}};e.exports=l},105:function(e,n,t){"use strict";var l=["compactDisplay","currency","currencyDisplay","currencySign","localeMatcher","notation","numberingSystem","signDisplay","style","unit","unitDisplay","useGrouping","minimumIntegerDigits","minimumFractionDigits","maximumFractionDigits","minimumSignificantDigits","maximumSignificantDigits"];function r(e,n){"undefined"!=typeof console&&(console.warn("[vue-i18n] "+e),n&&console.warn(n.stack))}var o=Array.isArray;function c(e){return null!==e&&"object"==typeof e}function f(e){return"string"==typeof e}var h=Object.prototype.toString;function d(e){return"[object Object]"===h.call(e)}function m(e){return null==e}function v(e){return"function"==typeof e}function y(){for(var e=[],n=arguments.length;n--;)e[n]=arguments[n];var t=null,l=null;return 1===e.length?c(e[0])||o(e[0])?l=e[0]:"string"==typeof e[0]&&(t=e[0]):2===e.length&&("string"==typeof e[0]&&(t=e[0]),(c(e[1])||o(e[1]))&&(l=e[1])),{locale:t,params:l}}function _(e){return JSON.parse(JSON.stringify(e))}function k(e,n){return!!~e.indexOf(n)}var w=Object.prototype.hasOwnProperty;function S(e,n){return w.call(e,n)}function C(e){for(var n=arguments,output=Object(e),i=1;i<arguments.length;i++){var source=n[i];if(null!=source){var t=void 0;for(t in source)S(source,t)&&(c(source[t])?output[t]=C(output[t],source[t]):output[t]=source[t])}}return output}function M(a,b){if(a===b)return!0;var e=c(a),n=c(b);if(!e||!n)return!e&&!n&&String(a)===String(b);try{var t=o(a),l=o(b);if(t&&l)return a.length===b.length&&a.every((function(e,i){return M(e,b[i])}));if(t||l)return!1;var r=Object.keys(a),f=Object.keys(b);return r.length===f.length&&r.every((function(e){return M(a[e],b[e])}))}catch(e){return!1}}function x(e){return null!=e&&Object.keys(e).forEach((function(n){"string"==typeof e[n]&&(e[n]=e[n].replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"))})),e}var O={beforeCreate:function(){var e=this.$options;if(e.i18n=e.i18n||(e.__i18n?{}:null),e.i18n)if(e.i18n instanceof le){if(e.__i18n)try{var n=e.i18n&&e.i18n.messages?e.i18n.messages:{};e.__i18n.forEach((function(e){n=C(n,JSON.parse(e))})),Object.keys(n).forEach((function(t){e.i18n.mergeLocaleMessage(t,n[t])}))}catch(e){0}this._i18n=e.i18n,this._i18nWatcher=this._i18n.watchI18nData()}else if(d(e.i18n)){var t=this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof le?this.$root.$i18n:null;if(t&&(e.i18n.root=this.$root,e.i18n.formatter=t.formatter,e.i18n.fallbackLocale=t.fallbackLocale,e.i18n.formatFallbackMessages=t.formatFallbackMessages,e.i18n.silentTranslationWarn=t.silentTranslationWarn,e.i18n.silentFallbackWarn=t.silentFallbackWarn,e.i18n.pluralizationRules=t.pluralizationRules,e.i18n.preserveDirectiveContent=t.preserveDirectiveContent),e.__i18n)try{var l=e.i18n&&e.i18n.messages?e.i18n.messages:{};e.__i18n.forEach((function(e){l=C(l,JSON.parse(e))})),e.i18n.messages=l}catch(e){0}var r=e.i18n.sharedMessages;r&&d(r)&&(e.i18n.messages=C(e.i18n.messages,r)),this._i18n=new le(e.i18n),this._i18nWatcher=this._i18n.watchI18nData(),(void 0===e.i18n.sync||e.i18n.sync)&&(this._localeWatcher=this.$i18n.watchLocale()),t&&t.onComponentInstanceCreated(this._i18n)}else 0;else this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof le?this._i18n=this.$root.$i18n:e.parent&&e.parent.$i18n&&e.parent.$i18n instanceof le&&(this._i18n=e.parent.$i18n)},beforeMount:function(){var e=this.$options;e.i18n=e.i18n||(e.__i18n?{}:null),e.i18n?(e.i18n instanceof le||d(e.i18n))&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0):(this.$root&&this.$root.$i18n&&this.$root.$i18n instanceof le||e.parent&&e.parent.$i18n&&e.parent.$i18n instanceof le)&&(this._i18n.subscribeDataChanging(this),this._subscribing=!0)},mounted:function(){this!==this.$root&&this.$options.__INTLIFY_META__&&this.$el&&this.$el.setAttribute("data-intlify",this.$options.__INTLIFY_META__)},beforeDestroy:function(){if(this._i18n){var e=this;this.$nextTick((function(){e._subscribing&&(e._i18n.unsubscribeDataChanging(e),delete e._subscribing),e._i18nWatcher&&(e._i18nWatcher(),e._i18n.destroyVM(),delete e._i18nWatcher),e._localeWatcher&&(e._localeWatcher(),delete e._localeWatcher)}))}}},L={name:"i18n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},path:{type:String,required:!0},locale:{type:String},places:{type:[Array,Object]}},render:function(e,n){var data=n.data,t=n.parent,l=n.props,r=n.slots,o=t.$i18n;if(o){var path=l.path,c=l.locale,f=l.places,h=r(),d=o.i(path,c,function(e){var n;for(n in e)if("default"!==n)return!1;return Boolean(n)}(h)||f?function(e,n){var t=n?function(e){0;return Array.isArray(e)?e.reduce(F,{}):Object.assign({},e)}(n):{};if(!e)return t;var l=(e=e.filter((function(e){return e.tag||""!==e.text.trim()}))).every(D);0;return e.reduce(l?T:F,t)}(h.default,f):h),m=l.tag&&!0!==l.tag||!1===l.tag?l.tag:"span";return m?e(m,data,d):d}}};function T(e,n){return n.data&&n.data.attrs&&n.data.attrs.place&&(e[n.data.attrs.place]=n),e}function F(e,n,t){return e[t]=n,e}function D(e){return Boolean(e.data&&e.data.attrs&&e.data.attrs.place)}var P,$={name:"i18n-n",functional:!0,props:{tag:{type:[String,Boolean,Object],default:"span"},value:{type:Number,required:!0},format:{type:[String,Object]},locale:{type:String}},render:function(e,n){var t=n.props,r=n.parent,data=n.data,o=r.$i18n;if(!o)return null;var h=null,d=null;f(t.format)?h=t.format:c(t.format)&&(t.format.key&&(h=t.format.key),d=Object.keys(t.format).reduce((function(e,n){var r;return k(l,n)?Object.assign({},e,((r={})[n]=t.format[n],r)):e}),null));var m=t.locale||o.locale,v=o._ntp(t.value,m,h,d),y=v.map((function(e,n){var t,slot=data.scopedSlots&&data.scopedSlots[e.type];return slot?slot(((t={})[e.type]=e.value,t.index=n,t.parts=v,t)):e.value})),_=t.tag&&!0!==t.tag||!1===t.tag?t.tag:"span";return _?e(_,{attrs:data.attrs,class:data.class,staticClass:data.staticClass},y):y}};function E(e,n,t){j(e,t)&&A(e,n,t)}function I(e,n,t,l){if(j(e,t)){var r=t.context.$i18n;(function(e,n){var t=n.context;return e._locale===t.$i18n.locale})(e,t)&&M(n.value,n.oldValue)&&M(e._localeMessage,r.getLocaleMessage(r.locale))||A(e,n,t)}}function R(e,n,t,l){if(t.context){var o=t.context.$i18n||{};n.modifiers.preserve||o.preserveDirectiveContent||(e.textContent=""),e._vt=void 0,delete e._vt,e._locale=void 0,delete e._locale,e._localeMessage=void 0,delete e._localeMessage}else r("Vue instance does not exists in VNode context")}function j(e,n){var t=n.context;return t?!!t.$i18n||(r("VueI18n instance does not exists in Vue instance"),!1):(r("Vue instance does not exists in VNode context"),!1)}function A(e,n,t){var l,o,c=function(e){var path,n,t,l;f(e)?path=e:d(e)&&(path=e.path,n=e.locale,t=e.args,l=e.choice);return{path:path,locale:n,args:t,choice:l}}(n.value),path=c.path,h=c.locale,m=c.args,v=c.choice;if(path||h||m)if(path){var y=t.context;e._vt=e.textContent=null!=v?(l=y.$i18n).tc.apply(l,[path,v].concat(W(h,m))):(o=y.$i18n).t.apply(o,[path].concat(W(h,m))),e._locale=y.$i18n.locale,e._localeMessage=y.$i18n.getLocaleMessage(y.$i18n.locale)}else r("`path` is required in v-t directive");else r("value type not supported")}function W(e,n){var t=[];return e&&t.push(e),n&&(Array.isArray(n)||d(n))&&t.push(n),t}function H(e){H.installed=!0;(P=e).version&&Number(P.version.split(".")[0]);(function(e){e.prototype.hasOwnProperty("$i18n")||Object.defineProperty(e.prototype,"$i18n",{get:function(){return this._i18n}}),e.prototype.$t=function(e){for(var n=[],t=arguments.length-1;t-- >0;)n[t]=arguments[t+1];var l=this.$i18n;return l._t.apply(l,[e,l.locale,l._getMessages(),this].concat(n))},e.prototype.$tc=function(e,n){for(var t=[],l=arguments.length-2;l-- >0;)t[l]=arguments[l+2];var r=this.$i18n;return r._tc.apply(r,[e,r.locale,r._getMessages(),this,n].concat(t))},e.prototype.$te=function(e,n){var t=this.$i18n;return t._te(e,t.locale,t._getMessages(),n)},e.prototype.$d=function(e){for(var n,t=[],l=arguments.length-1;l-- >0;)t[l]=arguments[l+1];return(n=this.$i18n).d.apply(n,[e].concat(t))},e.prototype.$n=function(e){for(var n,t=[],l=arguments.length-1;l-- >0;)t[l]=arguments[l+1];return(n=this.$i18n).n.apply(n,[e].concat(t))}})(P),P.mixin(O),P.directive("t",{bind:E,update:I,unbind:R}),P.component(L.name,L),P.component($.name,$),P.config.optionMergeStrategies.i18n=function(e,n){return void 0===n?e:n}}var N=function(){this._caches=Object.create(null)};N.prototype.interpolate=function(e,n){if(!n)return[e];var t=this._caches[e];return t||(t=function(e){var n=[],t=0,text="";for(;t<e.length;){var l=e[t++];if("{"===l){text&&n.push({type:"text",value:text}),text="";var sub="";for(l=e[t++];void 0!==l&&"}"!==l;)sub+=l,l=e[t++];var r="}"===l,o=U.test(sub)?"list":r&&z.test(sub)?"named":"unknown";n.push({value:sub,type:o})}else"%"===l?"{"!==e[t]&&(text+=l):text+=l}return text&&n.push({type:"text",value:text}),n}(e),this._caches[e]=t),function(e,n){var t=[],l=0,r=Array.isArray(n)?"list":c(n)?"named":"unknown";if("unknown"===r)return t;for(;l<e.length;){var o=e[l];switch(o.type){case"text":t.push(o.value);break;case"list":t.push(n[parseInt(o.value,10)]);break;case"named":"named"===r&&t.push(n[o.value]);break;case"unknown":0}l++}return t}(t,n)};var U=/^(?:\d)+/,z=/^(?:\w)+/;var B=[];B[0]={ws:[0],ident:[3,0],"[":[4],eof:[7]},B[1]={ws:[1],".":[2],"[":[4],eof:[7]},B[2]={ws:[2],ident:[3,0],0:[3,0],number:[3,0]},B[3]={ident:[3,0],0:[3,0],number:[3,0],ws:[1,1],".":[2,1],"[":[4,1],eof:[7,1]},B[4]={"'":[5,0],'"':[6,0],"[":[4,2],"]":[1,3],eof:8,else:[4,0]},B[5]={"'":[4,0],eof:8,else:[5,0]},B[6]={'"':[4,0],eof:8,else:[6,0]};var V=/^\s?(?:true|false|-?[\d.]+|'[^']*'|"[^"]*")\s?$/;function X(e){if(null==e)return"eof";switch(e.charCodeAt(0)){case 91:case 93:case 46:case 34:case 39:return e;case 95:case 36:case 45:return"ident";case 9:case 10:case 13:case 160:case 65279:case 8232:case 8233:return"ws"}return"ident"}function Y(path){var e,a,n,t=path.trim();return("0"!==path.charAt(0)||!isNaN(path))&&(n=t,V.test(n)?(a=(e=t).charCodeAt(0))!==e.charCodeAt(e.length-1)||34!==a&&39!==a?e:e.slice(1,-1):"*"+t)}var K=function(){this._cache=Object.create(null)};K.prototype.parsePath=function(path){var e=this._cache[path];return e||(e=function(path){var e,n,t,l,r,o,c,f=[],h=-1,d=0,m=0,v=[];function y(){var e=path[h+1];if(5===d&&"'"===e||6===d&&'"'===e)return h++,t="\\"+e,v[0](),!0}for(v[1]=function(){void 0!==n&&(f.push(n),n=void 0)},v[0]=function(){void 0===n?n=t:n+=t},v[2]=function(){v[0](),m++},v[3]=function(){if(m>0)m--,d=4,v[0]();else{if(m=0,void 0===n)return!1;if(!1===(n=Y(n)))return!1;v[1]()}};null!==d;)if(h++,"\\"!==(e=path[h])||!y()){if(l=X(e),8===(r=(c=B[d])[l]||c.else||8))return;if(d=r[0],(o=v[r[1]])&&(t=void 0===(t=r[2])?e:t,!1===o()))return;if(7===d)return f}}(path))&&(this._cache[path]=e),e||[]},K.prototype.getPathValue=function(e,path){if(!c(e))return null;var n=this.parsePath(path);if(0===n.length)return null;for(var t=n.length,l=e,i=0;i<t;){var r=l[n[i]];if(null==r)return null;l=r,i++}return l};var J,Z=/<\/?[\w\s="/.':;#-\/]+>/,G=/(?:@(?:\.[a-z]+)?:(?:[\w\-_|.]+|\([\w\-_|.]+\)))/g,Q=/^@(?:\.([a-z]+))?:/,ee=/[()]/g,ne={upper:function(e){return e.toLocaleUpperCase()},lower:function(e){return e.toLocaleLowerCase()},capitalize:function(e){return""+e.charAt(0).toLocaleUpperCase()+e.substr(1)}},te=new N,le=function(e){var n=this;void 0===e&&(e={}),!P&&"undefined"!=typeof window&&window.Vue&&H(window.Vue);var t=e.locale||"en-US",l=!1!==e.fallbackLocale&&(e.fallbackLocale||"en-US"),r=e.messages||{},o=e.dateTimeFormats||{},c=e.numberFormats||{};this._vm=null,this._formatter=e.formatter||te,this._modifiers=e.modifiers||{},this._missing=e.missing||null,this._root=e.root||null,this._sync=void 0===e.sync||!!e.sync,this._fallbackRoot=void 0===e.fallbackRoot||!!e.fallbackRoot,this._formatFallbackMessages=void 0!==e.formatFallbackMessages&&!!e.formatFallbackMessages,this._silentTranslationWarn=void 0!==e.silentTranslationWarn&&e.silentTranslationWarn,this._silentFallbackWarn=void 0!==e.silentFallbackWarn&&!!e.silentFallbackWarn,this._dateTimeFormatters={},this._numberFormatters={},this._path=new K,this._dataListeners=new Set,this._componentInstanceCreatedListener=e.componentInstanceCreatedListener||null,this._preserveDirectiveContent=void 0!==e.preserveDirectiveContent&&!!e.preserveDirectiveContent,this.pluralizationRules=e.pluralizationRules||{},this._warnHtmlInMessage=e.warnHtmlInMessage||"off",this._postTranslation=e.postTranslation||null,this._escapeParameterHtml=e.escapeParameterHtml||!1,this.getChoiceIndex=function(e,t){var l=Object.getPrototypeOf(n);if(l&&l.getChoiceIndex)return l.getChoiceIndex.call(n,e,t);var r,o;return n.locale in n.pluralizationRules?n.pluralizationRules[n.locale].apply(n,[e,t]):(r=e,o=t,r=Math.abs(r),2===o?r?r>1?1:0:1:r?Math.min(r,2):0)},this._exist=function(e,t){return!(!e||!t)&&(!m(n._path.getPathValue(e,t))||!!e[t])},"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||Object.keys(r).forEach((function(e){n._checkLocaleMessage(e,n._warnHtmlInMessage,r[e])})),this._initVM({locale:t,fallbackLocale:l,messages:r,dateTimeFormats:o,numberFormats:c})},re={vm:{configurable:!0},messages:{configurable:!0},dateTimeFormats:{configurable:!0},numberFormats:{configurable:!0},availableLocales:{configurable:!0},locale:{configurable:!0},fallbackLocale:{configurable:!0},formatFallbackMessages:{configurable:!0},missing:{configurable:!0},formatter:{configurable:!0},silentTranslationWarn:{configurable:!0},silentFallbackWarn:{configurable:!0},preserveDirectiveContent:{configurable:!0},warnHtmlInMessage:{configurable:!0},postTranslation:{configurable:!0}};le.prototype._checkLocaleMessage=function(e,n,t){var l=function(e,n,t,c){if(d(t))Object.keys(t).forEach((function(r){var o=t[r];d(o)?(c.push(r),c.push("."),l(e,n,o,c),c.pop(),c.pop()):(c.push(r),l(e,n,o,c),c.pop())}));else if(o(t))t.forEach((function(t,r){d(t)?(c.push("["+r+"]"),c.push("."),l(e,n,t,c),c.pop(),c.pop()):(c.push("["+r+"]"),l(e,n,t,c),c.pop())}));else if(f(t)){if(Z.test(t)){var h="Detected HTML in message '"+t+"' of keypath '"+c.join("")+"' at '"+n+"'. Consider component interpolation with '<i18n>' to avoid XSS. See https://bit.ly/2ZqJzkp";"warn"===e?r(h):"error"===e&&function(e,n){"undefined"!=typeof console&&(console.error("[vue-i18n] "+e),n&&console.error(n.stack))}(h)}}};l(n,e,t,[])},le.prototype._initVM=function(data){var e=P.config.silent;P.config.silent=!0,this._vm=new P({data:data}),P.config.silent=e},le.prototype.destroyVM=function(){this._vm.$destroy()},le.prototype.subscribeDataChanging=function(e){this._dataListeners.add(e)},le.prototype.unsubscribeDataChanging=function(e){!function(e,n){if(e.delete(n));}(this._dataListeners,e)},le.prototype.watchI18nData=function(){var e=this;return this._vm.$watch("$data",(function(){e._dataListeners.forEach((function(e){P.nextTick((function(){e&&e.$forceUpdate()}))}))}),{deep:!0})},le.prototype.watchLocale=function(){if(!this._sync||!this._root)return null;var e=this._vm;return this._root.$i18n.vm.$watch("locale",(function(n){e.$set(e,"locale",n),e.$forceUpdate()}),{immediate:!0})},le.prototype.onComponentInstanceCreated=function(e){this._componentInstanceCreatedListener&&this._componentInstanceCreatedListener(e,this)},re.vm.get=function(){return this._vm},re.messages.get=function(){return _(this._getMessages())},re.dateTimeFormats.get=function(){return _(this._getDateTimeFormats())},re.numberFormats.get=function(){return _(this._getNumberFormats())},re.availableLocales.get=function(){return Object.keys(this.messages).sort()},re.locale.get=function(){return this._vm.locale},re.locale.set=function(e){this._vm.$set(this._vm,"locale",e)},re.fallbackLocale.get=function(){return this._vm.fallbackLocale},re.fallbackLocale.set=function(e){this._localeChainCache={},this._vm.$set(this._vm,"fallbackLocale",e)},re.formatFallbackMessages.get=function(){return this._formatFallbackMessages},re.formatFallbackMessages.set=function(e){this._formatFallbackMessages=e},re.missing.get=function(){return this._missing},re.missing.set=function(e){this._missing=e},re.formatter.get=function(){return this._formatter},re.formatter.set=function(e){this._formatter=e},re.silentTranslationWarn.get=function(){return this._silentTranslationWarn},re.silentTranslationWarn.set=function(e){this._silentTranslationWarn=e},re.silentFallbackWarn.get=function(){return this._silentFallbackWarn},re.silentFallbackWarn.set=function(e){this._silentFallbackWarn=e},re.preserveDirectiveContent.get=function(){return this._preserveDirectiveContent},re.preserveDirectiveContent.set=function(e){this._preserveDirectiveContent=e},re.warnHtmlInMessage.get=function(){return this._warnHtmlInMessage},re.warnHtmlInMessage.set=function(e){var n=this,t=this._warnHtmlInMessage;if(this._warnHtmlInMessage=e,t!==e&&("warn"===e||"error"===e)){var l=this._getMessages();Object.keys(l).forEach((function(e){n._checkLocaleMessage(e,n._warnHtmlInMessage,l[e])}))}},re.postTranslation.get=function(){return this._postTranslation},re.postTranslation.set=function(e){this._postTranslation=e},le.prototype._getMessages=function(){return this._vm.messages},le.prototype._getDateTimeFormats=function(){return this._vm.dateTimeFormats},le.prototype._getNumberFormats=function(){return this._vm.numberFormats},le.prototype._warnDefault=function(e,n,t,l,r,o){if(!m(t))return t;if(this._missing){var c=this._missing.apply(null,[e,n,l,r]);if(f(c))return c}else 0;if(this._formatFallbackMessages){var h=y.apply(void 0,r);return this._render(n,o,h.params,n)}return n},le.prototype._isFallbackRoot=function(e){return!e&&!m(this._root)&&this._fallbackRoot},le.prototype._isSilentFallbackWarn=function(e){return this._silentFallbackWarn instanceof RegExp?this._silentFallbackWarn.test(e):this._silentFallbackWarn},le.prototype._isSilentFallback=function(e,n){return this._isSilentFallbackWarn(n)&&(this._isFallbackRoot()||e!==this.fallbackLocale)},le.prototype._isSilentTranslationWarn=function(e){return this._silentTranslationWarn instanceof RegExp?this._silentTranslationWarn.test(e):this._silentTranslationWarn},le.prototype._interpolate=function(e,n,t,l,r,c,h){if(!n)return null;var y,_=this._path.getPathValue(n,t);if(o(_)||d(_))return _;if(m(_)){if(!d(n))return null;if(!f(y=n[t])&&!v(y))return null}else{if(!f(_)&&!v(_))return null;y=_}return f(y)&&(y.indexOf("@:")>=0||y.indexOf("@.")>=0)&&(y=this._link(e,n,y,l,"raw",c,h)),this._render(y,r,c,t)},le.prototype._link=function(e,n,t,l,r,c,f){var h=t,d=h.match(G);for(var m in d)if(d.hasOwnProperty(m)){var link=d[m],v=link.match(Q),y=v[0],_=v[1],w=link.replace(y,"").replace(ee,"");if(k(f,w))return h;f.push(w);var S=this._interpolate(e,n,w,l,"raw"===r?"string":r,"raw"===r?void 0:c,f);if(this._isFallbackRoot(S)){if(!this._root)throw Error("unexpected error");var C=this._root.$i18n;S=C._translate(C._getMessages(),C.locale,C.fallbackLocale,w,l,r,c)}S=this._warnDefault(e,w,S,l,o(c)?c:[c],r),this._modifiers.hasOwnProperty(_)?S=this._modifiers[_](S):ne.hasOwnProperty(_)&&(S=ne[_](S)),f.pop(),h=S?h.replace(link,S):h}return h},le.prototype._createMessageContext=function(e){var n=o(e)?e:[],t=c(e)?e:{};return{list:function(e){return n[e]},named:function(e){return t[e]}}},le.prototype._render=function(e,n,t,path){if(v(e))return e(this._createMessageContext(t));var l=this._formatter.interpolate(e,t,path);return l||(l=te.interpolate(e,t,path)),"string"!==n||f(l)?l:l.join("")},le.prototype._appendItemToChain=function(e,n,t){var l=!1;return k(e,n)||(l=!0,n&&(l="!"!==n[n.length-1],n=n.replace(/!/g,""),e.push(n),t&&t[n]&&(l=t[n]))),l},le.prototype._appendLocaleToChain=function(e,n,t){var l,r=n.split("-");do{var o=r.join("-");l=this._appendItemToChain(e,o,t),r.splice(-1,1)}while(r.length&&!0===l);return l},le.prototype._appendBlockToChain=function(e,n,t){for(var l=!0,i=0;i<n.length&&"boolean"==typeof l;i++){var r=n[i];f(r)&&(l=this._appendLocaleToChain(e,r,t))}return l},le.prototype._getLocaleChain=function(e,n){if(""===e)return[];this._localeChainCache||(this._localeChainCache={});var t=this._localeChainCache[e];if(!t){n||(n=this.fallbackLocale),t=[];for(var l,r=[e];o(r);)r=this._appendBlockToChain(t,r,n);(r=f(l=o(n)?n:c(n)?n.default?n.default:null:n)?[l]:l)&&this._appendBlockToChain(t,r,null),this._localeChainCache[e]=t}return t},le.prototype._translate=function(e,n,t,l,r,o,c){for(var f,h=this._getLocaleChain(n,t),i=0;i<h.length;i++){var d=h[i];if(!m(f=this._interpolate(d,e[d],l,r,o,c,[l])))return f}return null},le.prototype._t=function(e,n,t,l){for(var r,o=[],c=arguments.length-4;c-- >0;)o[c]=arguments[c+4];if(!e)return"";var f=y.apply(void 0,o);this._escapeParameterHtml&&(f.params=x(f.params));var h=f.locale||n,d=this._translate(t,h,this.fallbackLocale,e,l,"string",f.params);if(this._isFallbackRoot(d)){if(!this._root)throw Error("unexpected error");return(r=this._root).$t.apply(r,[e].concat(o))}return d=this._warnDefault(h,e,d,l,o,"string"),this._postTranslation&&null!=d&&(d=this._postTranslation(d,e)),d},le.prototype.t=function(e){for(var n,t=[],l=arguments.length-1;l-- >0;)t[l]=arguments[l+1];return(n=this)._t.apply(n,[e,this.locale,this._getMessages(),null].concat(t))},le.prototype._i=function(e,n,t,l,r){var o=this._translate(t,n,this.fallbackLocale,e,l,"raw",r);if(this._isFallbackRoot(o)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.i(e,n,r)}return this._warnDefault(n,e,o,l,[r],"raw")},le.prototype.i=function(e,n,t){return e?(f(n)||(n=this.locale),this._i(e,n,this._getMessages(),null,t)):""},le.prototype._tc=function(e,n,t,l,r){for(var o,c=[],f=arguments.length-5;f-- >0;)c[f]=arguments[f+5];if(!e)return"";void 0===r&&(r=1);var h={count:r,n:r},d=y.apply(void 0,c);return d.params=Object.assign(h,d.params),c=null===d.locale?[d.params]:[d.locale,d.params],this.fetchChoice((o=this)._t.apply(o,[e,n,t,l].concat(c)),r)},le.prototype.fetchChoice=function(e,n){if(!e||!f(e))return null;var t=e.split("|");return t[n=this.getChoiceIndex(n,t.length)]?t[n].trim():e},le.prototype.tc=function(e,n){for(var t,l=[],r=arguments.length-2;r-- >0;)l[r]=arguments[r+2];return(t=this)._tc.apply(t,[e,this.locale,this._getMessages(),null,n].concat(l))},le.prototype._te=function(e,n,t){for(var l=[],r=arguments.length-3;r-- >0;)l[r]=arguments[r+3];var o=y.apply(void 0,l).locale||n;return this._exist(t[o],e)},le.prototype.te=function(e,n){return this._te(e,this.locale,this._getMessages(),n)},le.prototype.getLocaleMessage=function(e){return _(this._vm.messages[e]||{})},le.prototype.setLocaleMessage=function(e,n){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(e,this._warnHtmlInMessage,n),this._vm.$set(this._vm.messages,e,n)},le.prototype.mergeLocaleMessage=function(e,n){"warn"!==this._warnHtmlInMessage&&"error"!==this._warnHtmlInMessage||this._checkLocaleMessage(e,this._warnHtmlInMessage,n),this._vm.$set(this._vm.messages,e,C(void 0!==this._vm.messages[e]&&Object.keys(this._vm.messages[e]).length?this._vm.messages[e]:{},n))},le.prototype.getDateTimeFormat=function(e){return _(this._vm.dateTimeFormats[e]||{})},le.prototype.setDateTimeFormat=function(e,n){this._vm.$set(this._vm.dateTimeFormats,e,n),this._clearDateTimeFormat(e,n)},le.prototype.mergeDateTimeFormat=function(e,n){this._vm.$set(this._vm.dateTimeFormats,e,C(this._vm.dateTimeFormats[e]||{},n)),this._clearDateTimeFormat(e,n)},le.prototype._clearDateTimeFormat=function(e,n){for(var t in n){var l=e+"__"+t;this._dateTimeFormatters.hasOwnProperty(l)&&delete this._dateTimeFormatters[l]}},le.prototype._localizeDateTime=function(e,n,t,l,r){for(var o=n,c=l[o],f=this._getLocaleChain(n,t),i=0;i<f.length;i++){var h=f[i];if(o=h,!m(c=l[h])&&!m(c[r]))break}if(m(c)||m(c[r]))return null;var d=c[r],v=o+"__"+r,y=this._dateTimeFormatters[v];return y||(y=this._dateTimeFormatters[v]=new Intl.DateTimeFormat(o,d)),y.format(e)},le.prototype._d=function(e,n,t){if(!t)return new Intl.DateTimeFormat(n).format(e);var l=this._localizeDateTime(e,n,this.fallbackLocale,this._getDateTimeFormats(),t);if(this._isFallbackRoot(l)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.d(e,t,n)}return l||""},le.prototype.d=function(e){for(var n=[],t=arguments.length-1;t-- >0;)n[t]=arguments[t+1];var l=this.locale,r=null;return 1===n.length?f(n[0])?r=n[0]:c(n[0])&&(n[0].locale&&(l=n[0].locale),n[0].key&&(r=n[0].key)):2===n.length&&(f(n[0])&&(r=n[0]),f(n[1])&&(l=n[1])),this._d(e,l,r)},le.prototype.getNumberFormat=function(e){return _(this._vm.numberFormats[e]||{})},le.prototype.setNumberFormat=function(e,n){this._vm.$set(this._vm.numberFormats,e,n),this._clearNumberFormat(e,n)},le.prototype.mergeNumberFormat=function(e,n){this._vm.$set(this._vm.numberFormats,e,C(this._vm.numberFormats[e]||{},n)),this._clearNumberFormat(e,n)},le.prototype._clearNumberFormat=function(e,n){for(var t in n){var l=e+"__"+t;this._numberFormatters.hasOwnProperty(l)&&delete this._numberFormatters[l]}},le.prototype._getNumberFormatter=function(e,n,t,l,r,o){for(var c=n,f=l[c],h=this._getLocaleChain(n,t),i=0;i<h.length;i++){var d=h[i];if(c=d,!m(f=l[d])&&!m(f[r]))break}if(m(f)||m(f[r]))return null;var v,y=f[r];if(o)v=new Intl.NumberFormat(c,Object.assign({},y,o));else{var _=c+"__"+r;(v=this._numberFormatters[_])||(v=this._numberFormatters[_]=new Intl.NumberFormat(c,y))}return v},le.prototype._n=function(e,n,t,l){if(!le.availabilities.numberFormat)return"";if(!t)return(l?new Intl.NumberFormat(n,l):new Intl.NumberFormat(n)).format(e);var r=this._getNumberFormatter(e,n,this.fallbackLocale,this._getNumberFormats(),t,l),o=r&&r.format(e);if(this._isFallbackRoot(o)){if(!this._root)throw Error("unexpected error");return this._root.$i18n.n(e,Object.assign({},{key:t,locale:n},l))}return o||""},le.prototype.n=function(e){for(var n=[],t=arguments.length-1;t-- >0;)n[t]=arguments[t+1];var r=this.locale,o=null,h=null;return 1===n.length?f(n[0])?o=n[0]:c(n[0])&&(n[0].locale&&(r=n[0].locale),n[0].key&&(o=n[0].key),h=Object.keys(n[0]).reduce((function(e,t){var r;return k(l,t)?Object.assign({},e,((r={})[t]=n[0][t],r)):e}),null)):2===n.length&&(f(n[0])&&(o=n[0]),f(n[1])&&(r=n[1])),this._n(e,r,o,h)},le.prototype._ntp=function(e,n,t,l){if(!le.availabilities.numberFormat)return[];if(!t)return(l?new Intl.NumberFormat(n,l):new Intl.NumberFormat(n)).formatToParts(e);var r=this._getNumberFormatter(e,n,this.fallbackLocale,this._getNumberFormats(),t,l),o=r&&r.formatToParts(e);if(this._isFallbackRoot(o)){if(!this._root)throw Error("unexpected error");return this._root.$i18n._ntp(e,n,t,l)}return o||[]},Object.defineProperties(le.prototype,re),Object.defineProperty(le,"availabilities",{get:function(){if(!J){var e="undefined"!=typeof Intl;J={dateTimeFormat:e&&void 0!==Intl.DateTimeFormat,numberFormat:e&&void 0!==Intl.NumberFormat}}return J}}),le.install=H,le.version="8.24.4",n.a=le},106:function(e,n,t){"use strict";n.html=t(200),n.svg=t(203),n.normalize=t(101),n.find=t(205)},136:function(e,n,t){"use strict";var l=t(201),r=t(137);e.exports=function(e){var n,t,o=e.length,c=[],f=[],h=-1;for(;++h<o;)n=e[h],c.push(n.property),f.push(n.normal),t=n.space;return new r(l.apply(null,c),l.apply(null,f),t)}},137:function(e,n,t){"use strict";e.exports=r;var l=r.prototype;function r(e,n,t){this.property=e,this.normal=n,t&&(this.space=t)}l.space=null,l.normal={},l.property={}},138:function(e,n,t){"use strict";var l=t(45);e.exports=l({space:"xlink",transform:function(e,n){return"xlink:"+n.slice(5).toLowerCase()},properties:{xLinkActuate:null,xLinkArcRole:null,xLinkHref:null,xLinkRole:null,xLinkShow:null,xLinkTitle:null,xLinkType:null}})},139:function(e,n,t){"use strict";var l=t(140),r=t(75);e.exports=f,f.prototype=new l,f.prototype.defined=!0;var o=["boolean","booleanish","overloadedBoolean","number","commaSeparated","spaceSeparated","commaOrSpaceSeparated"],c=o.length;function f(e,n,mask,t){var f,h=-1;for(mark(this,"space",t),l.call(this,e,n);++h<c;)mark(this,f=o[h],(mask&r[f])===r[f])}function mark(e,n,t){t&&(e[n]=t)}},140:function(e,n,t){"use strict";e.exports=r;var l=r.prototype;function r(e,n){this.property=e,this.attribute=n}l.space=null,l.attribute=null,l.property=null,l.boolean=!1,l.booleanish=!1,l.overloadedBoolean=!1,l.number=!1,l.commaSeparated=!1,l.spaceSeparated=!1,l.commaOrSpaceSeparated=!1,l.mustUseProperty=!1,l.defined=!1},141:function(e,n,t){"use strict";var l=t(45);e.exports=l({space:"xml",transform:function(e,n){return"xml:"+n.slice(3).toLowerCase()},properties:{xmlLang:null,xmlBase:null,xmlSpace:null}})},142:function(e,n,t){"use strict";var l=t(45),r=t(143);e.exports=l({space:"xmlns",attributes:{xmlnsxlink:"xmlns:xlink"},transform:r,properties:{xmlns:null,xmlnsXLink:null}})},143:function(e,n,t){"use strict";var l=t(144);e.exports=function(e,n){return l(e,n.toLowerCase())}},144:function(e,n,t){"use strict";e.exports=function(e,n){return n in e?e[n]:n}},145:function(e,n,t){"use strict";var l=t(75),r=t(45),o=l.booleanish,c=l.number,f=l.spaceSeparated;e.exports=r({transform:function(e,n){return"role"===n?n:"aria-"+n.slice(4).toLowerCase()},properties:{ariaActiveDescendant:null,ariaAtomic:o,ariaAutoComplete:null,ariaBusy:o,ariaChecked:o,ariaColCount:c,ariaColIndex:c,ariaColSpan:c,ariaControls:f,ariaCurrent:null,ariaDescribedBy:f,ariaDetails:null,ariaDisabled:o,ariaDropEffect:f,ariaErrorMessage:null,ariaExpanded:o,ariaFlowTo:f,ariaGrabbed:o,ariaHasPopup:null,ariaHidden:o,ariaInvalid:null,ariaKeyShortcuts:null,ariaLabel:null,ariaLabelledBy:f,ariaLevel:c,ariaLive:null,ariaModal:o,ariaMultiLine:o,ariaMultiSelectable:o,ariaOrientation:null,ariaOwns:f,ariaPlaceholder:null,ariaPosInSet:c,ariaPressed:o,ariaReadOnly:o,ariaRelevant:null,ariaRequired:o,ariaRoleDescription:f,ariaRowCount:c,ariaRowIndex:c,ariaRowSpan:c,ariaSelected:o,ariaSetSize:c,ariaSort:null,ariaValueMax:c,ariaValueMin:c,ariaValueNow:c,ariaValueText:null,role:null}})},146:function(e,n,t){"use strict";n.a=function(e,n){return n=n||{},new Promise((function(t,l){var s=new XMLHttpRequest,r=[],u=[],i={},a=function(){return{ok:2==(s.status/100|0),statusText:s.statusText,status:s.status,url:s.responseURL,text:function(){return Promise.resolve(s.responseText)},json:function(){return Promise.resolve(s.responseText).then(JSON.parse)},blob:function(){return Promise.resolve(new Blob([s.response]))},clone:a,headers:{keys:function(){return r},entries:function(){return u},get:function(e){return i[e.toLowerCase()]},has:function(e){return e.toLowerCase()in i}}}};for(var o in s.open(n.method||"get",e,!0),s.onload=function(){s.getAllResponseHeaders().replace(/^(.*?):[^\S\n]*([\s\S]*?)$/gm,(function(e,n,t){r.push(n=n.toLowerCase()),u.push([n,t]),i[n]=i[n]?i[n]+","+t:t})),t(a())},s.onerror=l,s.withCredentials="include"==n.credentials,n.headers)s.setRequestHeader(o,n.headers[o]);s.send(n.body||null)}))}},147:function(e,n,t){"use strict";var l=function(e){return function(e){return!!e&&"object"==typeof e}(e)&&!function(e){var n=Object.prototype.toString.call(e);return"[object RegExp]"===n||"[object Date]"===n||function(e){return e.$$typeof===r}(e)}(e)};var r="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function o(e,n){return!1!==n.clone&&n.isMergeableObject(e)?m((t=e,Array.isArray(t)?[]:{}),e,n):e;var t}function c(e,source,n){return e.concat(source).map((function(element){return o(element,n)}))}function f(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(symbol){return e.propertyIsEnumerable(symbol)})):[]}(e))}function h(object,e){try{return e in object}catch(e){return!1}}function d(e,source,n){var t={};return n.isMergeableObject(e)&&f(e).forEach((function(l){t[l]=o(e[l],n)})),f(source).forEach((function(l){(function(e,n){return h(e,n)&&!(Object.hasOwnProperty.call(e,n)&&Object.propertyIsEnumerable.call(e,n))})(e,l)||(h(e,l)&&n.isMergeableObject(source[l])?t[l]=function(e,n){if(!n.customMerge)return m;var t=n.customMerge(e);return"function"==typeof t?t:m}(l,n)(e[l],source[l],n):t[l]=o(source[l],n))})),t}function m(e,source,n){(n=n||{}).arrayMerge=n.arrayMerge||c,n.isMergeableObject=n.isMergeableObject||l,n.cloneUnlessOtherwiseSpecified=o;var t=Array.isArray(source);return t===Array.isArray(e)?t?n.arrayMerge(e,source,n):d(e,source,n):o(source,n)}m.all=function(e,n){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,t){return m(e,t,n)}),{})};var v=m;e.exports=v},148:function(e,n){var t="complete",l="canceled";function r(element,e,n){element.self===element?element.scrollTo(e,n):(element.scrollLeft=e,element.scrollTop=n)}function animate(e){var n=e._scrollSettings;if(n){var l=n.maxSynchronousAlignments,o=function(e,n){var t,l,r,o,c,f,h,d=e.align,m=e.target.getBoundingClientRect(),v=d&&null!=d.left?d.left:.5,y=d&&null!=d.top?d.top:.5,_=d&&null!=d.leftOffset?d.leftOffset:0,k=d&&null!=d.topOffset?d.topOffset:0,w=v,S=y;if(e.isWindow(n))f=Math.min(m.width,n.innerWidth),h=Math.min(m.height,n.innerHeight),l=m.left+n.pageXOffset-n.innerWidth*w+f*w,r=m.top+n.pageYOffset-n.innerHeight*S+h*S,r-=k,o=(l-=_)-n.pageXOffset,c=r-n.pageYOffset;else{f=m.width,h=m.height,t=n.getBoundingClientRect();var C=m.left-(t.left-n.scrollLeft),M=m.top-(t.top-n.scrollTop);l=C+f*w-n.clientWidth*w,r=M+h*S-n.clientHeight*S,l-=_,r-=k,l=Math.max(Math.min(l,n.scrollWidth-n.clientWidth),0),r=Math.max(Math.min(r,n.scrollHeight-n.clientHeight),0),o=l-n.scrollLeft,c=r-n.scrollTop}return{x:l,y:r,differenceX:o,differenceY:c}}(n,e),time=Date.now()-n.startTime,c=Math.min(1/n.time*time,1);if(n.endIterations>=l)return r(e,o.x,o.y),e._scrollSettings=null,n.end(t);var f=1-n.ease(c);if(r(e,o.x-o.differenceX*f,o.y-o.differenceY*f),time>=n.time)return n.endIterations++,animate(e);!function(e){if("requestAnimationFrame"in window)return window.requestAnimationFrame(e);setTimeout(e,16)}(animate.bind(null,e))}}function o(e){return e.self===e}function c(e,n,t,r){var c,f=!n._scrollSettings,h=n._scrollSettings,d=Date.now(),m={passive:!0};function v(e){n._scrollSettings=null,n.parentElement&&n.parentElement._scrollSettings&&n.parentElement._scrollSettings.end(e),t.debug&&console.log("Scrolling ended with type",e,"for",n),r(e),c&&(n.removeEventListener("touchstart",c,m),n.removeEventListener("wheel",c,m))}h&&h.end(l);var y=t.maxSynchronousAlignments;return null==y&&(y=3),n._scrollSettings={startTime:d,endIterations:0,target:e,time:t.time,ease:t.ease,align:t.align,isWindow:t.isWindow||o,maxSynchronousAlignments:y,end:v},"cancellable"in t&&!t.cancellable||(c=v.bind(null,l),n.addEventListener("touchstart",c,m),n.addEventListener("wheel",c,m)),f&&animate(n),c}function f(element){return"pageXOffset"in element||(element.scrollHeight!==element.clientHeight||element.scrollWidth!==element.clientWidth)&&"hidden"!==getComputedStyle(element).overflow}function h(){return!0}function d(e){if(e.assignedSlot)return d(e.assignedSlot);if(e.parentElement)return"BODY"===e.parentElement.tagName?e.parentElement.ownerDocument.defaultView||e.parentElement.ownerDocument.ownerWindow:e.parentElement;if(e.getRootNode){var n=e.getRootNode();if(11===n.nodeType)return n.host}}e.exports=function(e,n,l){if(e){"function"==typeof n&&(l=n,n=null),n||(n={}),n.time=isNaN(n.time)?1e3:n.time,n.ease=n.ease||function(e){return 1-Math.pow(1-e,e/2)};var r,o=d(e),m=1,v=n.validTarget||h,y=n.isScrollable;for(n.debug&&(console.log("About to scroll to",e),o||console.error("Target did not have a parent, is it mounted in the DOM?"));o;)if(n.debug&&console.log("Scrolling parent node",o),v(o,m)&&(y?y(o,f):f(o))&&(m++,r=c(e,o,n,_)),!(o=d(o))){_(t);break}return r}function _(e){--m||l&&l(e)}}},188:function(e,n,t){e.exports={}},200:function(e,n,t){"use strict";var l=t(136),r=t(138),o=t(141),c=t(142),f=t(145),html=t(202);e.exports=l([o,r,c,f,html])},201:function(e,n){e.exports=function(){for(var e={},i=0;i<arguments.length;i++){var source=arguments[i];for(var n in source)t.call(source,n)&&(e[n]=source[n])}return e};var t=Object.prototype.hasOwnProperty},202:function(e,n,t){"use strict";var l=t(75),r=t(45),o=t(143),c=l.boolean,f=l.overloadedBoolean,h=l.booleanish,d=l.number,m=l.spaceSeparated,v=l.commaSeparated;e.exports=r({space:"html",attributes:{acceptcharset:"accept-charset",classname:"class",htmlfor:"for",httpequiv:"http-equiv"},transform:o,mustUseProperty:["checked","multiple","muted","selected"],properties:{abbr:null,accept:v,acceptCharset:m,accessKey:m,action:null,allow:null,allowFullScreen:c,allowPaymentRequest:c,allowUserMedia:c,alt:null,as:null,async:c,autoCapitalize:null,autoComplete:m,autoFocus:c,autoPlay:c,capture:c,charSet:null,checked:c,cite:null,className:m,cols:d,colSpan:null,content:null,contentEditable:h,controls:c,controlsList:m,coords:d|v,crossOrigin:null,data:null,dateTime:null,decoding:null,default:c,defer:c,dir:null,dirName:null,disabled:c,download:f,draggable:h,encType:null,enterKeyHint:null,form:null,formAction:null,formEncType:null,formMethod:null,formNoValidate:c,formTarget:null,headers:m,height:d,hidden:c,high:d,href:null,hrefLang:null,htmlFor:m,httpEquiv:m,id:null,imageSizes:null,imageSrcSet:v,inputMode:null,integrity:null,is:null,isMap:c,itemId:null,itemProp:m,itemRef:m,itemScope:c,itemType:m,kind:null,label:null,lang:null,language:null,list:null,loading:null,loop:c,low:d,manifest:null,max:null,maxLength:d,media:null,method:null,min:null,minLength:d,multiple:c,muted:c,name:null,nonce:null,noModule:c,noValidate:c,onAbort:null,onAfterPrint:null,onAuxClick:null,onBeforePrint:null,onBeforeUnload:null,onBlur:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onContextMenu:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnded:null,onError:null,onFocus:null,onFormData:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLanguageChange:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadEnd:null,onLoadStart:null,onMessage:null,onMessageError:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRejectionHandled:null,onReset:null,onResize:null,onScroll:null,onSecurityPolicyViolation:null,onSeeked:null,onSeeking:null,onSelect:null,onSlotChange:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnhandledRejection:null,onUnload:null,onVolumeChange:null,onWaiting:null,onWheel:null,open:c,optimum:d,pattern:null,ping:m,placeholder:null,playsInline:c,poster:null,preload:null,readOnly:c,referrerPolicy:null,rel:m,required:c,reversed:c,rows:d,rowSpan:d,sandbox:m,scope:null,scoped:c,seamless:c,selected:c,shape:null,size:d,sizes:null,slot:null,span:d,spellCheck:h,src:null,srcDoc:null,srcLang:null,srcSet:v,start:d,step:null,style:null,tabIndex:d,target:null,title:null,translate:null,type:null,typeMustMatch:c,useMap:null,value:h,width:d,wrap:null,align:null,aLink:null,archive:m,axis:null,background:null,bgColor:null,border:d,borderColor:null,bottomMargin:d,cellPadding:null,cellSpacing:null,char:null,charOff:null,classId:null,clear:null,code:null,codeBase:null,codeType:null,color:null,compact:c,declare:c,event:null,face:null,frame:null,frameBorder:null,hSpace:d,leftMargin:d,link:null,longDesc:null,lowSrc:null,marginHeight:d,marginWidth:d,noResize:c,noHref:c,noShade:c,noWrap:c,object:null,profile:null,prompt:null,rev:null,rightMargin:d,rules:null,scheme:null,scrolling:h,standby:null,summary:null,text:null,topMargin:d,valueType:null,version:null,vAlign:null,vLink:null,vSpace:d,allowTransparency:null,autoCorrect:null,autoSave:null,disablePictureInPicture:c,disableRemotePlayback:c,prefix:null,property:null,results:d,security:null,unselectable:null}})},203:function(e,n,t){"use strict";var l=t(136),r=t(138),o=t(141),c=t(142),f=t(145),svg=t(204);e.exports=l([o,r,c,f,svg])},204:function(e,n,t){"use strict";var l=t(75),r=t(45),o=t(144),c=l.boolean,f=l.number,h=l.spaceSeparated,d=l.commaSeparated,m=l.commaOrSpaceSeparated;e.exports=r({space:"svg",attributes:{accentHeight:"accent-height",alignmentBaseline:"alignment-baseline",arabicForm:"arabic-form",baselineShift:"baseline-shift",capHeight:"cap-height",className:"class",clipPath:"clip-path",clipRule:"clip-rule",colorInterpolation:"color-interpolation",colorInterpolationFilters:"color-interpolation-filters",colorProfile:"color-profile",colorRendering:"color-rendering",crossOrigin:"crossorigin",dataType:"datatype",dominantBaseline:"dominant-baseline",enableBackground:"enable-background",fillOpacity:"fill-opacity",fillRule:"fill-rule",floodColor:"flood-color",floodOpacity:"flood-opacity",fontFamily:"font-family",fontSize:"font-size",fontSizeAdjust:"font-size-adjust",fontStretch:"font-stretch",fontStyle:"font-style",fontVariant:"font-variant",fontWeight:"font-weight",glyphName:"glyph-name",glyphOrientationHorizontal:"glyph-orientation-horizontal",glyphOrientationVertical:"glyph-orientation-vertical",hrefLang:"hreflang",horizAdvX:"horiz-adv-x",horizOriginX:"horiz-origin-x",horizOriginY:"horiz-origin-y",imageRendering:"image-rendering",letterSpacing:"letter-spacing",lightingColor:"lighting-color",markerEnd:"marker-end",markerMid:"marker-mid",markerStart:"marker-start",navDown:"nav-down",navDownLeft:"nav-down-left",navDownRight:"nav-down-right",navLeft:"nav-left",navNext:"nav-next",navPrev:"nav-prev",navRight:"nav-right",navUp:"nav-up",navUpLeft:"nav-up-left",navUpRight:"nav-up-right",onAbort:"onabort",onActivate:"onactivate",onAfterPrint:"onafterprint",onBeforePrint:"onbeforeprint",onBegin:"onbegin",onCancel:"oncancel",onCanPlay:"oncanplay",onCanPlayThrough:"oncanplaythrough",onChange:"onchange",onClick:"onclick",onClose:"onclose",onCopy:"oncopy",onCueChange:"oncuechange",onCut:"oncut",onDblClick:"ondblclick",onDrag:"ondrag",onDragEnd:"ondragend",onDragEnter:"ondragenter",onDragExit:"ondragexit",onDragLeave:"ondragleave",onDragOver:"ondragover",onDragStart:"ondragstart",onDrop:"ondrop",onDurationChange:"ondurationchange",onEmptied:"onemptied",onEnd:"onend",onEnded:"onended",onError:"onerror",onFocus:"onfocus",onFocusIn:"onfocusin",onFocusOut:"onfocusout",onHashChange:"onhashchange",onInput:"oninput",onInvalid:"oninvalid",onKeyDown:"onkeydown",onKeyPress:"onkeypress",onKeyUp:"onkeyup",onLoad:"onload",onLoadedData:"onloadeddata",onLoadedMetadata:"onloadedmetadata",onLoadStart:"onloadstart",onMessage:"onmessage",onMouseDown:"onmousedown",onMouseEnter:"onmouseenter",onMouseLeave:"onmouseleave",onMouseMove:"onmousemove",onMouseOut:"onmouseout",onMouseOver:"onmouseover",onMouseUp:"onmouseup",onMouseWheel:"onmousewheel",onOffline:"onoffline",onOnline:"ononline",onPageHide:"onpagehide",onPageShow:"onpageshow",onPaste:"onpaste",onPause:"onpause",onPlay:"onplay",onPlaying:"onplaying",onPopState:"onpopstate",onProgress:"onprogress",onRateChange:"onratechange",onRepeat:"onrepeat",onReset:"onreset",onResize:"onresize",onScroll:"onscroll",onSeeked:"onseeked",onSeeking:"onseeking",onSelect:"onselect",onShow:"onshow",onStalled:"onstalled",onStorage:"onstorage",onSubmit:"onsubmit",onSuspend:"onsuspend",onTimeUpdate:"ontimeupdate",onToggle:"ontoggle",onUnload:"onunload",onVolumeChange:"onvolumechange",onWaiting:"onwaiting",onZoom:"onzoom",overlinePosition:"overline-position",overlineThickness:"overline-thickness",paintOrder:"paint-order",panose1:"panose-1",pointerEvents:"pointer-events",referrerPolicy:"referrerpolicy",renderingIntent:"rendering-intent",shapeRendering:"shape-rendering",stopColor:"stop-color",stopOpacity:"stop-opacity",strikethroughPosition:"strikethrough-position",strikethroughThickness:"strikethrough-thickness",strokeDashArray:"stroke-dasharray",strokeDashOffset:"stroke-dashoffset",strokeLineCap:"stroke-linecap",strokeLineJoin:"stroke-linejoin",strokeMiterLimit:"stroke-miterlimit",strokeOpacity:"stroke-opacity",strokeWidth:"stroke-width",tabIndex:"tabindex",textAnchor:"text-anchor",textDecoration:"text-decoration",textRendering:"text-rendering",typeOf:"typeof",underlinePosition:"underline-position",underlineThickness:"underline-thickness",unicodeBidi:"unicode-bidi",unicodeRange:"unicode-range",unitsPerEm:"units-per-em",vAlphabetic:"v-alphabetic",vHanging:"v-hanging",vIdeographic:"v-ideographic",vMathematical:"v-mathematical",vectorEffect:"vector-effect",vertAdvY:"vert-adv-y",vertOriginX:"vert-origin-x",vertOriginY:"vert-origin-y",wordSpacing:"word-spacing",writingMode:"writing-mode",xHeight:"x-height",playbackOrder:"playbackorder",timelineBegin:"timelinebegin"},transform:o,properties:{about:m,accentHeight:f,accumulate:null,additive:null,alignmentBaseline:null,alphabetic:f,amplitude:f,arabicForm:null,ascent:f,attributeName:null,attributeType:null,azimuth:f,bandwidth:null,baselineShift:null,baseFrequency:null,baseProfile:null,bbox:null,begin:null,bias:f,by:null,calcMode:null,capHeight:f,className:h,clip:null,clipPath:null,clipPathUnits:null,clipRule:null,color:null,colorInterpolation:null,colorInterpolationFilters:null,colorProfile:null,colorRendering:null,content:null,contentScriptType:null,contentStyleType:null,crossOrigin:null,cursor:null,cx:null,cy:null,d:null,dataType:null,defaultAction:null,descent:f,diffuseConstant:f,direction:null,display:null,dur:null,divisor:f,dominantBaseline:null,download:c,dx:null,dy:null,edgeMode:null,editable:null,elevation:f,enableBackground:null,end:null,event:null,exponent:f,externalResourcesRequired:null,fill:null,fillOpacity:f,fillRule:null,filter:null,filterRes:null,filterUnits:null,floodColor:null,floodOpacity:null,focusable:null,focusHighlight:null,fontFamily:null,fontSize:null,fontSizeAdjust:null,fontStretch:null,fontStyle:null,fontVariant:null,fontWeight:null,format:null,fr:null,from:null,fx:null,fy:null,g1:d,g2:d,glyphName:d,glyphOrientationHorizontal:null,glyphOrientationVertical:null,glyphRef:null,gradientTransform:null,gradientUnits:null,handler:null,hanging:f,hatchContentUnits:null,hatchUnits:null,height:null,href:null,hrefLang:null,horizAdvX:f,horizOriginX:f,horizOriginY:f,id:null,ideographic:f,imageRendering:null,initialVisibility:null,in:null,in2:null,intercept:f,k:f,k1:f,k2:f,k3:f,k4:f,kernelMatrix:m,kernelUnitLength:null,keyPoints:null,keySplines:null,keyTimes:null,kerning:null,lang:null,lengthAdjust:null,letterSpacing:null,lightingColor:null,limitingConeAngle:f,local:null,markerEnd:null,markerMid:null,markerStart:null,markerHeight:null,markerUnits:null,markerWidth:null,mask:null,maskContentUnits:null,maskUnits:null,mathematical:null,max:null,media:null,mediaCharacterEncoding:null,mediaContentEncodings:null,mediaSize:f,mediaTime:null,method:null,min:null,mode:null,name:null,navDown:null,navDownLeft:null,navDownRight:null,navLeft:null,navNext:null,navPrev:null,navRight:null,navUp:null,navUpLeft:null,navUpRight:null,numOctaves:null,observer:null,offset:null,onAbort:null,onActivate:null,onAfterPrint:null,onBeforePrint:null,onBegin:null,onCancel:null,onCanPlay:null,onCanPlayThrough:null,onChange:null,onClick:null,onClose:null,onCopy:null,onCueChange:null,onCut:null,onDblClick:null,onDrag:null,onDragEnd:null,onDragEnter:null,onDragExit:null,onDragLeave:null,onDragOver:null,onDragStart:null,onDrop:null,onDurationChange:null,onEmptied:null,onEnd:null,onEnded:null,onError:null,onFocus:null,onFocusIn:null,onFocusOut:null,onHashChange:null,onInput:null,onInvalid:null,onKeyDown:null,onKeyPress:null,onKeyUp:null,onLoad:null,onLoadedData:null,onLoadedMetadata:null,onLoadStart:null,onMessage:null,onMouseDown:null,onMouseEnter:null,onMouseLeave:null,onMouseMove:null,onMouseOut:null,onMouseOver:null,onMouseUp:null,onMouseWheel:null,onOffline:null,onOnline:null,onPageHide:null,onPageShow:null,onPaste:null,onPause:null,onPlay:null,onPlaying:null,onPopState:null,onProgress:null,onRateChange:null,onRepeat:null,onReset:null,onResize:null,onScroll:null,onSeeked:null,onSeeking:null,onSelect:null,onShow:null,onStalled:null,onStorage:null,onSubmit:null,onSuspend:null,onTimeUpdate:null,onToggle:null,onUnload:null,onVolumeChange:null,onWaiting:null,onZoom:null,opacity:null,operator:null,order:null,orient:null,orientation:null,origin:null,overflow:null,overlay:null,overlinePosition:f,overlineThickness:f,paintOrder:null,panose1:null,path:null,pathLength:f,patternContentUnits:null,patternTransform:null,patternUnits:null,phase:null,ping:h,pitch:null,playbackOrder:null,pointerEvents:null,points:null,pointsAtX:f,pointsAtY:f,pointsAtZ:f,preserveAlpha:null,preserveAspectRatio:null,primitiveUnits:null,propagate:null,property:m,r:null,radius:null,referrerPolicy:null,refX:null,refY:null,rel:m,rev:m,renderingIntent:null,repeatCount:null,repeatDur:null,requiredExtensions:m,requiredFeatures:m,requiredFonts:m,requiredFormats:m,resource:null,restart:null,result:null,rotate:null,rx:null,ry:null,scale:null,seed:null,shapeRendering:null,side:null,slope:null,snapshotTime:null,specularConstant:f,specularExponent:f,spreadMethod:null,spacing:null,startOffset:null,stdDeviation:null,stemh:null,stemv:null,stitchTiles:null,stopColor:null,stopOpacity:null,strikethroughPosition:f,strikethroughThickness:f,string:null,stroke:null,strokeDashArray:m,strokeDashOffset:null,strokeLineCap:null,strokeLineJoin:null,strokeMiterLimit:f,strokeOpacity:f,strokeWidth:null,style:null,surfaceScale:f,syncBehavior:null,syncBehaviorDefault:null,syncMaster:null,syncTolerance:null,syncToleranceDefault:null,systemLanguage:m,tabIndex:f,tableValues:null,target:null,targetX:f,targetY:f,textAnchor:null,textDecoration:null,textRendering:null,textLength:null,timelineBegin:null,title:null,transformBehavior:null,type:null,typeOf:m,to:null,transform:null,u1:null,u2:null,underlinePosition:f,underlineThickness:f,unicode:null,unicodeBidi:null,unicodeRange:null,unitsPerEm:f,values:null,vAlphabetic:f,vMathematical:f,vectorEffect:null,vHanging:f,vIdeographic:f,version:null,vertAdvY:f,vertOriginX:f,vertOriginY:f,viewBox:null,viewTarget:null,visibility:null,width:null,widths:null,wordSpacing:null,writingMode:null,x:null,x1:null,x2:null,xChannelSelector:null,xHeight:f,y:null,y1:null,y2:null,yChannelSelector:null,z:null,zoomAndPan:null}})},205:function(e,n,t){"use strict";var l=t(101),r=t(139),o=t(140),data="data";e.exports=function(e,n){var t=l(n),v=n,y=o;if(t in e.normal)return e.property[e.normal[t]];t.length>4&&t.slice(0,4)===data&&c.test(n)&&("-"===n.charAt(4)?v=function(e){var n=e.slice(5).replace(f,m);return data+n.charAt(0).toUpperCase()+n.slice(1)}(n):n=function(e){var n=e.slice(4);if(f.test(n))return e;"-"!==(n=n.replace(h,d)).charAt(0)&&(n="-"+n);return data+n}(n),y=r);return new y(v,n)};var c=/^data[-\w.:]+$/i,f=/-[a-z]/g,h=/[A-Z]/g;function d(e){return"-"+e.toLowerCase()}function m(e){return e.charAt(1).toUpperCase()}},45:function(e,n,t){"use strict";var l=t(101),r=t(137),o=t(139);e.exports=function(e){var n,t,c=e.space,f=e.mustUseProperty||[],h=e.attributes||{},d=e.properties,m=e.transform,v={},y={};for(n in d)t=new o(n,m(h,n),d[n],c),-1!==f.indexOf(n)&&(t.mustUseProperty=!0),v[n]=t,y[l(n)]=n,y[l(t.attribute)]=n;return new r(v,y,c)}},47:function(e,n,t){"use strict";var l={name:"NoSsr",functional:!0,props:{placeholder:String,placeholderTag:{type:String,default:"div"}},render:function(e,n){var t=n.parent,l=n.slots,r=n.props,o=l(),c=o.default;void 0===c&&(c=[]);var f=o.placeholder;return t._isMounted?c:(t.$once("hook:mounted",(function(){t.$forceUpdate()})),r.placeholderTag&&(r.placeholder||f)?e(r.placeholderTag,{class:["no-ssr-placeholder"]},r.placeholder||f):c.length>0?c.map((function(){return e(!1)})):e(!1))}};e.exports=l},48:function(e,n,t){"use strict";function l(e,n,t){"object"==typeof t.value&&(t.value=r(t.value)),t.enumerable&&!t.get&&!t.set&&t.configurable&&t.writable&&"__proto__"!==n?e[n]=t.value:Object.defineProperty(e,n,t)}function r(e){if("object"!=typeof e)return e;var n,t,o,i=0,c=Object.prototype.toString.call(e);if("[object Object]"===c?o=Object.create(e.__proto__||null):"[object Array]"===c?o=Array(e.length):"[object Set]"===c?(o=new Set,e.forEach((function(e){o.add(r(e))}))):"[object Map]"===c?(o=new Map,e.forEach((function(e,n){o.set(r(n),r(e))}))):"[object Date]"===c?o=new Date(+e):"[object RegExp]"===c?o=new RegExp(e.source,e.flags):"[object DataView]"===c?o=new e.constructor(r(e.buffer)):"[object ArrayBuffer]"===c?o=e.slice(0):"Array]"===c.slice(-6)&&(o=new e.constructor(e)),o){for(t=Object.getOwnPropertySymbols(e);i<t.length;i++)l(o,t[i],Object.getOwnPropertyDescriptor(e,t[i]));for(i=0,t=Object.getOwnPropertyNames(e);i<t.length;i++)Object.hasOwnProperty.call(o,n=t[i])&&o[n]===e[n]||l(o,n,Object.getOwnPropertyDescriptor(e,n))}return o||e}t.d(n,"a",(function(){return r}))},75:function(e,n,t){"use strict";var l=0;function r(){return Math.pow(2,++l)}n.boolean=r(),n.booleanish=r(),n.overloadedBoolean=r(),n.number=r(),n.spaceSeparated=r(),n.commaSeparated=r(),n.commaOrSpaceSeparated=r()}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a81717ff07ac7bd9f7ed.js b/handbook/_nuxt/js/a81717ff07ac7bd9f7ed.js
new file mode 100644
index 0000000..1a518f6
--- /dev/null
+++ b/handbook/_nuxt/js/a81717ff07ac7bd9f7ed.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[115],{409:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a8538eba3f241a324560.js b/handbook/_nuxt/js/a8538eba3f241a324560.js
new file mode 100644
index 0000000..55c57dd
--- /dev/null
+++ b/handbook/_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.fromCharCode(e)}var f=/\\([!"#$%&'()*+,\-.\/:;<=>?@[\\\]^_`{|}~])/g,h=new RegExp(f.source+"|"+/&([a-z#][a-z0-9]{1,31});/gi.source,"gi"),d=/^#((?:x[a-f0-9]{1,8}|[0-9]{1,8}))/i,m=r(202);var v=/[&<>"]/,_=/[&<>"]/g,y={"&":"&","<":"<",">":">",'"':"""};function k(e){return y[e]}var w=/[.?*+^$[\]\\(){}|-]/g;var x=r(189);t.lib={},t.lib.mdurl=r(203),t.lib.ucmicro=r(249),t.assign=function(e){var t=Array.prototype.slice.call(arguments,1);return t.forEach((function(source){if(source){if("object"!=typeof source)throw new TypeError(source+"must be object");Object.keys(source).forEach((function(t){e[t]=source[t]}))}})),e},t.isString=function(e){return"[object String]"===function(e){return Object.prototype.toString.call(e)}(e)},t.has=o,t.unescapeMd=function(e){return e.indexOf("\\")<0?e:e.replace(f,"$1")},t.unescapeAll=function(e){return e.indexOf("\\")<0&&e.indexOf("&")<0?e:e.replace(h,(function(e,t,r){return t||function(e,t){var code=0;return o(m,t)?m[t]:35===t.charCodeAt(0)&&d.test(t)&&c(code="x"===t[1].toLowerCase()?parseInt(t.slice(2),16):parseInt(t.slice(1),10))?l(code):e}(e,r)}))},t.isValidEntityCode=c,t.fromCodePoint=l,t.escapeHtml=function(e){return v.test(e)?e.replace(_,k):e},t.arrayReplaceAt=function(e,t,r){return[].concat(e.slice(0,t),r,e.slice(t+1))},t.isSpace=function(code){switch(code){case 9:case 32:return!0}return!1},t.isWhiteSpace=function(code){if(code>=8192&&code<=8202)return!0;switch(code){case 9:case 10:case 11:case 12:case 13:case 32:case 160:case 5760:case 8239:case 8287:case 12288:return!0}return!1},t.isMdAsciiPunct=function(e){switch(e){case 33:case 34:case 35:case 36:case 37:case 38:case 39:case 40:case 41:case 42:case 43:case 44:case 45:case 46:case 47:case 58:case 59:case 60:case 61:case 62:case 63:case 64:case 91:case 92:case 93:case 94:case 95:case 96:case 123:case 124:case 125:case 126:return!0;default:return!1}},t.isPunctChar=function(e){return x.test(e)},t.escapeRE=function(e){return e.replace(w,"\\$&")},t.normalizeReference=function(e){return e=e.trim().replace(/\s+/g," "),"Ṿ"==="ẞ".toLowerCase()&&(e=e.replace(/ẞ/g,"ß")),e.toLowerCase().toUpperCase()}},function(e,t,r){"use strict";r.d(t,"a",(function(){return xe})),r.d(t,"c",(function(){return Le})),r.d(t,"d",(function(){return fe})),r.d(t,"e",(function(){return he})),r.d(t,"f",(function(){return X})),r.d(t,"g",(function(){return te})),r.d(t,"h",(function(){return ke}));var n=r(0),o=r.n(n);function c(e){return"function"==typeof e&&/native code/.test(e.toString())}var l="undefined"!=typeof Symbol&&c(Symbol)&&"undefined"!=typeof Reflect&&c(Reflect.ownKeys),f=function(e){return e};function h(e,t,r){var n=r.get,o=r.set;Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:n||f,set:o||f})}function d(e,t,r,n){Object.defineProperty(e,t,{value:r,enumerable:!!n,writable:!0,configurable:!0})}function m(e,t){return Object.hasOwnProperty.call(e,t)}function v(e){return Array.isArray(e)}var _=Object.prototype.toString,y=function(e){return _.call(e)};function k(e){return null!==e&&"object"==typeof e}function w(e){return"[object Object]"===function(e){return Object.prototype.toString.call(e)}(e)}function x(e){return"function"==typeof e}function A(e,t){o.a.util.warn(e,t)}var C=void 0;try{var E=r(0);E&&T(E)?C=E:E&&"default"in E&&T(E.default)&&(C=E.default)}catch(e){}var F=null,S=null,D="__composition_api_installed__";function T(e){return e&&"function"==typeof e&&"Vue"===e.name}function z(){return F}function L(e){S=e}function O(){return S?P(S):null}var I,$=new WeakMap;function P(e){if($.has(e))return $.get(e);var t={proxy:e,update:e.$forceUpdate,uid:e._uid,emit:e.$emit.bind(e),parent:null,root:null};return["data","props","attrs","refs","vnode","slots"].forEach((function(r){h(t,r,{get:function(){return e["$"+r]}})})),h(t,"isMounted",{get:function(){return e._isMounted}}),h(t,"isUnmounted",{get:function(){return e._isDestroyed}}),h(t,"isDeactivated",{get:function(){return e._inactive}}),h(t,"emitted",{get:function(){return e._events}}),$.set(e,t),e.$parent&&(t.parent=P(e.$parent)),e.$root&&(t.root=P(e.$root)),t}function j(e){var t=O();return null==t?void 0:t.proxy}function R(e,t){void 0===t&&(t={});var r=e.config.silent;e.config.silent=!0;var n=new e(t);return e.config.silent=r,n}function M(e,t){return function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];return e.$scopedSlots[t]?e.$scopedSlots[t].apply(e,r):A("slots."+t+'() got called outside of the "render()" scope',e)}}var N=function(){return(N=Object.assign||function(e){for(var s,i=1,t=arguments.length;i<t;i++)for(var p in s=arguments[i])Object.prototype.hasOwnProperty.call(s,p)&&(e[p]=s[p]);return e}).apply(this,arguments)};function B(e){var s="function"==typeof Symbol&&Symbol.iterator,t=s&&e[s],i=0;if(t)return t.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&i>=e.length&&(e=void 0),{value:e&&e[i++],done:!e}}};throw new TypeError(s?"Object is not iterable.":"Symbol.iterator is not defined.")}function H(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,i=r.call(e),c=[];try{for(;(void 0===t||t-- >0)&&!(n=i.next()).done;)c.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=i.return)&&r.call(i)}finally{if(o)throw o.error}}return c}function U(e,t){for(var i=0,r=t.length,n=e.length;i<r;i++,n++)e[n]=t[i];return e}function V(e){return l?Symbol.for(e):e}var Z=V("composition-api.preFlushQueue"),G=V("composition-api.postFlushQueue"),W="composition-api.refKey",K=new WeakMap,J=(new WeakMap,new WeakMap),Y=function(e){h(this,"value",{get:e.get,set:e.set})};function Q(e,t){var r=new Y(e),n=Object.seal(r);return J.set(n,!0),n}function X(e){var t;if(ee(e))return e;var r=ce(((t={})[W]=e,t));return Q({get:function(){return r[W]},set:function(e){return r[W]=e}})}function ee(e){return e instanceof Y}function te(e){return ee(e)?e.value:e}function re(object,e){var t=object[e];return ee(t)?t:Q({get:function(){return object[e]},set:function(t){return object[e]=t}})}function ne(e){var t;return Boolean((null==e?void 0:e.__ob__)&&(null===(t=e.__ob__)||void 0===t?void 0:t.__raw__))}function ie(e){var t;return Boolean((null==e?void 0:e.__ob__)&&!(null===(t=e.__ob__)||void 0===t?void 0:t.__raw__))}function oe(e){if(!(!w(e)||ne(e)||Array.isArray(e)||ee(e)||(t=e,r=z(),r&&t instanceof r)||K.has(e))){var t,r;K.set(e,!0);for(var n=Object.keys(e),i=0;i<n.length;i++)se(e,n[i])}}function se(e,t,r){if("__ob__"!==t&&!ne(e[t])){var n,o,c=Object.getOwnPropertyDescriptor(e,t);if(c){if(!1===c.configurable)return;n=c.get,o=c.set,n&&!o||2!==arguments.length||(r=e[t])}oe(r),Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){var o=n?n.call(e):r;return t!==W&&ee(o)?o.value:o},set:function(c){if(!n||o){var l=n?n.call(e):r;t!==W&&ee(l)&&!ee(c)?l.value=c:o?o.call(e,c):r=c,oe(c)}}})}}function ae(e){var t,r=F||C;r.observable?t=r.observable(e):t=R(r,{data:{$$state:e}})._data.$$state;return m(t,"__ob__")||d(t,"__ob__",function(e){void 0===e&&(e={});return{value:e,dep:{notify:f,depend:f,addSub:f,removeSub:f}}}(t)),t}function ue(){return ae({}).__ob__}function ce(e){if(!k(e))return e;if(!w(e)&&!v(e)||ne(e)||!Object.isExtensible(e))return e;var t=ae(e);return oe(t),t}function le(e){return function(t){var r,n=j(((r=e)[0].toUpperCase(),r.slice(1)));n&&function(e,t,r,n){var o=t.$options,c=e.config.optionMergeStrategies[r];o[r]=c(o[r],function(e,t){return function(){for(var r,n=[],o=0;o<arguments.length;o++)n[o]=arguments[o];var c=null===(r=O())||void 0===r?void 0:r.proxy;L(e);try{return t.apply(void 0,U([],H(n)))}finally{L(c)}}}(t,n))}(z(),n,e,t)}}le("beforeMount");var pe,fe=le("mounted"),he=(le("beforeUpdate"),le("updated"),le("beforeDestroy"),le("destroyed"));le("errorCaptured"),le("activated"),le("deactivated"),le("serverPrefetch");function de(){be(this,Z)}function ge(){be(this,G)}function me(){var e,t=null===(e=O())||void 0===e?void 0:e.proxy;return t?function(e){return void 0!==e[Z]}(t)||function(e){e[Z]=[],e[G]=[],e.$on("hook:beforeUpdate",de),e.$on("hook:updated",ge)}(t):(pe||(pe=R(z())),t=pe),t}function be(e,t){for(var r=e[t],n=0;n<r.length;n++)r[n]();r.length=0}function ve(e,t,r){var n=function(){e.$nextTick((function(){e[Z].length&&be(e,Z),e[G].length&&be(e,G)}))};switch(r){case"pre":n(),e[Z].push(t);break;case"post":n(),e[G].push(t);break;default:!function(e,t){if(!e)throw new Error("[vue-composition-api] "+t)}(!1,'flush must be one of ["post", "pre", "sync"], but got '+r)}}function _e(e,t){var r=e.teardown;e.teardown=function(){for(var n=[],o=0;o<arguments.length;o++)n[o]=arguments[o];r.apply(e,n),t()}}function ye(e,source,t,r){var n,o,c=r.flush,l="sync"===c,h=function(e){o=function(){try{e()}catch(e){!function(e,t,r){if("undefined"==typeof window||"undefined"==typeof console)throw e;console.error(e)}(e)}}},d=function(){o&&(o(),o=null)},m=function(t){return l||e===pe?t:function(){for(var r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];return ve(e,(function(){t.apply(void 0,U([],H(r)))}),c)}};if(null===t){var _=!1,y=function(e,t,r,n){var o=e._watchers.length;return e.$watch(t,r,{immediate:n.immediateInvokeCallback,deep:n.deep,lazy:n.noRun,sync:n.sync,before:n.before}),e._watchers[o]}(e,(function(){if(!_)try{_=!0,source(h)}finally{_=!1}}),f,{deep:r.deep||!1,sync:l,before:d});_e(y,d),y.lazy=!1;var k=y.get.bind(y);return y.get=m(k),function(){y.teardown()}}var w,C=r.deep;ee(source)?w=function(){return source.value}:ie(source)?(w=function(){return source},C=!0):v(source)?w=function(){return source.map((function(s){return ee(s)?s.value:ie(s)?we(s):x(s)?s():(A("Invalid watch source: "+JSON.stringify(s)+".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.",e),f)}))}:x(source)?w=source:(w=f,A("Invalid watch source: "+JSON.stringify(source)+".\n A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.",e));var E=function(e,r){d(),t(e,r,h)},F=m(E);if(r.immediate){var S=F,D=function(e,t){D=S,E(e,t)};F=function(e,t){D(e,t)}}var T=e.$watch(w,F,{immediate:r.immediate,deep:C,sync:l}),z=e._watchers[e._watchers.length-1];return ie(z.value)&&(null===(n=z.value.__ob__)||void 0===n?void 0:n.dep)&&C&&z.value.__ob__.dep.addSub({update:function(){z.run()}}),_e(z,d),function(){T()}}function ke(source,e,t){var r=null;"function"==typeof e?r=e:(t=e,r=null);var n=function(e){return N({immediate:!1,deep:!1,flush:"pre"},e)}(t);return ye(me(),source,r,n)}function we(e,t){if(void 0===t&&(t=new Set),!k(e)||t.has(e))return e;if(t.add(e),ee(e))we(e.value,t);else if(v(e))for(var i=0;i<e.length;i++)we(e[i],t);else if("[object Set]"===y(e)||function(e){return"[object Map]"===y(e)}(e))e.forEach((function(e){we(e,t)}));else if(w(e))for(var r in e)we(e[r],t);return e}function xe(e){var t,r,n,o,c,l=null===(t=O())||void 0===t?void 0:t.proxy;if("function"==typeof e?r=e:(r=e.get,n=e.set),l&&!l.$isServer){var h,d=function(){if(!I){var e=R(z(),{computed:{value:function(){return 0}}}),t=e._computedWatchers.value.constructor,r=e._data.__ob__.dep.constructor;I={Watcher:t,Dep:r},e.$destroy()}return I}(),m=d.Watcher,v=d.Dep;c=function(){return h||(h=new m(l,r,f,{lazy:!0})),h.dirty&&h.evaluate(),v.target&&h.depend(),h.value},o=function(e){n&&n(e)}}else{var _=R(z(),{computed:{$$state:{get:r,set:n}}});l&&l.$on("hook:destroyed",(function(){return _.$destroy()})),c=function(){return _.$$state},o=function(e){_.$$state=e}}return Q({get:c,set:o})}var Ae={set:function(e,t,r){(e.__composition_api_state__=e.__composition_api_state__||{})[t]=r},get:function(e,t){return(e.__composition_api_state__||{})[t]}};function Ce(e){var t=Ae.get(e,"rawBindings")||{};if(t&&Object.keys(t).length){for(var r=e.$refs,n=Ae.get(e,"refs")||[],o=0;o<n.length;o++){var c=t[h=n[o]];!r[h]&&c&&ee(c)&&(c.value=null)}var l=Object.keys(r),f=[];for(o=0;o<l.length;o++){var h;c=t[h=l[o]];r[h]&&c&&ee(c)&&(c.value=r[h],f.push(h))}Ae.set(e,"refs",f)}}function Ee(e,t){var r=e.$options._parentVnode;if(r){for(var n=Ae.get(e,"slots")||[],o=function(e,t){var r;if(e){if(e._normalized)return e._normalized;for(var n in r={},e)e[n]&&"$"!==n[0]&&(r[n]=!0)}else r={};for(var n in t)n in r||(r[n]=!0);return r}(r.data.scopedSlots,e.$slots),c=0;c<n.length;c++){o[f=n[c]]||delete t[f]}var l=Object.keys(o);for(c=0;c<l.length;c++){var f;t[f=l[c]]||(t[f]=M(e,f))}Ae.set(e,"slots",l)}}function Fe(e,t,r){var n=S;L(e);try{return t(e)}catch(e){if(!r)throw e;r(e)}finally{L(n)}}function Se(e){function t(e){if(w(e)&&!ee(e)&&!ie(e)&&!ne(e)){var r=z().util.defineReactive;Object.keys(e).forEach((function(n){var o=e[n];r(e,n,o),o&&t(o)}))}}function r(e,t){return void 0===t&&(t=new Map),t.has(e)?t.get(e):(t.set(e,!1),Array.isArray(e)&&ie(e)?(t.set(e,!0),!0):!(!w(e)||ne(e))&&Object.keys(e).some((function(n){return r(e[n],t)})))}e.mixin({beforeCreate:function(){var e=this,n=e.$options,o=n.setup,c=n.render;c&&(n.render=function(){for(var t=this,r=[],n=0;n<arguments.length;n++)r[n]=arguments[n];return Fe(e,(function(){return c.apply(t,r)}))});if(!o)return;if("function"!=typeof o)return void 0;var data=n.data;n.data=function(){return function(e,n){void 0===n&&(n={});var o,c=e.$options.setup,l=function(e){var t={slots:{}},r=["attrs"],n=["emit"];["root","parent","refs","listeners","isServer","ssrContext"].forEach((function(r){var n="$"+r;h(t,r,{get:function(){return e[n]},set:function(){A("Cannot assign to '"+r+"' because it is a read-only property",e)}})})),r.forEach((function(r){var n="$"+r;h(t,r,{get:function(){var t,r,data=ce({}),source=e[n],o=function(t){h(data,t,{get:function(){return e[n][t]}})};try{for(var c=B(Object.keys(source)),l=c.next();!l.done;l=c.next()){o(l.value)}}catch(e){t={error:e}}finally{try{l&&!l.done&&(r=c.return)&&r.call(c)}finally{if(t)throw t.error}}return data},set:function(){A("Cannot assign to '"+r+"' because it is a read-only property",e)}})})),n.forEach((function(r){var n="$"+r;h(t,r,{get:function(){return function(){for(var t=[],r=0;r<arguments.length;r++)t[r]=arguments[r];e[n].apply(e,t)}}})})),!1;return t}(e);if(d(n,"__ob__",ue()),Ee(e,l.slots),Fe(e,(function(){o=c(n,l)})),!o)return;if(x(o)){var f=o;return void(e.$options.render=function(){return Ee(e,l.slots),Fe(e,(function(){return f()}))})}if(w(o)){ie(o)&&(o=function(e){if(!w(e))return e;var t={};for(var r in e)t[r]=re(e,r);return t}(o)),Ae.set(e,"rawBindings",o);var _=o;return void Object.keys(_).forEach((function(n){var o=_[n];ee(o)||(ie(o)?v(o)&&(o=X(o)):x(o)?o=o.bind(e):k(o)?r(o)&&t(o):o=X(o)),function(e,t,r){var n=e.$options.props;t in e||n&&m(n,t)||(ee(r)?h(e,t,{get:function(){return r.value},set:function(e){r.value=e}}):Object.defineProperty(e,t,{enumerable:!0,configurable:!0,get:function(){return ie(r)&&r.__ob__.dep.depend(),r},set:function(e){r=e}}))}(e,n,o)}))}0}(e,e.$props),"function"==typeof data?data.call(e,e):data||{}}},mounted:function(){Ce(this)},updated:function(){Ce(this)}})}function De(e,t){if(!e)return t;if(!t)return e;for(var r,n,o,c=l?Reflect.ownKeys(e):Object.keys(e),i=0;i<c.length;i++)"__ob__"!==(r=c[i])&&(n=t[r],o=e[r],m(t,r)?n!==o&&w(n)&&!ee(n)&&w(o)&&!ee(o)&&De(o,n):t[r]=o);return t}function Te(e){(function(e){return m(e,D)})(e)||(e.config.optionMergeStrategies.setup=function(e,t){return function(r,n){return De("function"==typeof e?e(r,n)||{}:void 0,"function"==typeof t?t(r,n)||{}:void 0)}},function(e){F=e,Object.defineProperty(e,D,{configurable:!0,writable:!0,value:!0})}(e),Se(e))}var ze={install:function(e){return Te(e)}};function Le(e){return e}"undefined"!=typeof window&&window.Vue&&window.Vue.use(ze),t.b=ze},function(e,t,r){"use strict";r.d(t,"b",(function(){return D})),r.d(t,"a",(function(){return R}));const n="function"==typeof atob,o="function"==typeof btoa,c="function"==typeof Buffer,l="function"==typeof TextDecoder?new TextDecoder:void 0,f="function"==typeof TextEncoder?new TextEncoder:void 0,h=[..."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="],d=(a=>{let e={};return a.forEach(((t,i)=>e[t]=i)),e})(h),m=/^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/,v=String.fromCharCode.bind(String),_="function"==typeof Uint8Array.from?Uint8Array.from.bind(Uint8Array):(e,t=(e=>e))=>new Uint8Array(Array.prototype.slice.call(e,0).map(t)),y=e=>e.replace(/[+\/]/g,(e=>"+"==e?"-":"_")).replace(/=+$/m,""),k=s=>s.replace(/[^A-Za-z0-9\+\/]/g,""),w=e=>{let t,r,n,o,c="";const l=e.length%3;for(let i=0;i<e.length;){if((r=e.charCodeAt(i++))>255||(n=e.charCodeAt(i++))>255||(o=e.charCodeAt(i++))>255)throw new TypeError("invalid character found");t=r<<16|n<<8|o,c+=h[t>>18&63]+h[t>>12&63]+h[t>>6&63]+h[63&t]}return l?c.slice(0,l-3)+"===".substring(l):c},x=o?e=>btoa(e):c?e=>Buffer.from(e,"binary").toString("base64"):w,A=c?e=>Buffer.from(e).toString("base64"):e=>{let t=[];for(let i=0,r=e.length;i<r;i+=4096)t.push(v.apply(null,e.subarray(i,i+4096)));return x(t.join(""))},C=e=>{if(e.length<2)return(t=e.charCodeAt(0))<128?e:t<2048?v(192|t>>>6)+v(128|63&t):v(224|t>>>12&15)+v(128|t>>>6&63)+v(128|63&t);var t=65536+1024*(e.charCodeAt(0)-55296)+(e.charCodeAt(1)-56320);return v(240|t>>>18&7)+v(128|t>>>12&63)+v(128|t>>>6&63)+v(128|63&t)},E=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g,F=u=>u.replace(E,C),S=c?s=>Buffer.from(s,"utf8").toString("base64"):f?s=>A(f.encode(s)):s=>x(F(s)),D=(e,t=!1)=>t?y(S(e)):S(e),T=/[\xC0-\xDF][\x80-\xBF]|[\xE0-\xEF][\x80-\xBF]{2}|[\xF0-\xF7][\x80-\xBF]{3}/g,z=e=>{switch(e.length){case 4:var t=((7&e.charCodeAt(0))<<18|(63&e.charCodeAt(1))<<12|(63&e.charCodeAt(2))<<6|63&e.charCodeAt(3))-65536;return v(55296+(t>>>10))+v(56320+(1023&t));case 3:return v((15&e.charCodeAt(0))<<12|(63&e.charCodeAt(1))<<6|63&e.charCodeAt(2));default:return v((31&e.charCodeAt(0))<<6|63&e.charCodeAt(1))}},L=b=>b.replace(T,z),O=e=>{if(e=e.replace(/\s+/g,""),!m.test(e))throw new TypeError("malformed base64.");e+="==".slice(2-(3&e.length));let t,r,n,o="";for(let i=0;i<e.length;)t=d[e.charAt(i++)]<<18|d[e.charAt(i++)]<<12|(r=d[e.charAt(i++)])<<6|(n=d[e.charAt(i++)]),o+=64===r?v(t>>16&255):64===n?v(t>>16&255,t>>8&255):v(t>>16&255,t>>8&255,255&t);return o},I=n?e=>atob(k(e)):c?e=>Buffer.from(e,"base64").toString("binary"):O,$=c?a=>_(Buffer.from(a,"base64")):a=>_(I(a),(e=>e.charCodeAt(0))),P=c?a=>Buffer.from(a,"base64").toString("utf8"):l?a=>l.decode($(a)):a=>L(I(a)),j=a=>k(a.replace(/[-_]/g,(e=>"-"==e?"+":"/"))),R=e=>P(j(e))},function(e,t){e.exports=/[!-#%-\*,-\/:;\?@\[-\]_\{\}\xA1\xA7\xAB\xB6\xB7\xBB\xBF\u037E\u0387\u055A-\u055F\u0589\u058A\u05BE\u05C0\u05C3\u05C6\u05F3\u05F4\u0609\u060A\u060C\u060D\u061B\u061E\u061F\u066A-\u066D\u06D4\u0700-\u070D\u07F7-\u07F9\u0830-\u083E\u085E\u0964\u0965\u0970\u09FD\u0A76\u0AF0\u0C84\u0DF4\u0E4F\u0E5A\u0E5B\u0F04-\u0F12\u0F14\u0F3A-\u0F3D\u0F85\u0FD0-\u0FD4\u0FD9\u0FDA\u104A-\u104F\u10FB\u1360-\u1368\u1400\u166D\u166E\u169B\u169C\u16EB-\u16ED\u1735\u1736\u17D4-\u17D6\u17D8-\u17DA\u1800-\u180A\u1944\u1945\u1A1E\u1A1F\u1AA0-\u1AA6\u1AA8-\u1AAD\u1B5A-\u1B60\u1BFC-\u1BFF\u1C3B-\u1C3F\u1C7E\u1C7F\u1CC0-\u1CC7\u1CD3\u2010-\u2027\u2030-\u2043\u2045-\u2051\u2053-\u205E\u207D\u207E\u208D\u208E\u2308-\u230B\u2329\u232A\u2768-\u2775\u27C5\u27C6\u27E6-\u27EF\u2983-\u2998\u29D8-\u29DB\u29FC\u29FD\u2CF9-\u2CFC\u2CFE\u2CFF\u2D70\u2E00-\u2E2E\u2E30-\u2E4E\u3001-\u3003\u3008-\u3011\u3014-\u301F\u3030\u303D\u30A0\u30FB\uA4FE\uA4FF\uA60D-\uA60F\uA673\uA67E\uA6F2-\uA6F7\uA874-\uA877\uA8CE\uA8CF\uA8F8-\uA8FA\uA8FC\uA92E\uA92F\uA95F\uA9C1-\uA9CD\uA9DE\uA9DF\uAA5C-\uAA5F\uAADE\uAADF\uAAF0\uAAF1\uABEB\uFD3E\uFD3F\uFE10-\uFE19\uFE30-\uFE52\uFE54-\uFE61\uFE63\uFE68\uFE6A\uFE6B\uFF01-\uFF03\uFF05-\uFF0A\uFF0C-\uFF0F\uFF1A\uFF1B\uFF1F\uFF20\uFF3B-\uFF3D\uFF3F\uFF5B\uFF5D\uFF5F-\uFF65]|\uD800[\uDD00-\uDD02\uDF9F\uDFD0]|\uD801\uDD6F|\uD802[\uDC57\uDD1F\uDD3F\uDE50-\uDE58\uDE7F\uDEF0-\uDEF6\uDF39-\uDF3F\uDF99-\uDF9C]|\uD803[\uDF55-\uDF59]|\uD804[\uDC47-\uDC4D\uDCBB\uDCBC\uDCBE-\uDCC1\uDD40-\uDD43\uDD74\uDD75\uDDC5-\uDDC8\uDDCD\uDDDB\uDDDD-\uDDDF\uDE38-\uDE3D\uDEA9]|\uD805[\uDC4B-\uDC4F\uDC5B\uDC5D\uDCC6\uDDC1-\uDDD7\uDE41-\uDE43\uDE60-\uDE6C\uDF3C-\uDF3E]|\uD806[\uDC3B\uDE3F-\uDE46\uDE9A-\uDE9C\uDE9E-\uDEA2]|\uD807[\uDC41-\uDC45\uDC70\uDC71\uDEF7\uDEF8]|\uD809[\uDC70-\uDC74]|\uD81A[\uDE6E\uDE6F\uDEF5\uDF37-\uDF3B\uDF44]|\uD81B[\uDE97-\uDE9A]|\uD82F\uDC9F|\uD836[\uDE87-\uDE8B]|\uD83A[\uDD5E\uDD5F]/},function(e,t,r){"use strict";function n(){this.__rules__=[],this.__cache__=null}n.prototype.__find__=function(e){for(var i=0;i<this.__rules__.length;i++)if(this.__rules__[i].name===e)return i;return-1},n.prototype.__compile__=function(){var e=this,t=[""];e.__rules__.forEach((function(e){e.enabled&&e.alt.forEach((function(e){t.indexOf(e)<0&&t.push(e)}))})),e.__cache__={},t.forEach((function(t){e.__cache__[t]=[],e.__rules__.forEach((function(r){r.enabled&&(t&&r.alt.indexOf(t)<0||e.__cache__[t].push(r.fn))}))}))},n.prototype.at=function(e,t,r){var n=this.__find__(e),o=r||{};if(-1===n)throw new Error("Parser rule not found: "+e);this.__rules__[n].fn=t,this.__rules__[n].alt=o.alt||[],this.__cache__=null},n.prototype.before=function(e,t,r,n){var o=this.__find__(e),c=n||{};if(-1===o)throw new Error("Parser rule not found: "+e);this.__rules__.splice(o,0,{name:t,enabled:!0,fn:r,alt:c.alt||[]}),this.__cache__=null},n.prototype.after=function(e,t,r,n){var o=this.__find__(e),c=n||{};if(-1===o)throw new Error("Parser rule not found: "+e);this.__rules__.splice(o+1,0,{name:t,enabled:!0,fn:r,alt:c.alt||[]}),this.__cache__=null},n.prototype.push=function(e,t,r){var n=r||{};this.__rules__.push({name:e,enabled:!0,fn:t,alt:n.alt||[]}),this.__cache__=null},n.prototype.enable=function(e,t){Array.isArray(e)||(e=[e]);var r=[];return e.forEach((function(e){var n=this.__find__(e);if(n<0){if(t)return;throw new Error("Rules manager: invalid rule name "+e)}this.__rules__[n].enabled=!0,r.push(e)}),this),this.__cache__=null,r},n.prototype.enableOnly=function(e,t){Array.isArray(e)||(e=[e]),this.__rules__.forEach((function(e){e.enabled=!1})),this.enable(e,t)},n.prototype.disable=function(e,t){Array.isArray(e)||(e=[e]);var r=[];return e.forEach((function(e){var n=this.__find__(e);if(n<0){if(t)return;throw new Error("Rules manager: invalid rule name "+e)}this.__rules__[n].enabled=!1,r.push(e)}),this),this.__cache__=null,r},n.prototype.getRules=function(e){return null===this.__cache__&&this.__compile__(),this.__cache__[e]||[]},e.exports=n},function(e,t,r){"use strict";function n(e,t,r){this.type=e,this.tag=t,this.attrs=null,this.map=null,this.nesting=r,this.level=0,this.children=null,this.content="",this.markup="",this.info="",this.meta=null,this.block=!1,this.hidden=!1}n.prototype.attrIndex=function(e){var t,i,r;if(!this.attrs)return-1;for(i=0,r=(t=this.attrs).length;i<r;i++)if(t[i][0]===e)return i;return-1},n.prototype.attrPush=function(e){this.attrs?this.attrs.push(e):this.attrs=[e]},n.prototype.attrSet=function(e,t){var r=this.attrIndex(e),n=[e,t];r<0?this.attrPush(n):this.attrs[r]=n},n.prototype.attrGet=function(e){var t=this.attrIndex(e),r=null;return t>=0&&(r=this.attrs[t][1]),r},n.prototype.attrJoin=function(e,t){var r=this.attrIndex(e);r<0?this.attrPush([e,t]):this.attrs[r][1]=this.attrs[r][1]+" "+t},e.exports=n},,function(e,t){Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}},function(e,t){Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),Prism.languages.js=Prism.languages.javascript},function(e,t,r){e.exports={}},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,r){var n=r(220),o="object"==typeof self&&self&&self.Object===Object&&self,c=n||o||Function("return this")();e.exports=c},function(e,t,r){var n=r(197).Symbol;e.exports=n},,,,function(e,t,r){"use strict";e.exports=r(244)},function(e,t,r){"use strict";e.exports.encode=r(245),e.exports.decode=r(246),e.exports.format=r(247),e.exports.parse=r(248)},function(e,t){e.exports=/[\0-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/},function(e,t){e.exports=/[\0-\x1F\x7F-\x9F]/},function(e,t){e.exports=/[ \xA0\u1680\u2000-\u200A\u2028\u2029\u202F\u205F\u3000]/},function(e,t,r){"use strict";var n="<[A-Za-z][A-Za-z0-9\\-]*(?:\\s+[a-zA-Z_:][a-zA-Z0-9:._-]*(?:\\s*=\\s*(?:[^\"'=<>`\\x00-\\x20]+|'[^']*'|\"[^\"]*\"))?)*\\s*\\/?>",o="<\\/[A-Za-z][A-Za-z0-9\\-]*\\s*>",c=new RegExp("^(?:"+n+"|"+o+"|\x3c!----\x3e|\x3c!--(?:-?[^>-])(?:-?[^-])*--\x3e|<[?][\\s\\S]*?[?]>|<![A-Z]+\\s+[^>]*>|<!\\[CDATA\\[[\\s\\S]*?\\]\\]>)"),l=new RegExp("^(?:"+n+"|"+o+")");e.exports.HTML_TAG_RE=c,e.exports.HTML_OPEN_CLOSE_TAG_RE=l},function(e,t,r){"use strict";function n(e,t){var i,r,n,o,c,l=[],f=t.length;for(i=0;i<f;i++)126===(n=t[i]).marker&&-1!==n.end&&(o=t[n.end],(c=e.tokens[n.token]).type="s_open",c.tag="s",c.nesting=1,c.markup="~~",c.content="",(c=e.tokens[o.token]).type="s_close",c.tag="s",c.nesting=-1,c.markup="~~",c.content="","text"===e.tokens[o.token-1].type&&"~"===e.tokens[o.token-1].content&&l.push(o.token-1));for(;l.length;){for(r=(i=l.pop())+1;r<e.tokens.length&&"s_close"===e.tokens[r].type;)r++;i!==--r&&(c=e.tokens[r],e.tokens[r]=e.tokens[i],e.tokens[i]=c)}}e.exports.tokenize=function(e,t){var i,r,n,o,c=e.pos,marker=e.src.charCodeAt(c);if(t)return!1;if(126!==marker)return!1;if(n=(r=e.scanDelims(e.pos,!0)).length,o=String.fromCharCode(marker),n<2)return!1;for(n%2&&(e.push("text","",0).content=o,n--),i=0;i<n;i+=2)e.push("text","",0).content=o+o,e.delimiters.push({marker:marker,length:0,jump:i/2,token:e.tokens.length-1,end:-1,open:r.can_open,close:r.can_close});return e.pos+=r.length,!0},e.exports.postProcess=function(e){var t,r=e.tokens_meta,o=e.tokens_meta.length;for(n(e,e.delimiters),t=0;t<o;t++)r[t]&&r[t].delimiters&&n(e,r[t].delimiters)}},function(e,t,r){"use strict";function n(e,t){var i,r,n,o,c,l;for(i=t.length-1;i>=0;i--)95!==(r=t[i]).marker&&42!==r.marker||-1!==r.end&&(n=t[r.end],l=i>0&&t[i-1].end===r.end+1&&t[i-1].token===r.token-1&&t[r.end+1].token===n.token+1&&t[i-1].marker===r.marker,c=String.fromCharCode(r.marker),(o=e.tokens[r.token]).type=l?"strong_open":"em_open",o.tag=l?"strong":"em",o.nesting=1,o.markup=l?c+c:c,o.content="",(o=e.tokens[n.token]).type=l?"strong_close":"em_close",o.tag=l?"strong":"em",o.nesting=-1,o.markup=l?c+c:c,o.content="",l&&(e.tokens[t[i-1].token].content="",e.tokens[t[r.end+1].token].content="",i--))}e.exports.tokenize=function(e,t){var i,r,n=e.pos,marker=e.src.charCodeAt(n);if(t)return!1;if(95!==marker&&42!==marker)return!1;for(r=e.scanDelims(e.pos,42===marker),i=0;i<r.length;i++)e.push("text","",0).content=String.fromCharCode(marker),e.delimiters.push({marker:marker,length:r.length,jump:i,token:e.tokens.length-1,end:-1,open:r.can_open,close:r.can_close});return e.pos+=r.length,!0},e.exports.postProcess=function(e){var t,r=e.tokens_meta,o=e.tokens_meta.length;for(n(e,e.delimiters),t=0;t<o;t++)r[t]&&r[t].delimiters&&n(e,r[t].delimiters)}},,function(e,t){!function(){"use strict";if("object"==typeof window)if("IntersectionObserver"in window&&"IntersectionObserverEntry"in window&&"intersectionRatio"in window.IntersectionObserverEntry.prototype)"isIntersecting"in window.IntersectionObserverEntry.prototype||Object.defineProperty(window.IntersectionObserverEntry.prototype,"isIntersecting",{get:function(){return this.intersectionRatio>0}});else{var e=function(e){for(var t=window.document,r=o(t);r;)r=o(t=r.ownerDocument);return t}(),t=[],r=null,n=null;l.prototype.THROTTLE_TIMEOUT=100,l.prototype.POLL_INTERVAL=null,l.prototype.USE_MUTATION_OBSERVER=!0,l._setupCrossOriginUpdater=function(){return r||(r=function(e,r){n=e&&r?v(e,r):{top:0,bottom:0,left:0,right:0,width:0,height:0},t.forEach((function(e){e._checkForIntersections()}))}),r},l._resetCrossOriginUpdater=function(){r=null,n=null},l.prototype.observe=function(e){if(!this._observationTargets.some((function(t){return t.element==e}))){if(!e||1!=e.nodeType)throw new Error("target must be an Element");this._registerInstance(),this._observationTargets.push({element:e,entry:null}),this._monitorIntersections(e.ownerDocument),this._checkForIntersections()}},l.prototype.unobserve=function(e){this._observationTargets=this._observationTargets.filter((function(t){return t.element!=e})),this._unmonitorIntersections(e.ownerDocument),0==this._observationTargets.length&&this._unregisterInstance()},l.prototype.disconnect=function(){this._observationTargets=[],this._unmonitorAllIntersections(),this._unregisterInstance()},l.prototype.takeRecords=function(){var e=this._queuedEntries.slice();return this._queuedEntries=[],e},l.prototype._initThresholds=function(e){var t=e||[0];return Array.isArray(t)||(t=[t]),t.sort().filter((function(e,i,a){if("number"!=typeof e||isNaN(e)||e<0||e>1)throw new Error("threshold must be a number between 0 and 1 inclusively");return e!==a[i-1]}))},l.prototype._parseRootMargin=function(e){var t=(e||"0px").split(/\s+/).map((function(e){var t=/^(-?\d*\.?\d+)(px|%)$/.exec(e);if(!t)throw new Error("rootMargin must be specified in pixels or percent");return{value:parseFloat(t[1]),unit:t[2]}}));return t[1]=t[1]||t[0],t[2]=t[2]||t[0],t[3]=t[3]||t[1],t},l.prototype._monitorIntersections=function(t){var r=t.defaultView;if(r&&-1==this._monitoringDocuments.indexOf(t)){var n=this._checkForIntersections,c=null,l=null;this.POLL_INTERVAL?c=r.setInterval(n,this.POLL_INTERVAL):(f(r,"resize",n,!0),f(t,"scroll",n,!0),this.USE_MUTATION_OBSERVER&&"MutationObserver"in r&&(l=new r.MutationObserver(n)).observe(t,{attributes:!0,childList:!0,characterData:!0,subtree:!0})),this._monitoringDocuments.push(t),this._monitoringUnsubscribes.push((function(){var e=t.defaultView;e&&(c&&e.clearInterval(c),h(e,"resize",n,!0)),h(t,"scroll",n,!0),l&&l.disconnect()}));var d=this.root&&(this.root.ownerDocument||this.root)||e;if(t!=d){var m=o(t);m&&this._monitorIntersections(m.ownerDocument)}}},l.prototype._unmonitorIntersections=function(t){var r=this._monitoringDocuments.indexOf(t);if(-1!=r){var n=this.root&&(this.root.ownerDocument||this.root)||e;if(!this._observationTargets.some((function(e){var r=e.element.ownerDocument;if(r==t)return!0;for(;r&&r!=n;){var c=o(r);if((r=c&&c.ownerDocument)==t)return!0}return!1}))){var c=this._monitoringUnsubscribes[r];if(this._monitoringDocuments.splice(r,1),this._monitoringUnsubscribes.splice(r,1),c(),t!=n){var l=o(t);l&&this._unmonitorIntersections(l.ownerDocument)}}}},l.prototype._unmonitorAllIntersections=function(){var e=this._monitoringUnsubscribes.slice(0);this._monitoringDocuments.length=0,this._monitoringUnsubscribes.length=0;for(var i=0;i<e.length;i++)e[i]()},l.prototype._checkForIntersections=function(){if(this.root||!r||n){var e=this._rootIsInDom(),t=e?this._getRootRect():{top:0,bottom:0,left:0,right:0,width:0,height:0};this._observationTargets.forEach((function(n){var o=n.element,l=d(o),f=this._rootContainsTarget(o),h=n.entry,m=e&&f&&this._computeTargetAndRootIntersection(o,l,t),v=null;this._rootContainsTarget(o)?r&&!this.root||(v=t):v={top:0,bottom:0,left:0,right:0,width:0,height:0};var _=n.entry=new c({time:window.performance&&performance.now&&performance.now(),target:o,boundingClientRect:l,rootBounds:v,intersectionRect:m});h?e&&f?this._hasCrossedThreshold(h,_)&&this._queuedEntries.push(_):h&&h.isIntersecting&&this._queuedEntries.push(_):this._queuedEntries.push(_)}),this),this._queuedEntries.length&&this._callback(this.takeRecords(),this)}},l.prototype._computeTargetAndRootIntersection=function(t,o,c){if("none"!=window.getComputedStyle(t).display){for(var l,f,h,m,_,k,w,x,A=o,C=y(t),E=!1;!E&&C;){var F=null,S=1==C.nodeType?window.getComputedStyle(C):{};if("none"==S.display)return null;if(C==this.root||9==C.nodeType)if(E=!0,C==this.root||C==e)r&&!this.root?!n||0==n.width&&0==n.height?(C=null,F=null,A=null):F=n:F=c;else{var D=y(C),T=D&&d(D),z=D&&this._computeTargetAndRootIntersection(D,T,c);T&&z?(C=D,F=v(T,z)):(C=null,A=null)}else{var L=C.ownerDocument;C!=L.body&&C!=L.documentElement&&"visible"!=S.overflow&&(F=d(C))}if(F&&(l=F,f=A,h=void 0,m=void 0,_=void 0,k=void 0,w=void 0,x=void 0,h=Math.max(l.top,f.top),m=Math.min(l.bottom,f.bottom),_=Math.max(l.left,f.left),k=Math.min(l.right,f.right),x=m-h,A=(w=k-_)>=0&&x>=0&&{top:h,bottom:m,left:_,right:k,width:w,height:x}||null),!A)break;C=C&&y(C)}return A}},l.prototype._getRootRect=function(){var t;if(this.root&&!k(this.root))t=d(this.root);else{var r=k(this.root)?this.root:e,html=r.documentElement,body=r.body;t={top:0,left:0,right:html.clientWidth||body.clientWidth,width:html.clientWidth||body.clientWidth,bottom:html.clientHeight||body.clientHeight,height:html.clientHeight||body.clientHeight}}return this._expandRectByRootMargin(t)},l.prototype._expandRectByRootMargin=function(rect){var e=this._rootMarginValues.map((function(e,i){return"px"==e.unit?e.value:e.value*(i%2?rect.width:rect.height)/100})),t={top:rect.top-e[0],right:rect.right+e[1],bottom:rect.bottom+e[2],left:rect.left-e[3]};return t.width=t.right-t.left,t.height=t.bottom-t.top,t},l.prototype._hasCrossedThreshold=function(e,t){var r=e&&e.isIntersecting?e.intersectionRatio||0:-1,n=t.isIntersecting?t.intersectionRatio||0:-1;if(r!==n)for(var i=0;i<this.thresholds.length;i++){var o=this.thresholds[i];if(o==r||o==n||o<r!=o<n)return!0}},l.prototype._rootIsInDom=function(){return!this.root||_(e,this.root)},l.prototype._rootContainsTarget=function(t){var r=this.root&&(this.root.ownerDocument||this.root)||e;return _(r,t)&&(!this.root||r==t.ownerDocument)},l.prototype._registerInstance=function(){t.indexOf(this)<0&&t.push(this)},l.prototype._unregisterInstance=function(){var e=t.indexOf(this);-1!=e&&t.splice(e,1)},window.IntersectionObserver=l,window.IntersectionObserverEntry=c}function o(e){try{return e.defaultView&&e.defaultView.frameElement||null}catch(e){return null}}function c(e){this.time=e.time,this.target=e.target,this.rootBounds=m(e.rootBounds),this.boundingClientRect=m(e.boundingClientRect),this.intersectionRect=m(e.intersectionRect||{top:0,bottom:0,left:0,right:0,width:0,height:0}),this.isIntersecting=!!e.intersectionRect;var t=this.boundingClientRect,r=t.width*t.height,n=this.intersectionRect,o=n.width*n.height;this.intersectionRatio=r?Number((o/r).toFixed(4)):this.isIntersecting?1:0}function l(e,t){var r,n,o,c=t||{};if("function"!=typeof e)throw new Error("callback must be a function");if(c.root&&1!=c.root.nodeType&&9!=c.root.nodeType)throw new Error("root must be a Document or Element");this._checkForIntersections=(r=this._checkForIntersections.bind(this),n=this.THROTTLE_TIMEOUT,o=null,function(){o||(o=setTimeout((function(){r(),o=null}),n))}),this._callback=e,this._observationTargets=[],this._queuedEntries=[],this._rootMarginValues=this._parseRootMargin(c.rootMargin),this.thresholds=this._initThresholds(c.threshold),this.root=c.root||null,this.rootMargin=this._rootMarginValues.map((function(e){return e.value+e.unit})).join(" "),this._monitoringDocuments=[],this._monitoringUnsubscribes=[]}function f(e,t,r,n){"function"==typeof e.addEventListener?e.addEventListener(t,r,n||!1):"function"==typeof e.attachEvent&&e.attachEvent("on"+t,r)}function h(e,t,r,n){"function"==typeof e.removeEventListener?e.removeEventListener(t,r,n||!1):"function"==typeof e.detatchEvent&&e.detatchEvent("on"+t,r)}function d(e){var rect;try{rect=e.getBoundingClientRect()}catch(e){}return rect?(rect.width&&rect.height||(rect={top:rect.top,right:rect.right,bottom:rect.bottom,left:rect.left,width:rect.right-rect.left,height:rect.bottom-rect.top}),rect):{top:0,bottom:0,left:0,right:0,width:0,height:0}}function m(rect){return!rect||"x"in rect?rect:{top:rect.top,y:rect.top,bottom:rect.bottom,left:rect.left,x:rect.left,right:rect.right,width:rect.width,height:rect.height}}function v(e,t){var r=t.top-e.top,n=t.left-e.left;return{top:r,left:n,height:t.height,width:t.width,bottom:r+t.height,right:n+t.width}}function _(e,t){for(var r=t;r;){if(r==e)return!0;r=y(r)}return!1}function y(t){var r=t.parentNode;return 9==t.nodeType&&t!=e?o(t):(r&&r.assignedSlot&&(r=r.assignedSlot.parentNode),r&&11==r.nodeType&&r.host?r.host:r)}function k(e){return e&&9===e.nodeType}}()},function(e,t,r){"use strict";(function(e){function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function o(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function c(e){return function(e){if(Array.isArray(e)){for(var i=0,t=new Array(e.length);i<e.length;i++)t[i]=e[i];return t}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function l(e,t){if(e===t)return!0;if("object"===n(e)){for(var r in e)if(!l(e[r],t[r]))return!1;return!0}return!1}r.d(t,"a",(function(){return m}));var f=function(){function e(t,r,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.el=t,this.observer=null,this.frozen=!1,this.createObserver(r,n)}var t,r,n;return t=e,(r=[{key:"createObserver",value:function(e,t){var r=this;if(this.observer&&this.destroyObserver(),!this.frozen){var n;if(this.options="function"==typeof(n=e)?{callback:n}:n,this.callback=function(e,t){r.options.callback(e,t),e&&r.options.once&&(r.frozen=!0,r.destroyObserver())},this.callback&&this.options.throttle){var o=(this.options.throttleOptions||{}).leading;this.callback=function(e,t){var r,n,o,l=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},f=function(f){for(var h=arguments.length,d=new Array(h>1?h-1:0),m=1;m<h;m++)d[m-1]=arguments[m];if(o=d,!r||f!==n){var v=l.leading;"function"==typeof v&&(v=v(f,n)),r&&f===n||!v||e.apply(void 0,[f].concat(c(o))),n=f,clearTimeout(r),r=setTimeout((function(){e.apply(void 0,[f].concat(c(o))),r=0}),t)}};return f._clear=function(){clearTimeout(r),r=null},f}(this.callback,this.options.throttle,{leading:function(e){return"both"===o||"visible"===o&&e||"hidden"===o&&!e}})}this.oldResult=void 0,this.observer=new IntersectionObserver((function(e){var t=e[0];if(e.length>1){var n=e.find((function(e){return e.isIntersecting}));n&&(t=n)}if(r.callback){var o=t.isIntersecting&&t.intersectionRatio>=r.threshold;if(o===r.oldResult)return;r.oldResult=o,r.callback(o,t)}}),this.options.intersection),t.context.$nextTick((function(){r.observer&&r.observer.observe(r.el)}))}}},{key:"destroyObserver",value:function(){this.observer&&(this.observer.disconnect(),this.observer=null),this.callback&&this.callback._clear&&(this.callback._clear(),this.callback=null)}},{key:"threshold",get:function(){return this.options.intersection&&"number"==typeof this.options.intersection.threshold?this.options.intersection.threshold:0}}])&&o(t.prototype,r),n&&o(t,n),e}();function h(e,t,r){var n=t.value;if(n)if("undefined"==typeof IntersectionObserver)console.warn("[vue-observe-visibility] IntersectionObserver API is not available in your browser. Please install this polyfill: https://github.com/w3c/IntersectionObserver/tree/master/polyfill");else{var o=new f(e,n,r);e._vue_visibilityState=o}}function d(e){var t=e._vue_visibilityState;t&&(t.destroyObserver(),delete e._vue_visibilityState)}var m={bind:h,update:function(e,t,r){var n=t.value;if(!l(n,t.oldValue)){var o=e._vue_visibilityState;n?o?o.createObserver(n,r):h(e,{value:n},r):d(e)}},unbind:d};var v={version:"1.0.0",install:function(e){e.directive("observe-visibility",m)}},_=null;"undefined"!=typeof window?_=window.Vue:void 0!==e&&(_=e.Vue),_&&_.use(v)}).call(this,r(44))},,function(e,t,r){"use strict";(function(e){r.d(t,"a",(function(){return h}));var n=r(0),o=r.n(n);function c(){return(c=Object.assign||function(e){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var t in source)Object.prototype.hasOwnProperty.call(source,t)&&(e[t]=source[t])}return e}).apply(this,arguments)}var l="navigator"in e&&/Win/i.test(navigator.platform),f="navigator"in e&&/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform),h=o.a.extend({props:{lineNumbers:{type:Boolean,default:!1},autoStyleLineNumbers:{type:Boolean,default:!0},readonly:{type:Boolean,default:!1},value:{type:String,default:""},highlight:{type:Function,required:!0},tabSize:{type:Number,default:2},insertSpaces:{type:Boolean,default:!0},ignoreTabKey:{type:Boolean,default:!1},placeholder:{type:String,default:""}},data:function(){return{capture:!0,history:{stack:[],offset:-1},lineNumbersHeight:"20px",codeData:""}},watch:{value:{immediate:!0,handler:function(e){this.codeData=e||""}},content:{immediate:!0,handler:function(){var e=this;this.lineNumbers&&this.$nextTick((function(){e.setLineNumbersHeight()}))}},lineNumbers:function(){var e=this;this.$nextTick((function(){e.styleLineNumbers(),e.setLineNumbersHeight()}))}},computed:{isEmpty:function(){return 0===this.codeData.length},content:function(){return this.highlight(this.codeData)+"<br />"},lineNumbersCount:function(){return this.codeData.split(/\r\n|\n/).length}},mounted:function(){this._recordCurrentState(),this.styleLineNumbers()},methods:{setLineNumbersHeight:function(){this.lineNumbersHeight=getComputedStyle(this.$refs.pre).height},styleLineNumbers:function(){if(this.lineNumbers&&this.autoStyleLineNumbers){var e=this.$refs.pre,t=this.$el.querySelector(".prism-editor__line-numbers"),r=window.getComputedStyle(e);this.$nextTick((function(){var n="border-top-left-radius",o="border-bottom-left-radius";if(t){t.style[n]=r[n],t.style[o]=r[o],e.style[n]="0",e.style[o]="0";["background-color","margin-top","padding-top","font-family","font-size","line-height"].forEach((function(style){t.style[style]=r[style]})),t.style["margin-bottom"]="-"+r["padding-top"]}}))}},_recordCurrentState:function(){var input=this.$refs.textarea;if(input){var e=input.value,t=input.selectionStart,r=input.selectionEnd;this._recordChange({value:e,selectionStart:t,selectionEnd:r})}},_getLines:function(text,e){return text.substring(0,e).split("\n")},_applyEdits:function(e){var input=this.$refs.textarea,t=this.history.stack[this.history.offset];t&&input&&(this.history.stack[this.history.offset]=c({},t,{selectionStart:input.selectionStart,selectionEnd:input.selectionEnd})),this._recordChange(e),this._updateInput(e)},_recordChange:function(e,t){void 0===t&&(t=!1);var r=this.history,n=r.stack,o=r.offset;if(n.length&&o>-1){this.history.stack=n.slice(0,o+1);var l=this.history.stack.length;if(l>100){var f=l-100;this.history.stack=n.slice(f,l),this.history.offset=Math.max(this.history.offset-f,0)}}var h=Date.now();if(t){var d=this.history.stack[this.history.offset];if(d&&h-d.timestamp<3e3){var m,v,_=/[^a-z0-9]([a-z0-9]+)$/i,y=null===(m=this._getLines(d.value,d.selectionStart).pop())||void 0===m?void 0:m.match(_),k=null===(v=this._getLines(e.value,e.selectionStart).pop())||void 0===v?void 0:v.match(_);if(y&&k&&k[1].startsWith(y[1]))return void(this.history.stack[this.history.offset]=c({},e,{timestamp:h}))}}this.history.stack.push(c({},e,{timestamp:h})),this.history.offset++},_updateInput:function(e){var input=this.$refs.textarea;input&&(input.value=e.value,input.selectionStart=e.selectionStart,input.selectionEnd=e.selectionEnd,this.$emit("input",e.value))},handleChange:function(e){var t=e.target,r=t.value,n=t.selectionStart,o=t.selectionEnd;this._recordChange({value:r,selectionStart:n,selectionEnd:o},!0),this.$emit("input",r)},_undoEdit:function(){var e=this.history,t=e.stack,r=e.offset,n=t[r-1];n&&(this._updateInput(n),this.history.offset=Math.max(r-1,0))},_redoEdit:function(){var e=this.history,t=e.stack,r=e.offset,n=t[r+1];n&&(this._updateInput(n),this.history.offset=Math.min(r+1,t.length-1))},handleKeyDown:function(e){var t=this.tabSize,r=this.insertSpaces,n=this.ignoreTabKey;if(!this.$listeners.keydown||(this.$emit("keydown",e),!e.defaultPrevented)){27===e.keyCode&&(e.target.blur(),this.$emit("blur",e));var o=e.target,c=o.value,h=o.selectionStart,d=o.selectionEnd,m=(r?" ":"\t").repeat(t);if(9===e.keyCode&&!n&&this.capture)if(e.preventDefault(),e.shiftKey){var v=this._getLines(c,h),_=v.length-1,y=this._getLines(c,d).length-1,k=c.split("\n").map((function(line,i){return i>=_&&i<=y&&line.startsWith(m)?line.substring(m.length):line})).join("\n");if(c!==k){var w=v[_];this._applyEdits({value:k,selectionStart:w.startsWith(m)?h-m.length:h,selectionEnd:d-(c.length-k.length)})}}else if(h!==d){var x=this._getLines(c,h),A=x.length-1,C=this._getLines(c,d).length-1,E=x[A];this._applyEdits({value:c.split("\n").map((function(line,i){return i>=A&&i<=C?m+line:line})).join("\n"),selectionStart:/\S/.test(E)?h+m.length:h,selectionEnd:d+m.length*(C-A+1)})}else{var F=h+m.length;this._applyEdits({value:c.substring(0,h)+m+c.substring(d),selectionStart:F,selectionEnd:F})}else if(8===e.keyCode){var S=h!==d;if(c.substring(0,h).endsWith(m)&&!S){e.preventDefault();var D=h-m.length;this._applyEdits({value:c.substring(0,h-m.length)+c.substring(d),selectionStart:D,selectionEnd:D})}}else if(13===e.keyCode){if(h===d){var line=this._getLines(c,h).pop(),T=null==line?void 0:line.match(/^\s+/);if(T&&T[0]){e.preventDefault();var z="\n"+T[0],L=h+z.length;this._applyEdits({value:c.substring(0,h)+z+c.substring(d),selectionStart:L,selectionEnd:L})}}}else if(57===e.keyCode||219===e.keyCode||222===e.keyCode||192===e.keyCode){var O;57===e.keyCode&&e.shiftKey?O=["(",")"]:219===e.keyCode?O=e.shiftKey?["{","}"]:["[","]"]:222===e.keyCode?O=e.shiftKey?['"','"']:["'","'"]:192!==e.keyCode||e.shiftKey||(O=["`","`"]),h!==d&&O&&(e.preventDefault(),this._applyEdits({value:c.substring(0,h)+O[0]+c.substring(h,d)+O[1]+c.substring(d),selectionStart:h,selectionEnd:d+2}))}else!(f?e.metaKey&&90===e.keyCode:e.ctrlKey&&90===e.keyCode)||e.shiftKey||e.altKey?(f?e.metaKey&&90===e.keyCode&&e.shiftKey:l?e.ctrlKey&&89===e.keyCode:e.ctrlKey&&90===e.keyCode&&e.shiftKey)&&!e.altKey?(e.preventDefault(),this._redoEdit()):77!==e.keyCode||!e.ctrlKey||f&&!e.shiftKey||(e.preventDefault(),this.capture=!this.capture):(e.preventDefault(),this._undoEdit())}}},render:function(e){var t=this,r=e("div",{attrs:{class:"prism-editor__line-width-calc",style:"height: 0px; visibility: hidden; pointer-events: none;"}},"999"),n=e("div",{staticClass:"prism-editor__line-numbers",style:{"min-height":this.lineNumbersHeight},attrs:{"aria-hidden":"true"}},[r,Array.from(Array(this.lineNumbersCount).keys()).map((function(t,r){return e("div",{attrs:{class:"prism-editor__line-number token comment"}},""+ ++r)}))]),textarea=e("textarea",{ref:"textarea",on:{input:this.handleChange,keydown:this.handleKeyDown,click:function(e){t.$emit("click",e)},keyup:function(e){t.$emit("keyup",e)},focus:function(e){t.$emit("focus",e)},blur:function(e){t.$emit("blur",e)}},staticClass:"prism-editor__textarea",class:{"prism-editor__textarea--empty":this.isEmpty},attrs:{spellCheck:"false",autocapitalize:"off",autocomplete:"off",autocorrect:"off","data-gramm":"false",placeholder:this.placeholder,"data-testid":"textarea",readonly:this.readonly},domProps:{value:this.codeData}}),o=e("pre",{ref:"pre",staticClass:"prism-editor__editor",attrs:{"data-testid":"preview"},domProps:{innerHTML:this.content}}),c=e("div",{staticClass:"prism-editor__container"},[textarea,o]);return e("div",{staticClass:"prism-editor-wrapper"},[this.lineNumbers&&n,c])}})}).call(this,r(44))},function(e,t,r){e.exports={}},function(e,t,r){(function(t){var r=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,r=0,n={},o={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof c?new c(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++r}),e.__id},clone:function e(t,r){var n,c;switch(r=r||{},o.util.type(t)){case"Object":if(c=o.util.objId(t),r[c])return r[c];for(var l in n={},r[c]=n,t)t.hasOwnProperty(l)&&(n[l]=e(t[l],r));return n;case"Array":return c=o.util.objId(t),r[c]?r[c]:(n=[],r[c]=n,t.forEach((function(t,i){n[i]=e(t,r)})),n);default:return t}},getLanguage:function(element){for(;element&&!t.test(element.className);)element=element.parentElement;return element?(element.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(r.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var i in t)if(t[i].src==e)return t[i]}return null}},isActive:function(element,e,t){for(var r="no-"+e;element;){var n=element.classList;if(n.contains(e))return!0;if(n.contains(r))return!1;element=element.parentElement}return!!t}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var r=o.util.clone(o.languages[e]);for(var n in t)r[n]=t[n];return r},insertBefore:function(e,t,r,n){var c=(n=n||o.languages)[e],l={};for(var f in c)if(c.hasOwnProperty(f)){if(f==t)for(var h in r)r.hasOwnProperty(h)&&(l[h]=r[h]);r.hasOwnProperty(f)||(l[f]=c[f])}var d=n[e];return n[e]=l,o.languages.DFS(o.languages,(function(t,r){r===d&&t!=e&&(this[t]=l)})),l},DFS:function e(t,r,n,c){c=c||{};var l=o.util.objId;for(var i in t)if(t.hasOwnProperty(i)){r.call(t,i,t[i],n||i);var f=t[i],h=o.util.type(f);"Object"!==h||c[l(f)]?"Array"!==h||c[l(f)]||(c[l(f)]=!0,e(f,r,i,c)):(c[l(f)]=!0,e(f,r,null,c))}}},plugins:{},highlightAll:function(e,t){o.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var n={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};o.hooks.run("before-highlightall",n),n.elements=Array.prototype.slice.apply(n.container.querySelectorAll(n.selector)),o.hooks.run("before-all-elements-highlight",n);for(var element,i=0;element=n.elements[i++];)o.highlightElement(element,!0===t,n.callback)},highlightElement:function(element,r,n){var c=o.util.getLanguage(element),l=o.languages[c];element.className=element.className.replace(t,"").replace(/\s+/g," ")+" language-"+c;var f=element.parentElement;f&&"pre"===f.nodeName.toLowerCase()&&(f.className=f.className.replace(t,"").replace(/\s+/g," ")+" language-"+c);var h={element:element,language:c,grammar:l,code:element.textContent};function d(e){h.highlightedCode=e,o.hooks.run("before-insert",h),h.element.innerHTML=h.highlightedCode,o.hooks.run("after-highlight",h),o.hooks.run("complete",h),n&&n.call(h.element)}if(o.hooks.run("before-sanity-check",h),(f=h.element.parentElement)&&"pre"===f.nodeName.toLowerCase()&&!f.hasAttribute("tabindex")&&f.setAttribute("tabindex","0"),!h.code)return o.hooks.run("complete",h),void(n&&n.call(h.element));if(o.hooks.run("before-highlight",h),h.grammar)if(r&&e.Worker){var m=new Worker(o.filename);m.onmessage=function(e){d(e.data)},m.postMessage(JSON.stringify({language:h.language,code:h.code,immediateClose:!0}))}else d(o.highlight(h.code,h.grammar,h.language));else d(o.util.encode(h.code))},highlight:function(text,e,t){var r={code:text,grammar:e,language:t};return o.hooks.run("before-tokenize",r),r.tokens=o.tokenize(r.code,r.grammar),o.hooks.run("after-tokenize",r),c.stringify(o.util.encode(r.tokens),r.language)},tokenize:function(text,e){var t=e.rest;if(t){for(var r in t)e[r]=t[r];delete e.rest}var n=new h;return d(n,n.head,text),f(text,n,e,n.head,0),function(e){var t=[],r=e.head.next;for(;r!==e.tail;)t.push(r.value),r=r.next;return t}(n)},hooks:{all:{},add:function(e,t){var r=o.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=o.hooks.all[e];if(r&&r.length)for(var n,i=0;n=r[i++];)n(t)}},Token:c};function c(e,content,t,r){this.type=e,this.content=content,this.alias=t,this.length=0|(r||"").length}function l(pattern,e,text,t){pattern.lastIndex=e;var r=pattern.exec(text);if(r&&t&&r[1]){var n=r[1].length;r.index+=n,r[0]=r[0].slice(n)}return r}function f(text,e,t,r,n,h){for(var v in t)if(t.hasOwnProperty(v)&&t[v]){var _=t[v];_=Array.isArray(_)?_:[_];for(var y=0;y<_.length;++y){if(h&&h.cause==v+","+y)return;var k=_[y],w=k.inside,x=!!k.lookbehind,A=!!k.greedy,C=k.alias;if(A&&!k.pattern.global){var E=k.pattern.toString().match(/[imsuy]*$/)[0];k.pattern=RegExp(k.pattern.source,E+"g")}for(var pattern=k.pattern||k,F=r.next,S=n;F!==e.tail&&!(h&&S>=h.reach);S+=F.value.length,F=F.next){var D=F.value;if(e.length>text.length)return;if(!(D instanceof c)){var T,z=1;if(A){if(!(T=l(pattern,S,text,x)))break;var L=T.index,O=T.index+T[0].length,p=S;for(p+=F.value.length;L>=p;)p+=(F=F.next).value.length;if(S=p-=F.value.length,F.value instanceof c)continue;for(var I=F;I!==e.tail&&(p<O||"string"==typeof I.value);I=I.next)z++,p+=I.value.length;z--,D=text.slice(S,p),T.index-=S}else if(!(T=l(pattern,0,D,x)))continue;L=T.index;var $=T[0],P=D.slice(0,L),j=D.slice(L+$.length),R=S+D.length;h&&R>h.reach&&(h.reach=R);var M=F.prev;if(P&&(M=d(e,M,P),S+=P.length),m(e,M,z),F=d(e,M,new c(v,w?o.tokenize($,w):$,C,$)),j&&d(e,F,j),z>1){var N={cause:v+","+y,reach:R};f(text,e,t,F.prev,S,N),h&&N.reach>h.reach&&(h.reach=N.reach)}}}}}}function h(){var head={value:null,prev:null,next:null},e={value:null,prev:head,next:null};head.next=e,this.head=head,this.tail=e,this.length=0}function d(e,t,r){var n=t.next,o={value:r,prev:t,next:n};return t.next=o,n.prev=o,e.length++,o}function m(e,t,r){for(var n=t.next,i=0;i<r&&n!==e.tail;i++)n=n.next;t.next=n,n.prev=t,e.length-=i}if(e.Prism=o,c.stringify=function e(t,r){if("string"==typeof t)return t;if(Array.isArray(t)){var s="";return t.forEach((function(t){s+=e(t,r)})),s}var n={type:t.type,content:e(t.content,r),tag:"span",classes:["token",t.type],attributes:{},language:r},c=t.alias;c&&(Array.isArray(c)?Array.prototype.push.apply(n.classes,c):n.classes.push(c)),o.hooks.run("wrap",n);var l="";for(var f in n.attributes)l+=" "+f+'="'+(n.attributes[f]||"").replace(/"/g,""")+'"';return"<"+n.tag+' class="'+n.classes.join(" ")+'"'+l+">"+n.content+"</"+n.tag+">"},!e.document)return e.addEventListener?(o.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var r=JSON.parse(t.data),n=r.language,code=r.code,c=r.immediateClose;e.postMessage(o.highlight(code,o.languages[n],n)),c&&e.close()}),!1),o):o;var script=o.util.currentScript();function v(){o.manual||o.highlightAll()}if(script&&(o.filename=script.src,script.hasAttribute("data-manual")&&(o.manual=!0)),!o.manual){var _=document.readyState;"loading"===_||"interactive"===_&&script&&script.defer?document.addEventListener("DOMContentLoaded",v):window.requestAnimationFrame?window.requestAnimationFrame(v):window.setTimeout(v,16)}return o}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=r),void 0!==t&&(t.Prism=r)}).call(this,r(44))},function(e,t,r){"use strict";r.d(t,"a",(function(){return d})),r.d(t,"b",(function(){return m}));var n=null;var o=null;function c(e,t){void 0===t&&(t={});var r=document.createElement(e);return Object.keys(t).forEach((function(e){r[e]=t[e]})),r}function l(e,t,r){return(window.getComputedStyle(e,r||null)||{display:"none"})[t]}function f(e){if(!document.documentElement.contains(e))return{detached:!0,rendered:!1};for(var t=e;t!==document;){if("none"===l(t,"display"))return{detached:!1,rendered:!1};t=t.parentNode}return{detached:!1,rendered:!0}}var h=0,style=null;function d(e,t){if(e.__resize_mutation_handler__||(e.__resize_mutation_handler__=v.bind(e)),!e.__resize_listeners__)if(e.__resize_listeners__=[],window.ResizeObserver){var r=e.offsetWidth,n=e.offsetHeight,o=new ResizeObserver((function(){(e.__resize_observer_triggered__||(e.__resize_observer_triggered__=!0,e.offsetWidth!==r||e.offsetHeight!==n))&&y(e)})),d=f(e),m=d.detached,w=d.rendered;e.__resize_observer_triggered__=!1===m&&!1===w,e.__resize_observer__=o,o.observe(e)}else if(e.attachEvent&&e.addEventListener)e.__resize_legacy_resize_handler__=function(){y(e)},e.attachEvent("onresize",e.__resize_legacy_resize_handler__),document.addEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);else if(h||(style=function(e){var style=document.createElement("style");return style.styleSheet?style.styleSheet.cssText=e:style.appendChild(document.createTextNode(e)),(document.querySelector("head")||document.body).appendChild(style),style}('.resize-triggers{visibility:hidden;opacity:0;pointer-events:none}.resize-contract-trigger,.resize-contract-trigger:before,.resize-expand-trigger,.resize-triggers{content:"";position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden}.resize-contract-trigger,.resize-expand-trigger{background:#eee;overflow:auto}.resize-contract-trigger:before{width:200%;height:200%}')),function(e){var t=l(e,"position");t&&"static"!==t||(e.style.position="relative");e.__resize_old_position__=t,e.__resize_last__={};var r=c("div",{className:"resize-triggers"}),n=c("div",{className:"resize-expand-trigger"}),o=c("div"),f=c("div",{className:"resize-contract-trigger"});n.appendChild(o),r.appendChild(n),r.appendChild(f),e.appendChild(r),e.__resize_triggers__={triggers:r,expand:n,expandChild:o,contract:f},k(e),e.addEventListener("scroll",_,!0),e.__resize_last__={width:e.offsetWidth,height:e.offsetHeight}}(e),e.__resize_rendered__=f(e).rendered,window.MutationObserver){var x=new MutationObserver(e.__resize_mutation_handler__);x.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0}),e.__resize_mutation_observer__=x}e.__resize_listeners__.push(t),h++}function m(e,t){var r=e.__resize_listeners__;if(r){if(t&&r.splice(r.indexOf(t),1),!r.length||!t){if(e.detachEvent&&e.removeEventListener)return e.detachEvent("onresize",e.__resize_legacy_resize_handler__),void document.removeEventListener("DOMSubtreeModified",e.__resize_mutation_handler__);e.__resize_observer__?(e.__resize_observer__.unobserve(e),e.__resize_observer__.disconnect(),e.__resize_observer__=null):(e.__resize_mutation_observer__&&(e.__resize_mutation_observer__.disconnect(),e.__resize_mutation_observer__=null),e.removeEventListener("scroll",_),e.removeChild(e.__resize_triggers__.triggers),e.__resize_triggers__=null),e.__resize_listeners__=null}!--h&&style&&style.parentNode.removeChild(style)}}function v(){var e=f(this),t=e.rendered,r=e.detached;t!==this.__resize_rendered__&&(!r&&this.__resize_triggers__&&(k(this),this.addEventListener("scroll",_,!0)),this.__resize_rendered__=t,y(this))}function _(){var e,t,r=this;k(this),this.__resize_raf__&&(e=this.__resize_raf__,o||(o=(window.cancelAnimationFrame||window.webkitCancelAnimationFrame||window.mozCancelAnimationFrame||function(e){clearTimeout(e)}).bind(window)),o(e)),this.__resize_raf__=(t=function(){var e,t,n,o,c,l,f=(t=(e=r).__resize_last__,n=t.width,o=t.height,c=e.offsetWidth,l=e.offsetHeight,c!==n||l!==o?{width:c,height:l}:null);f&&(r.__resize_last__=f,y(r))},n||(n=(window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(e){return setTimeout(e,16)}).bind(window)),n(t))}function y(e){e&&e.__resize_listeners__&&e.__resize_listeners__.forEach((function(t){t.call(e,e)}))}function k(e){var t=e.__resize_triggers__,r=t.expand,n=t.expandChild,o=t.contract,c=o.scrollWidth,l=o.scrollHeight,f=r.offsetWidth,h=r.offsetHeight,d=r.scrollWidth,m=r.scrollHeight;o.scrollLeft=c,o.scrollTop=l,n.style.width=f+1+"px",n.style.height=h+1+"px",r.scrollLeft=d,r.scrollTop=m}},function(e,t,r){var n=r(196),o=r(219),c=r(221),l=Math.max,f=Math.min;e.exports=function(e,t,r){var h,d,m,v,_,y,k=0,w=!1,x=!1,A=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function C(time){var t=h,r=d;return h=d=void 0,k=time,v=e.apply(r,t)}function E(time){return k=time,_=setTimeout(S,t),w?C(time):v}function F(time){var e=time-y;return void 0===y||e>=t||e<0||x&&time-k>=m}function S(){var time=o();if(F(time))return D(time);_=setTimeout(S,function(time){var e=t-(time-y);return x?f(e,m-(time-k)):e}(time))}function D(time){return _=void 0,A&&h?C(time):(h=d=void 0,v)}function T(){var time=o(),e=F(time);if(h=arguments,d=this,y=time,e){if(void 0===_)return E(y);if(x)return clearTimeout(_),_=setTimeout(S,t),C(y)}return void 0===_&&(_=setTimeout(S,t)),v}return t=c(t)||0,n(r)&&(w=!!r.leading,m=(x="maxWait"in r)?l(c(r.maxWait)||0,t):m,A="trailing"in r?!!r.trailing:A),T.cancel=function(){void 0!==_&&clearTimeout(_),k=0,h=y=d=_=void 0},T.flush=function(){return void 0===_?v:D(o())},T}},function(e,t,r){var n=r(197);e.exports=function(){return n.Date.now()}},function(e,t,r){(function(t){var r="object"==typeof t&&t&&t.Object===Object&&t;e.exports=r}).call(this,r(44))},function(e,t,r){var n=r(222),o=r(196),c=r(224),l=/^[-+]0x[0-9a-f]+$/i,f=/^0b[01]+$/i,h=/^0o[0-7]+$/i,d=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(c(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=n(e);var r=f.test(e);return r||h.test(e)?d(e.slice(2),r?2:8):l.test(e)?NaN:+e}},function(e,t,r){var n=r(223),o=/^\s+/;e.exports=function(e){return e?e.slice(0,n(e)+1).replace(o,""):e}},function(e,t){var r=/\s/;e.exports=function(e){for(var t=e.length;t--&&r.test(e.charAt(t)););return t}},function(e,t,r){var n=r(225),o=r(228);e.exports=function(e){return"symbol"==typeof e||o(e)&&"[object Symbol]"==n(e)}},function(e,t,r){var n=r(198),o=r(226),c=r(227),l=n?n.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":l&&l in Object(e)?o(e):c(e)}},function(e,t,r){var n=r(198),o=Object.prototype,c=o.hasOwnProperty,l=o.toString,f=n?n.toStringTag:void 0;e.exports=function(e){var t=c.call(e,f),r=e[f];try{e[f]=void 0;var n=!0}catch(e){}var o=l.call(e);return n&&(t?e[f]=r:delete e[f]),o}},function(e,t){var r=Object.prototype.toString;e.exports=function(e){return r.call(e)}},function(e,t){e.exports=function(e){return null!=e&&"object"==typeof e}},function(e,t,r){var n;n=function(){return function(){var e={134:function(e,t,r){"use strict";r.d(t,{default:function(){return E}});var n=r(279),o=r.n(n),c=r(370),l=r.n(c),f=r(817),h=r.n(f);function d(e){return(d="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function m(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}var v=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.resolveOptions(t),this.initSelection()}var t,r,n;return t=e,(r=[{key:"resolveOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action=e.action,this.container=e.container,this.emitter=e.emitter,this.target=e.target,this.text=e.text,this.trigger=e.trigger,this.selectedText=""}},{key:"initSelection",value:function(){this.text?this.selectFake():this.target&&this.selectTarget()}},{key:"createFakeElement",value:function(){var e="rtl"===document.documentElement.getAttribute("dir");this.fakeElem=document.createElement("textarea"),this.fakeElem.style.fontSize="12pt",this.fakeElem.style.border="0",this.fakeElem.style.padding="0",this.fakeElem.style.margin="0",this.fakeElem.style.position="absolute",this.fakeElem.style[e?"right":"left"]="-9999px";var t=window.pageYOffset||document.documentElement.scrollTop;return this.fakeElem.style.top="".concat(t,"px"),this.fakeElem.setAttribute("readonly",""),this.fakeElem.value=this.text,this.fakeElem}},{key:"selectFake",value:function(){var e=this,t=this.createFakeElement();this.fakeHandlerCallback=function(){return e.removeFake()},this.fakeHandler=this.container.addEventListener("click",this.fakeHandlerCallback)||!0,this.container.appendChild(t),this.selectedText=h()(t),this.copyText(),this.removeFake()}},{key:"removeFake",value:function(){this.fakeHandler&&(this.container.removeEventListener("click",this.fakeHandlerCallback),this.fakeHandler=null,this.fakeHandlerCallback=null),this.fakeElem&&(this.container.removeChild(this.fakeElem),this.fakeElem=null)}},{key:"selectTarget",value:function(){this.selectedText=h()(this.target),this.copyText()}},{key:"copyText",value:function(){var e;try{e=document.execCommand(this.action)}catch(t){e=!1}this.handleResult(e)}},{key:"handleResult",value:function(e){this.emitter.emit(e?"success":"error",{action:this.action,text:this.selectedText,trigger:this.trigger,clearSelection:this.clearSelection.bind(this)})}},{key:"clearSelection",value:function(){this.trigger&&this.trigger.focus(),document.activeElement.blur(),window.getSelection().removeAllRanges()}},{key:"destroy",value:function(){this.removeFake()}},{key:"action",set:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"copy";if(this._action=e,"copy"!==this._action&&"cut"!==this._action)throw new Error('Invalid "action" value, use either "copy" or "cut"')},get:function(){return this._action}},{key:"target",set:function(e){if(void 0!==e){if(!e||"object"!==d(e)||1!==e.nodeType)throw new Error('Invalid "target" value, use a valid Element');if("copy"===this.action&&e.hasAttribute("disabled"))throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');if("cut"===this.action&&(e.hasAttribute("readonly")||e.hasAttribute("disabled")))throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');this._target=e}},get:function(){return this._target}}])&&m(t.prototype,r),n&&m(t,n),e}();function _(e){return(_="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function y(e,t){for(var i=0;i<t.length;i++){var r=t[i];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function k(e,p){return(k=Object.setPrototypeOf||function(e,p){return e.__proto__=p,e})(e,p)}function w(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=A(e);if(t){var o=A(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return x(this,r)}}function x(e,t){return!t||"object"!==_(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function A(e){return(A=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function C(e,element){var t="data-clipboard-".concat(e);if(element.hasAttribute(t))return element.getAttribute(t)}var E=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&k(e,t)}(c,e);var t,r,n,o=w(c);function c(e,t){var r;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,c),(r=o.call(this)).resolveOptions(t),r.listenClick(e),r}return t=c,n=[{key:"isSupported",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:["copy","cut"],t="string"==typeof e?[e]:e,r=!!document.queryCommandSupported;return t.forEach((function(e){r=r&&!!document.queryCommandSupported(e)})),r}}],(r=[{key:"resolveOptions",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.action="function"==typeof e.action?e.action:this.defaultAction,this.target="function"==typeof e.target?e.target:this.defaultTarget,this.text="function"==typeof e.text?e.text:this.defaultText,this.container="object"===_(e.container)?e.container:document.body}},{key:"listenClick",value:function(e){var t=this;this.listener=l()(e,"click",(function(e){return t.onClick(e)}))}},{key:"onClick",value:function(e){var t=e.delegateTarget||e.currentTarget;this.clipboardAction&&(this.clipboardAction=null),this.clipboardAction=new v({action:this.action(t),target:this.target(t),text:this.text(t),container:this.container,trigger:t,emitter:this})}},{key:"defaultAction",value:function(e){return C("action",e)}},{key:"defaultTarget",value:function(e){var t=C("target",e);if(t)return document.querySelector(t)}},{key:"defaultText",value:function(e){return C("text",e)}},{key:"destroy",value:function(){this.listener.destroy(),this.clipboardAction&&(this.clipboardAction.destroy(),this.clipboardAction=null)}}])&&y(t.prototype,r),n&&y(t,n),c}(o())},828:function(e){if("undefined"!=typeof Element&&!Element.prototype.matches){var t=Element.prototype;t.matches=t.matchesSelector||t.mozMatchesSelector||t.msMatchesSelector||t.oMatchesSelector||t.webkitMatchesSelector}e.exports=function(element,e){for(;element&&9!==element.nodeType;){if("function"==typeof element.matches&&element.matches(e))return element;element=element.parentNode}}},438:function(e,t,r){var n=r(828);function o(element,e,t,r,n){var o=c.apply(this,arguments);return element.addEventListener(t,o,n),{destroy:function(){element.removeEventListener(t,o,n)}}}function c(element,e,t,r){return function(t){t.delegateTarget=n(t.target,e),t.delegateTarget&&r.call(element,t)}}e.exports=function(e,t,r,n,c){return"function"==typeof e.addEventListener?o.apply(null,arguments):"function"==typeof r?o.bind(null,document).apply(null,arguments):("string"==typeof e&&(e=document.querySelectorAll(e)),Array.prototype.map.call(e,(function(element){return o(element,t,r,n,c)})))}},879:function(e,t){t.node=function(e){return void 0!==e&&e instanceof HTMLElement&&1===e.nodeType},t.nodeList=function(e){var r=Object.prototype.toString.call(e);return void 0!==e&&("[object NodeList]"===r||"[object HTMLCollection]"===r)&&"length"in e&&(0===e.length||t.node(e[0]))},t.string=function(e){return"string"==typeof e||e instanceof String},t.fn=function(e){return"[object Function]"===Object.prototype.toString.call(e)}},370:function(e,t,r){var n=r(879),o=r(438);e.exports=function(e,t,r){if(!e&&!t&&!r)throw new Error("Missing required arguments");if(!n.string(t))throw new TypeError("Second argument must be a String");if(!n.fn(r))throw new TypeError("Third argument must be a Function");if(n.node(e))return function(e,t,r){return e.addEventListener(t,r),{destroy:function(){e.removeEventListener(t,r)}}}(e,t,r);if(n.nodeList(e))return function(e,t,r){return Array.prototype.forEach.call(e,(function(e){e.addEventListener(t,r)})),{destroy:function(){Array.prototype.forEach.call(e,(function(e){e.removeEventListener(t,r)}))}}}(e,t,r);if(n.string(e))return function(e,t,r){return o(document.body,e,t,r)}(e,t,r);throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")}},817:function(e){e.exports=function(element){var e;if("SELECT"===element.nodeName)element.focus(),e=element.value;else if("INPUT"===element.nodeName||"TEXTAREA"===element.nodeName){var t=element.hasAttribute("readonly");t||element.setAttribute("readonly",""),element.select(),element.setSelectionRange(0,element.value.length),t||element.removeAttribute("readonly"),e=element.value}else{element.hasAttribute("contenteditable")&&element.focus();var r=window.getSelection(),n=document.createRange();n.selectNodeContents(element),r.removeAllRanges(),r.addRange(n),e=r.toString()}return e}},279:function(e){function t(){}t.prototype={on:function(e,t,r){var n=this.e||(this.e={});return(n[e]||(n[e]=[])).push({fn:t,ctx:r}),this},once:function(e,t,r){var n=this;function o(){n.off(e,o),t.apply(r,arguments)}return o._=t,this.on(e,o,r)},emit:function(e){for(var data=[].slice.call(arguments,1),t=((this.e||(this.e={}))[e]||[]).slice(),i=0,r=t.length;i<r;i++)t[i].fn.apply(t[i].ctx,data);return this},off:function(e,t){var r=this.e||(this.e={}),n=r[e],o=[];if(n&&t)for(var i=0,c=n.length;i<c;i++)n[i].fn!==t&&n[i].fn._!==t&&o.push(n[i]);return o.length?r[e]=o:delete r[e],this}},e.exports=t,e.exports.TinyEmitter=t}},t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={exports:{}};return e[n](o,o.exports,r),o.exports}return r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,{a:t}),t},r.d=function(e,t){for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r(134)}().default},e.exports=n()},,,function(e,t,r){(function(t){var r=function(e){var t=/\blang(?:uage)?-([\w-]+)\b/i,r=0,n={},o={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof c?new c(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++r}),e.__id},clone:function e(t,r){var n,c;switch(r=r||{},o.util.type(t)){case"Object":if(c=o.util.objId(t),r[c])return r[c];for(var l in n={},r[c]=n,t)t.hasOwnProperty(l)&&(n[l]=e(t[l],r));return n;case"Array":return c=o.util.objId(t),r[c]?r[c]:(n=[],r[c]=n,t.forEach((function(t,i){n[i]=e(t,r)})),n);default:return t}},getLanguage:function(element){for(;element&&!t.test(element.className);)element=element.parentElement;return element?(element.className.match(t)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(r){var e=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(r.stack)||[])[1];if(e){var t=document.getElementsByTagName("script");for(var i in t)if(t[i].src==e)return t[i]}return null}},isActive:function(element,e,t){for(var r="no-"+e;element;){var n=element.classList;if(n.contains(e))return!0;if(n.contains(r))return!1;element=element.parentElement}return!!t}},languages:{plain:n,plaintext:n,text:n,txt:n,extend:function(e,t){var r=o.util.clone(o.languages[e]);for(var n in t)r[n]=t[n];return r},insertBefore:function(e,t,r,n){var c=(n=n||o.languages)[e],l={};for(var f in c)if(c.hasOwnProperty(f)){if(f==t)for(var h in r)r.hasOwnProperty(h)&&(l[h]=r[h]);r.hasOwnProperty(f)||(l[f]=c[f])}var d=n[e];return n[e]=l,o.languages.DFS(o.languages,(function(t,r){r===d&&t!=e&&(this[t]=l)})),l},DFS:function e(t,r,n,c){c=c||{};var l=o.util.objId;for(var i in t)if(t.hasOwnProperty(i)){r.call(t,i,t[i],n||i);var f=t[i],h=o.util.type(f);"Object"!==h||c[l(f)]?"Array"!==h||c[l(f)]||(c[l(f)]=!0,e(f,r,i,c)):(c[l(f)]=!0,e(f,r,null,c))}}},plugins:{},highlightAll:function(e,t){o.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,r){var n={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};o.hooks.run("before-highlightall",n),n.elements=Array.prototype.slice.apply(n.container.querySelectorAll(n.selector)),o.hooks.run("before-all-elements-highlight",n);for(var element,i=0;element=n.elements[i++];)o.highlightElement(element,!0===t,n.callback)},highlightElement:function(element,r,n){var c=o.util.getLanguage(element),l=o.languages[c];element.className=element.className.replace(t,"").replace(/\s+/g," ")+" language-"+c;var f=element.parentElement;f&&"pre"===f.nodeName.toLowerCase()&&(f.className=f.className.replace(t,"").replace(/\s+/g," ")+" language-"+c);var h={element:element,language:c,grammar:l,code:element.textContent};function d(e){h.highlightedCode=e,o.hooks.run("before-insert",h),h.element.innerHTML=h.highlightedCode,o.hooks.run("after-highlight",h),o.hooks.run("complete",h),n&&n.call(h.element)}if(o.hooks.run("before-sanity-check",h),(f=h.element.parentElement)&&"pre"===f.nodeName.toLowerCase()&&!f.hasAttribute("tabindex")&&f.setAttribute("tabindex","0"),!h.code)return o.hooks.run("complete",h),void(n&&n.call(h.element));if(o.hooks.run("before-highlight",h),h.grammar)if(r&&e.Worker){var m=new Worker(o.filename);m.onmessage=function(e){d(e.data)},m.postMessage(JSON.stringify({language:h.language,code:h.code,immediateClose:!0}))}else d(o.highlight(h.code,h.grammar,h.language));else d(o.util.encode(h.code))},highlight:function(text,e,t){var r={code:text,grammar:e,language:t};return o.hooks.run("before-tokenize",r),r.tokens=o.tokenize(r.code,r.grammar),o.hooks.run("after-tokenize",r),c.stringify(o.util.encode(r.tokens),r.language)},tokenize:function(text,e){var t=e.rest;if(t){for(var r in t)e[r]=t[r];delete e.rest}var n=new h;return d(n,n.head,text),f(text,n,e,n.head,0),function(e){var t=[],r=e.head.next;for(;r!==e.tail;)t.push(r.value),r=r.next;return t}(n)},hooks:{all:{},add:function(e,t){var r=o.hooks.all;r[e]=r[e]||[],r[e].push(t)},run:function(e,t){var r=o.hooks.all[e];if(r&&r.length)for(var n,i=0;n=r[i++];)n(t)}},Token:c};function c(e,content,t,r){this.type=e,this.content=content,this.alias=t,this.length=0|(r||"").length}function l(pattern,e,text,t){pattern.lastIndex=e;var r=pattern.exec(text);if(r&&t&&r[1]){var n=r[1].length;r.index+=n,r[0]=r[0].slice(n)}return r}function f(text,e,t,r,n,h){for(var v in t)if(t.hasOwnProperty(v)&&t[v]){var _=t[v];_=Array.isArray(_)?_:[_];for(var y=0;y<_.length;++y){if(h&&h.cause==v+","+y)return;var k=_[y],w=k.inside,x=!!k.lookbehind,A=!!k.greedy,C=k.alias;if(A&&!k.pattern.global){var E=k.pattern.toString().match(/[imsuy]*$/)[0];k.pattern=RegExp(k.pattern.source,E+"g")}for(var pattern=k.pattern||k,F=r.next,S=n;F!==e.tail&&!(h&&S>=h.reach);S+=F.value.length,F=F.next){var D=F.value;if(e.length>text.length)return;if(!(D instanceof c)){var T,z=1;if(A){if(!(T=l(pattern,S,text,x)))break;var L=T.index,O=T.index+T[0].length,p=S;for(p+=F.value.length;L>=p;)p+=(F=F.next).value.length;if(S=p-=F.value.length,F.value instanceof c)continue;for(var I=F;I!==e.tail&&(p<O||"string"==typeof I.value);I=I.next)z++,p+=I.value.length;z--,D=text.slice(S,p),T.index-=S}else if(!(T=l(pattern,0,D,x)))continue;L=T.index;var $=T[0],P=D.slice(0,L),j=D.slice(L+$.length),R=S+D.length;h&&R>h.reach&&(h.reach=R);var M=F.prev;if(P&&(M=d(e,M,P),S+=P.length),m(e,M,z),F=d(e,M,new c(v,w?o.tokenize($,w):$,C,$)),j&&d(e,F,j),z>1){var N={cause:v+","+y,reach:R};f(text,e,t,F.prev,S,N),h&&N.reach>h.reach&&(h.reach=N.reach)}}}}}}function h(){var head={value:null,prev:null,next:null},e={value:null,prev:head,next:null};head.next=e,this.head=head,this.tail=e,this.length=0}function d(e,t,r){var n=t.next,o={value:r,prev:t,next:n};return t.next=o,n.prev=o,e.length++,o}function m(e,t,r){for(var n=t.next,i=0;i<r&&n!==e.tail;i++)n=n.next;t.next=n,n.prev=t,e.length-=i}if(e.Prism=o,c.stringify=function e(t,r){if("string"==typeof t)return t;if(Array.isArray(t)){var s="";return t.forEach((function(t){s+=e(t,r)})),s}var n={type:t.type,content:e(t.content,r),tag:"span",classes:["token",t.type],attributes:{},language:r},c=t.alias;c&&(Array.isArray(c)?Array.prototype.push.apply(n.classes,c):n.classes.push(c)),o.hooks.run("wrap",n);var l="";for(var f in n.attributes)l+=" "+f+'="'+(n.attributes[f]||"").replace(/"/g,""")+'"';return"<"+n.tag+' class="'+n.classes.join(" ")+'"'+l+">"+n.content+"</"+n.tag+">"},!e.document)return e.addEventListener?(o.disableWorkerMessageHandler||e.addEventListener("message",(function(t){var r=JSON.parse(t.data),n=r.language,code=r.code,c=r.immediateClose;e.postMessage(o.highlight(code,o.languages[n],n)),c&&e.close()}),!1),o):o;var script=o.util.currentScript();function v(){o.manual||o.highlightAll()}if(script&&(o.filename=script.src,script.hasAttribute("data-manual")&&(o.manual=!0)),!o.manual){var _=document.readyState;"loading"===_||"interactive"===_&&script&&script.defer?document.addEventListener("DOMContentLoaded",v):window.requestAnimationFrame?window.requestAnimationFrame(v):window.setTimeout(v,16)}return o}("undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{});e.exports&&(e.exports=r),void 0!==t&&(t.Prism=r),r.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?\]\]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},r.languages.markup.tag.inside["attr-value"].inside.entity=r.languages.markup.entity,r.languages.markup.doctype.inside["internal-subset"].inside=r.languages.markup,r.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(r.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:r.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i;var o={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}};o["language-"+t]={pattern:/[\s\S]+/,inside:r.languages[t]};var c={};c[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:o},r.languages.insertBefore("markup","cdata",c)}}),Object.defineProperty(r.languages.markup.tag,"addAttribute",{value:function(e,t){r.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:r.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),r.languages.html=r.languages.markup,r.languages.mathml=r.languages.markup,r.languages.svg=r.languages.markup,r.languages.xml=r.languages.extend("markup",{}),r.languages.ssml=r.languages.xml,r.languages.atom=r.languages.xml,r.languages.rss=r.languages.xml,function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var r=e.languages.markup;r&&(r.tag.addInlined("style","css"),r.tag.addAttribute("style","css"))}(r),r.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},r.languages.javascript=r.languages.extend("clike",{"class-name":[r.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),r.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,r.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:r.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:r.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:r.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:r.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:r.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),r.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:r.languages.javascript}},string:/[\s\S]+/}}}),r.languages.markup&&(r.languages.markup.tag.addInlined("script","javascript"),r.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),r.languages.js=r.languages.javascript,function(){if(void 0!==r&&"undefined"!=typeof document){Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector);var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},t="data-src-status",n="loading",o="loaded",c='pre[data-src]:not([data-src-status="loaded"]):not([data-src-status="loading"])',l=/\blang(?:uage)?-([\w-]+)\b/i;r.hooks.add("before-highlightall",(function(e){e.selector+=", "+c})),r.hooks.add("before-sanity-check",(function(l){var pre=l.element;if(pre.matches(c)){l.code="",pre.setAttribute(t,n);var code=pre.appendChild(document.createElement("CODE"));code.textContent="Loading…";var f=pre.getAttribute("data-src"),d=l.language;if("none"===d){var m=(/\.(\w+)$/.exec(f)||[,"none"])[1];d=e[m]||m}h(code,d),h(pre,d);var v=r.plugins.autoloader;v&&v.loadLanguages(d);var _=new XMLHttpRequest;_.open("GET",f,!0),_.onreadystatechange=function(){var e,n;4==_.readyState&&(_.status<400&&_.responseText?(pre.setAttribute(t,o),code.textContent=_.responseText,r.highlightElement(code)):(pre.setAttribute(t,"failed"),_.status>=400?code.textContent=(e=_.status,n=_.statusText,"✖ Error "+e+" while fetching file: "+n):code.textContent="✖ Error: File does not exist or is empty"))},_.send(null)}})),r.plugins.fileHighlight={highlight:function(e){for(var element,t=(e||document).querySelectorAll(c),i=0;element=t[i++];)r.highlightElement(element)}};var f=!1;r.fileHighlight=function(){f||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),f=!0),r.plugins.fileHighlight.highlight.apply(this,arguments)}}function h(element,e){var t=element.className;t=t.replace(l," ")+" language-"+e,element.className=t.replace(/\s+/g," ").trim()}}()}).call(this,r(44))},function(e,t){!function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function r(pattern){return pattern=pattern.replace(/<inner>/g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+pattern+")")}var n=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,o=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return n})),c=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"font-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+o+c+"(?:"+o+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+o+c+")(?:"+o+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(n),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+o+")"+c+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+o+"$"),inside:{"table-header":{pattern:RegExp(n),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:r(/\b__(?:(?!_)<inner>|_(?:(?!_)<inner>)+_)+__\b|\*\*(?:(?!\*)<inner>|\*(?:(?!\*)<inner>)+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:r(/\b_(?:(?!_)<inner>|__(?:(?!_)<inner>)+__)+_\b|\*(?:(?!\*)<inner>|\*\*(?:(?!\*)<inner>)+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:r(/(~~?)(?:(?!~)<inner>)+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:r(/!?\[(?:(?!\])<inner>)+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\])<inner>)+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(r){t!==r&&(e.languages.markdown[t].inside.content.inside[r]=e.languages.markdown[r])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var i=0,r=t.length;i<r;i++){var n=t[i];if("code"===n.type){var o=n.content[1],c=n.content[3];if(o&&c&&"code-language"===o.type&&"code-block"===c.type&&"string"==typeof o.content){var l=o.content.replace(/\b#/g,"sharp").replace(/\b\+\+/g,"pp"),f="language-"+(l=(/[a-z][\w-]*/i.exec(l)||[""])[0].toLowerCase());c.alias?"string"==typeof c.alias?c.alias=[c.alias,f]:c.alias.push(f):c.alias=[f]}}else e(n.content)}}(e.tokens)})),e.hooks.add("wrap",(function(t){if("code-block"===t.type){for(var r="",i=0,n=t.classes.length;i<n;i++){var o=t.classes[i],c=/language-(.+)/.exec(o);if(c){r=c[1];break}}var html,d=e.languages[r];if(d)t.content=e.highlight((html=t.content,html.replace(l,"").replace(/&(\w{1,8}|#x?[\da-f]{1,8});/gi,(function(e,code){var t;if("#"===(code=code.toLowerCase())[0])return t="x"===code[1]?parseInt(code.slice(2),16):Number(code.slice(1)),h(t);var r=f[code];return r||e}))),d,r);else if(r&&"none"!==r&&e.plugins.autoloader){var m="md-"+(new Date).valueOf()+"-"+Math.floor(1e16*Math.random());t.attributes.id=m,e.plugins.autoloader.loadLanguages(r,(function(){var t=document.getElementById(m);t&&(t.innerHTML=e.highlight(t.textContent,e.languages[r],r))}))}}}));var l=RegExp(e.languages.markup.tag.pattern.source,"gi"),f={amp:"&",lt:"<",gt:">",quot:'"'},h=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(Prism)},function(e,t){!function(e){e.languages.typescript=e.languages.extend("javascript",{"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:string|Function|any|number|boolean|Array|symbol|console|Promise|unknown|never)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|as|declare|implements|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)(?!\s*[^\s_${}*a-zA-Z\xA0-\uFFFF])/),delete e.languages.typescript.parameter;var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(Prism)},function(e,t){Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?\]\]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(e,t){var r={};r["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[t]},r.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:r}};n["language-"+t]={pattern:/[\s\S]+/,inside:Prism.languages[t]};var o={};o[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",o)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(e,t){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:Prism.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml},function(e,t){!function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var r=e.languages.markup;r&&(r.tag.addInlined("style","css"),r.tag.addAttribute("style","css"))}(Prism)},function(e,t){!function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(r){var n=t[r],o=[];/^\w+$/.test(r)||o.push(/\w+/.exec(r)[0]),"diff"===r&&o.push("bold"),e.languages.diff[r]={pattern:RegExp("^(?:["+n+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:o,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(r)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(Prism)},function(e,t){!function(){if("undefined"!=typeof Prism){var e=/^diff-([\w-]+)/i,t=/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/gi,r=RegExp(/(?:__|[^\r\n<])*(?:\r\n?|\n|(?:__|[^\r\n<])(?![^\r\n]))/.source.replace(/__/g,(function(){return t.source})),"gi"),n=!1;Prism.hooks.add("before-sanity-check",(function(t){var r=t.language;e.test(r)&&!t.grammar&&(t.grammar=Prism.languages[r]=Prism.languages.diff)})),Prism.hooks.add("before-tokenize",(function(t){n||Prism.languages.diff||Prism.plugins.autoloader||(n=!0,console.warn("Prism's Diff Highlight plugin requires the Diff language definition (prism-diff.js).Make sure the language definition is loaded or use Prism's Autoloader plugin."));var r=t.language;e.test(r)&&!Prism.languages[r]&&(Prism.languages[r]=Prism.languages.diff)})),Prism.hooks.add("wrap",(function(n){var o,c;if("diff"!==n.language){var l=e.exec(n.language);if(!l)return;o=l[1],c=Prism.languages[o]}var f=Prism.languages.diff&&Prism.languages.diff.PREFIXES;if(f&&n.type in f){var h,d=n.content.replace(t,"").replace(/</g,"<").replace(/&/g,"&"),code=d.replace(/(^|[\r\n])./g,"$1");h=c?Prism.highlight(code,c,o):Prism.util.encode(code);var m,v=new Prism.Token("prefix",f[n.type],[/\w+/.exec(n.type)[0]]),_=Prism.Token.stringify(v,n.language),y=[];for(r.lastIndex=0;m=r.exec(h);)y.push(_+m[0]);/(?:^|[\r\n]).$/.test(d)&&y.push(_),n.content=y.join(""),c&&n.classes.push("language-"+o)}}))}}()},,function(e,t,r){"use strict";r(241)("link",(function(e){return function(t){return e(this,"a","href",t)}}))},function(e,t,r){var n=r(4),o=r(9),c=r(38),l=/"/g,f=function(e,t,r,n){var o=String(c(e)),f="<"+t;return""!==r&&(f+=" "+r+'="'+String(n).replace(l,""")+'"'),f+">"+o+"</"+t+">"};e.exports=function(e,t){var r={};r[e]=t(f),n(n.P+n.F*o((function(){var t=""[e]('"');return t!==t.toLowerCase()||t.split('"').length>3})),"String",r)}},function(e,t,r){"use strict";e.exports=r(243)},function(e,t,r){"use strict";var n=r(186),o=r(251),c=r(255),l=r(256),f=r(264),h=r(278),d=r(291),m=r(203),v=r(293),_={default:r(295),zero:r(296),commonmark:r(297)},y=/^(vbscript|javascript|file|data):/,k=/^data:image\/(gif|png|jpeg|webp);/;function w(e){var t=e.trim().toLowerCase();return!y.test(t)||!!k.test(t)}var x=["http:","https:","mailto:"];function A(e){var t=m.parse(e,!0);if(t.hostname&&(!t.protocol||x.indexOf(t.protocol)>=0))try{t.hostname=v.toASCII(t.hostname)}catch(e){}return m.encode(m.format(t))}function C(e){var t=m.parse(e,!0);if(t.hostname&&(!t.protocol||x.indexOf(t.protocol)>=0))try{t.hostname=v.toUnicode(t.hostname)}catch(e){}return m.decode(m.format(t),m.decode.defaultChars+"%")}function E(e,t){if(!(this instanceof E))return new E(e,t);t||n.isString(e)||(t=e||{},e="default"),this.inline=new h,this.block=new f,this.core=new l,this.renderer=new c,this.linkify=new d,this.validateLink=w,this.normalizeLink=A,this.normalizeLinkText=C,this.utils=n,this.helpers=n.assign({},o),this.options={},this.configure(e),t&&this.set(t)}E.prototype.set=function(e){return n.assign(this.options,e),this},E.prototype.configure=function(e){var t,r=this;if(n.isString(e)&&!(e=_[t=e]))throw new Error('Wrong `markdown-it` preset "'+t+'", check name');if(!e)throw new Error("Wrong `markdown-it` preset, can't be empty");return e.options&&r.set(e.options),e.components&&Object.keys(e.components).forEach((function(t){e.components[t].rules&&r[t].ruler.enableOnly(e.components[t].rules),e.components[t].rules2&&r[t].ruler2.enableOnly(e.components[t].rules2)})),this},E.prototype.enable=function(e,t){var r=[];Array.isArray(e)||(e=[e]),["core","block","inline"].forEach((function(t){r=r.concat(this[t].ruler.enable(e,!0))}),this),r=r.concat(this.inline.ruler2.enable(e,!0));var n=e.filter((function(e){return r.indexOf(e)<0}));if(n.length&&!t)throw new Error("MarkdownIt. Failed to enable unknown rule(s): "+n);return this},E.prototype.disable=function(e,t){var r=[];Array.isArray(e)||(e=[e]),["core","block","inline"].forEach((function(t){r=r.concat(this[t].ruler.disable(e,!0))}),this),r=r.concat(this.inline.ruler2.disable(e,!0));var n=e.filter((function(e){return r.indexOf(e)<0}));if(n.length&&!t)throw new Error("MarkdownIt. Failed to disable unknown rule(s): "+n);return this},E.prototype.use=function(e){var t=[this].concat(Array.prototype.slice.call(arguments,1));return e.apply(e,t),this},E.prototype.parse=function(e,t){if("string"!=typeof e)throw new Error("Input data should be a String");var r=new this.core.State(e,this,t);return this.core.process(r),r.tokens},E.prototype.render=function(e,t){return t=t||{},this.renderer.render(this.parse(e,t),this.options,t)},E.prototype.parseInline=function(e,t){var r=new this.core.State(e,this,t);return r.inlineMode=!0,this.core.process(r),r.tokens},E.prototype.renderInline=function(e,t){return t=t||{},this.renderer.render(this.parseInline(e,t),this.options,t)},e.exports=E},function(e){e.exports=JSON.parse('{"Aacute":"Á","aacute":"á","Abreve":"Ă","abreve":"ă","ac":"∾","acd":"∿","acE":"∾̳","Acirc":"Â","acirc":"â","acute":"´","Acy":"А","acy":"а","AElig":"Æ","aelig":"æ","af":"","Afr":"𝔄","afr":"𝔞","Agrave":"À","agrave":"à","alefsym":"ℵ","aleph":"ℵ","Alpha":"Α","alpha":"α","Amacr":"Ā","amacr":"ā","amalg":"⨿","amp":"&","AMP":"&","andand":"⩕","And":"⩓","and":"∧","andd":"⩜","andslope":"⩘","andv":"⩚","ang":"∠","ange":"⦤","angle":"∠","angmsdaa":"⦨","angmsdab":"⦩","angmsdac":"⦪","angmsdad":"⦫","angmsdae":"⦬","angmsdaf":"⦭","angmsdag":"⦮","angmsdah":"⦯","angmsd":"∡","angrt":"∟","angrtvb":"⊾","angrtvbd":"⦝","angsph":"∢","angst":"Å","angzarr":"⍼","Aogon":"Ą","aogon":"ą","Aopf":"𝔸","aopf":"𝕒","apacir":"⩯","ap":"≈","apE":"⩰","ape":"≊","apid":"≋","apos":"\'","ApplyFunction":"","approx":"≈","approxeq":"≊","Aring":"Å","aring":"å","Ascr":"𝒜","ascr":"𝒶","Assign":"≔","ast":"*","asymp":"≈","asympeq":"≍","Atilde":"Ã","atilde":"ã","Auml":"Ä","auml":"ä","awconint":"∳","awint":"⨑","backcong":"≌","backepsilon":"϶","backprime":"‵","backsim":"∽","backsimeq":"⋍","Backslash":"∖","Barv":"⫧","barvee":"⊽","barwed":"⌅","Barwed":"⌆","barwedge":"⌅","bbrk":"⎵","bbrktbrk":"⎶","bcong":"≌","Bcy":"Б","bcy":"б","bdquo":"„","becaus":"∵","because":"∵","Because":"∵","bemptyv":"⦰","bepsi":"϶","bernou":"ℬ","Bernoullis":"ℬ","Beta":"Β","beta":"β","beth":"ℶ","between":"≬","Bfr":"𝔅","bfr":"𝔟","bigcap":"⋂","bigcirc":"◯","bigcup":"⋃","bigodot":"⨀","bigoplus":"⨁","bigotimes":"⨂","bigsqcup":"⨆","bigstar":"★","bigtriangledown":"▽","bigtriangleup":"△","biguplus":"⨄","bigvee":"⋁","bigwedge":"⋀","bkarow":"⤍","blacklozenge":"⧫","blacksquare":"▪","blacktriangle":"▴","blacktriangledown":"▾","blacktriangleleft":"◂","blacktriangleright":"▸","blank":"␣","blk12":"▒","blk14":"░","blk34":"▓","block":"█","bne":"=⃥","bnequiv":"≡⃥","bNot":"⫭","bnot":"⌐","Bopf":"𝔹","bopf":"𝕓","bot":"⊥","bottom":"⊥","bowtie":"⋈","boxbox":"⧉","boxdl":"┐","boxdL":"╕","boxDl":"╖","boxDL":"╗","boxdr":"┌","boxdR":"╒","boxDr":"╓","boxDR":"╔","boxh":"─","boxH":"═","boxhd":"┬","boxHd":"╤","boxhD":"╥","boxHD":"╦","boxhu":"┴","boxHu":"╧","boxhU":"╨","boxHU":"╩","boxminus":"⊟","boxplus":"⊞","boxtimes":"⊠","boxul":"┘","boxuL":"╛","boxUl":"╜","boxUL":"╝","boxur":"└","boxuR":"╘","boxUr":"╙","boxUR":"╚","boxv":"│","boxV":"║","boxvh":"┼","boxvH":"╪","boxVh":"╫","boxVH":"╬","boxvl":"┤","boxvL":"╡","boxVl":"╢","boxVL":"╣","boxvr":"├","boxvR":"╞","boxVr":"╟","boxVR":"╠","bprime":"‵","breve":"˘","Breve":"˘","brvbar":"¦","bscr":"𝒷","Bscr":"ℬ","bsemi":"⁏","bsim":"∽","bsime":"⋍","bsolb":"⧅","bsol":"\\\\","bsolhsub":"⟈","bull":"•","bullet":"•","bump":"≎","bumpE":"⪮","bumpe":"≏","Bumpeq":"≎","bumpeq":"≏","Cacute":"Ć","cacute":"ć","capand":"⩄","capbrcup":"⩉","capcap":"⩋","cap":"∩","Cap":"⋒","capcup":"⩇","capdot":"⩀","CapitalDifferentialD":"ⅅ","caps":"∩︀","caret":"⁁","caron":"ˇ","Cayleys":"ℭ","ccaps":"⩍","Ccaron":"Č","ccaron":"č","Ccedil":"Ç","ccedil":"ç","Ccirc":"Ĉ","ccirc":"ĉ","Cconint":"∰","ccups":"⩌","ccupssm":"⩐","Cdot":"Ċ","cdot":"ċ","cedil":"¸","Cedilla":"¸","cemptyv":"⦲","cent":"¢","centerdot":"·","CenterDot":"·","cfr":"𝔠","Cfr":"ℭ","CHcy":"Ч","chcy":"ч","check":"✓","checkmark":"✓","Chi":"Χ","chi":"χ","circ":"ˆ","circeq":"≗","circlearrowleft":"↺","circlearrowright":"↻","circledast":"⊛","circledcirc":"⊚","circleddash":"⊝","CircleDot":"⊙","circledR":"®","circledS":"Ⓢ","CircleMinus":"⊖","CirclePlus":"⊕","CircleTimes":"⊗","cir":"○","cirE":"⧃","cire":"≗","cirfnint":"⨐","cirmid":"⫯","cirscir":"⧂","ClockwiseContourIntegral":"∲","CloseCurlyDoubleQuote":"”","CloseCurlyQuote":"’","clubs":"♣","clubsuit":"♣","colon":":","Colon":"∷","Colone":"⩴","colone":"≔","coloneq":"≔","comma":",","commat":"@","comp":"∁","compfn":"∘","complement":"∁","complexes":"ℂ","cong":"≅","congdot":"⩭","Congruent":"≡","conint":"∮","Conint":"∯","ContourIntegral":"∮","copf":"𝕔","Copf":"ℂ","coprod":"∐","Coproduct":"∐","copy":"©","COPY":"©","copysr":"℗","CounterClockwiseContourIntegral":"∳","crarr":"↵","cross":"✗","Cross":"⨯","Cscr":"𝒞","cscr":"𝒸","csub":"⫏","csube":"⫑","csup":"⫐","csupe":"⫒","ctdot":"⋯","cudarrl":"⤸","cudarrr":"⤵","cuepr":"⋞","cuesc":"⋟","cularr":"↶","cularrp":"⤽","cupbrcap":"⩈","cupcap":"⩆","CupCap":"≍","cup":"∪","Cup":"⋓","cupcup":"⩊","cupdot":"⊍","cupor":"⩅","cups":"∪︀","curarr":"↷","curarrm":"⤼","curlyeqprec":"⋞","curlyeqsucc":"⋟","curlyvee":"⋎","curlywedge":"⋏","curren":"¤","curvearrowleft":"↶","curvearrowright":"↷","cuvee":"⋎","cuwed":"⋏","cwconint":"∲","cwint":"∱","cylcty":"⌭","dagger":"†","Dagger":"‡","daleth":"ℸ","darr":"↓","Darr":"↡","dArr":"⇓","dash":"‐","Dashv":"⫤","dashv":"⊣","dbkarow":"⤏","dblac":"˝","Dcaron":"Ď","dcaron":"ď","Dcy":"Д","dcy":"д","ddagger":"‡","ddarr":"⇊","DD":"ⅅ","dd":"ⅆ","DDotrahd":"⤑","ddotseq":"⩷","deg":"°","Del":"∇","Delta":"Δ","delta":"δ","demptyv":"⦱","dfisht":"⥿","Dfr":"𝔇","dfr":"𝔡","dHar":"⥥","dharl":"⇃","dharr":"⇂","DiacriticalAcute":"´","DiacriticalDot":"˙","DiacriticalDoubleAcute":"˝","DiacriticalGrave":"`","DiacriticalTilde":"˜","diam":"⋄","diamond":"⋄","Diamond":"⋄","diamondsuit":"♦","diams":"♦","die":"¨","DifferentialD":"ⅆ","digamma":"ϝ","disin":"⋲","div":"÷","divide":"÷","divideontimes":"⋇","divonx":"⋇","DJcy":"Ђ","djcy":"ђ","dlcorn":"⌞","dlcrop":"⌍","dollar":"$","Dopf":"𝔻","dopf":"𝕕","Dot":"¨","dot":"˙","DotDot":"⃜","doteq":"≐","doteqdot":"≑","DotEqual":"≐","dotminus":"∸","dotplus":"∔","dotsquare":"⊡","doublebarwedge":"⌆","DoubleContourIntegral":"∯","DoubleDot":"¨","DoubleDownArrow":"⇓","DoubleLeftArrow":"⇐","DoubleLeftRightArrow":"⇔","DoubleLeftTee":"⫤","DoubleLongLeftArrow":"⟸","DoubleLongLeftRightArrow":"⟺","DoubleLongRightArrow":"⟹","DoubleRightArrow":"⇒","DoubleRightTee":"⊨","DoubleUpArrow":"⇑","DoubleUpDownArrow":"⇕","DoubleVerticalBar":"∥","DownArrowBar":"⤓","downarrow":"↓","DownArrow":"↓","Downarrow":"⇓","DownArrowUpArrow":"⇵","DownBreve":"̑","downdownarrows":"⇊","downharpoonleft":"⇃","downharpoonright":"⇂","DownLeftRightVector":"⥐","DownLeftTeeVector":"⥞","DownLeftVectorBar":"⥖","DownLeftVector":"↽","DownRightTeeVector":"⥟","DownRightVectorBar":"⥗","DownRightVector":"⇁","DownTeeArrow":"↧","DownTee":"⊤","drbkarow":"⤐","drcorn":"⌟","drcrop":"⌌","Dscr":"𝒟","dscr":"𝒹","DScy":"Ѕ","dscy":"ѕ","dsol":"⧶","Dstrok":"Đ","dstrok":"đ","dtdot":"⋱","dtri":"▿","dtrif":"▾","duarr":"⇵","duhar":"⥯","dwangle":"⦦","DZcy":"Џ","dzcy":"џ","dzigrarr":"⟿","Eacute":"É","eacute":"é","easter":"⩮","Ecaron":"Ě","ecaron":"ě","Ecirc":"Ê","ecirc":"ê","ecir":"≖","ecolon":"≕","Ecy":"Э","ecy":"э","eDDot":"⩷","Edot":"Ė","edot":"ė","eDot":"≑","ee":"ⅇ","efDot":"≒","Efr":"𝔈","efr":"𝔢","eg":"⪚","Egrave":"È","egrave":"è","egs":"⪖","egsdot":"⪘","el":"⪙","Element":"∈","elinters":"⏧","ell":"ℓ","els":"⪕","elsdot":"⪗","Emacr":"Ē","emacr":"ē","empty":"∅","emptyset":"∅","EmptySmallSquare":"◻","emptyv":"∅","EmptyVerySmallSquare":"▫","emsp13":" ","emsp14":" ","emsp":" ","ENG":"Ŋ","eng":"ŋ","ensp":" ","Eogon":"Ę","eogon":"ę","Eopf":"𝔼","eopf":"𝕖","epar":"⋕","eparsl":"⧣","eplus":"⩱","epsi":"ε","Epsilon":"Ε","epsilon":"ε","epsiv":"ϵ","eqcirc":"≖","eqcolon":"≕","eqsim":"≂","eqslantgtr":"⪖","eqslantless":"⪕","Equal":"⩵","equals":"=","EqualTilde":"≂","equest":"≟","Equilibrium":"⇌","equiv":"≡","equivDD":"⩸","eqvparsl":"⧥","erarr":"⥱","erDot":"≓","escr":"ℯ","Escr":"ℰ","esdot":"≐","Esim":"⩳","esim":"≂","Eta":"Η","eta":"η","ETH":"Ð","eth":"ð","Euml":"Ë","euml":"ë","euro":"€","excl":"!","exist":"∃","Exists":"∃","expectation":"ℰ","exponentiale":"ⅇ","ExponentialE":"ⅇ","fallingdotseq":"≒","Fcy":"Ф","fcy":"ф","female":"♀","ffilig":"ffi","fflig":"ff","ffllig":"ffl","Ffr":"𝔉","ffr":"𝔣","filig":"fi","FilledSmallSquare":"◼","FilledVerySmallSquare":"▪","fjlig":"fj","flat":"♭","fllig":"fl","fltns":"▱","fnof":"ƒ","Fopf":"𝔽","fopf":"𝕗","forall":"∀","ForAll":"∀","fork":"⋔","forkv":"⫙","Fouriertrf":"ℱ","fpartint":"⨍","frac12":"½","frac13":"⅓","frac14":"¼","frac15":"⅕","frac16":"⅙","frac18":"⅛","frac23":"⅔","frac25":"⅖","frac34":"¾","frac35":"⅗","frac38":"⅜","frac45":"⅘","frac56":"⅚","frac58":"⅝","frac78":"⅞","frasl":"⁄","frown":"⌢","fscr":"𝒻","Fscr":"ℱ","gacute":"ǵ","Gamma":"Γ","gamma":"γ","Gammad":"Ϝ","gammad":"ϝ","gap":"⪆","Gbreve":"Ğ","gbreve":"ğ","Gcedil":"Ģ","Gcirc":"Ĝ","gcirc":"ĝ","Gcy":"Г","gcy":"г","Gdot":"Ġ","gdot":"ġ","ge":"≥","gE":"≧","gEl":"⪌","gel":"⋛","geq":"≥","geqq":"≧","geqslant":"⩾","gescc":"⪩","ges":"⩾","gesdot":"⪀","gesdoto":"⪂","gesdotol":"⪄","gesl":"⋛︀","gesles":"⪔","Gfr":"𝔊","gfr":"𝔤","gg":"≫","Gg":"⋙","ggg":"⋙","gimel":"ℷ","GJcy":"Ѓ","gjcy":"ѓ","gla":"⪥","gl":"≷","glE":"⪒","glj":"⪤","gnap":"⪊","gnapprox":"⪊","gne":"⪈","gnE":"≩","gneq":"⪈","gneqq":"≩","gnsim":"⋧","Gopf":"𝔾","gopf":"𝕘","grave":"`","GreaterEqual":"≥","GreaterEqualLess":"⋛","GreaterFullEqual":"≧","GreaterGreater":"⪢","GreaterLess":"≷","GreaterSlantEqual":"⩾","GreaterTilde":"≳","Gscr":"𝒢","gscr":"ℊ","gsim":"≳","gsime":"⪎","gsiml":"⪐","gtcc":"⪧","gtcir":"⩺","gt":">","GT":">","Gt":"≫","gtdot":"⋗","gtlPar":"⦕","gtquest":"⩼","gtrapprox":"⪆","gtrarr":"⥸","gtrdot":"⋗","gtreqless":"⋛","gtreqqless":"⪌","gtrless":"≷","gtrsim":"≳","gvertneqq":"≩︀","gvnE":"≩︀","Hacek":"ˇ","hairsp":" ","half":"½","hamilt":"ℋ","HARDcy":"Ъ","hardcy":"ъ","harrcir":"⥈","harr":"↔","hArr":"⇔","harrw":"↭","Hat":"^","hbar":"ℏ","Hcirc":"Ĥ","hcirc":"ĥ","hearts":"♥","heartsuit":"♥","hellip":"…","hercon":"⊹","hfr":"𝔥","Hfr":"ℌ","HilbertSpace":"ℋ","hksearow":"⤥","hkswarow":"⤦","hoarr":"⇿","homtht":"∻","hookleftarrow":"↩","hookrightarrow":"↪","hopf":"𝕙","Hopf":"ℍ","horbar":"―","HorizontalLine":"─","hscr":"𝒽","Hscr":"ℋ","hslash":"ℏ","Hstrok":"Ħ","hstrok":"ħ","HumpDownHump":"≎","HumpEqual":"≏","hybull":"⁃","hyphen":"‐","Iacute":"Í","iacute":"í","ic":"","Icirc":"Î","icirc":"î","Icy":"И","icy":"и","Idot":"İ","IEcy":"Е","iecy":"е","iexcl":"¡","iff":"⇔","ifr":"𝔦","Ifr":"ℑ","Igrave":"Ì","igrave":"ì","ii":"ⅈ","iiiint":"⨌","iiint":"∭","iinfin":"⧜","iiota":"℩","IJlig":"IJ","ijlig":"ij","Imacr":"Ī","imacr":"ī","image":"ℑ","ImaginaryI":"ⅈ","imagline":"ℐ","imagpart":"ℑ","imath":"ı","Im":"ℑ","imof":"⊷","imped":"Ƶ","Implies":"⇒","incare":"℅","in":"∈","infin":"∞","infintie":"⧝","inodot":"ı","intcal":"⊺","int":"∫","Int":"∬","integers":"ℤ","Integral":"∫","intercal":"⊺","Intersection":"⋂","intlarhk":"⨗","intprod":"⨼","InvisibleComma":"","InvisibleTimes":"","IOcy":"Ё","iocy":"ё","Iogon":"Į","iogon":"į","Iopf":"𝕀","iopf":"𝕚","Iota":"Ι","iota":"ι","iprod":"⨼","iquest":"¿","iscr":"𝒾","Iscr":"ℐ","isin":"∈","isindot":"⋵","isinE":"⋹","isins":"⋴","isinsv":"⋳","isinv":"∈","it":"","Itilde":"Ĩ","itilde":"ĩ","Iukcy":"І","iukcy":"і","Iuml":"Ï","iuml":"ï","Jcirc":"Ĵ","jcirc":"ĵ","Jcy":"Й","jcy":"й","Jfr":"𝔍","jfr":"𝔧","jmath":"ȷ","Jopf":"𝕁","jopf":"𝕛","Jscr":"𝒥","jscr":"𝒿","Jsercy":"Ј","jsercy":"ј","Jukcy":"Є","jukcy":"є","Kappa":"Κ","kappa":"κ","kappav":"ϰ","Kcedil":"Ķ","kcedil":"ķ","Kcy":"К","kcy":"к","Kfr":"𝔎","kfr":"𝔨","kgreen":"ĸ","KHcy":"Х","khcy":"х","KJcy":"Ќ","kjcy":"ќ","Kopf":"𝕂","kopf":"𝕜","Kscr":"𝒦","kscr":"𝓀","lAarr":"⇚","Lacute":"Ĺ","lacute":"ĺ","laemptyv":"⦴","lagran":"ℒ","Lambda":"Λ","lambda":"λ","lang":"⟨","Lang":"⟪","langd":"⦑","langle":"⟨","lap":"⪅","Laplacetrf":"ℒ","laquo":"«","larrb":"⇤","larrbfs":"⤟","larr":"←","Larr":"↞","lArr":"⇐","larrfs":"⤝","larrhk":"↩","larrlp":"↫","larrpl":"⤹","larrsim":"⥳","larrtl":"↢","latail":"⤙","lAtail":"⤛","lat":"⪫","late":"⪭","lates":"⪭︀","lbarr":"⤌","lBarr":"⤎","lbbrk":"❲","lbrace":"{","lbrack":"[","lbrke":"⦋","lbrksld":"⦏","lbrkslu":"⦍","Lcaron":"Ľ","lcaron":"ľ","Lcedil":"Ļ","lcedil":"ļ","lceil":"⌈","lcub":"{","Lcy":"Л","lcy":"л","ldca":"⤶","ldquo":"“","ldquor":"„","ldrdhar":"⥧","ldrushar":"⥋","ldsh":"↲","le":"≤","lE":"≦","LeftAngleBracket":"⟨","LeftArrowBar":"⇤","leftarrow":"←","LeftArrow":"←","Leftarrow":"⇐","LeftArrowRightArrow":"⇆","leftarrowtail":"↢","LeftCeiling":"⌈","LeftDoubleBracket":"⟦","LeftDownTeeVector":"⥡","LeftDownVectorBar":"⥙","LeftDownVector":"⇃","LeftFloor":"⌊","leftharpoondown":"↽","leftharpoonup":"↼","leftleftarrows":"⇇","leftrightarrow":"↔","LeftRightArrow":"↔","Leftrightarrow":"⇔","leftrightarrows":"⇆","leftrightharpoons":"⇋","leftrightsquigarrow":"↭","LeftRightVector":"⥎","LeftTeeArrow":"↤","LeftTee":"⊣","LeftTeeVector":"⥚","leftthreetimes":"⋋","LeftTriangleBar":"⧏","LeftTriangle":"⊲","LeftTriangleEqual":"⊴","LeftUpDownVector":"⥑","LeftUpTeeVector":"⥠","LeftUpVectorBar":"⥘","LeftUpVector":"↿","LeftVectorBar":"⥒","LeftVector":"↼","lEg":"⪋","leg":"⋚","leq":"≤","leqq":"≦","leqslant":"⩽","lescc":"⪨","les":"⩽","lesdot":"⩿","lesdoto":"⪁","lesdotor":"⪃","lesg":"⋚︀","lesges":"⪓","lessapprox":"⪅","lessdot":"⋖","lesseqgtr":"⋚","lesseqqgtr":"⪋","LessEqualGreater":"⋚","LessFullEqual":"≦","LessGreater":"≶","lessgtr":"≶","LessLess":"⪡","lesssim":"≲","LessSlantEqual":"⩽","LessTilde":"≲","lfisht":"⥼","lfloor":"⌊","Lfr":"𝔏","lfr":"𝔩","lg":"≶","lgE":"⪑","lHar":"⥢","lhard":"↽","lharu":"↼","lharul":"⥪","lhblk":"▄","LJcy":"Љ","ljcy":"љ","llarr":"⇇","ll":"≪","Ll":"⋘","llcorner":"⌞","Lleftarrow":"⇚","llhard":"⥫","lltri":"◺","Lmidot":"Ŀ","lmidot":"ŀ","lmoustache":"⎰","lmoust":"⎰","lnap":"⪉","lnapprox":"⪉","lne":"⪇","lnE":"≨","lneq":"⪇","lneqq":"≨","lnsim":"⋦","loang":"⟬","loarr":"⇽","lobrk":"⟦","longleftarrow":"⟵","LongLeftArrow":"⟵","Longleftarrow":"⟸","longleftrightarrow":"⟷","LongLeftRightArrow":"⟷","Longleftrightarrow":"⟺","longmapsto":"⟼","longrightarrow":"⟶","LongRightArrow":"⟶","Longrightarrow":"⟹","looparrowleft":"↫","looparrowright":"↬","lopar":"⦅","Lopf":"𝕃","lopf":"𝕝","loplus":"⨭","lotimes":"⨴","lowast":"∗","lowbar":"_","LowerLeftArrow":"↙","LowerRightArrow":"↘","loz":"◊","lozenge":"◊","lozf":"⧫","lpar":"(","lparlt":"⦓","lrarr":"⇆","lrcorner":"⌟","lrhar":"⇋","lrhard":"⥭","lrm":"","lrtri":"⊿","lsaquo":"‹","lscr":"𝓁","Lscr":"ℒ","lsh":"↰","Lsh":"↰","lsim":"≲","lsime":"⪍","lsimg":"⪏","lsqb":"[","lsquo":"‘","lsquor":"‚","Lstrok":"Ł","lstrok":"ł","ltcc":"⪦","ltcir":"⩹","lt":"<","LT":"<","Lt":"≪","ltdot":"⋖","lthree":"⋋","ltimes":"⋉","ltlarr":"⥶","ltquest":"⩻","ltri":"◃","ltrie":"⊴","ltrif":"◂","ltrPar":"⦖","lurdshar":"⥊","luruhar":"⥦","lvertneqq":"≨︀","lvnE":"≨︀","macr":"¯","male":"♂","malt":"✠","maltese":"✠","Map":"⤅","map":"↦","mapsto":"↦","mapstodown":"↧","mapstoleft":"↤","mapstoup":"↥","marker":"▮","mcomma":"⨩","Mcy":"М","mcy":"м","mdash":"—","mDDot":"∺","measuredangle":"∡","MediumSpace":" ","Mellintrf":"ℳ","Mfr":"𝔐","mfr":"𝔪","mho":"℧","micro":"µ","midast":"*","midcir":"⫰","mid":"∣","middot":"·","minusb":"⊟","minus":"−","minusd":"∸","minusdu":"⨪","MinusPlus":"∓","mlcp":"⫛","mldr":"…","mnplus":"∓","models":"⊧","Mopf":"𝕄","mopf":"𝕞","mp":"∓","mscr":"𝓂","Mscr":"ℳ","mstpos":"∾","Mu":"Μ","mu":"μ","multimap":"⊸","mumap":"⊸","nabla":"∇","Nacute":"Ń","nacute":"ń","nang":"∠⃒","nap":"≉","napE":"⩰̸","napid":"≋̸","napos":"ʼn","napprox":"≉","natural":"♮","naturals":"ℕ","natur":"♮","nbsp":" ","nbump":"≎̸","nbumpe":"≏̸","ncap":"⩃","Ncaron":"Ň","ncaron":"ň","Ncedil":"Ņ","ncedil":"ņ","ncong":"≇","ncongdot":"⩭̸","ncup":"⩂","Ncy":"Н","ncy":"н","ndash":"–","nearhk":"⤤","nearr":"↗","neArr":"⇗","nearrow":"↗","ne":"≠","nedot":"≐̸","NegativeMediumSpace":"","NegativeThickSpace":"","NegativeThinSpace":"","NegativeVeryThinSpace":"","nequiv":"≢","nesear":"⤨","nesim":"≂̸","NestedGreaterGreater":"≫","NestedLessLess":"≪","NewLine":"\\n","nexist":"∄","nexists":"∄","Nfr":"𝔑","nfr":"𝔫","ngE":"≧̸","nge":"≱","ngeq":"≱","ngeqq":"≧̸","ngeqslant":"⩾̸","nges":"⩾̸","nGg":"⋙̸","ngsim":"≵","nGt":"≫⃒","ngt":"≯","ngtr":"≯","nGtv":"≫̸","nharr":"↮","nhArr":"⇎","nhpar":"⫲","ni":"∋","nis":"⋼","nisd":"⋺","niv":"∋","NJcy":"Њ","njcy":"њ","nlarr":"↚","nlArr":"⇍","nldr":"‥","nlE":"≦̸","nle":"≰","nleftarrow":"↚","nLeftarrow":"⇍","nleftrightarrow":"↮","nLeftrightarrow":"⇎","nleq":"≰","nleqq":"≦̸","nleqslant":"⩽̸","nles":"⩽̸","nless":"≮","nLl":"⋘̸","nlsim":"≴","nLt":"≪⃒","nlt":"≮","nltri":"⋪","nltrie":"⋬","nLtv":"≪̸","nmid":"∤","NoBreak":"","NonBreakingSpace":" ","nopf":"𝕟","Nopf":"ℕ","Not":"⫬","not":"¬","NotCongruent":"≢","NotCupCap":"≭","NotDoubleVerticalBar":"∦","NotElement":"∉","NotEqual":"≠","NotEqualTilde":"≂̸","NotExists":"∄","NotGreater":"≯","NotGreaterEqual":"≱","NotGreaterFullEqual":"≧̸","NotGreaterGreater":"≫̸","NotGreaterLess":"≹","NotGreaterSlantEqual":"⩾̸","NotGreaterTilde":"≵","NotHumpDownHump":"≎̸","NotHumpEqual":"≏̸","notin":"∉","notindot":"⋵̸","notinE":"⋹̸","notinva":"∉","notinvb":"⋷","notinvc":"⋶","NotLeftTriangleBar":"⧏̸","NotLeftTriangle":"⋪","NotLeftTriangleEqual":"⋬","NotLess":"≮","NotLessEqual":"≰","NotLessGreater":"≸","NotLessLess":"≪̸","NotLessSlantEqual":"⩽̸","NotLessTilde":"≴","NotNestedGreaterGreater":"⪢̸","NotNestedLessLess":"⪡̸","notni":"∌","notniva":"∌","notnivb":"⋾","notnivc":"⋽","NotPrecedes":"⊀","NotPrecedesEqual":"⪯̸","NotPrecedesSlantEqual":"⋠","NotReverseElement":"∌","NotRightTriangleBar":"⧐̸","NotRightTriangle":"⋫","NotRightTriangleEqual":"⋭","NotSquareSubset":"⊏̸","NotSquareSubsetEqual":"⋢","NotSquareSuperset":"⊐̸","NotSquareSupersetEqual":"⋣","NotSubset":"⊂⃒","NotSubsetEqual":"⊈","NotSucceeds":"⊁","NotSucceedsEqual":"⪰̸","NotSucceedsSlantEqual":"⋡","NotSucceedsTilde":"≿̸","NotSuperset":"⊃⃒","NotSupersetEqual":"⊉","NotTilde":"≁","NotTildeEqual":"≄","NotTildeFullEqual":"≇","NotTildeTilde":"≉","NotVerticalBar":"∤","nparallel":"∦","npar":"∦","nparsl":"⫽⃥","npart":"∂̸","npolint":"⨔","npr":"⊀","nprcue":"⋠","nprec":"⊀","npreceq":"⪯̸","npre":"⪯̸","nrarrc":"⤳̸","nrarr":"↛","nrArr":"⇏","nrarrw":"↝̸","nrightarrow":"↛","nRightarrow":"⇏","nrtri":"⋫","nrtrie":"⋭","nsc":"⊁","nsccue":"⋡","nsce":"⪰̸","Nscr":"𝒩","nscr":"𝓃","nshortmid":"∤","nshortparallel":"∦","nsim":"≁","nsime":"≄","nsimeq":"≄","nsmid":"∤","nspar":"∦","nsqsube":"⋢","nsqsupe":"⋣","nsub":"⊄","nsubE":"⫅̸","nsube":"⊈","nsubset":"⊂⃒","nsubseteq":"⊈","nsubseteqq":"⫅̸","nsucc":"⊁","nsucceq":"⪰̸","nsup":"⊅","nsupE":"⫆̸","nsupe":"⊉","nsupset":"⊃⃒","nsupseteq":"⊉","nsupseteqq":"⫆̸","ntgl":"≹","Ntilde":"Ñ","ntilde":"ñ","ntlg":"≸","ntriangleleft":"⋪","ntrianglelefteq":"⋬","ntriangleright":"⋫","ntrianglerighteq":"⋭","Nu":"Ν","nu":"ν","num":"#","numero":"№","numsp":" ","nvap":"≍⃒","nvdash":"⊬","nvDash":"⊭","nVdash":"⊮","nVDash":"⊯","nvge":"≥⃒","nvgt":">⃒","nvHarr":"⤄","nvinfin":"⧞","nvlArr":"⤂","nvle":"≤⃒","nvlt":"<⃒","nvltrie":"⊴⃒","nvrArr":"⤃","nvrtrie":"⊵⃒","nvsim":"∼⃒","nwarhk":"⤣","nwarr":"↖","nwArr":"⇖","nwarrow":"↖","nwnear":"⤧","Oacute":"Ó","oacute":"ó","oast":"⊛","Ocirc":"Ô","ocirc":"ô","ocir":"⊚","Ocy":"О","ocy":"о","odash":"⊝","Odblac":"Ő","odblac":"ő","odiv":"⨸","odot":"⊙","odsold":"⦼","OElig":"Œ","oelig":"œ","ofcir":"⦿","Ofr":"𝔒","ofr":"𝔬","ogon":"˛","Ograve":"Ò","ograve":"ò","ogt":"⧁","ohbar":"⦵","ohm":"Ω","oint":"∮","olarr":"↺","olcir":"⦾","olcross":"⦻","oline":"‾","olt":"⧀","Omacr":"Ō","omacr":"ō","Omega":"Ω","omega":"ω","Omicron":"Ο","omicron":"ο","omid":"⦶","ominus":"⊖","Oopf":"𝕆","oopf":"𝕠","opar":"⦷","OpenCurlyDoubleQuote":"“","OpenCurlyQuote":"‘","operp":"⦹","oplus":"⊕","orarr":"↻","Or":"⩔","or":"∨","ord":"⩝","order":"ℴ","orderof":"ℴ","ordf":"ª","ordm":"º","origof":"⊶","oror":"⩖","orslope":"⩗","orv":"⩛","oS":"Ⓢ","Oscr":"𝒪","oscr":"ℴ","Oslash":"Ø","oslash":"ø","osol":"⊘","Otilde":"Õ","otilde":"õ","otimesas":"⨶","Otimes":"⨷","otimes":"⊗","Ouml":"Ö","ouml":"ö","ovbar":"⌽","OverBar":"‾","OverBrace":"⏞","OverBracket":"⎴","OverParenthesis":"⏜","para":"¶","parallel":"∥","par":"∥","parsim":"⫳","parsl":"⫽","part":"∂","PartialD":"∂","Pcy":"П","pcy":"п","percnt":"%","period":".","permil":"‰","perp":"⊥","pertenk":"‱","Pfr":"𝔓","pfr":"𝔭","Phi":"Φ","phi":"φ","phiv":"ϕ","phmmat":"ℳ","phone":"☎","Pi":"Π","pi":"π","pitchfork":"⋔","piv":"ϖ","planck":"ℏ","planckh":"ℎ","plankv":"ℏ","plusacir":"⨣","plusb":"⊞","pluscir":"⨢","plus":"+","plusdo":"∔","plusdu":"⨥","pluse":"⩲","PlusMinus":"±","plusmn":"±","plussim":"⨦","plustwo":"⨧","pm":"±","Poincareplane":"ℌ","pointint":"⨕","popf":"𝕡","Popf":"ℙ","pound":"£","prap":"⪷","Pr":"⪻","pr":"≺","prcue":"≼","precapprox":"⪷","prec":"≺","preccurlyeq":"≼","Precedes":"≺","PrecedesEqual":"⪯","PrecedesSlantEqual":"≼","PrecedesTilde":"≾","preceq":"⪯","precnapprox":"⪹","precneqq":"⪵","precnsim":"⋨","pre":"⪯","prE":"⪳","precsim":"≾","prime":"′","Prime":"″","primes":"ℙ","prnap":"⪹","prnE":"⪵","prnsim":"⋨","prod":"∏","Product":"∏","profalar":"⌮","profline":"⌒","profsurf":"⌓","prop":"∝","Proportional":"∝","Proportion":"∷","propto":"∝","prsim":"≾","prurel":"⊰","Pscr":"𝒫","pscr":"𝓅","Psi":"Ψ","psi":"ψ","puncsp":" ","Qfr":"𝔔","qfr":"𝔮","qint":"⨌","qopf":"𝕢","Qopf":"ℚ","qprime":"⁗","Qscr":"𝒬","qscr":"𝓆","quaternions":"ℍ","quatint":"⨖","quest":"?","questeq":"≟","quot":"\\"","QUOT":"\\"","rAarr":"⇛","race":"∽̱","Racute":"Ŕ","racute":"ŕ","radic":"√","raemptyv":"⦳","rang":"⟩","Rang":"⟫","rangd":"⦒","range":"⦥","rangle":"⟩","raquo":"»","rarrap":"⥵","rarrb":"⇥","rarrbfs":"⤠","rarrc":"⤳","rarr":"→","Rarr":"↠","rArr":"⇒","rarrfs":"⤞","rarrhk":"↪","rarrlp":"↬","rarrpl":"⥅","rarrsim":"⥴","Rarrtl":"⤖","rarrtl":"↣","rarrw":"↝","ratail":"⤚","rAtail":"⤜","ratio":"∶","rationals":"ℚ","rbarr":"⤍","rBarr":"⤏","RBarr":"⤐","rbbrk":"❳","rbrace":"}","rbrack":"]","rbrke":"⦌","rbrksld":"⦎","rbrkslu":"⦐","Rcaron":"Ř","rcaron":"ř","Rcedil":"Ŗ","rcedil":"ŗ","rceil":"⌉","rcub":"}","Rcy":"Р","rcy":"р","rdca":"⤷","rdldhar":"⥩","rdquo":"”","rdquor":"”","rdsh":"↳","real":"ℜ","realine":"ℛ","realpart":"ℜ","reals":"ℝ","Re":"ℜ","rect":"▭","reg":"®","REG":"®","ReverseElement":"∋","ReverseEquilibrium":"⇋","ReverseUpEquilibrium":"⥯","rfisht":"⥽","rfloor":"⌋","rfr":"𝔯","Rfr":"ℜ","rHar":"⥤","rhard":"⇁","rharu":"⇀","rharul":"⥬","Rho":"Ρ","rho":"ρ","rhov":"ϱ","RightAngleBracket":"⟩","RightArrowBar":"⇥","rightarrow":"→","RightArrow":"→","Rightarrow":"⇒","RightArrowLeftArrow":"⇄","rightarrowtail":"↣","RightCeiling":"⌉","RightDoubleBracket":"⟧","RightDownTeeVector":"⥝","RightDownVectorBar":"⥕","RightDownVector":"⇂","RightFloor":"⌋","rightharpoondown":"⇁","rightharpoonup":"⇀","rightleftarrows":"⇄","rightleftharpoons":"⇌","rightrightarrows":"⇉","rightsquigarrow":"↝","RightTeeArrow":"↦","RightTee":"⊢","RightTeeVector":"⥛","rightthreetimes":"⋌","RightTriangleBar":"⧐","RightTriangle":"⊳","RightTriangleEqual":"⊵","RightUpDownVector":"⥏","RightUpTeeVector":"⥜","RightUpVectorBar":"⥔","RightUpVector":"↾","RightVectorBar":"⥓","RightVector":"⇀","ring":"˚","risingdotseq":"≓","rlarr":"⇄","rlhar":"⇌","rlm":"","rmoustache":"⎱","rmoust":"⎱","rnmid":"⫮","roang":"⟭","roarr":"⇾","robrk":"⟧","ropar":"⦆","ropf":"𝕣","Ropf":"ℝ","roplus":"⨮","rotimes":"⨵","RoundImplies":"⥰","rpar":")","rpargt":"⦔","rppolint":"⨒","rrarr":"⇉","Rrightarrow":"⇛","rsaquo":"›","rscr":"𝓇","Rscr":"ℛ","rsh":"↱","Rsh":"↱","rsqb":"]","rsquo":"’","rsquor":"’","rthree":"⋌","rtimes":"⋊","rtri":"▹","rtrie":"⊵","rtrif":"▸","rtriltri":"⧎","RuleDelayed":"⧴","ruluhar":"⥨","rx":"℞","Sacute":"Ś","sacute":"ś","sbquo":"‚","scap":"⪸","Scaron":"Š","scaron":"š","Sc":"⪼","sc":"≻","sccue":"≽","sce":"⪰","scE":"⪴","Scedil":"Ş","scedil":"ş","Scirc":"Ŝ","scirc":"ŝ","scnap":"⪺","scnE":"⪶","scnsim":"⋩","scpolint":"⨓","scsim":"≿","Scy":"С","scy":"с","sdotb":"⊡","sdot":"⋅","sdote":"⩦","searhk":"⤥","searr":"↘","seArr":"⇘","searrow":"↘","sect":"§","semi":";","seswar":"⤩","setminus":"∖","setmn":"∖","sext":"✶","Sfr":"𝔖","sfr":"𝔰","sfrown":"⌢","sharp":"♯","SHCHcy":"Щ","shchcy":"щ","SHcy":"Ш","shcy":"ш","ShortDownArrow":"↓","ShortLeftArrow":"←","shortmid":"∣","shortparallel":"∥","ShortRightArrow":"→","ShortUpArrow":"↑","shy":"","Sigma":"Σ","sigma":"σ","sigmaf":"ς","sigmav":"ς","sim":"∼","simdot":"⩪","sime":"≃","simeq":"≃","simg":"⪞","simgE":"⪠","siml":"⪝","simlE":"⪟","simne":"≆","simplus":"⨤","simrarr":"⥲","slarr":"←","SmallCircle":"∘","smallsetminus":"∖","smashp":"⨳","smeparsl":"⧤","smid":"∣","smile":"⌣","smt":"⪪","smte":"⪬","smtes":"⪬︀","SOFTcy":"Ь","softcy":"ь","solbar":"⌿","solb":"⧄","sol":"/","Sopf":"𝕊","sopf":"𝕤","spades":"♠","spadesuit":"♠","spar":"∥","sqcap":"⊓","sqcaps":"⊓︀","sqcup":"⊔","sqcups":"⊔︀","Sqrt":"√","sqsub":"⊏","sqsube":"⊑","sqsubset":"⊏","sqsubseteq":"⊑","sqsup":"⊐","sqsupe":"⊒","sqsupset":"⊐","sqsupseteq":"⊒","square":"□","Square":"□","SquareIntersection":"⊓","SquareSubset":"⊏","SquareSubsetEqual":"⊑","SquareSuperset":"⊐","SquareSupersetEqual":"⊒","SquareUnion":"⊔","squarf":"▪","squ":"□","squf":"▪","srarr":"→","Sscr":"𝒮","sscr":"𝓈","ssetmn":"∖","ssmile":"⌣","sstarf":"⋆","Star":"⋆","star":"☆","starf":"★","straightepsilon":"ϵ","straightphi":"ϕ","strns":"¯","sub":"⊂","Sub":"⋐","subdot":"⪽","subE":"⫅","sube":"⊆","subedot":"⫃","submult":"⫁","subnE":"⫋","subne":"⊊","subplus":"⪿","subrarr":"⥹","subset":"⊂","Subset":"⋐","subseteq":"⊆","subseteqq":"⫅","SubsetEqual":"⊆","subsetneq":"⊊","subsetneqq":"⫋","subsim":"⫇","subsub":"⫕","subsup":"⫓","succapprox":"⪸","succ":"≻","succcurlyeq":"≽","Succeeds":"≻","SucceedsEqual":"⪰","SucceedsSlantEqual":"≽","SucceedsTilde":"≿","succeq":"⪰","succnapprox":"⪺","succneqq":"⪶","succnsim":"⋩","succsim":"≿","SuchThat":"∋","sum":"∑","Sum":"∑","sung":"♪","sup1":"¹","sup2":"²","sup3":"³","sup":"⊃","Sup":"⋑","supdot":"⪾","supdsub":"⫘","supE":"⫆","supe":"⊇","supedot":"⫄","Superset":"⊃","SupersetEqual":"⊇","suphsol":"⟉","suphsub":"⫗","suplarr":"⥻","supmult":"⫂","supnE":"⫌","supne":"⊋","supplus":"⫀","supset":"⊃","Supset":"⋑","supseteq":"⊇","supseteqq":"⫆","supsetneq":"⊋","supsetneqq":"⫌","supsim":"⫈","supsub":"⫔","supsup":"⫖","swarhk":"⤦","swarr":"↙","swArr":"⇙","swarrow":"↙","swnwar":"⤪","szlig":"ß","Tab":"\\t","target":"⌖","Tau":"Τ","tau":"τ","tbrk":"⎴","Tcaron":"Ť","tcaron":"ť","Tcedil":"Ţ","tcedil":"ţ","Tcy":"Т","tcy":"т","tdot":"⃛","telrec":"⌕","Tfr":"𝔗","tfr":"𝔱","there4":"∴","therefore":"∴","Therefore":"∴","Theta":"Θ","theta":"θ","thetasym":"ϑ","thetav":"ϑ","thickapprox":"≈","thicksim":"∼","ThickSpace":" ","ThinSpace":" ","thinsp":" ","thkap":"≈","thksim":"∼","THORN":"Þ","thorn":"þ","tilde":"˜","Tilde":"∼","TildeEqual":"≃","TildeFullEqual":"≅","TildeTilde":"≈","timesbar":"⨱","timesb":"⊠","times":"×","timesd":"⨰","tint":"∭","toea":"⤨","topbot":"⌶","topcir":"⫱","top":"⊤","Topf":"𝕋","topf":"𝕥","topfork":"⫚","tosa":"⤩","tprime":"‴","trade":"™","TRADE":"™","triangle":"▵","triangledown":"▿","triangleleft":"◃","trianglelefteq":"⊴","triangleq":"≜","triangleright":"▹","trianglerighteq":"⊵","tridot":"◬","trie":"≜","triminus":"⨺","TripleDot":"⃛","triplus":"⨹","trisb":"⧍","tritime":"⨻","trpezium":"⏢","Tscr":"𝒯","tscr":"𝓉","TScy":"Ц","tscy":"ц","TSHcy":"Ћ","tshcy":"ћ","Tstrok":"Ŧ","tstrok":"ŧ","twixt":"≬","twoheadleftarrow":"↞","twoheadrightarrow":"↠","Uacute":"Ú","uacute":"ú","uarr":"↑","Uarr":"↟","uArr":"⇑","Uarrocir":"⥉","Ubrcy":"Ў","ubrcy":"ў","Ubreve":"Ŭ","ubreve":"ŭ","Ucirc":"Û","ucirc":"û","Ucy":"У","ucy":"у","udarr":"⇅","Udblac":"Ű","udblac":"ű","udhar":"⥮","ufisht":"⥾","Ufr":"𝔘","ufr":"𝔲","Ugrave":"Ù","ugrave":"ù","uHar":"⥣","uharl":"↿","uharr":"↾","uhblk":"▀","ulcorn":"⌜","ulcorner":"⌜","ulcrop":"⌏","ultri":"◸","Umacr":"Ū","umacr":"ū","uml":"¨","UnderBar":"_","UnderBrace":"⏟","UnderBracket":"⎵","UnderParenthesis":"⏝","Union":"⋃","UnionPlus":"⊎","Uogon":"Ų","uogon":"ų","Uopf":"𝕌","uopf":"𝕦","UpArrowBar":"⤒","uparrow":"↑","UpArrow":"↑","Uparrow":"⇑","UpArrowDownArrow":"⇅","updownarrow":"↕","UpDownArrow":"↕","Updownarrow":"⇕","UpEquilibrium":"⥮","upharpoonleft":"↿","upharpoonright":"↾","uplus":"⊎","UpperLeftArrow":"↖","UpperRightArrow":"↗","upsi":"υ","Upsi":"ϒ","upsih":"ϒ","Upsilon":"Υ","upsilon":"υ","UpTeeArrow":"↥","UpTee":"⊥","upuparrows":"⇈","urcorn":"⌝","urcorner":"⌝","urcrop":"⌎","Uring":"Ů","uring":"ů","urtri":"◹","Uscr":"𝒰","uscr":"𝓊","utdot":"⋰","Utilde":"Ũ","utilde":"ũ","utri":"▵","utrif":"▴","uuarr":"⇈","Uuml":"Ü","uuml":"ü","uwangle":"⦧","vangrt":"⦜","varepsilon":"ϵ","varkappa":"ϰ","varnothing":"∅","varphi":"ϕ","varpi":"ϖ","varpropto":"∝","varr":"↕","vArr":"⇕","varrho":"ϱ","varsigma":"ς","varsubsetneq":"⊊︀","varsubsetneqq":"⫋︀","varsupsetneq":"⊋︀","varsupsetneqq":"⫌︀","vartheta":"ϑ","vartriangleleft":"⊲","vartriangleright":"⊳","vBar":"⫨","Vbar":"⫫","vBarv":"⫩","Vcy":"В","vcy":"в","vdash":"⊢","vDash":"⊨","Vdash":"⊩","VDash":"⊫","Vdashl":"⫦","veebar":"⊻","vee":"∨","Vee":"⋁","veeeq":"≚","vellip":"⋮","verbar":"|","Verbar":"‖","vert":"|","Vert":"‖","VerticalBar":"∣","VerticalLine":"|","VerticalSeparator":"❘","VerticalTilde":"≀","VeryThinSpace":" ","Vfr":"𝔙","vfr":"𝔳","vltri":"⊲","vnsub":"⊂⃒","vnsup":"⊃⃒","Vopf":"𝕍","vopf":"𝕧","vprop":"∝","vrtri":"⊳","Vscr":"𝒱","vscr":"𝓋","vsubnE":"⫋︀","vsubne":"⊊︀","vsupnE":"⫌︀","vsupne":"⊋︀","Vvdash":"⊪","vzigzag":"⦚","Wcirc":"Ŵ","wcirc":"ŵ","wedbar":"⩟","wedge":"∧","Wedge":"⋀","wedgeq":"≙","weierp":"℘","Wfr":"𝔚","wfr":"𝔴","Wopf":"𝕎","wopf":"𝕨","wp":"℘","wr":"≀","wreath":"≀","Wscr":"𝒲","wscr":"𝓌","xcap":"⋂","xcirc":"◯","xcup":"⋃","xdtri":"▽","Xfr":"𝔛","xfr":"𝔵","xharr":"⟷","xhArr":"⟺","Xi":"Ξ","xi":"ξ","xlarr":"⟵","xlArr":"⟸","xmap":"⟼","xnis":"⋻","xodot":"⨀","Xopf":"𝕏","xopf":"𝕩","xoplus":"⨁","xotime":"⨂","xrarr":"⟶","xrArr":"⟹","Xscr":"𝒳","xscr":"𝓍","xsqcup":"⨆","xuplus":"⨄","xutri":"△","xvee":"⋁","xwedge":"⋀","Yacute":"Ý","yacute":"ý","YAcy":"Я","yacy":"я","Ycirc":"Ŷ","ycirc":"ŷ","Ycy":"Ы","ycy":"ы","yen":"¥","Yfr":"𝔜","yfr":"𝔶","YIcy":"Ї","yicy":"ї","Yopf":"𝕐","yopf":"𝕪","Yscr":"𝒴","yscr":"𝓎","YUcy":"Ю","yucy":"ю","yuml":"ÿ","Yuml":"Ÿ","Zacute":"Ź","zacute":"ź","Zcaron":"Ž","zcaron":"ž","Zcy":"З","zcy":"з","Zdot":"Ż","zdot":"ż","zeetrf":"ℨ","ZeroWidthSpace":"","Zeta":"Ζ","zeta":"ζ","zfr":"𝔷","Zfr":"ℨ","ZHcy":"Ж","zhcy":"ж","zigrarr":"⇝","zopf":"𝕫","Zopf":"ℤ","Zscr":"𝒵","zscr":"𝓏","zwj":"","zwnj":""}')},function(e,t,r){"use strict";var n={};function o(e,t,r){var i,c,code,l,f,h="";for("string"!=typeof t&&(r=t,t=o.defaultChars),void 0===r&&(r=!0),f=function(e){var i,t,r=n[e];if(r)return r;for(r=n[e]=[],i=0;i<128;i++)t=String.fromCharCode(i),/^[0-9a-z]$/i.test(t)?r.push(t):r.push("%"+("0"+i.toString(16).toUpperCase()).slice(-2));for(i=0;i<e.length;i++)r[e.charCodeAt(i)]=e[i];return r}(t),i=0,c=e.length;i<c;i++)if(code=e.charCodeAt(i),r&&37===code&&i+2<c&&/^[0-9a-f]{2}$/i.test(e.slice(i+1,i+3)))h+=e.slice(i,i+3),i+=2;else if(code<128)h+=f[code];else if(code>=55296&&code<=57343){if(code>=55296&&code<=56319&&i+1<c&&(l=e.charCodeAt(i+1))>=56320&&l<=57343){h+=encodeURIComponent(e[i]+e[i+1]),i++;continue}h+="%EF%BF%BD"}else h+=encodeURIComponent(e[i]);return h}o.defaultChars=";/?:@&=+$,-_.!~*'()#",o.componentChars="-_.!~*'()",e.exports=o},function(e,t,r){"use strict";var n={};function o(e,t){var r;return"string"!=typeof t&&(t=o.defaultChars),r=function(e){var i,t,r=n[e];if(r)return r;for(r=n[e]=[],i=0;i<128;i++)t=String.fromCharCode(i),r.push(t);for(i=0;i<e.length;i++)r[t=e.charCodeAt(i)]="%"+("0"+t.toString(16).toUpperCase()).slice(-2);return r}(t),e.replace(/(%[a-f0-9]{2})+/gi,(function(e){var i,t,n,o,c,l,f,h="";for(i=0,t=e.length;i<t;i+=3)(n=parseInt(e.slice(i+1,i+3),16))<128?h+=r[n]:192==(224&n)&&i+3<t&&128==(192&(o=parseInt(e.slice(i+4,i+6),16)))?(h+=(f=n<<6&1984|63&o)<128?"��":String.fromCharCode(f),i+=3):224==(240&n)&&i+6<t&&(o=parseInt(e.slice(i+4,i+6),16),c=parseInt(e.slice(i+7,i+9),16),128==(192&o)&&128==(192&c))?(h+=(f=n<<12&61440|o<<6&4032|63&c)<2048||f>=55296&&f<=57343?"���":String.fromCharCode(f),i+=6):240==(248&n)&&i+9<t&&(o=parseInt(e.slice(i+4,i+6),16),c=parseInt(e.slice(i+7,i+9),16),l=parseInt(e.slice(i+10,i+12),16),128==(192&o)&&128==(192&c)&&128==(192&l))?((f=n<<18&1835008|o<<12&258048|c<<6&4032|63&l)<65536||f>1114111?h+="����":(f-=65536,h+=String.fromCharCode(55296+(f>>10),56320+(1023&f))),i+=9):h+="�";return h}))}o.defaultChars=";/?:@&=+$,#",o.componentChars="",e.exports=o},function(e,t,r){"use strict";e.exports=function(e){var t="";return t+=e.protocol||"",t+=e.slashes?"//":"",t+=e.auth?e.auth+"@":"",e.hostname&&-1!==e.hostname.indexOf(":")?t+="["+e.hostname+"]":t+=e.hostname||"",t+=e.port?":"+e.port:"",t+=e.pathname||"",t+=e.search||"",t+=e.hash||""}},function(e,t,r){"use strict";function n(){this.protocol=null,this.slashes=null,this.auth=null,this.port=null,this.hostname=null,this.hash=null,this.search=null,this.pathname=null}var o=/^([a-z0-9.+-]+:)/i,c=/:[0-9]*$/,l=/^(\/\/?(?!\/)[^\?\s]*)(\?[^\s]*)?$/,f=["{","}","|","\\","^","`"].concat(["<",">",'"',"`"," ","\r","\n","\t"]),h=["'"].concat(f),d=["%","/","?",";","#"].concat(h),m=["/","?","#"],v=/^[+a-z0-9A-Z_-]{0,63}$/,_=/^([+a-z0-9A-Z_-]{0,63})(.*)$/,y={javascript:!0,"javascript:":!0},k={http:!0,https:!0,ftp:!0,gopher:!0,file:!0,"http:":!0,"https:":!0,"ftp:":!0,"gopher:":!0,"file:":!0};n.prototype.parse=function(e,t){var i,r,n,c,f,h=e;if(h=h.trim(),!t&&1===e.split("#").length){var w=l.exec(h);if(w)return this.pathname=w[1],w[2]&&(this.search=w[2]),this}var x=o.exec(h);if(x&&(n=(x=x[0]).toLowerCase(),this.protocol=x,h=h.substr(x.length)),(t||x||h.match(/^\/\/[^@\/]+@[^@\/]+/))&&(!(f="//"===h.substr(0,2))||x&&y[x]||(h=h.substr(2),this.slashes=!0)),!y[x]&&(f||x&&!k[x])){var A,C,E=-1;for(i=0;i<m.length;i++)-1!==(c=h.indexOf(m[i]))&&(-1===E||c<E)&&(E=c);for(-1!==(C=-1===E?h.lastIndexOf("@"):h.lastIndexOf("@",E))&&(A=h.slice(0,C),h=h.slice(C+1),this.auth=A),E=-1,i=0;i<d.length;i++)-1!==(c=h.indexOf(d[i]))&&(-1===E||c<E)&&(E=c);-1===E&&(E=h.length),":"===h[E-1]&&E--;var F=h.slice(0,E);h=h.slice(E),this.parseHost(F),this.hostname=this.hostname||"";var S="["===this.hostname[0]&&"]"===this.hostname[this.hostname.length-1];if(!S){var D=this.hostname.split(/\./);for(i=0,r=D.length;i<r;i++){var T=D[i];if(T&&!T.match(v)){for(var z="",L=0,O=T.length;L<O;L++)T.charCodeAt(L)>127?z+="x":z+=T[L];if(!z.match(v)){var I=D.slice(0,i),$=D.slice(i+1),P=T.match(_);P&&(I.push(P[1]),$.unshift(P[2])),$.length&&(h=$.join(".")+h),this.hostname=I.join(".");break}}}}this.hostname.length>255&&(this.hostname=""),S&&(this.hostname=this.hostname.substr(1,this.hostname.length-2))}var j=h.indexOf("#");-1!==j&&(this.hash=h.substr(j),h=h.slice(0,j));var R=h.indexOf("?");return-1!==R&&(this.search=h.substr(R),h=h.slice(0,R)),h&&(this.pathname=h),k[n]&&this.hostname&&!this.pathname&&(this.pathname=""),this},n.prototype.parseHost=function(e){var t=c.exec(e);t&&(":"!==(t=t[0])&&(this.port=t.substr(1)),e=e.substr(0,e.length-t.length)),e&&(this.hostname=e)},e.exports=function(e,t){if(e&&e instanceof n)return e;var u=new n;return u.parse(e,t),u}},function(e,t,r){"use strict";t.Any=r(204),t.Cc=r(205),t.Cf=r(250),t.P=r(189),t.Z=r(206)},function(e,t){e.exports=/[\xAD\u0600-\u0605\u061C\u06DD\u070F\u08E2\u180E\u200B-\u200F\u202A-\u202E\u2060-\u2064\u2066-\u206F\uFEFF\uFFF9-\uFFFB]|\uD804[\uDCBD\uDCCD]|\uD82F[\uDCA0-\uDCA3]|\uD834[\uDD73-\uDD7A]|\uDB40[\uDC01\uDC20-\uDC7F]/},function(e,t,r){"use strict";t.parseLinkLabel=r(252),t.parseLinkDestination=r(253),t.parseLinkTitle=r(254)},function(e,t,r){"use strict";e.exports=function(e,t,r){var n,o,marker,c,l=-1,f=e.posMax,h=e.pos;for(e.pos=t+1,n=1;e.pos<f;){if(93===(marker=e.src.charCodeAt(e.pos))&&0===--n){o=!0;break}if(c=e.pos,e.md.inline.skipToken(e),91===marker)if(c===e.pos-1)n++;else if(r)return e.pos=h,-1}return o&&(l=e.pos),e.pos=h,l}},function(e,t,r){"use strict";var n=r(186).unescapeAll;e.exports=function(e,t,r){var code,o,c=t,l={ok:!1,pos:0,lines:0,str:""};if(60===e.charCodeAt(t)){for(t++;t<r;){if(10===(code=e.charCodeAt(t)))return l;if(60===code)return l;if(62===code)return l.pos=t+1,l.str=n(e.slice(c+1,t)),l.ok=!0,l;92===code&&t+1<r?t+=2:t++}return l}for(o=0;t<r&&32!==(code=e.charCodeAt(t))&&!(code<32||127===code);)if(92===code&&t+1<r){if(32===e.charCodeAt(t+1))break;t+=2}else{if(40===code&&++o>32)return l;if(41===code){if(0===o)break;o--}t++}return c===t||0!==o||(l.str=n(e.slice(c,t)),l.lines=0,l.pos=t,l.ok=!0),l}},function(e,t,r){"use strict";var n=r(186).unescapeAll;e.exports=function(e,t,r){var code,marker,o=0,c=t,l={ok:!1,pos:0,lines:0,str:""};if(t>=r)return l;if(34!==(marker=e.charCodeAt(t))&&39!==marker&&40!==marker)return l;for(t++,40===marker&&(marker=41);t<r;){if((code=e.charCodeAt(t))===marker)return l.pos=t+1,l.lines=o,l.str=n(e.slice(c+1,t)),l.ok=!0,l;if(40===code&&41===marker)return l;10===code?o++:92===code&&t+1<r&&(t++,10===e.charCodeAt(t)&&o++),t++}return l}},function(e,t,r){"use strict";var n=r(186).assign,o=r(186).unescapeAll,c=r(186).escapeHtml,l={};function f(){this.rules=n({},l)}l.code_inline=function(e,t,r,n,o){var l=e[t];return"<code"+o.renderAttrs(l)+">"+c(e[t].content)+"</code>"},l.code_block=function(e,t,r,n,o){var l=e[t];return"<pre"+o.renderAttrs(l)+"><code>"+c(e[t].content)+"</code></pre>\n"},l.fence=function(e,t,r,n,l){var f,i,h,d,m,v=e[t],_=v.info?o(v.info).trim():"",y="",k="";return _&&(y=(h=_.split(/(\s+)/g))[0],k=h.slice(2).join("")),0===(f=r.highlight&&r.highlight(v.content,y,k)||c(v.content)).indexOf("<pre")?f+"\n":_?(i=v.attrIndex("class"),d=v.attrs?v.attrs.slice():[],i<0?d.push(["class",r.langPrefix+y]):(d[i]=d[i].slice(),d[i][1]+=" "+r.langPrefix+y),m={attrs:d},"<pre><code"+l.renderAttrs(m)+">"+f+"</code></pre>\n"):"<pre><code"+l.renderAttrs(v)+">"+f+"</code></pre>\n"},l.image=function(e,t,r,n,o){var c=e[t];return c.attrs[c.attrIndex("alt")][1]=o.renderInlineAsText(c.children,r,n),o.renderToken(e,t,r)},l.hardbreak=function(e,t,r){return r.xhtmlOut?"<br />\n":"<br>\n"},l.softbreak=function(e,t,r){return r.breaks?r.xhtmlOut?"<br />\n":"<br>\n":"\n"},l.text=function(e,t){return c(e[t].content)},l.html_block=function(e,t){return e[t].content},l.html_inline=function(e,t){return e[t].content},f.prototype.renderAttrs=function(e){var i,t,r;if(!e.attrs)return"";for(r="",i=0,t=e.attrs.length;i<t;i++)r+=" "+c(e.attrs[i][0])+'="'+c(e.attrs[i][1])+'"';return r},f.prototype.renderToken=function(e,t,r){var n,o="",c=!1,l=e[t];return l.hidden?"":(l.block&&-1!==l.nesting&&t&&e[t-1].hidden&&(o+="\n"),o+=(-1===l.nesting?"</":"<")+l.tag,o+=this.renderAttrs(l),0===l.nesting&&r.xhtmlOut&&(o+=" /"),l.block&&(c=!0,1===l.nesting&&t+1<e.length&&("inline"===(n=e[t+1]).type||n.hidden||-1===n.nesting&&n.tag===l.tag)&&(c=!1)),o+=c?">\n":">")},f.prototype.renderInline=function(e,t,r){for(var n,o="",c=this.rules,i=0,l=e.length;i<l;i++)void 0!==c[n=e[i].type]?o+=c[n](e,i,t,r,this):o+=this.renderToken(e,i,t);return o},f.prototype.renderInlineAsText=function(e,t,r){for(var n="",i=0,o=e.length;i<o;i++)"text"===e[i].type?n+=e[i].content:"image"===e[i].type?n+=this.renderInlineAsText(e[i].children,t,r):"softbreak"===e[i].type&&(n+="\n");return n},f.prototype.render=function(e,t,r){var i,n,o,c="",l=this.rules;for(i=0,n=e.length;i<n;i++)"inline"===(o=e[i].type)?c+=this.renderInline(e[i].children,t,r):void 0!==l[o]?c+=l[e[i].type](e,i,t,r,this):c+=this.renderToken(e,i,t,r);return c},e.exports=f},function(e,t,r){"use strict";var n=r(190),o=[["normalize",r(257)],["block",r(258)],["inline",r(259)],["linkify",r(260)],["replacements",r(261)],["smartquotes",r(262)]];function c(){this.ruler=new n;for(var i=0;i<o.length;i++)this.ruler.push(o[i][0],o[i][1])}c.prototype.process=function(e){var i,t,r;for(i=0,t=(r=this.ruler.getRules("")).length;i<t;i++)r[i](e)},c.prototype.State=r(263),e.exports=c},function(e,t,r){"use strict";var n=/\r\n?|\n/g,o=/\0/g;e.exports=function(e){var t;t=(t=e.src.replace(n,"\n")).replace(o,"�"),e.src=t}},function(e,t,r){"use strict";e.exports=function(e){var t;e.inlineMode?((t=new e.Token("inline","",0)).content=e.src,t.map=[0,1],t.children=[],e.tokens.push(t)):e.md.block.parse(e.src,e.md,e.env,e.tokens)}},function(e,t,r){"use strict";e.exports=function(e){var t,i,r,n=e.tokens;for(i=0,r=n.length;i<r;i++)"inline"===(t=n[i]).type&&e.md.inline.parse(t.content,e.md,e.env,t.children)}},function(e,t,r){"use strict";var n=r(186).arrayReplaceAt;function o(e){return/^<\/a\s*>/i.test(e)}e.exports=function(e){var i,t,r,c,l,f,h,d,text,m,v,_,y,k,w,x,A,C,E=e.tokens;if(e.md.options.linkify)for(t=0,r=E.length;t<r;t++)if("inline"===E[t].type&&e.md.linkify.pretest(E[t].content))for(y=0,i=(c=E[t].children).length-1;i>=0;i--)if("link_close"!==(f=c[i]).type){if("html_inline"===f.type&&(C=f.content,/^<a[>\s]/i.test(C)&&y>0&&y--,o(f.content)&&y++),!(y>0)&&"text"===f.type&&e.md.linkify.test(f.content)){for(text=f.content,A=e.md.linkify.match(text),h=[],_=f.level,v=0,d=0;d<A.length;d++)k=A[d].url,w=e.md.normalizeLink(k),e.md.validateLink(w)&&(x=A[d].text,x=A[d].schema?"mailto:"!==A[d].schema||/^mailto:/i.test(x)?e.md.normalizeLinkText(x):e.md.normalizeLinkText("mailto:"+x).replace(/^mailto:/,""):e.md.normalizeLinkText("http://"+x).replace(/^http:\/\//,""),(m=A[d].index)>v&&((l=new e.Token("text","",0)).content=text.slice(v,m),l.level=_,h.push(l)),(l=new e.Token("link_open","a",1)).attrs=[["href",w]],l.level=_++,l.markup="linkify",l.info="auto",h.push(l),(l=new e.Token("text","",0)).content=x,l.level=_,h.push(l),(l=new e.Token("link_close","a",-1)).level=--_,l.markup="linkify",l.info="auto",h.push(l),v=A[d].lastIndex);v<text.length&&((l=new e.Token("text","",0)).content=text.slice(v),l.level=_,h.push(l)),E[t].children=c=n(c,i,h)}}else for(i--;c[i].level!==f.level&&"link_open"!==c[i].type;)i--}},function(e,t,r){"use strict";var n=/\+-|\.\.|\?\?\?\?|!!!!|,,|--/,o=/\((c|tm|r|p)\)/i,c=/\((c|tm|r|p)\)/gi,l={c:"©",r:"®",p:"§",tm:"™"};function f(e,t){return l[t.toLowerCase()]}function h(e){var i,t,r=0;for(i=e.length-1;i>=0;i--)"text"!==(t=e[i]).type||r||(t.content=t.content.replace(c,f)),"link_open"===t.type&&"auto"===t.info&&r--,"link_close"===t.type&&"auto"===t.info&&r++}function d(e){var i,t,r=0;for(i=e.length-1;i>=0;i--)"text"!==(t=e[i]).type||r||n.test(t.content)&&(t.content=t.content.replace(/\+-/g,"±").replace(/\.{2,}/g,"…").replace(/([?!])…/g,"$1..").replace(/([?!]){4,}/g,"$1$1$1").replace(/,{2,}/g,",").replace(/(^|[^-])---(?=[^-]|$)/gm,"$1—").replace(/(^|\s)--(?=\s|$)/gm,"$1–").replace(/(^|[^-\s])--(?=[^-\s]|$)/gm,"$1–")),"link_open"===t.type&&"auto"===t.info&&r--,"link_close"===t.type&&"auto"===t.info&&r++}e.exports=function(e){var t;if(e.md.options.typographer)for(t=e.tokens.length-1;t>=0;t--)"inline"===e.tokens[t].type&&(o.test(e.tokens[t].content)&&h(e.tokens[t].children),n.test(e.tokens[t].content)&&d(e.tokens[t].children))}},function(e,t,r){"use strict";var n=r(186).isWhiteSpace,o=r(186).isPunctChar,c=r(186).isMdAsciiPunct,l=/['"]/,f=/['"]/g;function h(e,t,r){return e.substr(0,t)+r+e.substr(t+1)}function d(e,t){var i,r,text,l,d,m,v,_,y,k,w,x,A,C,E,F,S,D,T,z,L;for(T=[],i=0;i<e.length;i++){for(r=e[i],v=e[i].level,S=T.length-1;S>=0&&!(T[S].level<=v);S--);if(T.length=S+1,"text"===r.type){d=0,m=(text=r.content).length;e:for(;d<m&&(f.lastIndex=d,l=f.exec(text));){if(E=F=!0,d=l.index+1,D="'"===l[0],y=32,l.index-1>=0)y=text.charCodeAt(l.index-1);else for(S=i-1;S>=0&&("softbreak"!==e[S].type&&"hardbreak"!==e[S].type);S--)if(e[S].content){y=e[S].content.charCodeAt(e[S].content.length-1);break}if(k=32,d<m)k=text.charCodeAt(d);else for(S=i+1;S<e.length&&("softbreak"!==e[S].type&&"hardbreak"!==e[S].type);S++)if(e[S].content){k=e[S].content.charCodeAt(0);break}if(w=c(y)||o(String.fromCharCode(y)),x=c(k)||o(String.fromCharCode(k)),A=n(y),(C=n(k))?E=!1:x&&(A||w||(E=!1)),A?F=!1:w&&(C||x||(F=!1)),34===k&&'"'===l[0]&&y>=48&&y<=57&&(F=E=!1),E&&F&&(E=w,F=x),E||F){if(F)for(S=T.length-1;S>=0&&(_=T[S],!(T[S].level<v));S--)if(_.single===D&&T[S].level===v){_=T[S],D?(z=t.md.options.quotes[2],L=t.md.options.quotes[3]):(z=t.md.options.quotes[0],L=t.md.options.quotes[1]),r.content=h(r.content,l.index,L),e[_.token].content=h(e[_.token].content,_.pos,z),d+=L.length-1,_.token===i&&(d+=z.length-1),m=(text=r.content).length,T.length=S;continue e}E?T.push({token:i,pos:l.index,single:D,level:v}):F&&D&&(r.content=h(r.content,l.index,"’"))}else D&&(r.content=h(r.content,l.index,"’"))}}}}e.exports=function(e){var t;if(e.md.options.typographer)for(t=e.tokens.length-1;t>=0;t--)"inline"===e.tokens[t].type&&l.test(e.tokens[t].content)&&d(e.tokens[t].children,e)}},function(e,t,r){"use strict";var n=r(191);function o(e,t,r){this.src=e,this.env=r,this.tokens=[],this.inlineMode=!1,this.md=t}o.prototype.Token=n,e.exports=o},function(e,t,r){"use strict";var n=r(190),o=[["table",r(265),["paragraph","reference"]],["code",r(266)],["fence",r(267),["paragraph","reference","blockquote","list"]],["blockquote",r(268),["paragraph","reference","blockquote","list"]],["hr",r(269),["paragraph","reference","blockquote","list"]],["list",r(270),["paragraph","reference","blockquote"]],["reference",r(271)],["html_block",r(272),["paragraph","reference","blockquote"]],["heading",r(274),["paragraph","reference","blockquote"]],["lheading",r(275)],["paragraph",r(276)]];function c(){this.ruler=new n;for(var i=0;i<o.length;i++)this.ruler.push(o[i][0],o[i][1],{alt:(o[i][2]||[]).slice()})}c.prototype.tokenize=function(e,t,r){for(var i,n=this.ruler.getRules(""),o=n.length,line=t,c=!1,l=e.md.options.maxNesting;line<r&&(e.line=line=e.skipEmptyLines(line),!(line>=r))&&!(e.sCount[line]<e.blkIndent);){if(e.level>=l){e.line=r;break}for(i=0;i<o&&!n[i](e,line,r,!1);i++);e.tight=!c,e.isEmpty(e.line-1)&&(c=!0),(line=e.line)<r&&e.isEmpty(line)&&(c=!0,line++,e.line=line)}},c.prototype.parse=function(e,t,r,n){var o;e&&(o=new this.State(e,t,r,n),this.tokenize(o,o.line,o.lineMax))},c.prototype.State=r(277),e.exports=c},function(e,t,r){"use strict";var n=r(186).isSpace;function o(e,line){var t=e.bMarks[line]+e.tShift[line],r=e.eMarks[line];return e.src.substr(t,r-t)}function c(e){var t,r=[],n=0,o=e.length,c=!1,l=0,f="";for(t=e.charCodeAt(n);n<o;)124===t&&(c?(f+=e.substring(l,n-1),l=n):(r.push(f+e.substring(l,n)),f="",l=n+1)),c=92===t,n++,t=e.charCodeAt(n);return r.push(f+e.substring(l)),r}e.exports=function(e,t,r,l){var f,h,d,i,m,v,_,y,k,w,x,A,C,E,F,S,D,T;if(t+2>r)return!1;if(v=t+1,e.sCount[v]<e.blkIndent)return!1;if(e.sCount[v]-e.blkIndent>=4)return!1;if((d=e.bMarks[v]+e.tShift[v])>=e.eMarks[v])return!1;if(124!==(D=e.src.charCodeAt(d++))&&45!==D&&58!==D)return!1;if(d>=e.eMarks[v])return!1;if(124!==(T=e.src.charCodeAt(d++))&&45!==T&&58!==T&&!n(T))return!1;if(45===D&&n(T))return!1;for(;d<e.eMarks[v];){if(124!==(f=e.src.charCodeAt(d))&&45!==f&&58!==f&&!n(f))return!1;d++}for(_=(h=o(e,t+1)).split("|"),w=[],i=0;i<_.length;i++){if(!(x=_[i].trim())){if(0===i||i===_.length-1)continue;return!1}if(!/^:?-+:?$/.test(x))return!1;58===x.charCodeAt(x.length-1)?w.push(58===x.charCodeAt(0)?"center":"right"):58===x.charCodeAt(0)?w.push("left"):w.push("")}if(-1===(h=o(e,t).trim()).indexOf("|"))return!1;if(e.sCount[t]-e.blkIndent>=4)return!1;if((_=c(h)).length&&""===_[0]&&_.shift(),_.length&&""===_[_.length-1]&&_.pop(),0===(y=_.length)||y!==w.length)return!1;if(l)return!0;for(E=e.parentType,e.parentType="table",S=e.md.block.ruler.getRules("blockquote"),(k=e.push("table_open","table",1)).map=A=[t,0],(k=e.push("thead_open","thead",1)).map=[t,t+1],(k=e.push("tr_open","tr",1)).map=[t,t+1],i=0;i<_.length;i++)k=e.push("th_open","th",1),w[i]&&(k.attrs=[["style","text-align:"+w[i]]]),(k=e.push("inline","",0)).content=_[i].trim(),k.children=[],k=e.push("th_close","th",-1);for(k=e.push("tr_close","tr",-1),k=e.push("thead_close","thead",-1),v=t+2;v<r&&!(e.sCount[v]<e.blkIndent);v++){for(F=!1,i=0,m=S.length;i<m;i++)if(S[i](e,v,r,!0)){F=!0;break}if(F)break;if(!(h=o(e,v).trim()))break;if(e.sCount[v]-e.blkIndent>=4)break;for((_=c(h)).length&&""===_[0]&&_.shift(),_.length&&""===_[_.length-1]&&_.pop(),v===t+2&&((k=e.push("tbody_open","tbody",1)).map=C=[t+2,0]),(k=e.push("tr_open","tr",1)).map=[v,v+1],i=0;i<y;i++)k=e.push("td_open","td",1),w[i]&&(k.attrs=[["style","text-align:"+w[i]]]),(k=e.push("inline","",0)).content=_[i]?_[i].trim():"",k.children=[],k=e.push("td_close","td",-1);k=e.push("tr_close","tr",-1)}return C&&(k=e.push("tbody_close","tbody",-1),C[1]=v),k=e.push("table_close","table",-1),A[1]=v,e.parentType=E,e.line=v,!0}},function(e,t,r){"use strict";e.exports=function(e,t,r){var n,o,c;if(e.sCount[t]-e.blkIndent<4)return!1;for(o=n=t+1;n<r;)if(e.isEmpty(n))n++;else{if(!(e.sCount[n]-e.blkIndent>=4))break;o=++n}return e.line=o,(c=e.push("code_block","code",0)).content=e.getLines(t,o,4+e.blkIndent,!1)+"\n",c.map=[t,e.line],!0}},function(e,t,r){"use strict";e.exports=function(e,t,r,n){var marker,o,c,l,f,h,d,m=!1,v=e.bMarks[t]+e.tShift[t],_=e.eMarks[t];if(e.sCount[t]-e.blkIndent>=4)return!1;if(v+3>_)return!1;if(126!==(marker=e.src.charCodeAt(v))&&96!==marker)return!1;if(f=v,(o=(v=e.skipChars(v,marker))-f)<3)return!1;if(d=e.src.slice(f,v),c=e.src.slice(v,_),96===marker&&c.indexOf(String.fromCharCode(marker))>=0)return!1;if(n)return!0;for(l=t;!(++l>=r)&&!((v=f=e.bMarks[l]+e.tShift[l])<(_=e.eMarks[l])&&e.sCount[l]<e.blkIndent);)if(e.src.charCodeAt(v)===marker&&!(e.sCount[l]-e.blkIndent>=4||(v=e.skipChars(v,marker))-f<o||(v=e.skipSpaces(v))<_)){m=!0;break}return o=e.sCount[t],e.line=l+(m?1:0),(h=e.push("fence","code",0)).info=c,h.content=e.getLines(t+1,l,o,!0),h.markup=d,h.map=[t,e.line],!0}},function(e,t,r){"use strict";var n=r(186).isSpace;e.exports=function(e,t,r,o){var c,l,i,f,h,d,m,v,_,y,k,w,x,A,C,E,F,S,D,T,z=e.lineMax,L=e.bMarks[t]+e.tShift[t],O=e.eMarks[t];if(e.sCount[t]-e.blkIndent>=4)return!1;if(62!==e.src.charCodeAt(L++))return!1;if(o)return!0;for(f=_=e.sCount[t]+1,32===e.src.charCodeAt(L)?(L++,f++,_++,c=!1,E=!0):9===e.src.charCodeAt(L)?(E=!0,(e.bsCount[t]+_)%4==3?(L++,f++,_++,c=!1):c=!0):E=!1,y=[e.bMarks[t]],e.bMarks[t]=L;L<O&&(l=e.src.charCodeAt(L),n(l));)9===l?_+=4-(_+e.bsCount[t]+(c?1:0))%4:_++,L++;for(k=[e.bsCount[t]],e.bsCount[t]=e.sCount[t]+1+(E?1:0),d=L>=O,A=[e.sCount[t]],e.sCount[t]=_-f,C=[e.tShift[t]],e.tShift[t]=L-e.bMarks[t],S=e.md.block.ruler.getRules("blockquote"),x=e.parentType,e.parentType="blockquote",v=t+1;v<r&&(T=e.sCount[v]<e.blkIndent,!((L=e.bMarks[v]+e.tShift[v])>=(O=e.eMarks[v])));v++)if(62!==e.src.charCodeAt(L++)||T){if(d)break;for(F=!1,i=0,h=S.length;i<h;i++)if(S[i](e,v,r,!0)){F=!0;break}if(F){e.lineMax=v,0!==e.blkIndent&&(y.push(e.bMarks[v]),k.push(e.bsCount[v]),C.push(e.tShift[v]),A.push(e.sCount[v]),e.sCount[v]-=e.blkIndent);break}y.push(e.bMarks[v]),k.push(e.bsCount[v]),C.push(e.tShift[v]),A.push(e.sCount[v]),e.sCount[v]=-1}else{for(f=_=e.sCount[v]+1,32===e.src.charCodeAt(L)?(L++,f++,_++,c=!1,E=!0):9===e.src.charCodeAt(L)?(E=!0,(e.bsCount[v]+_)%4==3?(L++,f++,_++,c=!1):c=!0):E=!1,y.push(e.bMarks[v]),e.bMarks[v]=L;L<O&&(l=e.src.charCodeAt(L),n(l));)9===l?_+=4-(_+e.bsCount[v]+(c?1:0))%4:_++,L++;d=L>=O,k.push(e.bsCount[v]),e.bsCount[v]=e.sCount[v]+1+(E?1:0),A.push(e.sCount[v]),e.sCount[v]=_-f,C.push(e.tShift[v]),e.tShift[v]=L-e.bMarks[v]}for(w=e.blkIndent,e.blkIndent=0,(D=e.push("blockquote_open","blockquote",1)).markup=">",D.map=m=[t,0],e.md.block.tokenize(e,t,v),(D=e.push("blockquote_close","blockquote",-1)).markup=">",e.lineMax=z,e.parentType=x,m[1]=e.line,i=0;i<C.length;i++)e.bMarks[i+t]=y[i],e.tShift[i+t]=C[i],e.sCount[i+t]=A[i],e.bsCount[i+t]=k[i];return e.blkIndent=w,!0}},function(e,t,r){"use strict";var n=r(186).isSpace;e.exports=function(e,t,r,o){var marker,c,l,f,h=e.bMarks[t]+e.tShift[t],d=e.eMarks[t];if(e.sCount[t]-e.blkIndent>=4)return!1;if(42!==(marker=e.src.charCodeAt(h++))&&45!==marker&&95!==marker)return!1;for(c=1;h<d;){if((l=e.src.charCodeAt(h++))!==marker&&!n(l))return!1;l===marker&&c++}return!(c<3)&&(o||(e.line=t+1,(f=e.push("hr","hr",0)).map=[t,e.line],f.markup=Array(c+1).join(String.fromCharCode(marker))),!0)}},function(e,t,r){"use strict";var n=r(186).isSpace;function o(e,t){var marker,r,o,c;return r=e.bMarks[t]+e.tShift[t],o=e.eMarks[t],42!==(marker=e.src.charCodeAt(r++))&&45!==marker&&43!==marker||r<o&&(c=e.src.charCodeAt(r),!n(c))?-1:r}function c(e,t){var r,o=e.bMarks[t]+e.tShift[t],c=o,l=e.eMarks[t];if(c+1>=l)return-1;if((r=e.src.charCodeAt(c++))<48||r>57)return-1;for(;;){if(c>=l)return-1;if(!((r=e.src.charCodeAt(c++))>=48&&r<=57)){if(41===r||46===r)break;return-1}if(c-o>=10)return-1}return c<l&&(r=e.src.charCodeAt(c),!n(r))?-1:c}e.exports=function(e,t,r,n){var l,f,i,h,d,m,v,_,y,k,w,x,A,C,E,F,S,D,T,z,L,O,I,$,P,j,R,M,N=!1,B=!0;if(e.sCount[t]-e.blkIndent>=4)return!1;if(e.listIndent>=0&&e.sCount[t]-e.listIndent>=4&&e.sCount[t]<e.blkIndent)return!1;if(n&&"paragraph"===e.parentType&&e.tShift[t]>=e.blkIndent&&(N=!0),(I=c(e,t))>=0){if(v=!0,P=e.bMarks[t]+e.tShift[t],A=Number(e.src.slice(P,I-1)),N&&1!==A)return!1}else{if(!((I=o(e,t))>=0))return!1;v=!1}if(N&&e.skipSpaces(I)>=e.eMarks[t])return!1;if(x=e.src.charCodeAt(I-1),n)return!0;for(w=e.tokens.length,v?(M=e.push("ordered_list_open","ol",1),1!==A&&(M.attrs=[["start",A]])):M=e.push("bullet_list_open","ul",1),M.map=k=[t,0],M.markup=String.fromCharCode(x),E=t,$=!1,R=e.md.block.ruler.getRules("list"),D=e.parentType,e.parentType="list";E<r;){for(O=I,C=e.eMarks[E],m=F=e.sCount[E]+I-(e.bMarks[t]+e.tShift[t]);O<C;){if(9===(l=e.src.charCodeAt(O)))F+=4-(F+e.bsCount[E])%4;else{if(32!==l)break;F++}O++}if((d=(f=O)>=C?1:F-m)>4&&(d=1),h=m+d,(M=e.push("list_item_open","li",1)).markup=String.fromCharCode(x),M.map=_=[t,0],v&&(M.info=e.src.slice(P,I-1)),L=e.tight,z=e.tShift[t],T=e.sCount[t],S=e.listIndent,e.listIndent=e.blkIndent,e.blkIndent=h,e.tight=!0,e.tShift[t]=f-e.bMarks[t],e.sCount[t]=F,f>=C&&e.isEmpty(t+1)?e.line=Math.min(e.line+2,r):e.md.block.tokenize(e,t,r,!0),e.tight&&!$||(B=!1),$=e.line-t>1&&e.isEmpty(e.line-1),e.blkIndent=e.listIndent,e.listIndent=S,e.tShift[t]=z,e.sCount[t]=T,e.tight=L,(M=e.push("list_item_close","li",-1)).markup=String.fromCharCode(x),E=t=e.line,_[1]=E,f=e.bMarks[t],E>=r)break;if(e.sCount[E]<e.blkIndent)break;if(e.sCount[t]-e.blkIndent>=4)break;for(j=!1,i=0,y=R.length;i<y;i++)if(R[i](e,E,r,!0)){j=!0;break}if(j)break;if(v){if((I=c(e,E))<0)break;P=e.bMarks[E]+e.tShift[E]}else if((I=o(e,E))<0)break;if(x!==e.src.charCodeAt(I-1))break}return(M=v?e.push("ordered_list_close","ol",-1):e.push("bullet_list_close","ul",-1)).markup=String.fromCharCode(x),k[1]=E,e.line=E,e.parentType=D,B&&function(e,t){var i,r,n=e.level+2;for(i=t+2,r=e.tokens.length-2;i<r;i++)e.tokens[i].level===n&&"paragraph_open"===e.tokens[i].type&&(e.tokens[i+2].hidden=!0,e.tokens[i].hidden=!0,i+=2)}(e,w),!0}},function(e,t,r){"use strict";var n=r(186).normalizeReference,o=r(186).isSpace;e.exports=function(e,t,r,c){var l,f,h,d,m,i,v,label,_,y,k,w,x,A,C,title,E=0,F=e.bMarks[t]+e.tShift[t],S=e.eMarks[t],D=t+1;if(e.sCount[t]-e.blkIndent>=4)return!1;if(91!==e.src.charCodeAt(F))return!1;for(;++F<S;)if(93===e.src.charCodeAt(F)&&92!==e.src.charCodeAt(F-1)){if(F+1===S)return!1;if(58!==e.src.charCodeAt(F+1))return!1;break}for(d=e.lineMax,C=e.md.block.ruler.getRules("reference"),y=e.parentType,e.parentType="reference";D<d&&!e.isEmpty(D);D++)if(!(e.sCount[D]-e.blkIndent>3||e.sCount[D]<0)){for(A=!1,i=0,v=C.length;i<v;i++)if(C[i](e,D,d,!0)){A=!0;break}if(A)break}for(S=(x=e.getLines(t,D,e.blkIndent,!1).trim()).length,F=1;F<S;F++){if(91===(l=x.charCodeAt(F)))return!1;if(93===l){_=F;break}(10===l||92===l&&++F<S&&10===x.charCodeAt(F))&&E++}if(_<0||58!==x.charCodeAt(_+1))return!1;for(F=_+2;F<S;F++)if(10===(l=x.charCodeAt(F)))E++;else if(!o(l))break;if(!(k=e.md.helpers.parseLinkDestination(x,F,S)).ok)return!1;if(m=e.md.normalizeLink(k.str),!e.md.validateLink(m))return!1;for(f=F=k.pos,h=E+=k.lines,w=F;F<S;F++)if(10===(l=x.charCodeAt(F)))E++;else if(!o(l))break;for(k=e.md.helpers.parseLinkTitle(x,F,S),F<S&&w!==F&&k.ok?(title=k.str,F=k.pos,E+=k.lines):(title="",F=f,E=h);F<S&&(l=x.charCodeAt(F),o(l));)F++;if(F<S&&10!==x.charCodeAt(F)&&title)for(title="",F=f,E=h;F<S&&(l=x.charCodeAt(F),o(l));)F++;return!(F<S&&10!==x.charCodeAt(F))&&(!!(label=n(x.slice(1,_)))&&(c||(void 0===e.env.references&&(e.env.references={}),void 0===e.env.references[label]&&(e.env.references[label]={title:title,href:m}),e.parentType=y,e.line=t+E+1),!0))}},function(e,t,r){"use strict";var n=r(273),o=r(207).HTML_OPEN_CLOSE_TAG_RE,c=[[/^<(script|pre|style|textarea)(?=(\s|>|$))/i,/<\/(script|pre|style|textarea)>/i,!0],[/^<!--/,/-->/,!0],[/^<\?/,/\?>/,!0],[/^<![A-Z]/,/>/,!0],[/^<!\[CDATA\[/,/\]\]>/,!0],[new RegExp("^</?("+n.join("|")+")(?=(\\s|/?>|$))","i"),/^$/,!0],[new RegExp(o.source+"\\s*$"),/^$/,!1]];e.exports=function(e,t,r,n){var i,o,l,f,h=e.bMarks[t]+e.tShift[t],d=e.eMarks[t];if(e.sCount[t]-e.blkIndent>=4)return!1;if(!e.md.options.html)return!1;if(60!==e.src.charCodeAt(h))return!1;for(f=e.src.slice(h,d),i=0;i<c.length&&!c[i][0].test(f);i++);if(i===c.length)return!1;if(n)return c[i][2];if(o=t+1,!c[i][1].test(f))for(;o<r&&!(e.sCount[o]<e.blkIndent);o++)if(h=e.bMarks[o]+e.tShift[o],d=e.eMarks[o],f=e.src.slice(h,d),c[i][1].test(f)){0!==f.length&&o++;break}return e.line=o,(l=e.push("html_block","",0)).map=[t,o],l.content=e.getLines(t,o,e.blkIndent,!0),!0}},function(e,t,r){"use strict";e.exports=["address","article","aside","base","basefont","blockquote","body","caption","center","col","colgroup","dd","details","dialog","dir","div","dl","dt","fieldset","figcaption","figure","footer","form","frame","frameset","h1","h2","h3","h4","h5","h6","head","header","hr","html","iframe","legend","li","link","main","menu","menuitem","nav","noframes","ol","optgroup","option","p","param","section","source","summary","table","tbody","td","tfoot","th","thead","title","tr","track","ul"]},function(e,t,r){"use strict";var n=r(186).isSpace;e.exports=function(e,t,r,o){var c,l,f,h,d=e.bMarks[t]+e.tShift[t],m=e.eMarks[t];if(e.sCount[t]-e.blkIndent>=4)return!1;if(35!==(c=e.src.charCodeAt(d))||d>=m)return!1;for(l=1,c=e.src.charCodeAt(++d);35===c&&d<m&&l<=6;)l++,c=e.src.charCodeAt(++d);return!(l>6||d<m&&!n(c))&&(o||(m=e.skipSpacesBack(m,d),(f=e.skipCharsBack(m,35,d))>d&&n(e.src.charCodeAt(f-1))&&(m=f),e.line=t+1,(h=e.push("heading_open","h"+String(l),1)).markup="########".slice(0,l),h.map=[t,e.line],(h=e.push("inline","",0)).content=e.src.slice(d,m).trim(),h.map=[t,e.line],h.children=[],(h=e.push("heading_close","h"+String(l),-1)).markup="########".slice(0,l)),!0)}},function(e,t,r){"use strict";e.exports=function(e,t,r){var content,n,i,o,c,l,f,h,marker,d,m=t+1,v=e.md.block.ruler.getRules("paragraph");if(e.sCount[t]-e.blkIndent>=4)return!1;for(d=e.parentType,e.parentType="paragraph";m<r&&!e.isEmpty(m);m++)if(!(e.sCount[m]-e.blkIndent>3)){if(e.sCount[m]>=e.blkIndent&&(l=e.bMarks[m]+e.tShift[m])<(f=e.eMarks[m])&&(45===(marker=e.src.charCodeAt(l))||61===marker)&&(l=e.skipChars(l,marker),(l=e.skipSpaces(l))>=f)){h=61===marker?1:2;break}if(!(e.sCount[m]<0)){for(n=!1,i=0,o=v.length;i<o;i++)if(v[i](e,m,r,!0)){n=!0;break}if(n)break}}return!!h&&(content=e.getLines(t,m,e.blkIndent,!1).trim(),e.line=m+1,(c=e.push("heading_open","h"+String(h),1)).markup=String.fromCharCode(marker),c.map=[t,e.line],(c=e.push("inline","",0)).content=content,c.map=[t,e.line-1],c.children=[],(c=e.push("heading_close","h"+String(h),-1)).markup=String.fromCharCode(marker),e.parentType=d,!0)}},function(e,t,r){"use strict";e.exports=function(e,t){var content,r,i,n,o,c,l=t+1,f=e.md.block.ruler.getRules("paragraph"),h=e.lineMax;for(c=e.parentType,e.parentType="paragraph";l<h&&!e.isEmpty(l);l++)if(!(e.sCount[l]-e.blkIndent>3||e.sCount[l]<0)){for(r=!1,i=0,n=f.length;i<n;i++)if(f[i](e,l,h,!0)){r=!0;break}if(r)break}return content=e.getLines(t,l,e.blkIndent,!1).trim(),e.line=l,(o=e.push("paragraph_open","p",1)).map=[t,e.line],(o=e.push("inline","",0)).content=content,o.map=[t,e.line],o.children=[],o=e.push("paragraph_close","p",-1),e.parentType=c,!0}},function(e,t,r){"use strict";var n=r(191),o=r(186).isSpace;function c(e,t,r,n){var c,s,l,f,h,d,m,v;for(this.src=e,this.md=t,this.env=r,this.tokens=n,this.bMarks=[],this.eMarks=[],this.tShift=[],this.sCount=[],this.bsCount=[],this.blkIndent=0,this.line=0,this.lineMax=0,this.tight=!1,this.ddIndent=-1,this.listIndent=-1,this.parentType="root",this.level=0,this.result="",v=!1,l=f=d=m=0,h=(s=this.src).length;f<h;f++){if(c=s.charCodeAt(f),!v){if(o(c)){d++,9===c?m+=4-m%4:m++;continue}v=!0}10!==c&&f!==h-1||(10!==c&&f++,this.bMarks.push(l),this.eMarks.push(f),this.tShift.push(d),this.sCount.push(m),this.bsCount.push(0),v=!1,d=0,m=0,l=f+1)}this.bMarks.push(s.length),this.eMarks.push(s.length),this.tShift.push(0),this.sCount.push(0),this.bsCount.push(0),this.lineMax=this.bMarks.length-1}c.prototype.push=function(e,t,r){var o=new n(e,t,r);return o.block=!0,r<0&&this.level--,o.level=this.level,r>0&&this.level++,this.tokens.push(o),o},c.prototype.isEmpty=function(line){return this.bMarks[line]+this.tShift[line]>=this.eMarks[line]},c.prototype.skipEmptyLines=function(e){for(var t=this.lineMax;e<t&&!(this.bMarks[e]+this.tShift[e]<this.eMarks[e]);e++);return e},c.prototype.skipSpaces=function(e){for(var t,r=this.src.length;e<r&&(t=this.src.charCodeAt(e),o(t));e++);return e},c.prototype.skipSpacesBack=function(e,t){if(e<=t)return e;for(;e>t;)if(!o(this.src.charCodeAt(--e)))return e+1;return e},c.prototype.skipChars=function(e,code){for(var t=this.src.length;e<t&&this.src.charCodeAt(e)===code;e++);return e},c.prototype.skipCharsBack=function(e,code,t){if(e<=t)return e;for(;e>t;)if(code!==this.src.charCodeAt(--e))return e+1;return e},c.prototype.getLines=function(e,t,r,n){var i,c,l,f,h,d,m,line=e;if(e>=t)return"";for(d=new Array(t-e),i=0;line<t;line++,i++){for(c=0,m=f=this.bMarks[line],h=line+1<t||n?this.eMarks[line]+1:this.eMarks[line];f<h&&c<r;){if(l=this.src.charCodeAt(f),o(l))9===l?c+=4-(c+this.bsCount[line])%4:c++;else{if(!(f-m<this.tShift[line]))break;c++}f++}d[i]=c>r?new Array(c-r+1).join(" ")+this.src.slice(f,h):this.src.slice(f,h)}return d.join("")},c.prototype.Token=n,e.exports=c},function(e,t,r){"use strict";var n=r(190),o=[["text",r(279)],["newline",r(280)],["escape",r(281)],["backticks",r(282)],["strikethrough",r(208).tokenize],["emphasis",r(209).tokenize],["link",r(283)],["image",r(284)],["autolink",r(285)],["html_inline",r(286)],["entity",r(287)]],c=[["balance_pairs",r(288)],["strikethrough",r(208).postProcess],["emphasis",r(209).postProcess],["text_collapse",r(289)]];function l(){var i;for(this.ruler=new n,i=0;i<o.length;i++)this.ruler.push(o[i][0],o[i][1]);for(this.ruler2=new n,i=0;i<c.length;i++)this.ruler2.push(c[i][0],c[i][1])}l.prototype.skipToken=function(e){var t,i,r=e.pos,n=this.ruler.getRules(""),o=n.length,c=e.md.options.maxNesting,l=e.cache;if(void 0===l[r]){if(e.level<c)for(i=0;i<o&&(e.level++,t=n[i](e,!0),e.level--,!t);i++);else e.pos=e.posMax;t||e.pos++,l[r]=e.pos}else e.pos=l[r]},l.prototype.tokenize=function(e){for(var t,i,r=this.ruler.getRules(""),n=r.length,o=e.posMax,c=e.md.options.maxNesting;e.pos<o;){if(e.level<c)for(i=0;i<n&&!(t=r[i](e,!1));i++);if(t){if(e.pos>=o)break}else e.pending+=e.src[e.pos++]}e.pending&&e.pushPending()},l.prototype.parse=function(e,t,r,n){var i,o,c,l=new this.State(e,t,r,n);for(this.tokenize(l),c=(o=this.ruler2.getRules("")).length,i=0;i<c;i++)o[i](l)},l.prototype.State=r(290),e.exports=l},function(e,t,r){"use strict";function n(e){switch(e){case 10:case 33:case 35:case 36:case 37:case 38:case 42:case 43:case 45:case 58:case 60:case 61:case 62:case 64:case 91:case 92:case 93:case 94:case 95:case 96:case 123:case 125:case 126:return!0;default:return!1}}e.exports=function(e,t){for(var r=e.pos;r<e.posMax&&!n(e.src.charCodeAt(r));)r++;return r!==e.pos&&(t||(e.pending+=e.src.slice(e.pos,r)),e.pos=r,!0)}},function(e,t,r){"use strict";var n=r(186).isSpace;e.exports=function(e,t){var r,o,c=e.pos;if(10!==e.src.charCodeAt(c))return!1;for(r=e.pending.length-1,o=e.posMax,t||(r>=0&&32===e.pending.charCodeAt(r)?r>=1&&32===e.pending.charCodeAt(r-1)?(e.pending=e.pending.replace(/ +$/,""),e.push("hardbreak","br",0)):(e.pending=e.pending.slice(0,-1),e.push("softbreak","br",0)):e.push("softbreak","br",0)),c++;c<o&&n(e.src.charCodeAt(c));)c++;return e.pos=c,!0}},function(e,t,r){"use strict";for(var n=r(186).isSpace,o=[],i=0;i<256;i++)o.push(0);"\\!\"#$%&'()*+,./:;<=>?@[]^_`{|}~-".split("").forEach((function(e){o[e.charCodeAt(0)]=1})),e.exports=function(e,t){var r,c=e.pos,l=e.posMax;if(92!==e.src.charCodeAt(c))return!1;if(++c<l){if((r=e.src.charCodeAt(c))<256&&0!==o[r])return t||(e.pending+=e.src[c]),e.pos+=2,!0;if(10===r){for(t||e.push("hardbreak","br",0),c++;c<l&&(r=e.src.charCodeAt(c),n(r));)c++;return e.pos=c,!0}}return t||(e.pending+="\\"),e.pos++,!0}},function(e,t,r){"use strict";e.exports=function(e,t){var r,n,marker,o,c,l,f,h,d=e.pos;if(96!==e.src.charCodeAt(d))return!1;for(r=d,d++,n=e.posMax;d<n&&96===e.src.charCodeAt(d);)d++;if(f=(marker=e.src.slice(r,d)).length,e.backticksScanned&&(e.backticks[f]||0)<=r)return t||(e.pending+=marker),e.pos+=f,!0;for(c=l=d;-1!==(c=e.src.indexOf("`",l));){for(l=c+1;l<n&&96===e.src.charCodeAt(l);)l++;if((h=l-c)===f)return t||((o=e.push("code_inline","code",0)).markup=marker,o.content=e.src.slice(d,c).replace(/\n/g," ").replace(/^ (.+) $/,"$1")),e.pos=l,!0;e.backticks[h]=c}return e.backticksScanned=!0,t||(e.pending+=marker),e.pos+=f,!0}},function(e,t,r){"use strict";var n=r(186).normalizeReference,o=r(186).isSpace;e.exports=function(e,t){var r,code,label,c,l,f,h,d,m="",title="",v=e.pos,_=e.posMax,y=e.pos,k=!0;if(91!==e.src.charCodeAt(e.pos))return!1;if(l=e.pos+1,(c=e.md.helpers.parseLinkLabel(e,e.pos,!0))<0)return!1;if((f=c+1)<_&&40===e.src.charCodeAt(f)){for(k=!1,f++;f<_&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);if(f>=_)return!1;if(y=f,(h=e.md.helpers.parseLinkDestination(e.src,f,e.posMax)).ok){for(m=e.md.normalizeLink(h.str),e.md.validateLink(m)?f=h.pos:m="",y=f;f<_&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);if(h=e.md.helpers.parseLinkTitle(e.src,f,e.posMax),f<_&&y!==f&&h.ok)for(title=h.str,f=h.pos;f<_&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);}(f>=_||41!==e.src.charCodeAt(f))&&(k=!0),f++}if(k){if(void 0===e.env.references)return!1;if(f<_&&91===e.src.charCodeAt(f)?(y=f+1,(f=e.md.helpers.parseLinkLabel(e,f))>=0?label=e.src.slice(y,f++):f=c+1):f=c+1,label||(label=e.src.slice(l,c)),!(d=e.env.references[n(label)]))return e.pos=v,!1;m=d.href,title=d.title}return t||(e.pos=l,e.posMax=c,e.push("link_open","a",1).attrs=r=[["href",m]],title&&r.push(["title",title]),e.md.inline.tokenize(e),e.push("link_close","a",-1)),e.pos=f,e.posMax=_,!0}},function(e,t,r){"use strict";var n=r(186).normalizeReference,o=r(186).isSpace;e.exports=function(e,t){var r,code,content,label,c,l,f,h,d,title,m,v,_,y="",k=e.pos,w=e.posMax;if(33!==e.src.charCodeAt(e.pos))return!1;if(91!==e.src.charCodeAt(e.pos+1))return!1;if(l=e.pos+2,(c=e.md.helpers.parseLinkLabel(e,e.pos+1,!1))<0)return!1;if((f=c+1)<w&&40===e.src.charCodeAt(f)){for(f++;f<w&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);if(f>=w)return!1;for(_=f,(d=e.md.helpers.parseLinkDestination(e.src,f,e.posMax)).ok&&(y=e.md.normalizeLink(d.str),e.md.validateLink(y)?f=d.pos:y=""),_=f;f<w&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);if(d=e.md.helpers.parseLinkTitle(e.src,f,e.posMax),f<w&&_!==f&&d.ok)for(title=d.str,f=d.pos;f<w&&(code=e.src.charCodeAt(f),o(code)||10===code);f++);else title="";if(f>=w||41!==e.src.charCodeAt(f))return e.pos=k,!1;f++}else{if(void 0===e.env.references)return!1;if(f<w&&91===e.src.charCodeAt(f)?(_=f+1,(f=e.md.helpers.parseLinkLabel(e,f))>=0?label=e.src.slice(_,f++):f=c+1):f=c+1,label||(label=e.src.slice(l,c)),!(h=e.env.references[n(label)]))return e.pos=k,!1;y=h.href,title=h.title}return t||(content=e.src.slice(l,c),e.md.inline.parse(content,e.md,e.env,v=[]),(m=e.push("image","img",0)).attrs=r=[["src",y],["alt",""]],m.children=v,m.content=content,title&&r.push(["title",title])),e.pos=f,e.posMax=w,!0}},function(e,t,r){"use strict";var n=/^([a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*)$/,o=/^([a-zA-Z][a-zA-Z0-9+.\-]{1,31}):([^<>\x00-\x20]*)$/;e.exports=function(e,t){var r,c,l,f,h,d,m=e.pos;if(60!==e.src.charCodeAt(m))return!1;for(h=e.pos,d=e.posMax;;){if(++m>=d)return!1;if(60===(f=e.src.charCodeAt(m)))return!1;if(62===f)break}return r=e.src.slice(h+1,m),o.test(r)?(c=e.md.normalizeLink(r),!!e.md.validateLink(c)&&(t||((l=e.push("link_open","a",1)).attrs=[["href",c]],l.markup="autolink",l.info="auto",(l=e.push("text","",0)).content=e.md.normalizeLinkText(r),(l=e.push("link_close","a",-1)).markup="autolink",l.info="auto"),e.pos+=r.length+2,!0)):!!n.test(r)&&(c=e.md.normalizeLink("mailto:"+r),!!e.md.validateLink(c)&&(t||((l=e.push("link_open","a",1)).attrs=[["href",c]],l.markup="autolink",l.info="auto",(l=e.push("text","",0)).content=e.md.normalizeLinkText(r),(l=e.push("link_close","a",-1)).markup="autolink",l.info="auto"),e.pos+=r.length+2,!0))}},function(e,t,r){"use strict";var n=r(207).HTML_TAG_RE;e.exports=function(e,t){var r,o,c,l=e.pos;return!!e.md.options.html&&(c=e.posMax,!(60!==e.src.charCodeAt(l)||l+2>=c)&&(!(33!==(r=e.src.charCodeAt(l+1))&&63!==r&&47!==r&&!function(e){var t=32|e;return t>=97&&t<=122}(r))&&(!!(o=e.src.slice(l).match(n))&&(t||(e.push("html_inline","",0).content=e.src.slice(l,l+o[0].length)),e.pos+=o[0].length,!0))))}},function(e,t,r){"use strict";var n=r(202),o=r(186).has,c=r(186).isValidEntityCode,l=r(186).fromCodePoint,f=/^&#((?:x[a-f0-9]{1,6}|[0-9]{1,7}));/i,h=/^&([a-z][a-z0-9]{1,31});/i;e.exports=function(e,t){var code,r,d=e.pos,m=e.posMax;if(38!==e.src.charCodeAt(d))return!1;if(d+1<m)if(35===e.src.charCodeAt(d+1)){if(r=e.src.slice(d).match(f))return t||(code="x"===r[1][0].toLowerCase()?parseInt(r[1].slice(1),16):parseInt(r[1],10),e.pending+=c(code)?l(code):l(65533)),e.pos+=r[0].length,!0}else if((r=e.src.slice(d).match(h))&&o(n,r[1]))return t||(e.pending+=n[r[1]]),e.pos+=r[0].length,!0;return t||(e.pending+="&"),e.pos++,!0}},function(e,t,r){"use strict";function n(e,t){var r,n,o,c,l,f,h,d,m={},v=t.length;for(r=0;r<v;r++)if((o=t[r]).length=o.length||0,o.close){for(m.hasOwnProperty(o.marker)||(m[o.marker]=[-1,-1,-1,-1,-1,-1]),l=m[o.marker][(o.open?3:0)+o.length%3],(n=r-o.jump-1)<-1&&(n=-1),f=n;n>l;n-=c.jump+1)if((c=t[n]).marker===o.marker&&c.open&&c.end<0&&(h=!1,(c.close||o.open)&&(c.length+o.length)%3==0&&(c.length%3==0&&o.length%3==0||(h=!0)),!h)){d=n>0&&!t[n-1].open?t[n-1].jump+1:0,o.jump=r-n+d,o.open=!1,c.end=r,c.jump=d,c.close=!1,f=-1;break}-1!==f&&(m[o.marker][(o.open?3:0)+(o.length||0)%3]=f)}}e.exports=function(e){var t,r=e.tokens_meta,o=e.tokens_meta.length;for(n(0,e.delimiters),t=0;t<o;t++)r[t]&&r[t].delimiters&&n(0,r[t].delimiters)}},function(e,t,r){"use strict";e.exports=function(e){var t,r,n=0,o=e.tokens,c=e.tokens.length;for(t=r=0;t<c;t++)o[t].nesting<0&&n--,o[t].level=n,o[t].nesting>0&&n++,"text"===o[t].type&&t+1<c&&"text"===o[t+1].type?o[t+1].content=o[t].content+o[t+1].content:(t!==r&&(o[r]=o[t]),r++);t!==r&&(o.length=r)}},function(e,t,r){"use strict";var n=r(191),o=r(186).isWhiteSpace,c=r(186).isPunctChar,l=r(186).isMdAsciiPunct;function f(e,t,r,n){this.src=e,this.env=r,this.md=t,this.tokens=n,this.tokens_meta=Array(n.length),this.pos=0,this.posMax=this.src.length,this.level=0,this.pending="",this.pendingLevel=0,this.cache={},this.delimiters=[],this._prev_delimiters=[],this.backticks={},this.backticksScanned=!1}f.prototype.pushPending=function(){var e=new n("text","",0);return e.content=this.pending,e.level=this.pendingLevel,this.tokens.push(e),this.pending="",e},f.prototype.push=function(e,t,r){this.pending&&this.pushPending();var o=new n(e,t,r),c=null;return r<0&&(this.level--,this.delimiters=this._prev_delimiters.pop()),o.level=this.level,r>0&&(this.level++,this._prev_delimiters.push(this.delimiters),this.delimiters=[],c={delimiters:this.delimiters}),this.pendingLevel=this.level,this.tokens.push(o),this.tokens_meta.push(c),o},f.prototype.scanDelims=function(e,t){var r,n,f,h,d,m,v,_,y,k=e,w=!0,x=!0,A=this.posMax,marker=this.src.charCodeAt(e);for(r=e>0?this.src.charCodeAt(e-1):32;k<A&&this.src.charCodeAt(k)===marker;)k++;return f=k-e,n=k<A?this.src.charCodeAt(k):32,v=l(r)||c(String.fromCharCode(r)),y=l(n)||c(String.fromCharCode(n)),m=o(r),(_=o(n))?w=!1:y&&(m||v||(w=!1)),m?x=!1:v&&(_||y||(x=!1)),t?(h=w,d=x):(h=w&&(!x||v),d=x&&(!w||y)),{can_open:h,can_close:d,length:f}},f.prototype.Token=n,e.exports=f},function(e,t,r){"use strict";function n(e){var t=Array.prototype.slice.call(arguments,1);return t.forEach((function(source){source&&Object.keys(source).forEach((function(t){e[t]=source[t]}))})),e}function o(e){return Object.prototype.toString.call(e)}function c(e){return"[object Function]"===o(e)}function l(e){return e.replace(/[.?*+^$[\]\\(){}|-]/g,"\\$&")}var f={fuzzyLink:!0,fuzzyEmail:!0,fuzzyIP:!1};var h={"http:":{validate:function(text,e,t){var r=text.slice(e);return t.re.http||(t.re.http=new RegExp("^\\/\\/"+t.re.src_auth+t.re.src_host_port_strict+t.re.src_path,"i")),t.re.http.test(r)?r.match(t.re.http)[0].length:0}},"https:":"http:","ftp:":"http:","//":{validate:function(text,e,t){var r=text.slice(e);return t.re.no_http||(t.re.no_http=new RegExp("^"+t.re.src_auth+"(?:localhost|(?:(?:"+t.re.src_domain+")\\.)+"+t.re.src_domain_root+")"+t.re.src_port+t.re.src_host_terminator+t.re.src_path,"i")),t.re.no_http.test(r)?e>=3&&":"===text[e-3]||e>=3&&"/"===text[e-3]?0:r.match(t.re.no_http)[0].length:0}},"mailto:":{validate:function(text,e,t){var r=text.slice(e);return t.re.mailto||(t.re.mailto=new RegExp("^"+t.re.src_email_name+"@"+t.re.src_host_strict,"i")),t.re.mailto.test(r)?r.match(t.re.mailto)[0].length:0}}},d="biz|com|edu|gov|net|org|pro|web|xxx|aero|asia|coop|info|museum|name|shop|рф".split("|");function m(e){var t=e.re=r(292)(e.__opts__),n=e.__tlds__.slice();function f(e){return e.replace("%TLDS%",t.src_tlds)}e.onCompile(),e.__tlds_replaced__||n.push("a[cdefgilmnoqrstuwxz]|b[abdefghijmnorstvwyz]|c[acdfghiklmnoruvwxyz]|d[ejkmoz]|e[cegrstu]|f[ijkmor]|g[abdefghilmnpqrstuwy]|h[kmnrtu]|i[delmnoqrst]|j[emop]|k[eghimnprwyz]|l[abcikrstuvy]|m[acdeghklmnopqrstuvwxyz]|n[acefgilopruz]|om|p[aefghklmnrstwy]|qa|r[eosuw]|s[abcdeghijklmnortuvxyz]|t[cdfghjklmnortvwz]|u[agksyz]|v[aceginu]|w[fs]|y[et]|z[amw]"),n.push(t.src_xn),t.src_tlds=n.join("|"),t.email_fuzzy=RegExp(f(t.tpl_email_fuzzy),"i"),t.link_fuzzy=RegExp(f(t.tpl_link_fuzzy),"i"),t.link_no_ip_fuzzy=RegExp(f(t.tpl_link_no_ip_fuzzy),"i"),t.host_fuzzy_test=RegExp(f(t.tpl_host_fuzzy_test),"i");var h=[];function d(e,t){throw new Error('(LinkifyIt) Invalid schema "'+e+'": '+t)}e.__compiled__={},Object.keys(e.__schemas__).forEach((function(t){var r=e.__schemas__[t];if(null!==r){var n={validate:null,link:null};if(e.__compiled__[t]=n,"[object Object]"===o(r))return!function(e){return"[object RegExp]"===o(e)}(r.validate)?c(r.validate)?n.validate=r.validate:d(t,r):n.validate=function(e){return function(text,t){var r=text.slice(t);return e.test(r)?r.match(e)[0].length:0}}(r.validate),void(c(r.normalize)?n.normalize=r.normalize:r.normalize?d(t,r):n.normalize=function(e,t){t.normalize(e)});!function(e){return"[object String]"===o(e)}(r)?d(t,r):h.push(t)}})),h.forEach((function(t){e.__compiled__[e.__schemas__[t]]&&(e.__compiled__[t].validate=e.__compiled__[e.__schemas__[t]].validate,e.__compiled__[t].normalize=e.__compiled__[e.__schemas__[t]].normalize)})),e.__compiled__[""]={validate:null,normalize:function(e,t){t.normalize(e)}};var m=Object.keys(e.__compiled__).filter((function(t){return t.length>0&&e.__compiled__[t]})).map(l).join("|");e.re.schema_test=RegExp("(^|(?!_)(?:[><|]|"+t.src_ZPCc+"))("+m+")","i"),e.re.schema_search=RegExp("(^|(?!_)(?:[><|]|"+t.src_ZPCc+"))("+m+")","ig"),e.re.pretest=RegExp("("+e.re.schema_test.source+")|("+e.re.host_fuzzy_test.source+")|@","i"),function(e){e.__index__=-1,e.__text_cache__=""}(e)}function v(e,t){var r=e.__index__,n=e.__last_index__,text=e.__text_cache__.slice(r,n);this.schema=e.__schema__.toLowerCase(),this.index=r+t,this.lastIndex=n+t,this.raw=text,this.text=text,this.url=text}function _(e,t){var r=new v(e,t);return e.__compiled__[r.schema].normalize(r,e),r}function y(e,t){if(!(this instanceof y))return new y(e,t);var r;t||(r=e,Object.keys(r||{}).reduce((function(e,t){return e||f.hasOwnProperty(t)}),!1)&&(t=e,e={})),this.__opts__=n({},f,t),this.__index__=-1,this.__last_index__=-1,this.__schema__="",this.__text_cache__="",this.__schemas__=n({},h,e),this.__compiled__={},this.__tlds__=d,this.__tlds_replaced__=!1,this.re={},m(this)}y.prototype.add=function(e,t){return this.__schemas__[e]=t,m(this),this},y.prototype.set=function(e){return this.__opts__=n(this.__opts__,e),this},y.prototype.test=function(text){if(this.__text_cache__=text,this.__index__=-1,!text.length)return!1;var e,t,r,n,o,c,l,f;if(this.re.schema_test.test(text))for((l=this.re.schema_search).lastIndex=0;null!==(e=l.exec(text));)if(n=this.testSchemaAt(text,e[2],l.lastIndex)){this.__schema__=e[2],this.__index__=e.index+e[1].length,this.__last_index__=e.index+e[0].length+n;break}return this.__opts__.fuzzyLink&&this.__compiled__["http:"]&&(f=text.search(this.re.host_fuzzy_test))>=0&&(this.__index__<0||f<this.__index__)&&null!==(t=text.match(this.__opts__.fuzzyIP?this.re.link_fuzzy:this.re.link_no_ip_fuzzy))&&(o=t.index+t[1].length,(this.__index__<0||o<this.__index__)&&(this.__schema__="",this.__index__=o,this.__last_index__=t.index+t[0].length)),this.__opts__.fuzzyEmail&&this.__compiled__["mailto:"]&&text.indexOf("@")>=0&&null!==(r=text.match(this.re.email_fuzzy))&&(o=r.index+r[1].length,c=r.index+r[0].length,(this.__index__<0||o<this.__index__||o===this.__index__&&c>this.__last_index__)&&(this.__schema__="mailto:",this.__index__=o,this.__last_index__=c)),this.__index__>=0},y.prototype.pretest=function(text){return this.re.pretest.test(text)},y.prototype.testSchemaAt=function(text,e,t){return this.__compiled__[e.toLowerCase()]?this.__compiled__[e.toLowerCase()].validate(text,t,this):0},y.prototype.match=function(text){var e=0,t=[];this.__index__>=0&&this.__text_cache__===text&&(t.push(_(this,e)),e=this.__last_index__);for(var r=e?text.slice(e):text;this.test(r);)t.push(_(this,e)),r=r.slice(this.__last_index__),e+=this.__last_index__;return t.length?t:null},y.prototype.tlds=function(e,t){return e=Array.isArray(e)?e:[e],t?(this.__tlds__=this.__tlds__.concat(e).sort().filter((function(e,t,r){return e!==r[t-1]})).reverse(),m(this),this):(this.__tlds__=e.slice(),this.__tlds_replaced__=!0,m(this),this)},y.prototype.normalize=function(e){e.schema||(e.url="http://"+e.url),"mailto:"!==e.schema||/^mailto:/i.test(e.url)||(e.url="mailto:"+e.url)},y.prototype.onCompile=function(){},e.exports=y},function(e,t,r){"use strict";e.exports=function(e){var t={};t.src_Any=r(204).source,t.src_Cc=r(205).source,t.src_Z=r(206).source,t.src_P=r(189).source,t.src_ZPCc=[t.src_Z,t.src_P,t.src_Cc].join("|"),t.src_ZCc=[t.src_Z,t.src_Cc].join("|");return t.src_pseudo_letter="(?:(?![><|]|"+t.src_ZPCc+")"+t.src_Any+")",t.src_ip4="(?:(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)",t.src_auth="(?:(?:(?!"+t.src_ZCc+"|[@/\\[\\]()]).)+@)?",t.src_port="(?::(?:6(?:[0-4]\\d{3}|5(?:[0-4]\\d{2}|5(?:[0-2]\\d|3[0-5])))|[1-5]?\\d{1,4}))?",t.src_host_terminator="(?=$|[><|]|"+t.src_ZPCc+")(?!-|_|:\\d|\\.-|\\.(?!$|"+t.src_ZPCc+"))",t.src_path="(?:[/?#](?:(?!"+t.src_ZCc+"|"+"[><|]|[()[\\]{}.,\"'?!\\-]).|\\[(?:(?!"+t.src_ZCc+"|\\]).)*\\]|\\((?:(?!"+t.src_ZCc+"|[)]).)*\\)|\\{(?:(?!"+t.src_ZCc+'|[}]).)*\\}|\\"(?:(?!'+t.src_ZCc+'|["]).)+\\"|\\\'(?:(?!'+t.src_ZCc+"|[']).)+\\'|\\'(?="+t.src_pseudo_letter+"|[-]).|\\.{2,}[a-zA-Z0-9%/&]|\\.(?!"+t.src_ZCc+"|[.]).|"+(e&&e["---"]?"\\-(?!--(?:[^-]|$))(?:-*)|":"\\-+|")+"\\,(?!"+t.src_ZCc+").|\\!+(?!"+t.src_ZCc+"|[!]).|\\?(?!"+t.src_ZCc+"|[?]).)+|\\/)?",t.src_email_name='[\\-;:&=\\+\\$,\\.a-zA-Z0-9_][\\-;:&=\\+\\$,\\"\\.a-zA-Z0-9_]*',t.src_xn="xn--[a-z0-9\\-]{1,59}",t.src_domain_root="(?:"+t.src_xn+"|"+t.src_pseudo_letter+"{1,63})",t.src_domain="(?:"+t.src_xn+"|(?:"+t.src_pseudo_letter+")|(?:"+t.src_pseudo_letter+"(?:-|"+t.src_pseudo_letter+"){0,61}"+t.src_pseudo_letter+"))",t.src_host="(?:(?:(?:(?:"+t.src_domain+")\\.)*"+t.src_domain+"))",t.tpl_host_fuzzy="(?:"+t.src_ip4+"|(?:(?:(?:"+t.src_domain+")\\.)+(?:%TLDS%)))",t.tpl_host_no_ip_fuzzy="(?:(?:(?:"+t.src_domain+")\\.)+(?:%TLDS%))",t.src_host_strict=t.src_host+t.src_host_terminator,t.tpl_host_fuzzy_strict=t.tpl_host_fuzzy+t.src_host_terminator,t.src_host_port_strict=t.src_host+t.src_port+t.src_host_terminator,t.tpl_host_port_fuzzy_strict=t.tpl_host_fuzzy+t.src_port+t.src_host_terminator,t.tpl_host_port_no_ip_fuzzy_strict=t.tpl_host_no_ip_fuzzy+t.src_port+t.src_host_terminator,t.tpl_host_fuzzy_test="localhost|www\\.|\\.\\d{1,3}\\.|(?:\\.(?:%TLDS%)(?:"+t.src_ZPCc+"|>|$))",t.tpl_email_fuzzy='(^|[><|]|"|\\(|'+t.src_ZCc+")("+t.src_email_name+"@"+t.tpl_host_fuzzy_strict+")",t.tpl_link_fuzzy="(^|(?![.:/\\-_@])(?:[$+<=>^`||]|"+t.src_ZPCc+"))((?![$+<=>^`||])"+t.tpl_host_port_fuzzy_strict+t.src_path+")",t.tpl_link_no_ip_fuzzy="(^|(?![.:/\\-_@])(?:[$+<=>^`||]|"+t.src_ZPCc+"))((?![$+<=>^`||])"+t.tpl_host_port_no_ip_fuzzy_strict+t.src_path+")",t}},function(e,t,r){(function(e,n){var o;!function(c){t&&t.nodeType,e&&e.nodeType;var l="object"==typeof n&&n;l.global!==l&&l.window!==l&&l.self;var f,h=2147483647,base=36,d=/^xn--/,m=/[^\x20-\x7E]/,v=/[\x2E\u3002\uFF0E\uFF61]/g,_={overflow:"Overflow: input needs wider integers to process","not-basic":"Illegal input >= 0x80 (not a basic code point)","invalid-input":"Invalid input"},y=Math.floor,k=String.fromCharCode;function w(e){throw new RangeError(_[e])}function map(e,t){for(var r=e.length,n=[];r--;)n[r]=t(e[r]);return n}function x(e,t){var r=e.split("@"),n="";return r.length>1&&(n=r[0]+"@",e=r[1]),n+map((e=e.replace(v,".")).split("."),t).join(".")}function A(e){for(var t,r,output=[],n=0,o=e.length;n<o;)(t=e.charCodeAt(n++))>=55296&&t<=56319&&n<o?56320==(64512&(r=e.charCodeAt(n++)))?output.push(((1023&t)<<10)+(1023&r)+65536):(output.push(t),n--):output.push(t);return output}function C(e){return map(e,(function(e){var output="";return e>65535&&(output+=k((e-=65536)>>>10&1023|55296),e=56320|1023&e),output+=k(e)})).join("")}function E(e,t){return e+22+75*(e<26)-((0!=t)<<5)}function F(e,t,r){var n=0;for(e=r?y(e/700):e>>1,e+=y(e/t);e>455;n+=base)e=y(e/35);return y(n+36*e/(e+38))}function S(input){var e,t,r,n,o,c,l,f,d,m,v,output=[],_=input.length,i=0,k=128,x=72;for((t=input.lastIndexOf("-"))<0&&(t=0),r=0;r<t;++r)input.charCodeAt(r)>=128&&w("not-basic"),output.push(input.charCodeAt(r));for(n=t>0?t+1:0;n<_;){for(o=i,c=1,l=base;n>=_&&w("invalid-input"),((f=(v=input.charCodeAt(n++))-48<10?v-22:v-65<26?v-65:v-97<26?v-97:base)>=base||f>y((h-i)/c))&&w("overflow"),i+=f*c,!(f<(d=l<=x?1:l>=x+26?26:l-x));l+=base)c>y(h/(m=base-d))&&w("overflow"),c*=m;x=F(i-o,e=output.length+1,0==o),y(i/e)>h-k&&w("overflow"),k+=y(i/e),i%=e,output.splice(i++,0,k)}return C(output)}function D(input){var e,t,r,n,o,c,l,q,f,d,m,v,_,x,C,output=[];for(v=(input=A(input)).length,e=128,t=0,o=72,c=0;c<v;++c)(m=input[c])<128&&output.push(k(m));for(r=n=output.length,n&&output.push("-");r<v;){for(l=h,c=0;c<v;++c)(m=input[c])>=e&&m<l&&(l=m);for(l-e>y((h-t)/(_=r+1))&&w("overflow"),t+=(l-e)*_,e=l,c=0;c<v;++c)if((m=input[c])<e&&++t>h&&w("overflow"),m==e){for(q=t,f=base;!(q<(d=f<=o?1:f>=o+26?26:f-o));f+=base)C=q-d,x=base-d,output.push(k(E(d+C%x,0))),q=y(C/x);output.push(k(E(q,0))),o=F(t,_,r==n),t=0,++r}++t,++e}return output.join("")}f={version:"1.4.1",ucs2:{decode:A,encode:C},decode:S,encode:D,toASCII:function(input){return x(input,(function(e){return m.test(e)?"xn--"+D(e):e}))},toUnicode:function(input){return x(input,(function(e){return d.test(e)?S(e.slice(4).toLowerCase()):e}))}},void 0===(o=function(){return f}.call(t,r,t,e))||(e.exports=o)}()}).call(this,r(294)(e),r(44))},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t,r){"use strict";e.exports={options:{html:!1,xhtmlOut:!1,breaks:!1,langPrefix:"language-",linkify:!1,typographer:!1,quotes:"“”‘’",highlight:null,maxNesting:100},components:{core:{},block:{},inline:{}}}},function(e,t,r){"use strict";e.exports={options:{html:!1,xhtmlOut:!1,breaks:!1,langPrefix:"language-",linkify:!1,typographer:!1,quotes:"“”‘’",highlight:null,maxNesting:20},components:{core:{rules:["normalize","block","inline"]},block:{rules:["paragraph"]},inline:{rules:["text"],rules2:["balance_pairs","text_collapse"]}}}},function(e,t,r){"use strict";e.exports={options:{html:!0,xhtmlOut:!0,breaks:!1,langPrefix:"language-",linkify:!1,typographer:!1,quotes:"“”‘’",highlight:null,maxNesting:20},components:{core:{rules:["normalize","block","inline"]},block:{rules:["blockquote","code","fence","heading","hr","html_block","lheading","list","reference","paragraph"]},inline:{rules:["autolink","backticks","emphasis","entity","escape","html_inline","image","link","newline","text"],rules2:["balance_pairs","emphasis","text_collapse"]}}}},function(e,t,r){"use strict";function n(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var o=!1,c={false:"push",true:"unshift",after:"push",before:"unshift"},l={isPermalinkSymbol:!0};function a(e,a,i,t){var r;if(!o){var n="Using deprecated markdown-it-anchor permalink option, see https://github.com/valeriangalliat/markdown-it-anchor#todo-anchor-or-file";"object"==typeof process&&process&&process.emitWarning?process.emitWarning(n):console.warn(n),o=!0}var s=[Object.assign(new i.Token("link_open","a",1),{attrs:[].concat(a.permalinkClass?[["class",a.permalinkClass]]:[],[["href",a.permalinkHref(e,i)]],Object.entries(a.permalinkAttrs(e,i)))}),Object.assign(new i.Token("html_block","",0),{content:a.permalinkSymbol,meta:l}),new i.Token("link_close","a",-1)];a.permalinkSpace&&i.tokens[t+1].children[c[a.permalinkBefore]](Object.assign(new i.Token("text","",0),{content:" "})),(r=i.tokens[t+1].children)[c[a.permalinkBefore]].apply(r,s)}function i(e){return"#"+e}function f(e){return{}}var h={class:"header-anchor",symbol:"#",renderHref:i,renderAttrs:f};function d(e){function t(r){return r=Object.assign({},t.defaults,r),function(t,n,a,i){return e(t,r,n,a,i)}}return t.defaults=Object.assign({},h),t}var s=d((function(e,t,a,i,r){var n,o=[Object.assign(new i.Token("link_open","a",1),{attrs:[].concat(t.class?[["class",t.class]]:[],[["href",t.renderHref(e,i)],["aria-hidden","true"]],Object.entries(t.renderAttrs(e,i)))}),Object.assign(new i.Token("html_inline","",0),{content:t.symbol,meta:l}),new i.Token("link_close","a",-1)];t.space&&i.tokens[r+1].children[c[t.placement]](Object.assign(new i.Token("text","",0),{content:" "})),(n=i.tokens[r+1].children)[c[t.placement]].apply(n,o)}));Object.assign(s.defaults,{space:!0,placement:"after"});var u=d((function(e,t,r,n,a){var i=[Object.assign(new n.Token("link_open","a",1),{attrs:[].concat(t.class?[["class",t.class]]:[],[["href",t.renderHref(e,n)]],Object.entries(t.renderAttrs(e,n)))})].concat(n.tokens[a+1].children,[new n.Token("link_close","a",-1)]);n.tokens[a+1]=Object.assign(new n.Token("inline","",0),{children:i})})),m=d((function(e,t,a,i,r){var n;if(!["visually-hidden","aria-label","aria-describedby","aria-labelledby"].includes(t.style))throw new Error("`permalink.linkAfterHeader` called with unknown style option `"+t.style+"`");if(!["aria-describedby","aria-labelledby"].includes(t.style)&&!t.assistiveText)throw new Error("`permalink.linkAfterHeader` called without the `assistiveText` option in `"+t.style+"` style");if("visually-hidden"===t.style&&!t.visuallyHiddenClass)throw new Error("`permalink.linkAfterHeader` called without the `visuallyHiddenClass` option in `visually-hidden` style");var o=i.tokens[r+1].children.filter((function(e){return"text"===e.type||"code_inline"===e.type})).reduce((function(e,t){return e+t.content}),""),s=[],u=[];t.class&&u.push(["class",t.class]),u.push(["href",t.renderHref(e,i)]),u.push.apply(u,Object.entries(t.renderAttrs(e,i))),"visually-hidden"===t.style?(s.push(Object.assign(new i.Token("span_open","span",1),{attrs:[["class",t.visuallyHiddenClass]]}),Object.assign(new i.Token("text","",0),{content:t.assistiveText(o)}),new i.Token("span_close","span",-1)),t.space&&s[c[t.placement]](Object.assign(new i.Token("text","",0),{content:" "})),s[c[t.placement]](Object.assign(new i.Token("span_open","span",1),{attrs:[["aria-hidden","true"]]}),Object.assign(new i.Token("html_inline","",0),{content:t.symbol,meta:l}),new i.Token("span_close","span",-1))):s.push(Object.assign(new i.Token("html_inline","",0),{content:t.symbol,meta:l})),"aria-label"===t.style?u.push(["aria-label",t.assistiveText(o)]):["aria-describedby","aria-labelledby"].includes(t.style)&&u.push([t.style,e]);var f=[Object.assign(new i.Token("link_open","a",1),{attrs:u})].concat(s,[new i.Token("link_close","a",-1)]);(n=i.tokens).splice.apply(n,[r+3,0].concat(f))}));function v(e,t,r,n){var a=e,i=n;if(r&&Object.prototype.hasOwnProperty.call(t,a))throw new Error("User defined `id` attribute `"+e+"` is not unique. Please fix it in your Markdown to continue.");for(;Object.prototype.hasOwnProperty.call(t,a);)a=e+"-"+i,i+=1;return t[a]=!0,a}function b(e,t){t=Object.assign({},b.defaults,t),e.core.ruler.push("anchor",(function(e){for(var r,i,o={},c=e.tokens,l=Array.isArray(t.level)?(r=t.level,function(e){return r.includes(e)}):function(e){return function(t){return t>=e}}(t.level),s=function(e){var t=0;if("undefined"==typeof Symbol||null==e[Symbol.iterator]){if(Array.isArray(e)||(e=function(e,t){if(e){if("string"==typeof e)return n(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,void 0):void 0}}(e)))return function(){return t>=e.length?{done:!0}:{done:!1,value:e[t++]}};throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}return(t=e[Symbol.iterator]()).next.bind(t)}(c);!(i=s()).done;){var u=i.value;if("heading_open"===u.type&&l(Number(u.tag.substr(1)))){var f=c.indexOf(u),b=c[f+1].children.filter((function(e){return"text"===e.type||"code_inline"===e.type})).reduce((function(e,t){return e+t.content}),""),p=u.attrGet("id");p=null==p?v(t.slugify(b),o,!1,t.uniqueSlugStartIndex):v(p,o,!0,t.uniqueSlugStartIndex),u.attrSet("id",p),!1!==t.tabIndex&&u.attrSet("tabindex",""+t.tabIndex),"function"==typeof t.permalink?t.permalink(p,t,e,f):(t.permalink||t.renderPermalink&&t.renderPermalink!==a)&&t.renderPermalink(p,t,e,f),t.callback&&t.callback(u,{slug:p,title:b})}}}))}Object.assign(m.defaults,{style:"visually-hidden",space:!0,placement:"after"}),b.permalink={__proto__:null,legacy:a,renderHref:i,renderAttrs:f,makePermalink:d,ariaHidden:s,headerLink:u,linkAfterHeader:m},b.defaults={level:1,slugify:function(e){return encodeURIComponent(String(e).trim().toLowerCase().replace(/\s+/g,"-"))},uniqueSlugStartIndex:1,tabIndex:"-1",permalink:!1,renderPermalink:a,permalinkClass:s.defaults.class,permalinkSpace:s.defaults.space,permalinkSymbol:"¶",permalinkBefore:"before"===s.defaults.placement,permalinkHref:s.defaults.renderHref,permalinkAttrs:s.defaults.renderAttrs},t.a=b},,function(e,t,r){e.exports=function(){"use strict";function e(){return(e=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var i in r)Object.prototype.hasOwnProperty.call(r,i)&&(e[i]=r[i])}return e}).apply(this,arguments)}var t="undefined"!=typeof window,r=t&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),i=t&&"IntersectionObserver"in window,n=t&&"classList"in document.createElement("p"),o=t&&window.devicePixelRatio>1,a={elements_selector:".lazy",container:r||t?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"loading",class_loaded:"loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},c=function(t){return e({},a,t)},s=function(e,t){var r,i="LazyLoad::Initialized",n=new e(t);try{r=new CustomEvent(i,{detail:{instance:n}})}catch(e){(r=document.createEvent("CustomEvent")).initCustomEvent(i,!1,!1,{instance:n})}window.dispatchEvent(r)},l="loading",u="loaded",f="applied",h="error",d="native",g="data-",m="ll-status",b=function(e,t){return e.getAttribute(g+t)},p=function(e){return b(e,m)},v=function(e,t){return function(e,t,r){var i="data-ll-status";null!==r?e.setAttribute(i,r):e.removeAttribute(i)}(e,0,t)},_=function(e){return v(e,null)},y=function(e){return null===p(e)},k=function(e){return p(e)===d},w=[l,u,f,h],x=function(e,t,r,i){e&&(void 0===i?void 0===r?e(t):e(t,r):e(t,r,i))},A=function(e,t){n?e.classList.add(t):e.className+=(e.className?" ":"")+t},C=function(e,t){n?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\s+)"+t+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")},E=function(e){return e.llTempImage},F=function(e,t){if(t){var r=t._observer;r&&r.unobserve(e)}},S=function(e,t){e&&(e.loadingCount+=t)},D=function(e,t){e&&(e.toLoadCount=t)},T=function(e){for(var t,r=[],i=0;t=e.children[i];i+=1)"SOURCE"===t.tagName&&r.push(t);return r},z=function(e,t,r){r&&e.setAttribute(t,r)},L=function(e,t){e.removeAttribute(t)},O=function(e){return!!e.llOriginalAttrs},I=function(e){if(!O(e)){var t={};t.src=e.getAttribute("src"),t.srcset=e.getAttribute("srcset"),t.sizes=e.getAttribute("sizes"),e.llOriginalAttrs=t}},$=function(e){if(O(e)){var t=e.llOriginalAttrs;z(e,"src",t.src),z(e,"srcset",t.srcset),z(e,"sizes",t.sizes)}},P=function(e,t){z(e,"sizes",b(e,t.data_sizes)),z(e,"srcset",b(e,t.data_srcset)),z(e,"src",b(e,t.data_src))},j=function(e){L(e,"src"),L(e,"srcset"),L(e,"sizes")},R=function(e,t){var r=e.parentNode;r&&"PICTURE"===r.tagName&&T(r).forEach(t)},M={IMG:function(e,t){R(e,(function(e){I(e),P(e,t)})),I(e),P(e,t)},IFRAME:function(e,t){z(e,"src",b(e,t.data_src))},VIDEO:function(e,t){!function(e,r){T(e).forEach((function(e){z(e,"src",b(e,t.data_src))}))}(e),z(e,"poster",b(e,t.data_poster)),z(e,"src",b(e,t.data_src)),e.load()}},N=function(e,t){var r=M[e.tagName];r&&r(e,t)},B=function(e,t,r){S(r,1),A(e,t.class_loading),v(e,l),x(t.callback_loading,e,r)},H=["IMG","IFRAME","VIDEO"],U=function(e,t){!t||function(e){return e.loadingCount>0}(t)||function(e){return e.toLoadCount>0}(t)||x(e.callback_finish,t)},q=function(e,t,r){e.addEventListener(t,r),e.llEvLisnrs[t]=r},V=function(e,t,r){e.removeEventListener(t,r)},Z=function(e){return!!e.llEvLisnrs},G=function(e){if(Z(e)){var t=e.llEvLisnrs;for(var r in t){var i=t[r];V(e,r,i)}delete e.llEvLisnrs}},W=function(e,t,r){!function(e){delete e.llTempImage}(e),S(r,-1),function(e){e&&(e.toLoadCount-=1)}(r),C(e,t.class_loading),t.unobserve_completed&&F(e,r)},K=function(e,t,r){var i=E(e)||e;Z(i)||function(e,t,r){Z(e)||(e.llEvLisnrs={});var i="VIDEO"===e.tagName?"loadeddata":"load";q(e,i,t),q(e,"error",r)}(i,(function(n){!function(e,t,r,i){var n=k(t);W(t,r,i),A(t,r.class_loaded),v(t,u),x(r.callback_loaded,t,i),n||U(r,i)}(0,e,t,r),G(i)}),(function(n){!function(e,t,r,i){var n=k(t);W(t,r,i),A(t,r.class_error),v(t,h),x(r.callback_error,t,i),n||U(r,i)}(0,e,t,r),G(i)}))},J=function(e,t,r){!function(e){e.llTempImage=document.createElement("IMG")}(e),K(e,t,r),function(e,t,r){var i=b(e,t.data_bg),n=b(e,t.data_bg_hidpi),a=o&&n?n:i;a&&(e.style.backgroundImage='url("'.concat(a,'")'),E(e).setAttribute("src",a),B(e,t,r))}(e,t,r),function(e,t,r){var i=b(e,t.data_bg_multi),n=b(e,t.data_bg_multi_hidpi),a=o&&n?n:i;a&&(e.style.backgroundImage=a,function(e,t,r){A(e,t.class_applied),v(e,f),t.unobserve_completed&&F(e,t),x(t.callback_applied,e,r)}(e,t,r))}(e,t,r)},Y=function(e,t,r){!function(e){return H.indexOf(e.tagName)>-1}(e)?J(e,t,r):function(e,t,r){K(e,t,r),N(e,t),B(e,t,r)}(e,t,r)},Q=["IMG","IFRAME","VIDEO"],X=function(e){return e.use_native&&"loading"in HTMLImageElement.prototype},ee=function(e,t,r){e.forEach((function(e){return function(e){return e.isIntersecting||e.intersectionRatio>0}(e)?function(e,t,r,i){var n=function(e){return w.indexOf(p(e))>=0}(e);v(e,"entered"),A(e,r.class_entered),C(e,r.class_exited),function(e,t,r){t.unobserve_entered&&F(e,r)}(e,r,i),x(r.callback_enter,e,t,i),n||Y(e,r,i)}(e.target,e,t,r):function(e,t,r,i){y(e)||(A(e,r.class_exited),function(e,t,r,i){r.cancel_on_exit&&function(e){return p(e)===l}(e)&&"IMG"===e.tagName&&(G(e),function(e){R(e,(function(e){j(e)})),j(e)}(e),function(e){R(e,(function(e){$(e)})),$(e)}(e),C(e,r.class_loading),S(i,-1),_(e),x(r.callback_cancel,e,t,i))}(e,t,r,i),x(r.callback_exit,e,t,i))}(e.target,e,t,r)}))},te=function(e){return Array.prototype.slice.call(e)},re=function(e){return e.container.querySelectorAll(e.elements_selector)},ne=function(e){return function(e){return p(e)===h}(e)},ie=function(e,t){return function(e){return te(e).filter(y)}(e||re(t))},rt=function(e,r){var n=c(e);this._settings=n,this.loadingCount=0,function(e,t){i&&!X(e)&&(t._observer=new IntersectionObserver((function(r){ee(r,e,t)}),function(e){return{root:e.container===document?null:e.container,rootMargin:e.thresholds||e.threshold+"px"}}(e)))}(n,this),function(e,r){t&&window.addEventListener("online",(function(){!function(e,t){var r;(r=re(e),te(r).filter(ne)).forEach((function(t){C(t,e.class_error),_(t)})),t.update()}(e,r)}))}(n,this),this.update(r)};return rt.prototype={update:function(e){var t,n,o=this._settings,a=ie(e,o);D(this,a.length),!r&&i?X(o)?function(e,t,r){e.forEach((function(e){-1!==Q.indexOf(e.tagName)&&function(e,t,r){e.setAttribute("loading","lazy"),K(e,t,r),N(e,t),v(e,d)}(e,t,r)})),D(r,0)}(a,o,this):(n=a,function(e){e.disconnect()}(t=this._observer),function(e,t){t.forEach((function(t){e.observe(t)}))}(t,n)):this.loadAll(a)},destroy:function(){this._observer&&this._observer.disconnect(),re(this._settings).forEach((function(e){delete e.llOriginalAttrs})),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(e){var t=this,r=this._settings;ie(e,r).forEach((function(e){F(e,t),Y(e,r,t)}))}},rt.load=function(e,t){var r=c(t);Y(e,r)},rt.resetStatus=function(e){_(e)},t&&function(e,t){if(t)if(t.length)for(var r,i=0;r=t[i];i+=1)s(e,r);else s(e,t)}(rt,window.lazyLoadOptions),rt}()}])]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/a8add6612d7e2d857b36.js b/handbook/_nuxt/js/a8add6612d7e2d857b36.js
new file mode 100644
index 0000000..2a35af7
--- /dev/null
+++ b/handbook/_nuxt/js/a8add6612d7e2d857b36.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[11],{305: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 a stacked bar chart by ECharts. You need to set the same string type value for a group of series in `stack`. The series with the same `stack` value will be in the same category.\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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\nIn this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.\n\n> The value of `stack` explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.\n>\n> For instance, here is a chart with 4 series that counted the amount of male and female. \"adult male\" and \"boy\" need to be stacked while \"adult female\" and \"girl\" need to be stacked. In this case, the suggestive value of `stack` is `'male'` and `'female'`. Although meaningless strings like `'a'` and `'b'` can achieve the same effect but the code will have worse readability.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/acc1aa7273a915744df3.js b/handbook/_nuxt/js/acc1aa7273a915744df3.js
new file mode 100644
index 0000000..b2b238a
--- /dev/null
+++ b/handbook/_nuxt/js/acc1aa7273a915744df3.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与饼图显示单个部分到整体的关系不同的是,堆叠柱状图可以显示多个部分到整体的关系。例如一个班级体育课选课的各项目人数统计,你可以用柱状图或饼图来展示。但是,当需要进一步区分男生和女生参与到不同项目中的人数分别是多少时,就需要把每个项目中包含的男生数和女生数都展示出来。如图选用堆叠柱状图,不仅能显示每个项目的总人数,还能展示出每个项目中的一部分与整体的关系。\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xBk7oUNwEz">\n</iframe>\n\n## 堆叠柱状 \b 图的使用建议\n\n1、遵循基本的柱状图使用原则。为了使图表易于理解,请避免使用太多颜色,不要刻意展示被截断的数据误导读者。\n\n2、堆叠柱状图不适合用于对比不同分组内同个分类之间的数据大小。\n\n3、堆叠柱状图最好的展示效果是每个组只包含两到三个类别,最多不要超过 6 个,因为太多的数据系列会使数据的阅读和分辨变得非常困难。\n\n4、由于要分析部分数据在整体中的占比,因此要避免用堆叠柱状图展示包含负数的数据。\n\n5、大多数的堆叠柱状图都是垂直绘制的,但是如果你的数据标签特别长时,考虑更好地展示效果,可以选择使用水平堆叠的方式。\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ad31e0a19768f4b18921.js b/handbook/_nuxt/js/ad31e0a19768f4b18921.js
new file mode 100644
index 0000000..685390b
--- /dev/null
+++ b/handbook/_nuxt/js/ad31e0a19768f4b18921.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[39],{333: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 fluctuation of income and outcome in a single series.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xS18jqmX4f">\n</iframe>\n\nThe bi-directional bar can be classified into the vertical chart (above) and horizontal chart(below, also called positive negative bar chart). For example, you can use a positive negative bar chart if there are positive and negative comments in a customer satisfaction survey data analysis. All data align in the middle, the positive comments attribute on the right side while the negative comments on the left side.\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xHJ1un374z">\n</iframe>\n\n## Suggestion for Using Bi-directional Bar Chart\n\n1. The data on both sides in the bi-directional bar chart are comparative.\n\n2. Don\'t define negative data on the right side of the bi-directional bar chart, to prevent misunderstanding caused by the violation of common sense.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar01.jpg">\n</img>\n\n3. A bi-directional bar chart always used to display data with the opposite meaning, so that you need to avoid misunderstanding caused by the use of data that does not have a positive or negative meaning. As the chart below, there is no antagonism between the data of male and female, so that it is a better choice to use a basic bar chart rather than a bi-directional bar chart.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bi-directional-bar02.jpg">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ad449dfd5fdcfb3dd8d8.js b/handbook/_nuxt/js/ad449dfd5fdcfb3dd8d8.js
new file mode 100644
index 0000000..661f0ff
--- /dev/null
+++ b/handbook/_nuxt/js/ad449dfd5fdcfb3dd8d8.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[58],{352:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/b8d54d9d6a91a7303c25.js b/handbook/_nuxt/js/b8d54d9d6a91a7303c25.js
new file mode 100644
index 0000000..d56a620
--- /dev/null
+++ b/handbook/_nuxt/js/b8d54d9d6a91a7303c25.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[73],{367: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 }\n ]\n};\n```\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, 43, 49],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'line',\n stack: 'x',\n areaStyle: {}\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/b91b2a7de712963c5ce2.js b/handbook/_nuxt/js/b91b2a7de712963c5ce2.js
new file mode 100644
index 0000000..dd8764c
--- /dev/null
+++ b/handbook/_nuxt/js/b91b2a7de712963c5ce2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[26],{320: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 in text as icon or background.\n- Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).\n\nAt the beginning, the meanings of two terms that will be used below should be clarified:\n\n- Text Block: The whole block of label text.\n- Text fragment: Some piece of text in a text block.\n\nFor example:\n\n<md-example src=\"doc-example/text-block-fragment\" width=\"400\" height=\"300\"></md-example>\n\n## Options about Text\n\necharts provides plenty of text options, including:\n\n- Basic font style: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n- Fill of text: `color`.\n- Stroke of text: `textBorderColor`, `textBorderWidth`.\n- Shadow of text: `textShadowColor`, `textShadowBlur`, `textShadowOffsetX`, `textShadowOffsetY`.\n- Box size of text block or text fragment: `lineHeight`, `width`, `height`, `padding`.\n- Alignment of text block or text fragment: `align`, `verticalAlign`.\n- Border, background (color or image) of text block or text fragment: `backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`.\n- Shadow of text block or text fragment: `shadowColor`, `shadowBlur`, `shadowOffsetX`, `shadowOffsetY`.\n- Position and rotation of text block: `position`, `distance`, `rotate`.\n\nUser can defined styles for text fragment in `rich` property. For example, [series-bar.label.rich](option.html#series-bar.label.rich)\n\nFor example:\n\n```js\nlabelOption = {\n // Styles defined in 'rich' can be applied to some fragments\n // of text by adding some markers to those fragment, like\n // `{styleName|text content text content}`.\n // `'\\n'` is the newline character.\n formatter: [\n '{a|Style \"a\" is applied to this fragment}',\n '{b|Style \"b\" is applied to this fragment}This fragment use default style{x|use style \"x\"}'\n ].join('\\n'),\n\n // Styles for the whole text block are defined here:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // Styles for text fragments are defined here:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n // ...\n }\n};\n```\n\n> Notice: `width` 和 `height` only work when `rich` specified.\n\n## Basic Styles of Text, Text Block and Text Fragment\n\nBasic font style can be set to text: `fontStyle`, `fontWeight`, `fontSize`, `fontFamily`.\n\nFill color and stroke color can be set to text: `color`, `textBorderColor`, `textBorderWidth`.\n\nBorder style and background style can be set to text block: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nBorder style and background style can be set to text fragment too: `borderColor`, `borderWidth`, `backgroundColor`, `padding`.\n\nFor example:\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n```\n\n## Label Position\n\n`label` option can be use in charts like `bar`, `line`, `scatter`, etc. The position of a label, can be specified by [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance).\n\nTry to modify the `position` and `distance` option in the following example:\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n```\n\n> Notice, there are different optional values of `position` by different chart types. And `distance` is not supported in every chart. More detailed info can be checked in [option doc](${mainSitePath}option.html).\n\n## Label Rotation\n\nSometimes label is needed to be rotated. For example:\n\n```js live {layout: 'lr'}\nconst labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n```\n\n[align](option.html#series-bar.label.align) and[verticalAlign](option.html#series-bar.label.verticalAlign) can be used to adjust location of label in this scenario.\n\nNotice, `align` and `verticalAlign` are applied firstly, then rotate.\n\n## Layout and Alignment of Text fragment\n\nTo understand the layout rule, every text fragment can be imagined as a `inline-block` dom element in CSS.\n\n`content box size` of a text fragment is determined by its font size by default. It can also be specified directly by `width` and `height`, although they are rarely set. `border box size` of a text fragment is calculated by adding the `border box size` and `padding`.\n\nOnly `'\\n'` is the newline character, which breaks a line.\n\nMultiple text fragment exist in a single line. The height of a line is determined by the biggest `lineHeight` of text fragments. `lineHeight` of a text fragment can be specified in `rich`, or in the parent level of `rich`, otherwise using `box size` of the text fragment.\n\nHaving `lineHeight` determined, the vertical position of text fragments can be determined by `verticalAlign` (there is a little different from the rule in CSS):\n\n- `'bottom'`: The bottom edge of the text fragment sticks to the bottom edge of the line.\n- `'top'`: The top edge of the text fragment sticks to the top edge of the line.\n- `'middle'`: In the middle of the line.\n\nThe width of a text block can be specified by `width`, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its `align`.\n\n- Firstly, place text fragments whose `align` is `'left'` from left to right continuously.\n- Secondly, place text fragments whose `align` is `'right'` from right to left continuously.\n- Finally, the text fragments remained will be sticked and placed in the center of the rest of space.\n\nThe position of text in a text fragment:\n\n- If `align` is `'center'`, text aligns at the center of the text fragment box.\n- If `align` is `'left'`, text aligns at the left of the text fragment box.\n- If `align` is `'right'`, text aligns at the right of the text fragment box.\n\n## Effects: Icon, Horizontal Rule, Title Block, Simple Table\n\nSee example:\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n```\n\nIcon is implemented by using image in `backgroundColor`.\n\n```js\nrich: {\n Sunny: {\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // Can only height specified, but leave width auto obtained\n // from the image, where the aspect ratio kept.\n height: 30\n }\n}\n```\n\nHorizontal rule (like HTML <hr> tag) can be implemented by border:\n\n```js\nrich: {\n hr: {\n borderColor: '#777',\n // width is set as '100%' to fullfill the text block.\n // Notice, the percentage is based on the content box, without\n // padding. Although it is a little different from CSS rule,\n // it is convinent in most cases.\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n}\n```\n\nTitle block can be implemented by `backgroundColor`:\n\n```js\n// Title is at left.\nformatter: '{titleBg|Left Title}',\nrich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n\n// Title is in the center of the line.\n// This implementation is a little tricky, but is works\n// without more complicated layout mechanism involved.\nformatter: '{tc|Center Title}{titleBg|}',\nrich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n}\n```\n\nSimple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the [example](${exampleEditorPath}pie-rich-text).\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/b9c4fb74d46dd3f07a1e.js b/handbook/_nuxt/js/b9c4fb74d46dd3f07a1e.js
new file mode 100644
index 0000000..ec45f84
--- /dev/null
+++ b/handbook/_nuxt/js/b9c4fb74d46dd3f07a1e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[22],{316: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.googlesource.com/chromium/src/+/lkgr/headless/README.md), [node-canvas](https://github.com/Automattic/node-canvas), [jsdom](https://github.com/jsdom/jsdom), [PhantomJS](http://phantomjs.org/), etc.\n\nSome solutions contributed by the community are list as follows:\n\n- https://github.com/hellosean1025/node-echarts\n- https://github.com/chfw/echarts-scrappeteer\n- https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\n- https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73\n\nNotice: if server-side rendering result is different from browser-side rendering, please set [animation](option.html#animation) as `false` and try again.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/bbab45710d8d55912084.js b/handbook/_nuxt/js/bbab45710d8d55912084.js
new file mode 100644
index 0000000..38eb51b
--- /dev/null
+++ b/handbook/_nuxt/js/bbab45710d8d55912084.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[42],{336: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 simplified data which is used to analyze the change or difference in every link of the process. It is also useful to find out the problem and bottleneck during the business.\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## Suggestion for Using Funnel Chart\n\n1. Represented by an e-commerce website, the funnel chart can easily show the entire process from the website to placing order. It not only shows the final conversion rate but also the conversion rate of each step, which leads to the problem directly. You can improve the design for some specific steps.\n\nAs shown below, the first three steps("show", "click", "visit") have only a little drain. The significant decrease happened from "visit" to "consult". As the result, the manager can mainly analyze what caused the reduction of consulting. For instance, it might because that the entrance for consult might not obvious enough.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJIPHN9Nf">\n</iframe>\n\n2. Using two stacked funnel chart to compare between the prediction and outcome makes the deviation analyze easier.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrydEwN94f">\n</iframe>\n\n3. Try to use two funnels in one chart to discuss the transforming circumstances. As the following chart shows, project B has a higher churn rate comparing with project A.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrJfrjEc4z&v=1">\n</iframe>\n\n4. The funnel chart is more useful for displaying a logic flow which is different from the pie chart. If the data have no logical relevance, you should choose the pie chart.\n\n5. Depending on the type of data, use gradually changed colors or contract colors. Arrange them from dark to light according to the size of the funnel chart. Please don\'t add too many layers or colors to increase reading difficulty. \n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c00d87bc389d852f56c9.js b/handbook/_nuxt/js/c00d87bc389d852f56c9.js
new file mode 100644
index 0000000..b4a4a9e
--- /dev/null
+++ b/handbook/_nuxt/js/c00d87bc389d852f56c9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[109],{403: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、我们很难比较一个分块过多的饼图的数据,建议尽量将饼图分块数量控制在五个以内。当数据类别较多时,可以把较小或不重要的数据合并成第五个分块,并命名为"其它"。如果各类别都必须全部展示,此时选择柱状图或堆积柱状图或许更合适。\n\n<img max-width="830" width="100%" height="100%" src="images/design/pie/pie02.jpg" />\n\n3、饼图不适合被用于精确数据的比较,因此当各类别数据占比较接近时(如下左图),我们很难对比出每个类别占比的大小。此时建议选用柱状图或南丁格尔玫瑰图(如下右图)来获取更好的展示效果。\n\n<img max-width="830" width="100%" height="100%" src="images/design/pie/pie03.jpg" />\n\n4、大多数人视觉习惯是按照顺时针和自上而下的顺序去观察。因此在绘制饼图时,建议从 12 点钟开始沿顺时针右边第一个分块绘制饼图最大的数据分块,有效的强调其重要性。\n\n其余的数据分块有两种建议,一种是按照数据大小依次顺时针排列,另一种是在 12 点钟的左边绘制第二大的分块,其余的分块按照逆时针排列,最小的分块放在底部。如下图所示。\n\n<img max-width="830" width="100%" height="100%" src="images/design/pie/pie01.jpg" />\n\n按照数据大小区别顺序,不仅符合用户的视觉习惯,也更易于数据的识别和比较。当然基于这个原理,我们也可以把需要强调的最重要的部分(不一定是最大的部分)放在最突出重要的位置。\n\n5、可以添加一些装饰来强调饼图中的某一个数据。颜色、动效、样式、位置等元素都可以被用来突出显示一个扇区。请注意适度,有时太多的装饰会让用户理解数据时分心。\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">\n</iframe>\n\n6、三维的饼图歪曲了各分块相对于整体的比例关系,会造成错误及理解上的困扰。因此不建议使用 3D 饼图。\n\n<img max-width="830" width="100%" height="100%" src="images/design/pie/pie04.jpg" />\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c14b621ede8c3f27dc3f.js b/handbook/_nuxt/js/c14b621ede8c3f27dc3f.js
new file mode 100644
index 0000000..0019085
--- /dev/null
+++ b/handbook/_nuxt/js/c14b621ede8c3f27dc3f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[125],{419: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)中了解更多信息。\n\n## 引入 Apache ECharts\n\n在刚才保存 `echarts.js` 的目录新建一个 `index.html` 文件,内容如下:\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n \x3c!-- 引入刚刚下载的 ECharts 文件 --\x3e\n <script src=\"echarts.js\"><\/script>\n </head>\n</html>\n```\n\n打开这个 `index.html`,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。\n\n## 绘制一个简单的图表\n\n在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 `</head>` 之后,添加:\n\n```html\n<body>\n \x3c!-- 为 ECharts 准备一个定义了宽高的 DOM --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n</body>\n```\n\n然后就可以通过 [echarts.init](${mainSitePath}/api.html#echarts.init) 方法初始化一个 echarts 实例并通过 [setOption](${mainSitePath}/api.html#echartsInstance.setOption) 方法生成一个简单的柱状图,下面是完整代码。\n\n```html\n<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n \x3c!-- 引入刚刚下载的 ECharts 文件 --\x3e\n <script src=\"echarts.min.js\"><\/script>\n </head>\n <body>\n \x3c!-- 为 ECharts 准备一个定义了宽高的 DOM --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // 基于准备好的dom,初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n <\/script>\n </body>\n</html>\n```\n\n这样你的第一个图表就诞生了!\n\n<md-example src=\"doc-example/getting-started\"></md-example>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c1cd433365a1acdfa307.js b/handbook/_nuxt/js/c1cd433365a1acdfa307.js
new file mode 100644
index 0000000..2f34e44
--- /dev/null
+++ b/handbook/_nuxt/js/c1cd433365a1acdfa307.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[27],{321: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 GitHub\n\nYou can find links to each version on the [release](https://github.com/apache/echarts/releases) page of the [apache/echarts](https://github.com/apache/echarts) project. Click on the Source code in Assets at the bottom of the download page, and unzip the `echarts.js` file in the `dist` directory to include the full ECharts functionality.\n\n### Use From npm\n\n```sh\nnpm install echarts --save\n```\n\nSee [Introducing Apache ECharts in your project](${lang}/basics/import) for details.\n\n### Use From CDN\n\nRecommend referencing [echarts](https://www.jsdelivr.com/package/npm/echarts) from jsDelivr.\n\n### Online Customization\n\nIf you want to introduce only some modules to reduce package size, you can use the [ECharts online customization](${mainSitePath}/builder.html) function.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c2ba106829ef31b86d5b.js b/handbook/_nuxt/js/c2ba106829ef31b86d5b.js
new file mode 100644
index 0000000..5ee7a85
--- /dev/null
+++ b/handbook/_nuxt/js/c2ba106829ef31b86d5b.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[124],{418: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)、色调(colorHue)\n\n下面对 `visualMap` 组件的使用方式进行简要的介绍。\n\n## 数据和维度\n\nECharts 中的数据,一般存放于 [`series.data`](${optionPath}series.data) 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。\n\n例如,[series.data](${optionPath}series.data) 最常见的形式,是“线性表“,即一个普通数组:\n\n```js\nseries: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: 2323, // 这是数据项的数据值(value)\n itemStyle: {}\n },\n 1212, // 也可以直接是 dataItem 的 value,这更常见。\n 2323, // 每个 value 都是“一维“的。\n 4343,\n 3434\n ];\n}\n```\n\n```js\nseries: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value)\n itemStyle: {}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的,每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是“气泡图“,常见第一维度映射到x轴,\n // 第二维度映射到y轴,\n // 第三维度映射到气泡半径(symbolSize)\n ];\n}\n```\n\n在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 `visualMap`。最常见的情况,[散点图(scatter)](${optionPath}series-scatter) 使用半径展现了第三个维度。\n\n## visualMap 组件\n\nvisualMap 组件定义了把数据的*哪个维度*映射到*什么视觉元素上*。\n\n现在提供如下两种类型的 visualMap 组件,通过 [visualMap.type](${optionPath}visualMap.type) 来区分。\n\n其定义结构例如:\n\n```js\noption = {\n visualMap: [\n // 可以同时定义多个 visualMap 组件。\n {\n // 第一个 visualMap 组件\n type: 'continuous' // 定义为连续型 visualMap\n // ...\n },\n {\n // 第二个 visualMap 组件\n type: 'piecewise' // 定义为分段型 visualMap\n // ...\n }\n ]\n // ...\n};\n```\n\n## 连续型与分段型视觉映射组件\n\nECharts 的视觉映射组件分为连续型([visualMapContinuous](${optionPath}visualMap-continuous))与分段型([visualMapPiecewise](${optionPath}visualMap-piecewise))。\n\n连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。\n\n### 连续型视觉映射\n\n连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。\n\n```js\noption = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度(即 value[3])被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: {\n // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,\n // 数据最小值映射到'blue'上,\n // 最大值映射到'red'上,\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围,\n // 数据最小值映射到30上,\n // 最大值映射到100上,\n // 其余自动线性计算。\n },\n outOfRange: {\n // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n```\n\n其中,[visualMap.inRange](${optionPath}visualMap.inRange) 表示在数据映射范围内的数据采用的样式;而 [visualMap.outOfRange](${optionPath}visualMap.outOfRange) 则指定了超出映射范围外的数据的样式。\n\n[visualMap.dimension](~visualMap.dimension) 则指定了将数据的哪个维度做视觉映射。\n\n### 分段型视觉映射\n\n分段型视觉映射组件有三种模式:\n\n- 连续型数据平均分段:依据 [visualMap-piecewise.splitNumber](${optionPath}visualMap-piecewise.splitNumber) 来自动平均分割成若干块。\n- 连续型数据自定义分段:依据 [visualMap-piecewise.pieces](${optionPath}visualMap-piecewise.pieces) 来定义每块范围。\n- 离散数据(类别性数据):类别定义在 [visualMap-piecewise.categories](${optionPath}visualMap-piecewise.categories) 中。\n\n使用分段型视觉映射时,需要将 `type` 设为 `'piecewise'`,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c3b04247a56412f8a1d0.js b/handbook/_nuxt/js/c3b04247a56412f8a1d0.js
new file mode 100644
index 0000000..9d59290
--- /dev/null
+++ b/handbook/_nuxt/js/c3b04247a56412f8a1d0.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[99],{393:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c40b7baf053aa77317cb.js b/handbook/_nuxt/js/c40b7baf053aa77317cb.js
new file mode 100644
index 0000000..471d74a
--- /dev/null
+++ b/handbook/_nuxt/js/c40b7baf053aa77317cb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[118],{412: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'](${mainSitePath}api.html#events.legendselectchanged) 事件(这里需要注意切换图例开关是不会触发 `'legendselected'` 事件的),数据区域缩放时触发的 ['datazoom'](${mainSitePath}api.html#events.legendselectchanged) 事件等等。\n\n## 鼠标事件的处理\n\nECharts 支持常规的鼠标事件类型,包括 `'click'`、 `'dblclick'`、 `'mousedown'`、 `'mousemove'`、 `'mouseup'`、 `'mouseover'`、 `'mouseout'`、 `'globalout'`、 `'contextmenu'` 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。\n\n```js live\n// 基于准备好的dom,初始化ECharts实例\n// var myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function(params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n```\n\n所有的鼠标事件包含参数 `params`,这是一个包含点击图形的数据信息的对象,如下格式:\n\n```ts\ntype EventParams = {\n // 当前点击的图形元素所属的组件名称,\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string;\n // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string;\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number;\n // 系列名称。当 componentType 为 'series' 时有意义。\n seriesName: string;\n // 数据名,类目名\n name: string;\n // 数据在传入的 data 数组中的 index\n dataIndex: number;\n // 传入的原始数据项\n data: Object;\n // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data,dataType 无意义。\n dataType: string;\n // 传入的数据值\n value: number | Array;\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string;\n};\n```\n\n如何区分鼠标点击到了哪里:\n\n```js\nmyChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge(边)上。\n } else {\n // 点击到了 graph 的 node(节点)上。\n }\n }\n }\n});\n```\n\n使用 `query` 只对指定的组件的图形元素的触发回调:\n\n```js\nchart.on(eventName, query, handler);\n```\n\n`query` 可为 `string` 或者 `Object`。\n\n如果为 `string` 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:\n\n```js\nchart.on('click', 'series', function() {});\nchart.on('click', 'series.line', function() {});\nchart.on('click', 'dataZoom', function() {});\nchart.on('click', 'xAxis.category', function() {});\n```\n\n如果为 `Object`,可以包含以下一个或多个属性,每个属性都是可选的:\n\n```ts\n{\n ${mainType}Index: number // 组件 index\n ${mainType}Name: string // 组件 name\n ${mainType}Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type,如关系图中的 'node', 'edge'\n element: string // 自定义系列中的 el 的 name\n}\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // 关系图的边被点击时此方法被回调。\n});\n```\n\n例如:\n\n```js\nchart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。\n});\n```\n\n你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:\n\n```js\nmyChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }\n ]\n });\n });\n});\n```\n\n## 组件交互的行为事件\n\n在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 [events](${mainSitePath}/api.html#events) 文档中有列出。\n\n下面是监听一个图例开关的示例:\n\n```js\n// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function(params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n```\n\n## 代码触发 ECharts 中组件的行为\n\n上面提到诸如 `'legendselectchanged'` 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。\n\n在 ECharts 通过调用 `myChart.dispatchAction({ type: '' })` 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。\n\n常用的动作和动作对应参数在 [action](${mainSitePath}/api.html#action) 文档中有列出。\n\n下面示例演示了如何通过 `dispatchAction` 去轮流高亮饼图的每个扇形。\n\n```js live\noption = {\n title: {\n text: '饼图程序调用高亮示例',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n // 取消之前高亮的图形\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n // 高亮当前图形\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n // 显示 tooltip\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n```\n\n## 监听“空白处”的事件\n\n有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。\n\n在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。\n\n```js\nmyChart.getZr().on('click', function(event) {\n // 该监听器正在监听一个`zrender 事件`。\n});\nmyChart.on('click', function(event) {\n // 该监听器正在监听一个`echarts 事件`。\n});\n```\n\nzrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。\n\n有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:\n\n```js\nmyChart.getZr().on('click', function(event) {\n // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。\n if (!event.target) {\n // 点击在了空白处,做些什么。\n }\n});\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c4790b12e2e9567a0ef1.js b/handbook/_nuxt/js/c4790b12e2e9567a0ef1.js
new file mode 100644
index 0000000..ccb9f3d
--- /dev/null
+++ b/handbook/_nuxt/js/c4790b12e2e9567a0ef1.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{308: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, we set the type of axis to `category` and `value` under `xAxis` and `yAxis`. We also clarified the content on the x-axis through `data`. In `series`, we set the type to `line`, and specify the values of three points through `data`. In this way, we got a simple line chart.\n\n> The `type` here can be omitted because the defaults of the axis are `value` while `xAxis` has specified the category's `data`. In this case, `ECharts` can recognize that this is a category axis.\n\n## Line Chart in Cartesian Coordinate System\n\nHow to implement if we want the line chart to be continuous? The answer is simple, as long as every value in `data` of the `series` is represented by an array containing two elements.\n\n```js live\noption = {\n xAxis: {},\n yAxis: {},\n series: [\n {\n data: [\n [20, 120],\n [50, 200],\n [40, 50]\n ],\n type: 'line'\n }\n ]\n};\n```\n\n## Customized Line Chart\n\n### Line Style\n\nLine style can be changed by `lineStyle` setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook [`series.lineStyle`](${optionPath}series-line.lineStyle) to figure out.\n\nHere is an example of setting color, line width and type.\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 lineStyle: {\n normal: {\n color: 'green',\n width: 4,\n type: 'dashed'\n }\n }\n }\n ]\n};\n```\n\nWhen we set the line width here, the line width of items will not change. The line style of items needs to be set separately.\n\n### Item Style\n\nItem style can be change by [`series.itemStyle`](${optionPath}series-line.itemStyle). It included `color`, `borderColor`, `borderStyle`, `borderWidth`, `borderType`, `shadowColor`, `opacity` and so on. It works the same as the `lineType`, so we will not do further discuss.\n\n## Display Value on Items.\n\nIn the series, the label of the item was specified by [`series.label`](${optionPath}series-line.label). If we change the `show` under `label` to `true`, the value will be displayed by default. Otherwise, if [`series.emphasis.label.show`](${optionPath}series-line.emphasis.label.show) is `true`, the label will show only if the mouse moved across the item.\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 label: {\n show: true,\n position: 'bottom',\n textStyle: {\n fontSize: 20\n }\n }\n }\n ]\n};\n```\n\n## Empty Data\n\nIn a `series`, there are empty data. It has some difference with `0`. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.\n\nIn ECharts, we use `'-'` to represent null data, It is applicable for data in other series.\n\n```js live\noption = {\n xAxis: {\n data: ['A', 'B', 'C', 'D', 'E']\n },\n yAxis: {},\n series: [\n {\n data: [0, 22, '-', 23, 19],\n type: 'line'\n }\n ]\n};\n```\n\n> Please note the difference between the empty data and 0.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c4da154b32c4c2a3de37.js b/handbook/_nuxt/js/c4da154b32c4c2a3de37.js
new file mode 100644
index 0000000..1b423d4
--- /dev/null
+++ b/handbook/_nuxt/js/c4da154b32c4c2a3de37.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[96],{390:function(n,t,e){"use strict";e.r(t),t.default="# 无障碍访问\n\nW3C 制定了无障碍富互联网应用规范集([WAI-ARIA](https://www.w3.org/WAI/intro/aria),the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。\n\n默认关闭,需要通过将 [aria.show](${optionPath}aria.show) 设置为 `true` 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。\n\n对于配置项:\n\n```js\noption = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n```\n\n<md-example src=\"doc-example/aria-pie\"></md-example>\n\n生成的图表 DOM 上,会有一个 `aria-label` 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:\n\n```\n这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n```\n\n## 整体修改描述\n\n对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。\n\n这时候,用户可以通过 [aria.description](${optionPath}aria.description) 配置项指定图表的整体描述。\n\n## 定制模板描述\n\n除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。\n\n生成描述的基本流程为,如果 [aria.show](${optionPath}aria.show) 设置为 `true`,则生成无障碍访问描述,否则不生成。如果定义了 [aria.description](${optionPath}aria.description),则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 `aria.description` 完全覆盖。\n\n使用模板拼接时,先根据是否存在标题 [title.text](${optionPath}title.text) 决定使用 [aria.general.withTitle](${optionPath}aria.general.withTitle) 还是 [aria.general.withoutTitle](${optionPath}aria.general.withoutTitle) 作为整体性描述。其中,`aria.general.withTitle` 配置项包括模板变量 `'{title}'`,将会被替换成图表标题。也就是说,如果 `aria.general.withTitle` 被设置为 `'图表的标题是:{title}。'`,则如果包含标题 `'价格分布图'`,这部分的描述为 `'图表的标题是:价格分布图。'`。\n\n拼接完标题之后,会依次拼接系列的描述([aria.series](${optionPath}aria.series)),和每个系列的数据的描述([aria.data](${optionPath}aria.data))。同样,每个模板都有可能包括模板变量,用以替换实际的值。\n\n完整的描述生成流程请参见 [ARIA 文档](${optionPath}aria)。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c7c5ed7688623823e36f.js b/handbook/_nuxt/js/c7c5ed7688623823e36f.js
new file mode 100644
index 0000000..1dbe6cb
--- /dev/null
+++ b/handbook/_nuxt/js/c7c5ed7688623823e36f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[34],{328: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. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.\n\nThe Accessibility function was turn off by default, turn it on by define the value of [aria.show](${optionPath}aria.show) as `true`. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.\n\nAbout the configuration item:\n\n```js\noption = {\n aria: {\n show: true\n },\n title: {\n text: 'Referrer of a User',\n x: 'center'\n },\n series: [\n {\n name: 'Referrer',\n type: 'pie',\n data: [\n { value: 335, name: 'Direct Visit' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Union Ad' },\n { value: 135, name: 'Video Ad' },\n { value: 1548, name: 'Search Engine' }\n ]\n }\n ]\n};\n```\n\n<md-example src=\"doc-example/aria-pie\"></md-example>\n\nThere will be an `area-label` attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:\n\n```\nThis is a chart about \"Referrer of a User\" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n```\n\n## Overall Description Modification\n\nFor some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.\n\nUnder this circumstance, user can define the overall description by [aria.description](${optionPath}aria.description) configuration item.\n\n## Customize Template Description\n\nExcept for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.\n\nThe basic process to generate a description: If [aria.show](${optionPath}aria.show) is `true`, then generate the ARIA description (otherwise, no.). If [aria.description](${optionPath}aria.description) was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use `aria.description` to cover the default if needed.\n\nWhile using the template to generate, firstly make sure whether the title [title.text](${optionPath}title.text) exist to decide to use [aria.general.withTitle](${optionPath}aria.general.withTitle) or [aria.general.withoutTitle](${optionPath}aria.general.withoutTitle) as the overall description. Configuration item `aria.general.withTitle` and `'{title}'` will be replaced by the chart title. In another word, if `aria.general.withTitle` was defined as `This is a chart about \"{title}\"`, and the title is `'Prize Distribution Chart'`, the description of this part will be `'This is a chart about \"Prize Distribution Chart\"'`.\n\nAfter generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.\n\nThe complete process of generating description, please check: [ARIA Document](${optionPath}aria).\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/c8202115ceaa17a66aa6.js b/handbook/_nuxt/js/c8202115ceaa17a66aa6.js
new file mode 100644
index 0000000..81fc416
--- /dev/null
+++ b/handbook/_nuxt/js/c8202115ceaa17a66aa6.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[60],{354: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 understand.\n\nThese approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.\n\n- Theme\n- Color Palette\n- Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)\n- Visual encoding (visualMap component)\n\n## Theme\n\nSetting a theme is the simplest way to change the color style. For example, in [Examples page](${websitePath}/examples/en/index.html), we can switch to dark mode and see the result of a different theme.\n\nIn our project, we can switch to dark theme like:\n\n```js\nvar chart = echarts.init(dom, 'dark');\n```\n\nOther themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the [theme builder](https://echarts.apache.org/en/theme-builder.html). Theme can also be created or edited in it. The downloaded theme can be used as follows:\n\nIf a theme is downloaded as a JSON file, we should register it by ourselves, for example:\n\n```js\nvar xhr = new XMLHttpRequest();\n// Assume the theme name is \"vintage\".\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n```\n\nIf a theme is downloaded as a JS file, it will auto register itself:\n\n```js\n// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n```\n\n## Color Palette\n\nColor palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.\n\n```js\noption = {\n // Global palette:\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // A palette only work for the series:\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // A palette only work for the series:\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n```\n\n## Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)\n\nIt is a common way to set style explicitly. Throughout ECharts [option](${optionPath}), style related options can be set in various place, including [itemStyle](${optionPath}series.itemStyle), [lineStyle](${optionPath}series-line.lineStyle), [areaStyle](${optionPath}series-line.areaStyle), [label](${optionPath}series.label), etc.\n\nGenerally speaking, all of the built-in components and series follow the naming convention like `itemStyle`, `lineStyle`, `areaStyle`, `label` etc, although they may occur in different place according to different series or components.\n\nIn the following code we add shadow, gradient to bubble chart.\n\n```js live\nvar data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n```\n\n## Style of Emphasis State\n\nWhen mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by [emphasis](${optionPath}series-bar.emphasis) property. The options in [emphasis](${optionPath}series-bar.emphasis) is the same as the ones for normal state, for example:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\nNotice: Before ECharts4, the emphasis style should be written like this:\n\n```js\noption = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n```\n\nThe option format is still **compatible**, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the \"normal\" term, which makes the option more simple and neat.\n\n## Visual Encoding by visualMap Component\n\n[visualMap component](${optionPath}visualMap) supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in [Visual Map of Data](~Visual%20Map%20of%20Data).\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/cbd592f307d3efcb1e56.js b/handbook/_nuxt/js/cbd592f307d3efcb1e56.js
new file mode 100644
index 0000000..b2039cb
--- /dev/null
+++ b/handbook/_nuxt/js/cbd592f307d3efcb1e56.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[116],{410: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`、`aggregate`(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:\n\n- 把数据分成多份用不同的饼图展现。\n- 进行一些数据统计运算,并展示结果。\n- 用某些数据可视化算法处理数据,并展示结果。\n- 数据排序。\n- 去除或直选择数据项。\n- ...\n\n## 数据转换基础使用\n\n在 echarts 中,数据转换是依托于数据集([dataset](${optionPath}#dataset))来实现的. 我们可以设置 [dataset.transform](${optionPath}#dataset.transform) 来表示,此 dataset 的数据,来自于此 transform 的结果。\n\n下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。\n\n```js live\nvar option = {\n dataset: [\n {\n // 这个 dataset 的 index 是 `0`。\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // 这个 dataset 的 index 是 `1`。\n // 这个 `transform` 配置,表示,此 dataset 的数据,来自于此 transform 的结果。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // 我们还可以设置这些可选的属性: `fromDatasetIndex` 或 `fromDatasetId`。\n // 这些属性,指定了,transform 的输入,来自于哪个 dataset。例如,\n // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如,\n // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。\n // 当这些属性都不指定时,默认认为,输入来自于 index 为 `0` 的 dataset 。\n },\n {\n // 这个 dataset 的 index 是 `2`。\n // 同样,这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定,\n // 那么输入默认来自于 index 为 `0` 的 dataset 。\n transform: {\n // 这个类型为 \"filter\" 的 transform 能够遍历并筛选出满足条件的数据项。\n type: 'filter',\n // 每个 transform 如果需要有配置参数的话,都须配置在 `config` 里。\n // 在这个 \"filter\" transform 中,`config` 用于指定筛选条件。\n // 下面这个筛选条件是:选出维度( dimension )'Year' 中值为 2012 的所有\n // 数据项。\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // 这个 dataset 的 index 是 `3`。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述\n // 2011 年那个 \"filter\" transform 的结果。\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n```\n\n现在我们简单总结下,使用 transform 时的几个要点:\n\n- 在一个空的 dataset 中声明 `transform`, `fromDatasetIndex`/`fromDatasetId` 来表示我们要生成新的数据。\n- 系列引用这个 dataset 。\n\n## 数据转换的进阶使用\n\n#### 链式声明 transform\n\n`transform` 可以被链式声明,这是一个语法糖。\n\n```js\noption = {\n dataset: [\n {\n source: [\n // 原始数据\n ]\n },\n {\n // 几个 transform 被声明成 array ,他们构成了一个链,\n // 前一个 transform 的输出是后一个 transform 的输入。\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // 这个系列引用上述 transform 的结果。\n datasetIndex: 1\n }\n};\n```\n\n> 注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。\n\n#### 一个 transform 输出多个 data\n\n在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。\n\n例如,在内置的 \"boxplot\" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,[example](${exampleEditorPath}boxplot-light-velocity)。\n\n我们提供配置 [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) 来满足这种情况,例如:\n\n```js\noption = {\n dataset: [\n {\n // 这个 dataset 的 index 为 `0`。\n source: [\n // 原始数据\n ]\n },\n {\n // 这个 dataset 的 index 为 `1`。\n transform: {\n type: 'boxplot'\n }\n // 这个 \"boxplot\" transform 生成了两个数据:\n // result[0]: boxplot series 所需的数据。\n // result[1]: 离群点数据。\n // 当其他 series 或者 dataset 引用这个 dataset 时,他们默认只能得到\n // result[0] 。\n // 如果想要他们得到 result[1] ,需要额外声明如下这样一个 dataset :\n },\n {\n // 这个 dataset 的 index 为 `2`。\n // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。\n fromDatasetIndex: 1,\n // 并且指定了获取 transform result[1] 。\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n // 这个 series 引用 index 为 `1` 的 dataset 。\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // 这个 series 引用 index 为 `2` 的 dataset 。\n // 从而也就得到了上述的 transform result[1] (即离群点数据)\n datasetIndex: 2\n }\n ]\n};\n```\n\n另外,[dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) 和 [dataset.transform](${optionPath}#dataset.transform) 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 `fromTransformResult` 获取的结果。例如:\n\n```js\n{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n```\n\n#### 在开发环境中 debug\n\n使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 `transform.print` 方便 debug 。这个配置项只在开发环境中生效。如下例:\n\n```js\noption = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }\n ]\n // ...\n};\n```\n\n## 数据转换器 \"filter\"\n\necharts 内置提供了能起过滤作用的数据转换器。我们只需声明 `transform.type: \"filter\"`,以及给出数据筛选条件。如下例:\n\n```js live\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // 这个筛选条件表示,遍历数据,筛选出维度( dimension )\n // 'Year' 上值为 2011 的所有数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n这是 filter 的另一个例子的效果:\n\n<md-example src=\"data-transform-filter\"></md-example>\n\n在 \"filter\" transform 中,有这些要素:\n\n**关于维度( dimension ):**\n\n`config.dimension` 指定了维度,能设成这样的值:\n\n- 设定成声明在 dataset 中的维度名,例如 `config: { dimension: 'Year', '=': 2011 }`。不过, dataset 中维度名的声明并非强制,所以我们也可以\n- 设定成 dataset 中的维度 index (index 值从 0 开始)例如 `config: { dimension: 3, '=': 2011 }`。\n\n**关于关系比较操作符:**\n\n关系操作符,可以设定这些:\n`>`(`gt`)、`>=`(`gte`)、`<`(`lt`)、`<=`(`lte`)、`=`(`eq`)、`!=`(`ne`、`<>`)、`reg`。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:\n\n- 多个关系操作符能声明在一个 {} 中,例如 `{ dimension: 'Price', '>=': 20, '<': 30 }`。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。\n- data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 `' 123 '`。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。\n- 如果我们需要对日期对象(JS `Date`)或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 `parser: 'time'`,例如 `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`。\n- 纯字符串比较也被支持,但是只能用在 `=` 或 `!=` 上。而 `>`, `>=`, `<`, `<=` 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。\n- `reg` 操作符能提供正则表达式比较。例如, `{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }` 能在 `'Name'` 维度上选出姓 `'Müller'` 的数据项。\n\n**关于逻辑比较:**\n\n我们也支持了逻辑比较操作符 **与或非**( `and` | `or` | `not` ):\n\n```js\noption = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // 使用 and 操作符。\n // 类似地,同样的位置也可以使用 “or” 或 “not”。\n // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // 这个表达的是,选出 2011 年价格大于等于 20 但小于 30 的数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n`and`/`or`/`not` 自然可以被嵌套,例如:\n\n```js\ntransform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n```\n\n**关于解析器( parser ):**\n\n还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:\n\n- `parser: 'time'`:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 `echarts.time.parse` 相同,即,当原始值为时间对象( JS `Date` 实例),或者是时间戳,或者是描述时间的字符串(例如 `'2012-05-12 03:11:22'` ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。\n- `parser: 'trim'`:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。\n- `parser: 'number'`:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 `NaN`。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 `'33%'`, `12px`),我们需要手动指定 `parser: 'number'`,从而去掉尾缀转为数值才能比较。\n\n这个例子显示了如何使用 `parser: 'time'`:\n\n```js\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n```\n\n**形式化定义:**\n\n最后,我们给出,数据转换器 \"filter\" 的 config 的形式化定义:\n\n```ts\ntype FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## 数据转换器 \"sort\"\n\n\"sort\" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( `axis.type: 'category'` )中显示排过序的数据。例如:\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // 按分数排序\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"data-transform-sort-bar\"></md-example>\n\n数据转换器 \"sort\" 还有一些额外的功能:\n\n- 可以多重排序,多个维度一起排序。见下面的例子。\n- 排序规则是这样的:\n - 默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。\n - 对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。\n - 当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 `incomparable: 'min' | 'max'` 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 `null`, `undefined`, `NaN`, `''`, `'-'`)在排序的头还是尾。\n- 过滤器 `filter: 'time' | 'trim' | 'number'` 可以被使用,和数据转换器 \"filter\" 中的情况一样。\n - 如果要对时间进行排序(例如,值为 JS `Date` 实例或者时间字符串如 `'2012-03-12 11:13:54'`),我们需要声明 `parser: 'time'`。\n - 如果需要对有后缀的数值进行排序(如 `'33%'`, `'16px'`)我们需要声明 `parser: 'number'`。\n\n这是一个“多维度排序”的例子。\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // 对两个维度按声明的优先级分别排序。\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n //...\n};\n```\n\n<md-example src=\"doc-example/data-transform-multiple-sort-bar\"></md-example>\n\n最后,我们给出数据转换器 \"sort\" 的 config 的形式化定义。\n\n```ts\ntype SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## 使用外部的数据转换器\n\n除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 [ecStat](https://github.com/ecomfe/echarts-stat) 提供的数据转换器。\n\n生成数据的回归线:\n\n```js\n// 首先要注册外部数据转换器。\necharts.registerTransform(ecStatTransform(ecStat).regression);\n```\n\n```js\noption = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // 引用注册的数据转换器。\n // 注意,每个外部的数据转换器,都有名空间(如 'ecStat:xxx','ecStat' 是名空间)。\n // 而内置数据转换器(如 'filter', 'sort')没有名空间。\n type: 'ecStat:regression',\n config: {\n // 这里是此外部数据转换器所需的参数。\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n```\n\n一些使用 echarts-stat 的例子:\n\n- [聚集 (Aggregate)](${exampleEditorPath}data-transform-aggregate&edit=1&reset=1)\n- [直方图 (Histogram)](${exampleEditorPath}bar-histogram&edit=1&reset=1)\n- [简单聚类 (Clustering)](${exampleEditorPath}scatter-clustering&edit=1&reset=1)\n- [线性回归线 (Linear Regression)](${exampleEditorPath}scatter-linear-regression&edit=1&reset=1)\n- [指数回归线 (Exponential Regression)](${exampleEditorPath}scatter-exponential-regression&edit=1&reset=1)\n- [对数回归线 (Logarithmic Regression)](${exampleEditorPath}scatter-logarithmic-regression&edit=1&reset=1)\n- [多项式回归线 (Polynomial Regression)](${exampleEditorPath}scatter-polynomial-regression&edit=1&reset=1)\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/cc35fa6476dcc80b4f1d.js b/handbook/_nuxt/js/cc35fa6476dcc80b4f1d.js
new file mode 100644
index 0000000..e94846e
--- /dev/null
+++ b/handbook/_nuxt/js/cc35fa6476dcc80b4f1d.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[61],{355:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/cea1691acd58fb1cfdc3.js b/handbook/_nuxt/js/cea1691acd58fb1cfdc3.js
new file mode 100644
index 0000000..1eae287
--- /dev/null
+++ b/handbook/_nuxt/js/cea1691acd58fb1cfdc3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{327: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 always tried to keep the API as stable and backward-compatible as possible. However, `v5` still brings some breaking changes that require special attention. In addition, in some cases, `v5` provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.\n\n## Breaking Changes\n\n#### Default theme\n\nFirst of all, the default theme has been changed. `v5` has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.\n\n```js\nchart.setOption({\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n // ...\n});\n```\n\nOr, to make a simple `v4` theme.\n\n```js\nvar themeEC4 = {\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n```\n\n#### Importing ECharts\n\n##### Removing Support for Default Exports\n\nSince `v5`, echarts only provides `named exports`.\n\nSo if you are importing `echarts` like this:\n\n```js\nimport echarts from 'echarts';\n// Or import core module\nimport echarts from 'echarts/lib/echarts';\n```\n\nIt will throw error in `v5`. You need to change the code as follows to import the entire module.\n\n```js\nimport * as echarts from 'echarts';\n// Or\nimport * as echarts from 'echarts/lib/echarts';\n```\n\n##### tree-shaking API\n\nIn 5.0.1, we introduced the new [tree-shaking API](${lang}/basics/import)\n\n```js\nimport * as echarts from 'echarts/core';\nimport { BarChart } from 'echarts/charts';\nimport { GridComponent } from 'echarts/components';\n// 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\nimport { CanvasRenderer } from 'echarts/renderers';\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n```\n\nTo make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the `Full Code` tab on the example page to see the modules you need to introduce and the related code.\n\nIn most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/component/grid');\n```\n\nSecond, because our source code has been rewritten using TypeScript, `v5` will no longer support importing files from `echarts/src`. You need to change it to import from `echarts/lib`.\n\n##### Dependency Adjustment\n\n> Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.\n\nIn order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, `CanvasRenderer` is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.\n\n- The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before\n\n```js\nconst echarts = require('echarts/lib/echarts');\nrequire('echarts/lib/chart/bar');\nrequire('echarts/lib/chart/line');\n```\n\nNeed to introduce the `grid` component separately again\n\n```js\nrequire('echarts/lib/component/grid');\n```\n\nReference issues: [#14080](https://github.com/apache/echarts/issues/14080), [#13764](https://github.com/apache/echarts/issues/13764)\n\n- `aria` components are no longer imported by default. You need import it manually if necessary.\n\n```js\nimport { AriaComponent } from 'echarts/components';\necharts.use(AriaComponent);\n```\n\nOr\n\n```js\nrequire('echarts/lib/component/aria');\n```\n\n#### Removes Built-in GeoJSON\n\n`v5` removes the built-in geoJSON (previously in the `echarts/map` folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.\n\n#### Browser Compatibility\n\nIE8 is no longer supported by `v5`. We no longer maintain and upgrade the previous [VML renderer](https://github.com/ecomfe/zrender/tree/4.3.2/src/vml) for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with `v5.0.1`.\n\n#### ECharts configuration item adjustment\n\n##### Visual style settings priority change\n\nThe priority of the visuals between [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are reversed since `v5`.\n\nThat is, previously in `v4`, the visuals (i.e., color, symbol, symbolSize, ...) that generated by [visualMap component](${optionPath}visualMap) has the highest priority, which will overwrite the same visuals settings in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle). That brought troubles when needing to specify specific style to some certain data items while using [visualMap component](${optionPath}visualMap). Since `v5`, the visuals specified in [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) has the highest priority.\n\nIn most cases, users will probably not notice this change when migrating from `v4` to `v5`. But users can still check that if [visualMap component](${optionPath}visualMap) and [itemStyle](${optionPath}series-scatter.itemStyle) | [lineStyle](${optionPath}series-scatter.lineStyle) | [areaStyle](${optionPath}series-scatter.areaStyle) are both specified.\n\n##### `padding` for Rich Text\n\n`v5` adjusts the [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding) to make it more compliant with CSS specifications. In `v4`, for example `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `33` and `padding-bottom` is `11`. The position of the top and bottom is adjusted in `v5`, `rich. .padding: [11, 22, 33, 44]` means that `padding-top` is `11` and `padding-bottom` is `33`.\n\nIf the user is using [rich.?.padding](${optionPath}series-scatter.label.rich.<style_name>.padding), this order needs to be adjusted.\n\n## ECharts Related Extensions\n\nThese extensions need to be upgraded to new version to support echarts `v5`:\n\n- [echarts-gl](https://github.com/ecomfe/echarts-gl)\n- [echarts-wordcloud](https://github.com/ecomfe/echarts-wordcloud)\n- [echarts-liquidfill](https://github.com/ecomfe/echarts-liquidfill)\n\n## Deprecated API\n\nSome of the API and echarts options are deprecated since `v5`, but are still backward compatible. Users can **keep using these deprecated API**, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.\n\nThe deprecated API and their corresponding new API are listed as follows:\n\n- Transform related props of a graphic element are changed:\n - Changes:\n - `position: [number, number]` are changed to `x: number`/`y: number`.\n - `scale: [number, number]` are changed to `scaleX: number`/`scaleY: number`.\n - `origin: [number, number]` are changed to `originX: number`/`originY: number`.\n - The `position`, `scale` and `origin` are still supported but deprecated.\n - It effects these places:\n - In the `graphic` components: the declarations of each element.\n - In `custom series`: the declarations of each element in the return of `renderItem`.\n - Directly use zrender graphic elements.\n- Text related props on graphic elements are changed:\n - Changes:\n - The declaration of attached text (or say, rect text) are changed.\n - Prop `style.text` are deprecated in elements except `Text`. Instead, Prop set `textContent` and `textConfig` are provided to support more powerful capabilities.\n - These related props at the left part below are deprecated. Use the right part below instead.\n - textPosition => textConfig.position\n - textOffset => textConfig.offset\n - textRotation => textConfig.rotation\n - textDistance => textConfig.distance\n - The props at the left part below are deprecated in `style` and `style.rich.?`. Use the props at the right part below instead.\n - textFill => fill\n - textStroke => stroke\n - textFont => font\n - textStrokeWidth => lineWidth\n - textAlign => align\n - textVerticalAlign => verticalAlign);\n - textLineHeight =>\n - textWidth => width\n - textHeight => hight\n - textBackgroundColor => backgroundColor\n - textPadding => padding\n - textBorderColor => borderColor\n - textBorderWidth => borderWidth\n - textBorderRadius => borderRadius\n - textBoxShadowColor => shadowColor\n - textBoxShadowBlur => shadowBlur\n - textBoxShadowOffsetX => shadowOffsetX\n - textBoxShadowOffsetY => shadowOffsetY\n - Note: these props are not changed:\n - textShadowColor\n - textShadowBlur\n - textShadowOffsetX\n - textShadowOffsetY\n - It effects these places:\n - In the `graphic` components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]\n - In `custom series`: the declarations of each element in the return of `renderItem`. [compat, but not accurately the same in some complicated cases].\n - Directly use zrender API to create graphic elements. [No compat, breaking change].\n- API on chart instance:\n - `chart.one(...)` is deprecated.\n- `label`:\n - In props `color`, `textBorderColor`, `backgroundColor` and `borderColor`, the value `'auto'` is deprecated. Use the value `'inherit'` instead.\n- `hoverAnimation`:\n - option `series.hoverAnimation` is deprecated. Use `series.emphasis.scale` instead.\n- `line series`:\n - option `series.clipOverflow` is deprecated. Use `series.clip` instead.\n- `custom series`:\n - In `renderItem`, the `api.style(...)` and `api.styleEmphasis(...)` are deprecated. Because it is not really necessary and hard to ensure backward compatibility. Users can fetch system designated visual by `api.visual(...)`.\n- `sunburst series`:\n - Action type `highlight` is deprecated. Use `sunburstHighlight` instead.\n - Action type `downplay` is deprecated. Use `sunburstUnhighlight` instead.\n - option `series.downplay` is deprecated. Use `series.blur` instead.\n - option `series.highlightPolicy` is deprecated. Use `series.emphasis.focus` instead.\n- `pie series`:\n - The action type at the left part below are deprecated. Use the right part instead:\n - `pieToggleSelect` => `toggleSelect`\n - `pieSelect` => `select`\n - `pieUnSelect` => `unselect`\n - The event type at the left part below are deprecated. Use the right part instead:\n - `pieselectchanged` => `selectchanged`\n - `pieselected` => `selected`\n - `pieunselected` => `unselected`\n - option `series.label.margin` is deprecated. Use `series.label.edgeDistance` instead.\n - option `series.clockWise` is deprecated. Use `series.clockwise` instead.\n - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.\n- `map series`:\n - The action type at the left part below are deprecated. Use the right part instead:\n - `mapToggleSelect` => `toggleSelect`\n - `mapSelect` => `select`\n - `mapUnSelect` => `unselect`\n - The event type at the left part below are deprecated. Use the right part instead:\n - `mapselectchanged` => `selectchanged`\n - `mapselected` => `selected`\n - `mapunselected` => `unselected`\n - option `series.mapType` is deprecated. Use `series.map` instead.\n - option `series.mapLocation` is deprecated.\n- `graph series`:\n - option `series.focusNodeAdjacency` is deprecated. Use `series.emphasis: { focus: 'adjacency'}` instead.\n- `gauge series`:\n - option `series.clockWise` is deprecated. Use `series.clockwise` instead.\n - option `series.hoverOffset` is deprecated. Use `series.emphasis.scaleSize` instead.\n- `dataZoom component`:\n - option `dataZoom.handleIcon` need prefix `path://` if using SVGPath.\n- `radar`:\n - option `radar.name` is deprecated. Use `radar.axisName` instead.\n - option `radar.nameGap` is deprecated. Use `radar.axisNameGap` instead.\n- Parse and format:\n - `echarts.format.formatTime` is deprecated. Use `echarts.time.format` instead.\n - `echarts.number.parseDate` is deprecated. Use `echarts.time.parse` instead.\n - `echarts.format.getTextRect` is deprecated.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/cfba90b34bdafa1de2d9.js b/handbook/_nuxt/js/cfba90b34bdafa1de2d9.js
new file mode 100644
index 0000000..287d947
--- /dev/null
+++ b/handbook/_nuxt/js/cfba90b34bdafa1de2d9.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[32],{326: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 visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.\n\n<img data-src="images/feature-v5/echarts-5-en.png" width="800px" />\n\n"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.\n\n## Storytelling\n\nThe importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users\' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.\n\n#### Bar/Line Racing\n\nApache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.\n\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n\nThe dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.\n\n#### Custom Series Animation\n\nIn addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.\n\nImagine what amazing visualizations you can create with these dynamic effects!\n\n## Visual Design\n\nThe role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.\n\n#### Overall Design\n\nWe have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.\n\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n\nLet\'s look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.\n\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n\nFor the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:\n\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n\n#### Label\n\nLabels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.\n\nApache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.\n\nThese features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.\n\nWe also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.\n\nThe new label feature allows you to have very clear label presentation even in a confined space mobile:\n\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n\n#### Time Axis\n\nApache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis\'s label content to different needs.\n\nFirst of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The `formatter` of labels supports templates for time (e.g. `{yyyy}-{MM}-{dd}`), and different `formatter` can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.\n\nThe display of the time scale at different dataZoom granularities.\n\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n\n#### Tooltip\n\nTooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.\n\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n\nIn addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.\n\n#### Gauge\n\nWe have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.\n\nDifferent styles of gauge pointers.\n\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n\nThese upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.\n\n<md-example src="gauge-clock" width="600" height="600" />\n\n#### Round Corner\n\nApache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don\'t underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.\n\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n\n## Interactivity\n\nThe interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.\n\n#### Multi-State\n\nIn ECharts 4, there were two interactive states, `emphasis` and `normal`, graph will enter the `emphasis` state when the mouse hovered to distinguish the data.\n\nThis time in Apache ECharts 5, we have added a new effect of **blur** other non-related elements to the original mouse hover highlighting, so that the target data can be focused.\n\nFor example, in this [bar chart](https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack) example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in `emphasis` can now be set in `blur`.\n\nIn addition, we\'ve added **click to select** to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the `selectchanged` event to get all the selected shapes for further processing. As with `emphasis` and `blur`, the selection style can also be configured in `select`.\n\n#### Performance improvements\n\n##### Dirty Rectangle Rendering\n\nApache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.\n\nA visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.\n\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n\nYou can see the effect by enable dirty rectangle optimization on the new example page.\n\n##### Line Chart Performance Optimization for Real-Time Time-Series Data\n\nIn addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.\n\nApache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.\n\n## Development Experience\n\nWe want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.\n\n#### Datasets\n\nECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.\n\n#### Internationalization\n\nThe original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.\n\nTherefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the `registerLocale` function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.\n\n```js\n// import the lang object and set when init\necharts.registerLocale(\'DE\', lang);\necharts.init(DomElement, null, {\n locale: \'DE\'\n});\n```\n\n#### TypeScript Refactoring\n\nIn order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.\n\nFor developers, we can also generate better and more code-compliant `DTS` type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to [DefinityTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts), which is a lot of work, so thanks for your contribution.\n\nIn addition, if a developer\'s component is introduced on-demand, we provide a `ComposeOption` type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.\n\n## Accessibility\n\nApache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.\n\nIn the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.\n\n#### Theme Colors\n\nWe took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.\n\nMoreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.\n\n#### Decal Patterns\n\nECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.\n\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n\nIn addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.\n\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n\n## Summary\n\nIn addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.\n\nThank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We\'ll be working on future developments with even more enthusiasm, and we\'ll see you all in 6 with even more enthusiasm!\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d1902f19791110d35065.js b/handbook/_nuxt/js/d1902f19791110d35065.js
new file mode 100644
index 0000000..6e0ed50
--- /dev/null
+++ b/handbook/_nuxt/js/d1902f19791110d35065.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[90],{384: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.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n```\n\n## 按需引入 ECharts 图表和组件\n\n上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。\n\n```js\n// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts/core';\n// 引入柱状图图表,图表后缀都为 Chart\nimport { BarChart } from 'echarts/charts';\n// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// 接下来的使用就跟之前一样,初始化图表,设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n```\n\n> 需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入`CanvasRenderer`或者`SVGRenderer`作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的`CanvasRenderer`模块。\n\n我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。\n\n## 在 TypeScript 中按需引入\n\n对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的`EChartsOption`类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。\n\n```ts\nimport * as echarts from 'echarts/core';\nimport {\n BarChart,\n // 系列类型的定义后缀都为 SeriesOption\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // 组件类型的定义后缀都为 ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d1b29c06c94c01d038f3.js b/handbook/_nuxt/js/d1b29c06c94c01d038f3.js
new file mode 100644
index 0000000..90cb8c1
--- /dev/null
+++ b/handbook/_nuxt/js/d1b29c06c94c01d038f3.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[20],{314: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 series: [\n {\n type: 'pie',\n data: [\n {\n value: 100,\n name: 'A'\n },\n {\n value: 200,\n name: 'B'\n },\n {\n value: 300,\n name: 'C'\n },\n {\n value: 400,\n name: 'D'\n },\n {\n value: 500,\n name: 'E'\n }\n ],\n roseType: 'area'\n }\n ]\n};\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d26df00c22e66a620659.js b/handbook/_nuxt/js/d26df00c22e66a620659.js
new file mode 100644
index 0000000..4ccd605
--- /dev/null
+++ b/handbook/_nuxt/js/d26df00c22e66a620659.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[43],{337: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 represent the value.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xH1vxib94f">\n</iframe>\n\n## Suggestion for Using Gauger Chart\n\n1. The gauger chart is suitable for displaying single progress or measurement standard under quantitative conditions while it is not suitable for carpeting different variables or trends.\n\n2. You can provide info in different dimensions. However, do not include more than 3 pointers in one dashboard. It is recommended to use multiple dashboards if there are indeed multiple data to be displayed.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=gauge-car">\n</iframe>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d2e624e13aeb9a5fdedb.js b/handbook/_nuxt/js/d2e624e13aeb9a5fdedb.js
new file mode 100644
index 0000000..f364cb5
--- /dev/null
+++ b/handbook/_nuxt/js/d2e624e13aeb9a5fdedb.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[67],{361:function(n,w,o){"use strict";o.r(w),w.default="# 极坐标系柱状图\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/d349260dbe40b787f938.js b/handbook/_nuxt/js/d349260dbe40b787f938.js
new file mode 100644
index 0000000..6e163a6
--- /dev/null
+++ b/handbook/_nuxt/js/d349260dbe40b787f938.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[110],{404: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雷达图对于查看哪些变量具有相似的值、变量之间是否有异常值都很有用。雷达图表也可用于查看哪些变量在数据集内得分较高或较低,因此非常适合显示性能(见下图)。同样,雷达图也常用于排名、评估、评论等数据的展示。\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJH93GqVf&v=1">\n</iframe>\n\n如下图,某幼儿园上周资金流统计的示例中比较了预算和开销。参与比较的六个方面是食品、玩具、绘本、医疗、门票、服饰。每个变量都是通过 0 到 500 之间的金额来比较的。只有玩具一项的支出超出了预算,而服饰花费远低于预算,使用雷达图,哪些方面超出或不足变得一目了然了。\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xrk6EfmqVf">\n</iframe>\n\n\n## 雷达图的使用建议\n\n1、一个雷达图包含的多边形数量是有限的,如果有五个以上要评估的事物,无论是轮廓还是填充区域,都会产生覆盖和混乱,使得数据难以阅读。\n\n2、变量太多会产生太多的轴,也会使图表变得混乱,因此,要保持雷达图的简单并限制其变量数量。\n\n3、由于径向距离很难判断,所以虽然有网格线的参考,但是还是很难直观的比较图表内变量具体的值,如果需要的比较具体值话,建议使用线图。\n\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/15cd285820d51c8a3180.js b/handbook/_nuxt/js/d9ae1847003efbc40617.js
similarity index 98%
rename from handbook/_nuxt/js/15cd285820d51c8a3180.js
rename to handbook/_nuxt/js/d9ae1847003efbc40617.js
index ed6acff..11491dd 100644
--- a/handbook/_nuxt/js/15cd285820d51c8a3180.js
+++ b/handbook/_nuxt/js/d9ae1847003efbc40617.js
@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[9],{259:function(e,t,r){"use strict";r.r(t);var n="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_$",o=/[<>\b\f\n\r\t\0\u2028\u2029]/g,c=/^(?:do|if|in|for|int|let|new|try|var|byte|case|char|else|enum|goto|long|this|void|with|await|break|catch|class|const|final|float|short|super|throw|while|yield|delete|double|export|import|native|return|switch|throws|typeof|boolean|default|extends|finally|package|private|abstract|continue|debugger|function|volatile|interface|protected|transient|implements|instanceof|synchronized)$/,f={"<":"\\u003C",">":"\\u003E","/":"\\u002F","\\":"\\\\","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\0":"\\0","\u2028":"\\u2028","\u2029":"\\u2029"},l=Object.getOwnPropertyNames(Object.prototype).sort().join("\0");function h(e){return Object(e)!==e}function y(e){if("string"==typeof e)return m(e);if(void 0===e)return"void 0";if(0===e&&1/e<0)return"-0";var t=String(e);return"number"==typeof e?t.replace(/^(-)?0\./,"$1."):t}function w(e){return Object.prototype.toString.call(e).slice(8,-1)}function O(e){return f[e]||e}function j(e){return e.replace(o,O)}function m(e){for(var t='"',i=0;i<e.length;i+=1){var r=e.charAt(i),code=r.charCodeAt(0);if('"'===r)t+='\\"';else if(r in f)t+=f[r];else if(code>=55296&&code<=57343){var n=e.charCodeAt(i+1);t+=code<=56319&&n>=56320&&n<=57343?r+e[++i]:"\\u"+code.toString(16).toUpperCase()}else t+=r}return t+='"'}t.default=function(e){var t=new Map;!function e(r){if("function"==typeof r)throw new Error("Cannot stringify a function");if(t.has(r))t.set(r,t.get(r)+1);else if(t.set(r,1),!h(r))switch(w(r)){case"Number":case"String":case"Boolean":case"Date":case"RegExp":return;case"Array":r.forEach(e);break;case"Set":case"Map":Array.from(r).forEach(e);break;default:var n=Object.getPrototypeOf(r);if(n!==Object.prototype&&null!==n&&Object.getOwnPropertyNames(n).sort().join("\0")!==l)throw new Error("Cannot stringify arbitrary non-POJOs");if(Object.getOwnPropertySymbols(r).length>0)throw new Error("Cannot stringify POJOs with symbolic keys");Object.keys(r).forEach((function(t){return e(r[t])}))}}(e);var r=new Map;function o(e){if(r.has(e))return r.get(e);if(h(e))return y(e);var t=w(e);switch(t){case"Number":case"String":case"Boolean":return"Object("+o(e.valueOf())+")";case"RegExp":return"new RegExp("+m(e.source)+', "'+e.flags+'")';case"Date":return"new Date("+e.getTime()+")";case"Array":var n=e.map((function(t,i){return i in e?o(t):""})),c=0===e.length||e.length-1 in e?"":",";return"["+n.join(",")+c+"]";case"Set":case"Map":return"new "+t+"(["+Array.from(e).map(o).join(",")+"])";default:var f="{"+Object.keys(e).map((function(t){return function(e){return/^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(e)?e:j(JSON.stringify(e))}(t)+":"+o(e[t])})).join(",")+"}";return null===Object.getPrototypeOf(e)?Object.keys(e).length>0?"Object.assign(Object.create(null),"+f+")":"Object.create(null)":f}}Array.from(t).filter((function(e){return e[1]>1})).sort((function(a,b){return b[1]-a[1]})).forEach((function(e,i){r.set(e[0],function(e){var t="";do{t=n[e%n.length]+t,e=~~(e/n.length)-1}while(e>=0);return c.test(t)?t+"_":t}(i))}));var f=o(e);if(r.size){var O=[],v=[],d=[];return r.forEach((function(e,t){if(O.push(e),h(t))d.push(y(t));else switch(w(t)){case"Number":case"String":case"Boolean":d.push("Object("+o(t.valueOf())+")");break;case"RegExp":d.push(t.toString());break;case"Date":d.push("new Date("+t.getTime()+")");break;case"Array":d.push("Array("+t.length+")"),t.forEach((function(t,i){v.push(e+"["+i+"]="+o(t))}));break;case"Set":d.push("new Set"),v.push(e+"."+Array.from(t).map((function(e){return"add("+o(e)+")"})).join("."));break;case"Map":d.push("new Map"),v.push(e+"."+Array.from(t).map((function(e){var t=e[0],r=e[1];return"set("+o(t)+", "+o(r)+")"})).join("."));break;default:d.push(null===Object.getPrototypeOf(t)?"Object.create(null)":"{}"),Object.keys(t).forEach((function(r){v.push(""+e+function(e){return/^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(e)?"."+e:"["+j(JSON.stringify(e))+"]"}(r)+"="+o(t[r]))}))}})),v.push("return "+f),"(function("+O.join(",")+"){"+v.join(";")+"}("+d.join(",")+"))"}return f}}}]);
\ No newline at end of file
+(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|debugger|function|volatile|interface|protected|transient|implements|instanceof|synchronized)$/,f={"<":"\\u003C",">":"\\u003E","/":"\\u002F","\\":"\\\\","\b":"\\b","\f":"\\f","\n":"\\n","\r":"\\r","\t":"\\t","\0":"\\0","\u2028":"\\u2028","\u2029":"\\u2029"},l=Object.getOwnPropertyNames(Object.prototype).sort().join("\0");function h(e){return Object(e)!==e}function y(e){if("string"==typeof e)return m(e);if(void 0===e)return"void 0";if(0===e&&1/e<0)return"-0";var t=String(e);return"number"==typeof e?t.replace(/^(-)?0\./,"$1."):t}function w(e){return Object.prototype.toString.call(e).slice(8,-1)}function O(e){return f[e]||e}function j(e){return e.replace(o,O)}function m(e){for(var t='"',i=0;i<e.length;i+=1){var r=e.charAt(i),code=r.charCodeAt(0);if('"'===r)t+='\\"';else if(r in f)t+=f[r];else if(code>=55296&&code<=57343){var n=e.charCodeAt(i+1);t+=code<=56319&&n>=56320&&n<=57343?r+e[++i]:"\\u"+code.toString(16).toUpperCase()}else t+=r}return t+='"'}t.default=function(e){var t=new Map;!function e(r){if("function"==typeof r)throw new Error("Cannot stringify a function");if(t.has(r))t.set(r,t.get(r)+1);else if(t.set(r,1),!h(r))switch(w(r)){case"Number":case"String":case"Boolean":case"Date":case"RegExp":return;case"Array":r.forEach(e);break;case"Set":case"Map":Array.from(r).forEach(e);break;default:var n=Object.getPrototypeOf(r);if(n!==Object.prototype&&null!==n&&Object.getOwnPropertyNames(n).sort().join("\0")!==l)throw new Error("Cannot stringify arbitrary non-POJOs");if(Object.getOwnPropertySymbols(r).length>0)throw new Error("Cannot stringify POJOs with symbolic keys");Object.keys(r).forEach((function(t){return e(r[t])}))}}(e);var r=new Map;function o(e){if(r.has(e))return r.get(e);if(h(e))return y(e);var t=w(e);switch(t){case"Number":case"String":case"Boolean":return"Object("+o(e.valueOf())+")";case"RegExp":return"new RegExp("+m(e.source)+', "'+e.flags+'")';case"Date":return"new Date("+e.getTime()+")";case"Array":var n=e.map((function(t,i){return i in e?o(t):""})),c=0===e.length||e.length-1 in e?"":",";return"["+n.join(",")+c+"]";case"Set":case"Map":return"new "+t+"(["+Array.from(e).map(o).join(",")+"])";default:var f="{"+Object.keys(e).map((function(t){return function(e){return/^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(e)?e:j(JSON.stringify(e))}(t)+":"+o(e[t])})).join(",")+"}";return null===Object.getPrototypeOf(e)?Object.keys(e).length>0?"Object.assign(Object.create(null),"+f+")":"Object.create(null)":f}}Array.from(t).filter((function(e){return e[1]>1})).sort((function(a,b){return b[1]-a[1]})).forEach((function(e,i){r.set(e[0],function(e){var t="";do{t=n[e%n.length]+t,e=~~(e/n.length)-1}while(e>=0);return c.test(t)?t+"_":t}(i))}));var f=o(e);if(r.size){var O=[],v=[],d=[];return r.forEach((function(e,t){if(O.push(e),h(t))d.push(y(t));else switch(w(t)){case"Number":case"String":case"Boolean":d.push("Object("+o(t.valueOf())+")");break;case"RegExp":d.push(t.toString());break;case"Date":d.push("new Date("+t.getTime()+")");break;case"Array":d.push("Array("+t.length+")"),t.forEach((function(t,i){v.push(e+"["+i+"]="+o(t))}));break;case"Set":d.push("new Set"),v.push(e+"."+Array.from(t).map((function(e){return"add("+o(e)+")"})).join("."));break;case"Map":d.push("new Map"),v.push(e+"."+Array.from(t).map((function(e){var t=e[0],r=e[1];return"set("+o(t)+", "+o(r)+")"})).join("."));break;default:d.push(null===Object.getPrototypeOf(t)?"Object.create(null)":"{}"),Object.keys(t).forEach((function(r){v.push(""+e+function(e){return/^[_$a-zA-Z][_$a-zA-Z0-9]*$/.test(e)?"."+e:"["+j(JSON.stringify(e))+"]"}(r)+"="+o(t[r]))}))}})),v.push("return "+f),"(function("+O.join(",")+"){"+v.join(";")+"}("+d.join(",")+"))"}return f}}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/db45232e8e94b8a7f094.js b/handbook/_nuxt/js/db45232e8e94b8a7f094.js
new file mode 100644
index 0000000..64f90d3
--- /dev/null
+++ b/handbook/_nuxt/js/db45232e8e94b8a7f094.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[87],{381:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/dc8865ead84032fb4a3f.js b/handbook/_nuxt/js/dc8865ead84032fb4a3f.js
new file mode 100644
index 0000000..51d6b83
--- /dev/null
+++ b/handbook/_nuxt/js/dc8865ead84032fb4a3f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[117],{411: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: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\n这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。\n\n## 在数据集中设置数据\n\n而数据设置在 `数据集`(`dataset`)中,会有这些好处:\n\n- 能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。\n- 数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。\n- 数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。\n- 支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。\n\n下面是一个最简单的 `dataset` 的例子:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。\n xAxis: { type: 'category' },\n // 声明一个 Y 轴,数值轴。\n yAxis: {},\n // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n或者也可以使用常见的“对象数组”的格式:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,\n // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。\n // 如果不指定 dimensions,也可以通过指定 series.encode\n // 完成映射,参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n## 数据到图形的映射\n\n如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。\n\n简而言之,可以进行这些映射的设定:\n\n- 指定 `数据集` 的列(column)还是行(row)映射为 `系列`(`series`)。这件事可以使用 [series.seriesLayoutBy](${optionPath}#series.seriesLayoutBy) 属性来配置。默认是按照列(column)来映射。\n- 指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 [series.encode](${optionPath}#series.encode) 属性,以及 [visualMap](${optionPath}#visualMap) 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 `dataset.source` 中的第一列;三个柱图系列,一一对应到 `dataset.source` 中后面每一列。\n\n下面详细解释这些映射的设定。\n\n## 把数据集( dataset )的行或列映射为系列(series)\n\n有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。\n\n用户可以使用 `seriesLayoutBy` 配置项,改变图表对于行列的理解。`seriesLayoutBy` 可取值:\n\n- 'column': 默认值。系列被安放到 `dataset` 的列上面。\n- 'row': 系列被安放到 `dataset` 的行上面。\n\n看这个例子:\n\n```js live\noption = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 dataset 的每一列。\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n```\n\n## 维度( dimension )\n\n常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。\n\n维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,`'score'`、`'amount'`、`'product'` 就是维度名。从第二行开始,才是正式的数据。`dataset.source` 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 `dataset.sourceHeader: true` 显示声明第一行(列)就是维度,或者 `dataset.sourceHeader: false` 表明第一行(列)开始就直接是数据。\n\n维度的定义,也可以使用单独的 `dataset.dimensions` 或者 `series.dimensions` 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):\n\n```js\nvar option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // 可以简写为 string ,表示 dimension name 。\n 'amount',\n // 可以在 type 中指定维度类型。\n { name: 'product', type: 'ordinal' }\n ],\n source: [\n //...\n ]\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: [\n // ...\n ]\n },\n series: {\n type: 'line',\n // series.dimensions 会更优先于 dataset.dimension 采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n```\n\n大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。\n\n维度类型( dimension type )可以取这些值:\n\n- `'number'`: 默认,表示普通数据。\n- `'ordinal'`: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。\n- `'time'`: 表示时间数据。设置成 `'time'` 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴([axis.type](${optionPath}#xAxis.type) 为 `'time'`)上,那么会被自动设置为 `'time'` 类型。时间类型的支持参见 [data](${optionPath}#series.data)。\n- `'float'`: 如果设置成 `'float'`,在存储时候会使用 `TypedArray`,对性能优化有好处。\n- `'int'`: 如果设置成 `'int'`,在存储时候会使用 `TypedArray`,对性能优化有好处。\n\n## 数据到图形的映射( series.encode )\n\n了解了维度的概念后,我们就可以使用 [series.encode](${optionPath}#series.encode) 来做映射。总体是这样的感觉:\n\n```js live\nvar option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // 将 \"amount\" 列映射到 X 轴。\n x: 'amount',\n // 将 \"product\" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n```\n\n`series.encode` 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 `'x'`, `'y'`, `'tooltip'` 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。\n\n下面是 `series.encode` 支持的属性:\n\n```js\n// 在任何坐标系和系列中,都支持:\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n value: 3\n}\n```\n\n这是个更丰富的 `series.encode` 的 [示例](${exampleEditorPath}dataset-encode1&edit=1&reset=1) 。\n\n## 默认的 series.encode\n\n值得一提的是,当 `series.encode` 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:\n\n- 在坐标系中(如直角坐标系、极坐标系等)\n - 如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。\n - 如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。\n- 如果没有坐标系(如饼图)\n - 取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。\n\n默认的规则不能满足要求时,就可以自己来配置 `encode`,也并不复杂。这是一个 [例子](${exampleEditorPath}dataset-default&edit=1&reset=1)。\n\n## 几个常见的 series.encode 设置方式举例\n\n问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?\n\n答:\n\n```js\noption = {\n series: {\n // 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 dimensions[2]。\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n```\n\n问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?\n\n答:\n\n```js\noption = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n```\n\n问:如何把第二列设置为标签?\n\n答:\n关于标签的显示 [label.formatter](${optionPath}#series.label.formatter),现在支持引用特定维度的值,例如:\n\n```js\nseries: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n```\n\n问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?\n\n答:\n\n```js\noption = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n```\n\n问:数据里没有维度名,那么怎么给出维度名?\n\n答:\n\n```js\nvar option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n```\n\n问:如何把第三列映射为气泡图的点的大小?\n\n答:\n\n```js live\nvar option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列(列序号从 0 开始记,所以设置为 2)。\n min: 2, // 需要给出数值范围,最小数值。\n max: 15, // 需要给出数值范围,最大数值。\n inRange: {\n // 气泡尺寸:5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n```\n\n问:encode 里指定了映射,但是不管用?\n\n答:可以查查有没有拼错,比如,维度名是:`'Life Expectancy'`,encode 中拼成了 `'Life Expectency'`。\n\n## 视觉通道(颜色、尺寸等)的映射\n\n我们可以使用 [visualMap](${optionPath}#visualMap) 组件进行视觉通道的映射。详见 [visualMap](${optionPath}#visualMap) 文档的介绍。这是一个 [示例](${exampleEditorPath}dataset-encode0&edit=1&reset=1)。\n\n## 数据的各种格式\n\n多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 `dataset.source` 中,在不少情况下可以免去一些数据处理的步骤。\n\n> 假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 [dsv](https://github.com/d3/d3-dsv) 或者 [PapaParse](https://github.com/mholt/PapaParse) 将 csv 转成 JSON。\n\n在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。\n\n除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 [seriesLayoutBy](${optionPath}#series.seriesLayoutBy) 参数。\n\n```js\ndataset: [\n {\n // 按行的 key-value 形式(对象数组),这是个比较常见的格式。\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // 按列的 key-value 形式。\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n```\n\n## 多个 dataset 以及如何引用他们\n\n可以同时定义多个 dataset。系列可以通过 [series.datasetIndex](${optionPath}#series.datasetIndex) 来指定引用哪个 dataset。例如:\n\n```js\nvar option = {\n dataset: [\n {\n // 序号为 0 的 dataset。\n source: []\n },\n {\n // 序号为 1 的 dataset。\n source: []\n },\n {\n // 序号为 2 的 dataset。\n source: []\n }\n ],\n series: [\n {\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n },\n {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }\n ]\n};\n```\n\n## ECharts 3 的数据设置方式(series.data)仍正常使用\n\nECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 [series.data](${optionPath}#series.data), 那么就会使用 [series.data](${optionPath}#series.data) 而非 `dataset`。\n\n```js live\noption = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n```\n\n其实,[series.data](${optionPath}#series.data) 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 [treemap](${optionPath}#series-treemap)、[graph](${optionPath}#series-graph)、[lines](${optionPath}#series-lines) 等,现在仍不支持在 dataset 中设置,仍然需要使用 [series.data](${optionPath}#series.data)。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 [appendData](api.html#echartsInstance.appendData) 进行增量加载,这种情况不支持使用 `dataset`。\n\n## 其他\n\n目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n`line`、`bar`、`pie`、`scatter`、`effectScatter`、`parallel`、`candlestick`、`map`、`funnel`、`custom`。\n后续会有更多的图表进行支持。\n\n最后,给出这个 [示例](${exampleEditorPath}dataset-link&edit=1&reset=1),多个图表共享一个 `dataset`,并带有联动交互。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/def2c5592ce5747885da.js b/handbook/_nuxt/js/def2c5592ce5747885da.js
new file mode 100644
index 0000000..718f372
--- /dev/null
+++ b/handbook/_nuxt/js/def2c5592ce5747885da.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[30],{324:function(n,e,o){"use strict";o.r(e),e.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- "Applications - Common Charts" in this handbook\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/e18c48f98e76e79545a4.js b/handbook/_nuxt/js/e18c48f98e76e79545a4.js
new file mode 100644
index 0000000..ddc793d
--- /dev/null
+++ b/handbook/_nuxt/js/e18c48f98e76e79545a4.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})),r.d(e,"o",(function(){return D})),r.d(e,"q",(function(){return T})),r.d(e,"f",(function(){return I})),r.d(e,"c",(function(){return z})),r.d(e,"i",(function(){return M})),r.d(e,"p",(function(){return B})),r.d(e,"a",(function(){return H})),r.d(e,"u",(function(){return Q})),r.d(e,"n",(function(){return Y}));r(17),r(34),r(42),r(43);var n=r(15),o=r(2),c=r(11),l=r(3),h=(r(21),r(25),r(122),r(16),r(20),r(22),r(35),r(27),r(28),r(23),r(36),r(70),r(123),r(103),r(95),r(96),r(166),r(41),r(37),r(0)),f=r.n(h),d=r(18);function v(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function m(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?v(Object(source),!0).forEach((function(e){Object(c.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):v(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function y(t){f.a.config.errorHandler&&f.a.config.errorHandler(t)}function _(t){return t.then((function(t){return t.default||t}))}function C(t){return t.$options&&"function"==typeof t.$options.fetch&&!t.$options.fetch.length}function k(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=t.$children||[],o=w(n);try{for(o.s();!(e=o.n()).done;){var c=e.value;c.$fetch?r.push(c):c.$children&&k(c,r)}}catch(t){o.e(t)}finally{o.f()}return r}function O(t,e){if(e||!t.options.__hasNuxtData){var r=t.options._originDataFn||t.options.data||function(){return{}};t.options._originDataFn=r,t.options.data=function(){var data=r.call(this,this);return this.$ssrContext&&(e=this.$ssrContext.asyncData[t.cid]),m(m({},data),e)},t.options.__hasNuxtData=!0,t._Ctor&&t._Ctor.options&&(t._Ctor.options.data=t.options.data)}}function $(t){return t.options&&t._Ctor===t||(t.options?(t._Ctor=t,t.extendOptions=t.options):(t=f.a.extend(t))._Ctor=t,!t.options.name&&t.options.__file&&(t.options.name=t.options.__file)),t}function j(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"components";return Array.prototype.concat.apply([],t.matched.map((function(t,n){return Object.keys(t[r]).map((function(o){return e&&e.push(n),t[r][o]}))})))}function P(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return j(t,e,"instances")}function E(t,e){return Array.prototype.concat.apply([],t.matched.map((function(t,r){return Object.keys(t.components).reduce((function(n,o){return t.components[o]?n.push(e(t.components[o],t.instances[o],t,o,r)):delete t.components[o],n}),[])})))}function S(t,e){return Promise.all(E(t,function(){var t=Object(o.a)(regeneratorRuntime.mark((function t(r,n,o,c){var l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof r||r.options){t.next=11;break}return t.prev=1,t.next=4,r();case 4:r=t.sent,t.next=11;break;case 7:throw t.prev=7,t.t0=t.catch(1),t.t0&&"ChunkLoadError"===t.t0.name&&"undefined"!=typeof window&&window.sessionStorage&&(l=Date.now(),(!(h=parseInt(window.sessionStorage.getItem("nuxt-reload")))||h+6e4<l)&&(window.sessionStorage.setItem("nuxt-reload",l),window.location.reload(!0))),t.t0;case 11:return o.components[c]=r=$(r),t.abrupt("return","function"==typeof e?e(r,n,o,c):r);case 13:case"end":return t.stop()}}),t,null,[[1,7]])})));return function(e,r,n,o){return t.apply(this,arguments)}}()))}function R(t){return L.apply(this,arguments)}function L(){return(L=Object(o.a)(regeneratorRuntime.mark((function t(e){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,S(e);case 4:return t.abrupt("return",m(m({},e),{},{meta:j(e).map((function(t,r){return m(m({},t.options.meta),(e.matched[r]||{}).meta)}))}));case 5:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function A(t,e){return N.apply(this,arguments)}function N(){return(N=Object(o.a)(regeneratorRuntime.mark((function t(e,r){var o,c,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.context||(e.context={isStatic:!0,isDev:!1,isHMR:!1,app:e,store:e.store,payload:r.payload,error:r.error,base:e.router.options.base,env:{NUXT_ENV_DEPLOY:"asf"}},r.req&&(e.context.req=r.req),r.res&&(e.context.res=r.res),r.ssrContext&&(e.context.ssrContext=r.ssrContext),e.context.redirect=function(t,path,r){if(t){e.context._redirected=!0;var o=Object(n.a)(path);if("number"==typeof t||"undefined"!==o&&"object"!==o||(r=path||{},path=t,o=Object(n.a)(path),t=302),"object"===o&&(path=e.router.resolve(path).route.fullPath),!/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path))throw path=Object(d.d)(path,r),window.location.replace(path),new Error("ERR_REDIRECT");e.context.next({path:path,query:r,status:t})}},e.context.nuxtState=window.__NUXT__),t.next=3,Promise.all([R(r.route),R(r.from)]);case 3:o=t.sent,c=Object(l.a)(o,2),h=c[0],f=c[1],r.route&&(e.context.route=h),r.from&&(e.context.from=f),e.context.next=r.next,e.context._redirected=!1,e.context._errored=!1,e.context.isHMR=!1,e.context.params=e.context.route.params||{},e.context.query=e.context.route.query||{};case 15:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function D(t,e){return!t.length||e._redirected||e._errored?Promise.resolve():T(t[0],e).then((function(){return D(t.slice(1),e)}))}function T(t,e){var r;return(r=2===t.length?new Promise((function(r){t(e,(function(t,data){t&&e.error(t),r(data=data||{})}))})):t(e))&&r instanceof Promise&&"function"==typeof r.then?r:Promise.resolve(r)}function I(base,t){if("hash"===t)return window.location.hash.replace(/^#\//,"");base=decodeURI(base).slice(0,-1);var path=decodeURI(window.location.pathname);base&&path.startsWith(base)&&(path=path.slice(base.length));var e=(path||"/")+window.location.search+window.location.hash;return Object(d.c)(e)}function z(t,e){return function(t,e){for(var r=new Array(t.length),i=0;i<t.length;i++)"object"===Object(n.a)(t[i])&&(r[i]=new RegExp("^(?:"+t[i].pattern+")$",V(e)));return function(e,n){for(var path="",data=e||{},o=(n||{}).pretty?U:encodeURIComponent,c=0;c<t.length;c++){var l=t[c];if("string"!=typeof l){var h=data[l.name||"pathMatch"],f=void 0;if(null==h){if(l.optional){l.partial&&(path+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Array.isArray(h)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(h)+"`");if(0===h.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var d=0;d<h.length;d++){if(f=o(h[d]),!r[c].test(f))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===d?l.prefix:l.delimiter)+f}}else{if(f=l.asterisk?G(h):o(h),!r[c].test(f))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+f+'"');path+=l.prefix+f}}else path+=l}return path}}(function(t,e){var r,n=[],o=0,c=0,path="",l=e&&e.delimiter||"/";for(;null!=(r=F.exec(t));){var h=r[0],f=r[1],d=r.index;if(path+=t.slice(c,d),c=d+h.length,f)path+=f[1];else{var v=t[c],m=r[2],w=r[3],x=r[4],y=r[5],_=r[6],C=r[7];path&&(n.push(path),path="");var k=null!=m&&null!=v&&v!==m,O="+"===_||"*"===_,$="?"===_||"*"===_,j=r[2]||l,pattern=x||y;n.push({name:w||o++,prefix:m||"",delimiter:j,optional:$,repeat:O,partial:k,asterisk:Boolean(C),pattern:pattern?K(pattern):C?".*":"[^"+X(j)+"]+?"})}}c<t.length&&(path+=t.substr(c));path&&n.push(path);return n}(t,e),e)}function M(t,e){var r={},n=m(m({},t),e);for(var o in n)String(t[o])!==String(e[o])&&(r[o]=!0);return r}function B(t){var e;if(t.message||"string"==typeof t)e=t.message||t;else try{e=JSON.stringify(t,null,2)}catch(r){e="[".concat(t.constructor.name,"]")}return m(m({},t),{},{message:e,statusCode:t.statusCode||t.status||t.response&&t.response.status||500})}window.onNuxtReadyCbs=[],window.onNuxtReady=function(t){window.onNuxtReadyCbs.push(t)};var F=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function U(t,e){var r=e?/[?#]/g:/[/?#]/g;return encodeURI(t).replace(r,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function G(t){return U(t,!0)}function X(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function K(t){return t.replace(/([=!:$/()])/g,"\\$1")}function V(t){return t&&t.sensitive?"":"i"}function H(t,e,r){t.$options[e]||(t.$options[e]=[]),t.$options[e].includes(r)||t.$options[e].push(r)}var Q=d.b,Y=(d.e,d.a)},102:function(t,e,r){"use strict";var n={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},asf:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},local:{routerBase:"/echarts-handbook/dist",rootPath:"http://localhost/echarts-handbook/dist/",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"},localsite:{routerBase:"/echarts-website/handbook",rootPath:"http://localhost/echarts-website/handbook",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"}};var o=function(){var t="asf";if(!n.asf)throw"Deploy config ".concat(t," not exits");return n.asf}();e.a=o},124:function(t,e,r){t.exports={}},125:function(t,e,r){t.exports={}},126:function(t,e,r){t.exports={}},127:function(t,e,r){t.exports={}},128:function(t,e,r){t.exports={}},129:function(t,e,r){t.exports={}},134:function(t,e){const r=[[{title:"快速上手",dir:"get-started"},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:!0},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help"},{title:"版本特性",dir:"release-note",children:[{title:"ECharts 5 特性介绍",dir:"v5-feature"},{title:"ECharts 5 升级指南",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"概念篇",dir:"concepts",children:[{title:"图表容器及大小",dir:"chart-size"},{title:"配置项",dir:"options",draft:!0},{title:"系列",dir:"series",draft:!0},{title:"样式",dir:"style"},{title:"数据集",dir:"dataset"},{title:"数据转换",dir:"data-transform"},{title:"坐标系",dir:"coordinate",draft:!0},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:"visual-map"},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:"application",children:[{title:"常用图表类型",dir:"chart-types",children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:"basic-bar"},{title:"堆叠柱状图",dir:"stacked-bar"},{title:"动态排序柱状图",dir:"bar-race"},{title:"极坐标系柱状图",dir:"polar-bar",draft:!0},{title:"阶梯瀑布图",dir:"waterfall"},{title:"视觉映射的柱状图",dir:"visual-map",draft:!0}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:"basic-line"},{title:"堆叠折线图",dir:"stacked-line"},{title:"区域面积图",dir:"area-line"},{title:"平滑曲线图",dir:"smooth-line"},{title:"阶梯线图",dir:"step-line"}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:"basic-pie"},{title:"圆环图",dir:"doughnut"},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:"scatter",children:[{title:"基础散点图",dir:"basic-scatter"}]}]},{title:"移动端优化",dir:"mobile",draft:!0},{title:"跨平台方案",dir:"cross-platform",children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:"dynamic-data"},{title:"数据下钻",dir:"drilldown",draft:!0}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:"rich-text"}]},{title:"交互",dir:"interaction",children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:"connect",draft:!0}]}]},{title:"最佳实践",dir:"best-practice",children:[{title:"移动端优化",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},135:function(t,e){const r=[[{title:"Get Started",dir:"get-started"},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:"download"},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:"resource",draft:!0},{title:"Inspiration",dir:"inspiration"},{title:"Get Help",dir:"help"},{title:"What's New",dir:"release-note",children:[{title:"ECharts 5 Features",dir:"v5-feature"},{title:"ECharts 5 Upgrade Guide",dir:"v5-upgrade-guide"},{title:5.2,dir:"5-2-0"}]}]},{title:"Concepts",dir:"concepts",children:[{title:"Chart Container",dir:"chart-size"},{title:"Chart Option",dir:"options",draft:!0},{title:"Series",dir:"series",draft:!0},{title:"Style",dir:"style"},{title:"Dataset",dir:"dataset"},{title:"Data Transform",dir:"data-transform"},{title:"Coordinate",dir:"coordinate",draft:!0},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:"visual-map"},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:"application",children:[{title:"Common Charts",dir:"chart-types",children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:"basic-bar"},{title:"Stacked Bar",dir:"stacked-bar"},{title:"Bar Racing",dir:"bar-race"},{title:"Bar Polar",dir:"polar-bar",draft:!0},{title:"Waterfall",dir:"waterfall"}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:"basic-line"},{title:"Stacked Line",dir:"stacked-line"},{title:"Area Chart",dir:"area-line"},{title:"Smoothed Line",dir:"smooth-line"},{title:"Step Line",dir:"step-line"}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:"basic-pie"},{title:"Ring Style",dir:"doughnut"},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:"scatter",children:[{title:"Basic Scatter",dir:"basic-scatter"}]}]},{title:"Mobile",dir:"mobile",draft:!0},{title:"Cross Platform",dir:"cross-platform",children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:"dynamic-data"},{title:"Drilldown",dir:"drilldown",draft:!0}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:"rich-text"}]},{title:"Interaction",dir:"interaction",children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:"connect",draft:!0}]}]},{title:"Best Practice",dir:"best-practice",children:[{title:"Mobile Optimization",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},136:function(t,e,r){"use strict";var n=r(2),o=(r(21),r(16),r(0)),c=r.n(o),l=r(1),h=window.__NUXT__;function f(){if(!this._hydrated)return this.$fetch()}function d(){if((t=this).$vnode&&t.$vnode.elm&&t.$vnode.elm.dataset&&t.$vnode.elm.dataset.fetchKey){var t;this._hydrated=!0,this._fetchKey=this.$vnode.elm.dataset.fetchKey;var data=h.fetch[this._fetchKey];if(data&&data._error)this.$fetchState.error=data._error;else for(var e in data)c.a.set(this.$data,e,data[e])}}function v(){var t=this;return this._fetchPromise||(this._fetchPromise=m.call(this).then((function(){delete t._fetchPromise}))),this._fetchPromise}function m(){return w.apply(this,arguments)}function w(){return(w=Object(n.a)(regeneratorRuntime.mark((function t(){var e,r,n,o=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.$nuxt.nbFetching++,this.$fetchState.pending=!0,this.$fetchState.error=null,this._hydrated=!1,e=null,r=Date.now(),t.prev=6,t.next=9,this.$options.fetch.call(this);case 9:t.next=15;break;case 11:t.prev=11,t.t0=t.catch(6),e=Object(l.p)(t.t0);case 15:if(!((n=this._fetchDelay-(Date.now()-r))>0)){t.next=19;break}return t.next=19,new Promise((function(t){return setTimeout(t,n)}));case 19:this.$fetchState.error=e,this.$fetchState.pending=!1,this.$fetchState.timestamp=Date.now(),this.$nextTick((function(){return o.$nuxt.nbFetching--}));case 23:case"end":return t.stop()}}),t,this,[[6,11]])})))).apply(this,arguments)}e.a={beforeCreate:function(){Object(l.l)(this)&&(this._fetchDelay="number"==typeof this.$options.fetchDelay?this.$options.fetchDelay:200,c.a.util.defineReactive(this,"$fetchState",{pending:!1,error:null,timestamp:Date.now()}),this.$fetch=v.bind(this),Object(l.a)(this,"created",d),Object(l.a)(this,"beforeMount",f))}}},141:function(t,e,r){t.exports=r(142)},142:function(t,e,r){"use strict";r.r(e),function(t){r(23),r(17),r(34);var e=r(15),n=r(2),o=(r(114),r(150),r(155),r(157),r(21),r(20),r(25),r(35),r(41),r(37),r(22),r(27),r(16),r(28),r(0)),c=r.n(o),l=r(131),h=r(56),f=r(1),d=r(26),v=r(136),m=r(73);function w(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}c.a.__nuxt__fetch__mixin__||(c.a.mixin(v.a),c.a.__nuxt__fetch__mixin__=!0),c.a.component(m.a.name,m.a),c.a.component("NLink",m.a),t.fetch||(t.fetch=l.a);var y,_,C=[],k=window.__NUXT__||{},O=k.config||{};O._app&&(r.p=Object(f.u)(O._app.cdnURL,O._app.assetsPath)),Object.assign(c.a.config,{silent:!0,performance:!1});var $=c.a.config.errorHandler||console.error;function j(t,e,r){for(var n=function(component){var t=function(component,t){if(!component||!component.options||!component.options[t])return{};var option=component.options[t];if("function"==typeof option){for(var e=arguments.length,r=new Array(e>2?e-2:0),n=2;n<e;n++)r[n-2]=arguments[n];return option.apply(void 0,r)}return option}(component,"transition",e,r)||{};return"string"==typeof t?{name:t}:t},o=r?Object(f.g)(r):[],c=Math.max(t.length,o.length),l=[],h=function(i){var e=Object.assign({},n(t[i])),r=Object.assign({},n(o[i]));Object.keys(e).filter((function(t){return void 0!==e[t]&&!t.toLowerCase().includes("leave")})).forEach((function(t){r[t]=e[t]})),l.push(r)},i=0;i<c;i++)h(i);return l}function P(t,e,r){return E.apply(this,arguments)}function E(){return(E=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n){var o,c,l,h,d=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this._routeChanged=Boolean(y.nuxt.err)||r.name!==e.name,this._paramChanged=!this._routeChanged&&r.path!==e.path,this._queryChanged=!this._paramChanged&&r.fullPath!==e.fullPath,this._diffQuery=this._queryChanged?Object(f.i)(e.query,r.query):[],(this._routeChanged||this._paramChanged)&&this.$loading.start&&!this.$loading.manual&&this.$loading.start(),t.prev=5,!this._queryChanged){t.next=12;break}return t.next=9,Object(f.r)(e,(function(t,e){return{Component:t,instance:e}}));case 9:o=t.sent,o.some((function(t){var n=t.Component,o=t.instance,c=n.options.watchQuery;return!0===c||(Array.isArray(c)?c.some((function(t){return d._diffQuery[t]})):"function"==typeof c&&c.apply(o,[e.query,r.query]))}))&&this.$loading.start&&!this.$loading.manual&&this.$loading.start();case 12:n(),t.next=26;break;case 15:if(t.prev=15,t.t0=t.catch(5),c=t.t0||{},l=c.statusCode||c.status||c.response&&c.response.status||500,h=c.message||"",!/^Loading( CSS)? chunk (\d)+ failed\./.test(h)){t.next=23;break}return window.location.reload(!0),t.abrupt("return");case 23:this.error({statusCode:l,message:h}),this.$nuxt.$emit("routeChanged",e,r,c),n();case 26:case"end":return t.stop()}}),t,this,[[5,15]])})))).apply(this,arguments)}function S(t,e){return k.serverRendered&&e&&Object(f.b)(t,e),t._Ctor=t,t}function R(t){return Object(f.d)(t,function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n,o,c){var l;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof e||e.options){t.next=4;break}return t.next=3,e();case 3:e=t.sent;case 4:return l=S(Object(f.s)(e),k.data?k.data[c]:null),n.components[o]=l,t.abrupt("return",l);case 7:case"end":return t.stop()}}),t)})));return function(e,r,n,o,c){return t.apply(this,arguments)}}())}function L(t,e,r){var n=this,o=["nuxti18n"],c=!1;if(void 0!==r&&(o=[],(r=Object(f.s)(r)).options.middleware&&(o=o.concat(r.options.middleware)),t.forEach((function(t){t.options.middleware&&(o=o.concat(t.options.middleware))}))),o=o.map((function(t){return"function"==typeof t?t:("function"!=typeof h.a[t]&&(c=!0,n.error({statusCode:500,message:"Unknown middleware "+t})),h.a[t])})),!c)return Object(f.o)(o,e)}function A(t,e,r){return N.apply(this,arguments)}function N(){return(N=Object(n.a)(regeneratorRuntime.mark((function t(e,r,o){var c,l,h,v,m,x,_,k,O,$,P,E,S,R,A,N=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){t.next=2;break}return t.abrupt("return",o());case 2:return!1,e===r?(C=[],!0):(c=[],C=Object(f.g)(r,c).map((function(t,i){return Object(f.c)(r.matched[c[i]].path)(r.params)}))),l=!1,h=function(path){r.path===path.path&&N.$loading.finish&&N.$loading.finish(),r.path!==path.path&&N.$loading.pause&&N.$loading.pause(),l||(l=!0,o(path))},t.next=8,Object(f.t)(y,{route:e,from:r,next:h.bind(this)});case 8:if(this._dateLastError=y.nuxt.dateErr,this._hadError=Boolean(y.nuxt.err),v=[],(m=Object(f.g)(e,v)).length){t.next=27;break}return t.next=15,L.call(this,m,y.context);case 15:if(!l){t.next=17;break}return t.abrupt("return");case 17:return x=(d.a.options||d.a).layout,t.next=20,this.loadLayout("function"==typeof x?x.call(d.a,y.context):x);case 20:return _=t.sent,t.next=23,L.call(this,m,y.context,_);case 23:if(!l){t.next=25;break}return t.abrupt("return");case 25:return y.context.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 27:return m.forEach((function(t){t._Ctor&&t._Ctor.options&&(t.options.asyncData=t._Ctor.options.asyncData,t.options.fetch=t._Ctor.options.fetch)})),this.setTransitions(j(m,e,r)),t.prev=29,t.next=32,L.call(this,m,y.context);case 32:if(!l){t.next=34;break}return t.abrupt("return");case 34:if(!y.context._errored){t.next=36;break}return t.abrupt("return",o());case 36:return"function"==typeof(k=m[0].options.layout)&&(k=k(y.context)),t.next=40,this.loadLayout(k);case 40:return k=t.sent,t.next=43,L.call(this,m,y.context,k);case 43:if(!l){t.next=45;break}return t.abrupt("return");case 45:if(!y.context._errored){t.next=47;break}return t.abrupt("return",o());case 47:O=!0,t.prev=48,$=w(m),t.prev=50,$.s();case 52:if((P=$.n()).done){t.next=63;break}if("function"==typeof(E=P.value).options.validate){t.next=56;break}return t.abrupt("continue",61);case 56:return t.next=58,E.options.validate(y.context);case 58:if(O=t.sent){t.next=61;break}return t.abrupt("break",63);case 61:t.next=52;break;case 63:t.next=68;break;case 65:t.prev=65,t.t0=t.catch(50),$.e(t.t0);case 68:return t.prev=68,$.f(),t.finish(68);case 71:t.next=77;break;case 73:return t.prev=73,t.t1=t.catch(48),this.error({statusCode:t.t1.statusCode||"500",message:t.t1.message}),t.abrupt("return",o());case 77:if(O){t.next=80;break}return this.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 80:return t.next=82,Promise.all(m.map(function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n,i){var o,c,l,h,d,m,w,x,p;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n._path=Object(f.c)(e.matched[v[i]].path)(e.params),n._dataRefresh=!1,o=n._path!==C[i],N._routeChanged&&o?n._dataRefresh=!0:N._paramChanged&&o?(c=n.options.watchParam,n._dataRefresh=!1!==c):N._queryChanged&&(!0===(l=n.options.watchQuery)?n._dataRefresh=!0:Array.isArray(l)?n._dataRefresh=l.some((function(t){return N._diffQuery[t]})):"function"==typeof l&&(S||(S=Object(f.h)(e)),n._dataRefresh=l.apply(S[i],[e.query,r.query]))),N._hadError||!N._isMounted||n._dataRefresh){t.next=6;break}return t.abrupt("return");case 6:return h=[],d=n.options.asyncData&&"function"==typeof n.options.asyncData,m=Boolean(n.options.fetch)&&n.options.fetch.length,w=d&&m?30:45,d&&((x=Object(f.q)(n.options.asyncData,y.context)).then((function(t){Object(f.b)(n,t),N.$loading.increase&&N.$loading.increase(w)})),h.push(x)),N.$loading.manual=!1===n.options.loading,m&&((p=n.options.fetch(y.context))&&(p instanceof Promise||"function"==typeof p.then)||(p=Promise.resolve(p)),p.then((function(t){N.$loading.increase&&N.$loading.increase(w)})),h.push(p)),t.abrupt("return",Promise.all(h));case 14:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}()));case 82:l||(this.$loading.finish&&!this.$loading.manual&&this.$loading.finish(),o()),t.next=99;break;case 85:if(t.prev=85,t.t2=t.catch(29),"ERR_REDIRECT"!==(R=t.t2||{}).message){t.next=90;break}return t.abrupt("return",this.$nuxt.$emit("routeChanged",e,r,R));case 90:return C=[],Object(f.k)(R),"function"==typeof(A=(d.a.options||d.a).layout)&&(A=A(y.context)),t.next=96,this.loadLayout(A);case 96:this.error(R),this.$nuxt.$emit("routeChanged",e,r,R),o();case 99:case"end":return t.stop()}}),t,this,[[29,85],[48,73],[50,65,68,71]])})))).apply(this,arguments)}function D(t,r){Object(f.d)(t,(function(t,r,n,o){return"object"!==Object(e.a)(t)||t.options||((t=c.a.extend(t))._Ctor=t,n.components[o]=t),t}))}function T(t){var e=Boolean(this.$options.nuxt.err);this._hadError&&this._dateLastError===this.$options.nuxt.dateErr&&(e=!1);var r=e?(d.a.options||d.a).layout:t.matched[0].components.default.options.layout;"function"==typeof r&&(r=r(y.context)),this.setLayout(r)}function I(t){t._hadError&&t._dateLastError===t.$options.nuxt.dateErr&&t.error()}function z(t,e){var r=this;if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){var n=Object(f.h)(t),o=Object(f.g)(t),l=!1;c.a.nextTick((function(){n.forEach((function(t,i){if(t&&!t._isDestroyed&&t.constructor._dataRefresh&&o[i]===t.constructor&&!0!==t.$vnode.data.keepAlive&&"function"==typeof t.constructor.options.data){var e=t.constructor.options.data.call(t);for(var r in e)c.a.set(t.$data,r,e[r]);l=!0}})),l&&window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),I(r)}))}}function M(t){window.onNuxtReadyCbs.forEach((function(e){"function"==typeof e&&e(t)})),"function"==typeof window._onNuxtLoaded&&window._onNuxtLoaded(t),_.afterEach((function(e,r){c.a.nextTick((function(){return t.$nuxt.$emit("routeChanged",e,r)}))}))}function B(){return(B=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return y=e.app,_=e.router,e.store,r=new c.a(y),n=k.layout||"default",t.next=7,r.loadLayout(n);case 7:return r.setLayout(n),o=function(){r.$mount("#__nuxt"),_.afterEach(D),_.afterEach(T.bind(r)),_.afterEach(z.bind(r)),c.a.nextTick((function(){M(r)}))},t.next=11,Promise.all(R(y.context.route));case 11:if(l=t.sent,r.setTransitions=r.$options.nuxt.setTransitions.bind(r),l.length&&(r.setTransitions(j(l,_.currentRoute)),C=_.currentRoute.matched.map((function(t){return Object(f.c)(t.path)(_.currentRoute.params)}))),r.$loading={},k.error&&r.error(k.error),_.beforeEach(P.bind(r)),_.beforeEach(A.bind(r)),!k.serverRendered||!Object(f.n)(k.routePath,r.context.route.path)){t.next=20;break}return t.abrupt("return",o());case 20:return h=function(){D(_.currentRoute,_.currentRoute),T.call(r,_.currentRoute),I(r),o()},t.next=23,new Promise((function(t){return setTimeout(t,0)}));case 23:A.call(r,_.currentRoute,_.currentRoute,(function(path){if(path){var t=_.afterEach((function(e,r){t(),h()}));_.push(path,void 0,(function(t){t&&$(t)}))}else h()}));case 24:case"end":return t.stop()}}),t)})))).apply(this,arguments)}Object(d.b)(null,k.config).then((function(t){return B.apply(this,arguments)})).catch($)}.call(this,r(44))},172:function(t,e,r){"use strict";r(124)},173:function(t,e,r){"use strict";r(125)},177:function(t,e,r){"use strict";r(126)},178:function(t,e,r){"use strict";r(127)},179:function(t,e,r){"use strict";r(128)},180:function(t,e,r){"use strict";r(129)},181:function(t,e,r){"use strict";r.r(e),r.d(e,"state",(function(){return f})),r.d(e,"mutations",(function(){return d})),r.d(e,"actions",(function(){return m}));var n=r(134),o=r.n(n),c=r(135),l=r.n(c),h=r(102),f=function(){return{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:o.a,en:l.a},config:h.a}},d={toggle:function(t,e){t[e]=!t[e]},setDocVersion:function(t,e){t.docVersion=e},setGhVersion:function(t,e){t.ghVersion=e},setHomepage:function(t,e){t.homepage=e},setFilled:function(t){t.filled=!0},setAdBlocked:function(t,e){t.adBlocked=e},setFocusMode:function(t,e){t.focusMode=e}},v=null,m={focusMode:function(t){var e=t.commit;v||(v=setTimeout((function(){return e("setFocusMode",!0)}),1300))},clearFocusMode:function(t){var e=t.commit;v&&(clearTimeout(v),v=null),e("setFocusMode",!1)}}},26:function(t,e,r){"use strict";r.d(e,"b",(function(){return he})),r.d(e,"a",(function(){return D}));r(35),r(17),r(25),r(42),r(43);var n=r(2),o=r(11),c=(r(21),r(20),r(22),r(16),r(36),r(0)),l=r.n(c),h=r(59),f=r(58),d=r(98),v=r.n(d),m=r(45),w=r.n(m),x=r(99),y=r(18),_=r(1);function C(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function k(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?C(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):C(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}var O=function(){return Object(_.m)(r.e(3).then(r.bind(null,424)))},$=function(){return Object(_.m)(Promise.all([r.e(6),r.e(2)]).then(r.bind(null,423)))},j=function(){};l.a.use(x.a);var P={mode:"history",base:"/handbook/",linkActiveClass:"nuxt-link-active",linkExactActiveClass:"nuxt-link-exact-active",scrollBehavior:function(t){if(t.hash){var e=t.hash.substr(1),r=document.getElementById(decodeURIComponent(e))||document.getElementById(e);r&&r.scrollIntoView&&r.scrollIntoView({behavior:"smooth"})}},routes:[{path:"/en",component:O,name:"index___en"},{path:"/zh",component:O,name:"index___zh"},{path:"/zh/*",component:$,name:"all___zh"},{path:"/en/*",component:$,name:"all___en"},{path:"/",component:O,name:"index"},{path:"/*",component:$,name:"all"}],fallback:!1};function E(t,e){var base=e._app&&e._app.basePath||P.base,r=new x.a(k(k({},P),{},{base:base})),n=r.push;r.push=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:j,r=arguments.length>2?arguments[2]:void 0;return n.call(this,t,e,r)};var o=r.resolve.bind(r);return r.resolve=function(t,e,r){return"string"==typeof t&&(t=Object(y.c)(t)),o(t,e,r)},r}var S={name:"NuxtChild",functional:!0,props:{nuxtChildKey:{type:String,default:""},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0}},render:function(t,e){var r=e.parent,data=e.data,n=e.props,o=r.$createElement;data.nuxtChild=!0;for(var c=r,l=r.$nuxt.nuxt.transitions,h=r.$nuxt.nuxt.defaultTransition,f=0;r;)r.$vnode&&r.$vnode.data.nuxtChild&&f++,r=r.$parent;data.nuxtChildDepth=f;var d=l[f]||h,v={};R.forEach((function(t){void 0!==d[t]&&(v[t]=d[t])}));var m={};L.forEach((function(t){"function"==typeof d[t]&&(m[t]=d[t].bind(c))}));var w=m.beforeEnter;if(m.beforeEnter=function(t){if(window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),w)return w.call(c,t)},!1===d.css){var x=m.leave;(!x||x.length<2)&&(m.leave=function(t,e){x&&x.call(c,t),c.$nextTick(e)})}var y=o("routerView",data);return n.keepAlive&&(y=o("keep-alive",{props:n.keepAliveProps},[y])),o("transition",{props:v,on:m},[y])}},R=["name","mode","appear","css","type","duration","enterClass","leaveClass","appearClass","enterActiveClass","enterActiveClass","leaveActiveClass","appearActiveClass","enterToClass","leaveToClass","appearToClass"],L=["beforeEnter","enter","afterEnter","enterCancelled","beforeLeave","leave","afterLeave","leaveCancelled","beforeAppear","appear","afterAppear","appearCancelled"],A={name:"NuxtError",props:{error:{type:Object,default:null}},computed:{statusCode:function(){return this.error&&this.error.statusCode||500},message:function(){return this.error.message||"Error"}},head:function(){return{title:this.message,meta:[{name:"viewport",content:"width=device-width,initial-scale=1.0,minimum-scale=1.0"}]}}},N=(r(172),r(7)),D=Object(N.a)(A,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"__nuxt-error-page"},[r("div",{staticClass:"error"},[r("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"90",height:"90",fill:"#DBE1EC",viewBox:"0 0 48 48"}},[r("path",{attrs:{d:"M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"}})]),t._v(" "),r("div",{staticClass:"title"},[t._v(t._s(t.message))]),t._v(" "),404===t.statusCode?r("p",{staticClass:"description"},[void 0===t.$route?r("a",{staticClass:"error-link",attrs:{href:"/"}}):r("NuxtLink",{staticClass:"error-link",attrs:{to:"/"}},[t._v("Back to the home page")])],1):t._e(),t._v(" "),t._m(0)])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"logo"},[r("a",{attrs:{href:"https://nuxtjs.org",target:"_blank",rel:"noopener"}},[t._v("Nuxt")])])}],!1,null,null,null).exports,T=r(3),I=(r(95),r(96),{name:"Nuxt",components:{NuxtChild:S,NuxtError:D},props:{nuxtChildKey:{type:String,default:void 0},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0},name:{type:String,default:"default"}},errorCaptured:function(t){this.displayingNuxtError&&(this.errorFromNuxtError=t,this.$forceUpdate())},computed:{routerViewKey:function(){if(void 0!==this.nuxtChildKey||this.$route.matched.length>1)return this.nuxtChildKey||Object(_.c)(this.$route.matched[0].path)(this.$route.params);var t=Object(T.a)(this.$route.matched,1)[0];if(!t)return this.$route.path;var e=t.components.default;if(e&&e.options){var r=e.options;if(r.key)return"function"==typeof r.key?r.key(this.$route):r.key}return/\/$/.test(t.path)?this.$route.path:this.$route.path.replace(/\/$/,"")}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$root.$options.nuxt)},render:function(t){var e=this;return this.nuxt.err?this.errorFromNuxtError?(this.$nextTick((function(){return e.errorFromNuxtError=!1})),t("div",{},[t("h2","An error occurred while showing the error page"),t("p","Unfortunately an error occurred and while showing the error page another error occurred"),t("p","Error details: ".concat(this.errorFromNuxtError.toString())),t("nuxt-link",{props:{to:"/"}},"Go back to home")])):(this.displayingNuxtError=!0,this.$nextTick((function(){return e.displayingNuxtError=!1})),t(D,{props:{error:this.nuxt.err}})):t("NuxtChild",{key:this.routerViewKey,props:this.$props})}}),z=(r(23),r(34),r(27),r(28),{name:"NuxtLoading",data:function(){return{percent:0,show:!1,canSucceed:!0,reversed:!1,skipTimerCount:0,rtl:!1,throttle:200,duration:5e3,continuous:!1}},computed:{left:function(){return!(!this.continuous&&!this.rtl)&&(this.rtl?this.reversed?"0px":"auto":this.reversed?"auto":"0px")}},beforeDestroy:function(){this.clear()},methods:{clear:function(){clearInterval(this._timer),clearTimeout(this._throttle),this._timer=null},start:function(){var t=this;return this.clear(),this.percent=0,this.reversed=!1,this.skipTimerCount=0,this.canSucceed=!0,this.throttle?this._throttle=setTimeout((function(){return t.startTimer()}),this.throttle):this.startTimer(),this},set:function(t){return this.show=!0,this.canSucceed=!0,this.percent=Math.min(100,Math.max(0,Math.floor(t))),this},get:function(){return this.percent},increase:function(t){return this.percent=Math.min(100,Math.floor(this.percent+t)),this},decrease:function(t){return this.percent=Math.max(0,Math.floor(this.percent-t)),this},pause:function(){return clearInterval(this._timer),this},resume:function(){return this.startTimer(),this},finish:function(){return this.percent=this.reversed?0:100,this.hide(),this},hide:function(){var t=this;return this.clear(),setTimeout((function(){t.show=!1,t.$nextTick((function(){t.percent=0,t.reversed=!1}))}),500),this},fail:function(t){return this.canSucceed=!1,this},startTimer:function(){var t=this;this.show||(this.show=!0),void 0===this._cut&&(this._cut=1e4/Math.floor(this.duration)),this._timer=setInterval((function(){t.skipTimerCount>0?t.skipTimerCount--:(t.reversed?t.decrease(t._cut):t.increase(t._cut),t.continuous&&(t.percent>=100||t.percent<=0)&&(t.skipTimerCount=1,t.reversed=!t.reversed))}),100)}},render:function(t){var e=t(!1);return this.show&&(e=t("div",{staticClass:"nuxt-progress",class:{"nuxt-progress-notransition":this.skipTimerCount>0,"nuxt-progress-failed":!this.canSucceed},style:{width:this.percent+"%",left:this.left}})),e}}),M=(r(173),Object(N.a)(z,undefined,undefined,!1,null,null,null).exports),B=(r(174),r(133)),F=r.n(B),U=(r(140),r(70),l.a.extend({name:"SidebarNavItem",props:{item:{type:Object},parentPath:{type:String},level:{type:Number}},computed:{link:function(){return"/"+this.$i18n.locale+"/"+this.path}},data:function(){var path=this.parentPath?this.parentPath+"/"+this.item.dir:this.item.dir,t=(this.$route.params.post+"").startsWith(path);return{get path(){return path},collapsed:this.level>=2&&!t}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}})),G=(r(177),Object(N.a)(U,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.item.draft?t._e():r("li",{staticClass:"nav-item"},[t.item.children?t.level>1?r("a",{staticClass:"nav-link",on:{click:t.toggleCollapsed}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))]),t._v(" "),r("span",{class:["glyphicon",t.collapsed?"glyphicon-menu-down":"glyphicon-menu-up"]})]):r("div",{staticClass:"nav-link"},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]):r("nuxt-link",{staticClass:"nav-link",attrs:{to:t.link}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]),t._v(" "),r("ul",{directives:[{name:"show",rawName:"v-show",value:!t.item.draft&&t.item.children&&!t.collapsed,expression:"!item.draft && item.children && !collapsed"}],class:["nav","bd-sidenav","level"+t.level]},t._l(t.item.children,(function(e){return r("SidebarNavItem",{key:e.dir,attrs:{parentPath:t.path,item:e,level:t.level+1}})})),1)],1)}),[],!1,null,null,null).exports),X=l.a.extend({components:{SidebarNavItem:G},data:function(){return{sidebarOpen:!1}},watch:{$route:function(t,e){this.sidebarOpen=!1}},mounted:function(){var t=this.$el.querySelector(".actived");t&&F()(t,{time:0,align:{top:0,topOffset:300},isScrollable:function(t){return!!t.className&&t.className.indexOf("bd-sidebar")>=0}}),docsearch({apiKey:"6ade5f1ff34e94690f9ea38cddcc2f55",indexName:"apache_echarts",inputSelector:"#handbook-search-intput",debug:!1})}}),K=(r(178),Object(N.a)(X,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{class:"bd-sidebar col-sm-3 col-md-2 "+(t.sidebarOpen?"":"closed")},[r("div",{staticClass:"sidebar-search"},[r("input",{attrs:{id:"handbook-search-intput",type:"search",placeholder:"Search Handbook"}}),t._v(" "),r("div",{staticClass:"search-icon"},[r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"}})])])]),t._v(" "),r("div",{staticClass:"bd-docs-nav"},[r("ul",{staticClass:"nav bd-sidenav nav-root level0"},t._l(t.$store.state.posts[this.$i18n.locale],(function(t){return r("SidebarNavItem",{key:t.dir,attrs:{item:t,parentPath:"",level:1}})})),1)]),t._v(" "),r("div",{staticClass:"open-sidebar",on:{click:function(e){t.sidebarOpen=!t.sidebarOpen}}},[t.sidebarOpen?r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M15 19l-7-7 7-7"}})]):r("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[r("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5l7 7-7 7"}})])])])}),[],!1,null,null,null).exports),V=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("源码(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("版权"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("活动"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("捐赠"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("鸣谢"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/zh/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/zh/index.html"}},[t._v("首页")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("文档"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/feature.html"}},[t._v("特性")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html"}},[t._v("教程")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/option.html"}},[t._v("配置项手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/changelog.html"}},[t._v("版本记录")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/faq.html"}},[t._v("常见问题")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南"}},[t._v("v5 升级指南"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("下载"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download.html"}},[t._v("下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-theme.html"}},[t._v("主题下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-extension.html"}},[t._v("扩展下载")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/zh/index.html"}},[t._v("示例")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("资源"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/spreadsheet.html"}},[t._v("表格工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/theme-builder.html"}},[t._v("主题构建工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/cheat-sheet.html"}},[t._v("术语速查手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/resources.html"}},[t._v("更多资源")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("社区"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/events.html"}},[t._v("活动")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/committers.html"}},[t._v("贡献者列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/maillist.html"}},[t._v("邮件列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/contributing.html"}},[t._v("如何贡献")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/dependencies.html"}},[t._v("依赖项")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/coding-standard.html"}},[t._v("代码规范")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/security.html"}},[t._v("安全")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('en')"}},[t._v("EN")])])])}],!1,null,null,null).exports,H=Object(N.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("Source Code (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("License"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("Events"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("Sponsorship"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("Thanks"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/en/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://echarts.apache.org/en/images/logo.png",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/en/index.html"}},[t._v("Home")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Docs"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/feature.html"}},[t._v("Features")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html"}},[t._v("Tutorials")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/option.html"}},[t._v("Chart Configuration")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/changelog.html"}},[t._v("Changelog")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/faq.html"}},[t._v("FAQ")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide"}},[t._v("V5 Upgrade Guide"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Download"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download.html"}},[t._v("Download")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-theme.html"}},[t._v("Download Themes")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-extension.html"}},[t._v("Download Extensions")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/en/index.html"}},[t._v("Examples")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Resources"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/spreadsheet.html"}},[t._v("Spread Sheet Tool")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/theme-builder.html"}},[t._v("Theme Builder")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/cheat-sheet.html"}},[t._v("Cheat Sheet")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/resources.html"}},[t._v("More Resources")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Community"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/events.html"}},[t._v("Events")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/committers.html"}},[t._v("Committers")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/maillist.html"}},[t._v("Mailing List")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/contributing.html"}},[t._v("How to Contribute")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/dependencies.html"}},[t._v("Dependencies")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/coding-standard.html"}},[t._v("Code Standard")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/security.html"}},[t._v("Security")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('zh')"}},[t._v("中文")])])])}],!1,null,null,null).exports,Q=l.a.extend({components:{},mounted:function(){var t=this.$i18n.locale;window.changeLang=function(){window.location.href=window.location.href.replace("/".concat(t,"/"),"zh"===t?"/en/":"/zh/")}},computed:{navComponent:function(){return"zh"===this.$i18n.locale?V:H}}}),Y=(r(179),{components:{Sidebar:K,Navbar:Object(N.a)(Q,(function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.navComponent,{tag:"div"})}),[],!1,null,null,null).exports},mounted:function(){var t=location.hash;location.hash="",location.hash=t},computed:{},methods:{}}),J=(r(180),Object(N.a)(Y,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[r("navbar"),t._v(" "),r("div",{staticClass:"page-main"},[r("div",{staticClass:"page-content handbook-content single-page container-fluid row flex-xl-nowrap"},[r("sidebar"),t._v(" "),r("div",{staticClass:"bd-content col-sm-7 pl-sm-2 col-12"},[r("div",{staticClass:"post-content content"},[r("nuxt")],1)])],1),t._v(" "),r("link",{attrs:{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"}})])],1)}),[],!1,null,null,null).exports);function W(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Z(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Z(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Z(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var tt={_default:Object(_.s)(J)},et={render:function(t,e){var r=t("NuxtLoading",{ref:"loading"}),n=t(this.layout||"nuxt"),o=t("div",{domProps:{id:"__layout"},key:this.layoutName},[n]),c=t("transition",{props:{name:"layout",mode:"out-in"},on:{beforeEnter:function(t){window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")}))}}},[o]);return t("div",{domProps:{id:"__nuxt"}},[r,c])},data:function(){return{isOnline:!0,layout:null,layoutName:"",nbFetching:0}},beforeCreate:function(){l.a.util.defineReactive(this,"nuxt",this.$options.nuxt)},created:function(){this.$root.$options.$nuxt=this,window.$nuxt=this,this.refreshOnlineStatus(),window.addEventListener("online",this.refreshOnlineStatus),window.addEventListener("offline",this.refreshOnlineStatus),this.error=this.nuxt.error,this.context=this.$options.context},mounted:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t.$loading=t.$refs.loading;case 1:case"end":return e.stop()}}),e)})))()},watch:{"nuxt.err":"errorChanged"},computed:{isOffline:function(){return!this.isOnline},isFetching:function(){return this.nbFetching>0},isPreview:function(){return Boolean(this.$options.previewData)}},methods:{refreshOnlineStatus:function(){void 0===window.navigator.onLine?this.isOnline=!0:this.isOnline=window.navigator.onLine},refresh:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){var r,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if((r=Object(_.h)(t.$route)).length){e.next=3;break}return e.abrupt("return");case 3:return t.$loading.start(),n=r.map((function(e){var p=[];if(e.$options.fetch&&e.$options.fetch.length&&p.push(Object(_.q)(e.$options.fetch,t.context)),e.$fetch)p.push(e.$fetch());else{var r,n=W(Object(_.e)(e.$vnode.componentInstance));try{for(n.s();!(r=n.n()).done;){var component=r.value;p.push(component.$fetch())}}catch(t){n.e(t)}finally{n.f()}}return e.$options.asyncData&&p.push(Object(_.q)(e.$options.asyncData,t.context).then((function(t){for(var r in t)l.a.set(e.$data,r,t[r])}))),Promise.all(p)})),e.prev=5,e.next=8,Promise.all(n);case 8:e.next=15;break;case 10:e.prev=10,e.t0=e.catch(5),t.$loading.fail(e.t0),Object(_.k)(e.t0),t.error(e.t0);case 15:t.$loading.finish();case 16:case"end":return e.stop()}}),e,null,[[5,10]])})))()},errorChanged:function(){if(this.nuxt.err){this.$loading&&(this.$loading.fail&&this.$loading.fail(this.nuxt.err),this.$loading.finish&&this.$loading.finish());var t=(D.options||D).layout;"function"==typeof t&&(t=t(this.context)),this.setLayout(t)}},setLayout:function(t){return t&&tt["_"+t]||(t="default"),this.layoutName=t,this.layout=tt["_"+t],this.layout},loadLayout:function(t){return t&&tt["_"+t]||(t="default"),Promise.resolve(tt["_"+t])}},components:{NuxtLoading:M}};l.a.use(h.a);var nt={};(nt=function(t,e){if((t=t.default||t).commit)throw new Error("[nuxt] ".concat(e," should export a method that returns a Vuex instance."));return"function"!=typeof t&&(t=Object.assign({},t)),function(t,e){if(t.state&&"function"!=typeof t.state){console.warn("'state' should be a method that returns an object in ".concat(e));var r=Object.assign({},t.state);t=Object.assign({},t,{state:function(){return r}})}return t}(t,e)}(r(181),"store/index.js")).modules=nt.modules||{};var at=nt instanceof Function?nt:function(){return new h.a.Store(Object.assign({strict:!1},nt))};var ot=r(138),it=(r(41),r(37),r(71),r(56)),st=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c,l,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.app,!e.isHMR){t.next=3;break}return t.abrupt("return");case 3:return t.next=5,r.i18n.__onNavigate(e.route);case 5:n=t.sent,o=Object(T.a)(n,3),c=o[0],l=o[1],h=o[2],c&&l&&(f=h?e.route.query:void 0,e.redirect(c,l,f));case 11:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();it.a.nuxti18n=st;var ct={COMPONENT_OPTIONS_KEY:"nuxtI18n",STRATEGIES:{PREFIX:"prefix",PREFIX_EXCEPT_DEFAULT:"prefix_except_default",PREFIX_AND_DEFAULT:"prefix_and_default",NO_PREFIX:"no_prefix"}},lt=!0,ut=void 0,ht={vueI18n:{fallbackLocale:"en",messages:{en:{inThisPage:"In This Page"},zh:{inThisPage:"本页目录"}}},vueI18nLoader:!1,locales:["en","zh"],defaultLocale:"en",defaultDirection:"ltr",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",strategy:"prefix",lazy:!1,langDir:null,rootRedirect:null,detectBrowserLanguage:{alwaysRedirect:!1,cookieCrossOrigin:!1,cookieDomain:null,cookieKey:"i18n_redirected",cookieSecure:!1,fallbackLocale:"",onlyOnNoPrefix:!1,onlyOnRoot:!0,useCookie:!0},differentDomains:!1,seo:!1,baseUrl:"",vuex:{moduleName:"i18n",syncLocale:!1,syncMessages:!1,syncRouteParams:!0},parsePages:!0,pages:{},skipSettingLocaleOnNavigate:!1,beforeLanguageSwitch:function(){return null},onBeforeLanguageSwitch:function(){},onLanguageSwitched:function(){return null},normalizedLocales:[{code:"en"},{code:"zh"}],localeCodes:["en","zh"]},ft=r(15),pt=(r(97),r(103),r(60),r(122),r(182),r(100)),vt=r.n(pt);function mt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function gt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?mt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):mt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function bt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return wt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return wt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function wt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function xt(text){return"[nuxt-i18n] ".concat(text)}function yt(t,e){var r,n=[],o=[],c=bt(t);try{for(c.s();!(r=c.n()).done;){var l=r.value,code=l.code,h=l.iso||code;o.push({code:code,iso:h})}}catch(t){c.e(t)}finally{c.f()}var f,d=bt(e.entries());try{var v=function(){var t=Object(T.a)(f.value,2),r=t[0],c=t[1],l=o.find((function(t){return t.iso.toLowerCase()===c.toLowerCase()}));if(l)return n.push({code:l.code,score:1-r/e.length}),"break"};for(d.s();!(f=d.n()).done;){if("break"===v())break}}catch(t){d.e(t)}finally{d.f()}var m,w=bt(e.entries());try{var x=function(){var t=Object(T.a)(m.value,2),r=t[0],c=t[1].split("-")[0].toLowerCase(),l=o.find((function(t){return t.iso.split("-")[0].toLowerCase()===c}));if(l)return n.push({code:l.code,score:.999-r/e.length}),"break"};for(w.s();!(m=w.n()).done;){if("break"===x())break}}catch(t){w.e(t)}finally{w.f()}return n.length>1&&n.sort((function(t,e){return t.score===e.score?e.code.length-t.code.length:e.score-t.score})),n.length?n[0].code:void 0}function _t(t,e,r,n){var o=n.differentDomains,c=n.normalizedLocales;if("function"==typeof t)return t(e);if(o&&r){var l=Ct(r,e.req,{normalizedLocales:c});if(l)return l}return t}function Ct(t,e,r){var n,o=r.normalizedLocales.find((function(e){return e.code===t}));if(o&&o.domain)return n=window.location.protocol.split(":")[0],"".concat(n,"://").concat(o.domain);console.warn(xt("Could not find domain name for locale ".concat(t)))}function kt(t,e){var r;if(r=window.location.host){var n=t.find((function(t){return t.domain===r}));if(n)return n.code}return""}function Ot(t){return new RegExp("^/(".concat(t.join("|"),")(?:/|$)"),"i")}function $t(t,e){var r=e.routesNameSeparator,n=e.defaultLocaleRouteNameSuffix,o="(".concat(t.join("|"),")"),c="(?:".concat(r).concat(n,")?"),l=new RegExp("".concat(r).concat(o).concat(c,"$"),"i"),h=Ot(t);return function(t){if(t.name){var e=t.name.match(l);if(e&&e.length>1)return e[1]}else if(t.path){var r=t.path.match(h);if(r&&r.length>1)return r[1]}return""}}function jt(t,e){var r,n=e.useCookie,o=e.cookieKey,c=e.localeCodes;if(n&&((r=vt.a.get(o))&&c.includes(r)))return r}function Pt(t,e,r){var n=r.useCookie,o=r.cookieDomain,c=r.cookieKey,l=r.cookieSecure,h=r.cookieCrossOrigin;if(n){var f=new Date,d={expires:new Date(f.setDate(f.getDate()+365)),path:"/",sameSite:h?"none":"lax",secure:h||l};o&&(d.domain=o),vt.a.set(c,t,d)}}function Et(t,e,r){var n={namespaced:!0,state:function(){return gt(gt(gt({},e.syncLocale?{locale:""}:{}),e.syncMessages?{messages:{}}:{}),e.syncRouteParams?{routeParams:{}}:{})},actions:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){(0,t.commit)("setLocale",e)}}:{}),e.syncMessages?{setMessages:function(t,e){(0,t.commit)("setMessages",e)}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){(0,t.commit)("setRouteParams",e)}}:{}),mutations:gt(gt(gt({},e.syncLocale?{setLocale:function(t,e){t.locale=e}}:{}),e.syncMessages?{setMessages:function(t,e){t.messages=e}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){t.routeParams=e}}:{}),getters:gt({},e.syncRouteParams?{localeRouteParams:function(t){var e=t.routeParams;return function(t){return e&&e[t]||{}}}}:{})};t.registerModule(e.moduleName,n,{preserveState:!!t.state[e.moduleName]})}function St(t){return Rt.apply(this,arguments)}function Rt(){return(Rt=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=c.length>1&&void 0!==c[1]?c[1]:null,n=c.length>2&&void 0!==c[2]?c[2]:null,!(o=c.length>3?c[3]:void 0)||!e){t.next=10;break}if(null===r||!o.syncLocale){t.next=7;break}return t.next=7,e.dispatch(o.moduleName+"/setLocale",r);case 7:if(null===n||!o.syncMessages){t.next=10;break}return t.next=10,e.dispatch(o.moduleName+"/setMessages",n);case 10:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var Lt=["params"];function At(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Nt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?At(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):At(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Dt(t,e){var r=zt.call(this,t,e);return r?r.route.fullPath:""}function Tt(t,e){var r=zt.call(this,t,e);return r?r.route:void 0}function It(t,e){var r=zt.call(this,t,e);return r?r.location:void 0}function zt(t,e){if(t){var r=this.i18n;if(e=e||r.locale){"string"==typeof t&&(t="/"===t[0]?{path:t}:{name:t});var n=Object.assign({},t);if(n.path&&!n.name){var o=this.router.resolve(n).route,c=this.getRouteBaseName(o);if(c)n={name:Ft(c,e),params:o.params,query:o.query,hash:o.hash};else!(e===ht.defaultLocale&&[ct.STRATEGIES.PREFIX_EXCEPT_DEFAULT,ct.STRATEGIES.PREFIX_AND_DEFAULT].includes(ht.strategy)||ht.strategy===ct.STRATEGIES.NO_PREFIX||r.differentDomains)&&(n.path="/".concat(e).concat(n.path)),n.path=n.path.replace(/\/+$/,"")+(ut?"/":"")||"/"}else{n.name||n.path||(n.name=this.getRouteBaseName()),n.name=Ft(n.name,e);var l=n.params;l&&void 0===l[0]&&l.pathMatch&&(l[0]=l.pathMatch)}var h=this.router.resolve(n);return h.route.name?h:this.router.resolve(t)}}}function Mt(t){var e=this.getRouteBaseName();if(!e)return"";var r=this.i18n,n=this.route,o=this.store,c=n.params,l=Object(ot.a)(n,Lt),h={};ht.vuex&&ht.vuex.syncRouteParams&&o&&(h=o.getters["".concat(ht.vuex.moduleName,"/localeRouteParams")](t));var f=Object.assign({},l,{name:e,params:Nt(Nt(Nt({},c),h),{},{0:c.pathMatch})}),path=this.localePath(f,t);if(r.differentDomains){var d={differentDomains:r.differentDomains,normalizedLocales:ht.normalizedLocales},v=Ct(t,this.req,d);v&&(path=v+path)}return path}function Bt(t){var e=void 0!==t?t:this.route;if(e&&e.name)return e.name.split(ht.routesNameSeparator)[0]}function Ft(t,e){var r=t+(ht.strategy===ct.STRATEGIES.NO_PREFIX?"":ht.routesNameSeparator+e);return e===ht.defaultLocale&&ht.strategy===ct.STRATEGIES.PREFIX_AND_DEFAULT&&(r+=ht.routesNameSeparator+ht.defaultLocaleRouteNameSuffix),r}var Ut=function(t){return function(){var e={getRouteBaseName:this.getRouteBaseName,i18n:this.$i18n,localePath:this.localePath,localeRoute:this.localeRoute,localeLocation:this.localeLocation,req:null,route:this.$route,router:this.$router,store:this.$store};return t.call.apply(t,[e].concat(Array.prototype.slice.call(arguments)))}},qt=function(t,e){return function(){var r=t.app,n=(t.req,t.route),o=t.store,c={getRouteBaseName:r.getRouteBaseName,i18n:r.i18n,localePath:r.localePath,localeLocation:r.localeLocation,localeRoute:r.localeRoute,req:null,route:n,router:r.router,store:o};return e.call.apply(e,[c].concat(Array.prototype.slice.call(arguments)))}},Gt={install:function(t){t.mixin({methods:{localePath:Ut(Dt),localeRoute:Ut(Tt),localeLocation:Ut(It),switchLocalePath:Ut(Mt),getRouteBaseName:Ut(Bt)}})}},Xt=function(t){l.a.use(Gt);var e=t.app,r=t.store;e.localePath=t.localePath=qt(t,Dt),e.localeRoute=t.localeRoute=qt(t,Tt),e.localeLocation=t.localeLocation=qt(t,It),e.switchLocalePath=t.switchLocalePath=qt(t,Mt),e.getRouteBaseName=t.getRouteBaseName=qt(t,Bt),r&&(r.localePath=e.localePath,r.localeRoute=e.localeRoute,r.localeLocation=e.localeLocation,r.switchLocalePath=e.switchLocalePath,r.getRouteBaseName=e.getRouteBaseName)},Kt=r(101),Vt=r(137);r(183);function Ht(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Qt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Ht(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Ht(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Yt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Jt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Jt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Jt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function Wt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.addDirAttribute,r=void 0===e||e,n=t.addSeoAttributes,o=void 0!==n&&n;if(!this.$i18n)return{};var c={htmlAttrs:{},link:[],meta:[]},l=this.$i18n.localeProperties,h=l.iso,d=l.dir||ht.defaultDirection;if(r&&(c.htmlAttrs.dir=d),o&&(f.a.hasMetaInfo?f.a.hasMetaInfo(this):this._hasMetaInfo)&&this.$i18n.locale&&this.$i18n.locales&&!1!==this.$options[ct.COMPONENT_OPTIONS_KEY]&&(!this.$options[ct.COMPONENT_OPTIONS_KEY]||!1!==this.$options[ct.COMPONENT_OPTIONS_KEY].seo)){h&&(c.htmlAttrs.lang=h);var v=this.$i18n.locales;m.bind(this)(v,this.$i18n.__baseUrl,c.link),w.bind(this)(this.$i18n.__baseUrl,c.link),x.bind(this)(l,h,c.meta),y.bind(this)(v,h,c.meta)}function m(t,e,link){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX){var r,n=new Map,o=Yt(t);try{for(o.s();!(r=o.n()).done;){var c=r.value,l=c.iso;if(l){var h=l.split("-"),f=Object(T.a)(h,2),d=f[0],v=f[1];d&&v&&(c.isCatchallLocale||!n.has(d))&&n.set(d,c),n.set(l,c)}else console.warn(xt("Locale ISO code is required to generate alternate link"))}}catch(t){o.e(t)}finally{o.f()}var m,w=Yt(n.entries());try{for(w.s();!(m=w.n()).done;){var x=Object(T.a)(m.value,2),y=x[0],_=x[1],k=this.switchLocalePath(_.code);k&&link.push({hid:"i18n-alt-".concat(y),rel:"alternate",href:C(k,e),hreflang:y})}}catch(t){w.e(t)}finally{w.f()}if(ht.defaultLocale){var O=this.switchLocalePath(ht.defaultLocale);O&&link.push({hid:"i18n-xd",rel:"alternate",href:C(O,e),hreflang:"x-default"})}}}function w(t,link){var e=this.localeRoute(Qt(Qt({},this.$route),{},{name:this.getRouteBaseName()})),r=e?e.path:null;r&&link.push({hid:"i18n-can",rel:"canonical",href:C(r,t)})}function x(t,e,meta){t&&e&&meta.push({hid:"i18n-og",property:"og:locale",content:_(e)})}function y(t,e,meta){var r=t.filter((function(t){var r=t.iso;return r&&r!==e}));if(r.length){var n=r.map((function(t){return{hid:"i18n-og-alt-".concat(t.iso),property:"og:locale:alternate",content:_(t.iso)}}));meta.push.apply(meta,Object(Vt.a)(n))}}function _(t){return(t||"").replace(/-/g,"_")}function C(t,e){return t.match(/^https?:\/\//)?t:e+t}return c}function Zt(){return Wt.call(this,{addDirAttribute:!1,addSeoAttributes:!0})}function te(t,e){return ee.apply(this,arguments)}function ee(){return(ee=Object(n.a)(regeneratorRuntime.mark((function t(e,r){var n,o,c;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=e.app,(o=n.i18n).loadedLanguages||(o.loadedLanguages=[]),o.loadedLanguages.includes(r)||((c=ht.normalizedLocales.find((function(t){return t.code===r})))?c.file||console.warn(xt("Could not find lang file for locale ".concat(r))):console.warn(xt('Attempted to load messages for non-existant locale code "'.concat(r,'"'))));case 4:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var re=r(46);function ne(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return ae(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ae(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function ae(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}l.a.use(Kt.a);var oe=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,v,m,w,x,_,C,k,O,$,j,P,E,S,R,L,A,N,D,I,z,M,B,F,U,G,X,K,V,H,Q,Y,J;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r=e.app,o=e.route,c=e.store,h=e.req,e.res,f=e.redirect,ht.vuex&&c&&Et(c,ht.vuex,ht.localeCodes),d=ht.lazy,d&&(!0===d||!0!==d.skipNuxtState),t.next=9;break;case 7:v=t.sent.default,e.beforeNuxtRender((function(t){var e=t.nuxtState,n={},o=r.i18n,c=o.fallbackLocale,l=o.locale;if(l&&l!==c){var h=r.i18n._getMessages()[l];if(h)try{v(h),n[l]=h}catch(t){}}e.__i18n={langs:n}}));case 9:if(m=ht.detectBrowserLanguage,w=m.alwaysRedirect,x=m.fallbackLocale,_=m.onlyOnNoPrefix,C=m.onlyOnRoot,k=m.useCookie,O=m.cookieKey,$=m.cookieDomain,j=m.cookieSecure,P=m.cookieCrossOrigin,E=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,l,h,d,v,m,w,x,y,_=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(o=_.length>1&&void 0!==_[1]?_[1]:{},l=o.initialSetup,h=void 0!==l&&l,n){t.next=3;break}return t.abrupt("return");case 3:if(h||!r.i18n.differentDomains){t.next=5;break}return t.abrupt("return");case 5:if(d=r.i18n.locale,n!==d){t.next=8;break}return t.abrupt("return");case 8:if(!(v=r.i18n.onBeforeLanguageSwitch(d,n,h,e))||!r.i18n.localeCodes.includes(v)){t.next=13;break}if(v!==d){t.next=12;break}return t.abrupt("return");case 12:n=v;case 13:if(h||r.i18n.beforeLanguageSwitch(d,n),k&&r.i18n.setLocaleCookie(n),!ht.langDir){t.next=29;break}if(m=r.i18n.fallbackLocale,!ht.lazy){t.next=27;break}if(!m){t.next=23;break}return w=[],Array.isArray(m)?w=m.map((function(t){return te(e,t)})):"object"===Object(ft.a)(m)?(m[n]&&(w=w.concat(m[n].map((function(t){return te(e,t)})))),m.default&&(w=w.concat(m.default.map((function(t){return te(e,t)}))))):n!==m&&w.push(te(e,m)),t.next=23,Promise.all(w);case 23:return t.next=25,te(e,n);case 25:t.next=29;break;case 27:return t.next=29,Promise.all(ht.localeCodes.map((function(t){return te(e,t)})));case 29:if(r.i18n.locale=n,r.i18n.localeProperties=Object(re.a)(ht.locales.find((function(t){return t.code===n}))||{code:n}),!ht.vuex){t.next=34;break}return t.next=34,St(c,n,r.i18n.getLocaleMessage(n),ht.vuex);case 34:x=e.route,y=R(x,n),h?r.i18n.__redirect=y:(r.i18n.onLanguageSwitched(d,n),y&&f(y));case 37:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),S=$t(ht.localeCodes,{routesNameSeparator:ht.routesNameSeparator,defaultLocaleRouteNameSuffix:ht.defaultLocaleRouteNameSuffix}),R=function(t,e){if(!e||r.i18n.differentDomains||ht.strategy===ct.STRATEGIES.NO_PREFIX)return"";if(S(t)===e&&(!C&&!_||e!==ht.defaultLocale||ht.strategy!==ct.STRATEGIES.PREFIX_AND_DEFAULT))return"";var n=r.switchLocalePath(e);return n||(n=r.localePath(t.fullPath,e)),!n||n===t.fullPath||n.startsWith("//")?"":n},L=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,path,c,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("/"!==n.path||!ht.rootRedirect){t.next=5;break}return o=302,path=ht.rootRedirect,"string"!=typeof ht.rootRedirect&&(o=ht.rootRedirect.statusCode,path=ht.rootRedirect.path),t.abrupt("return",[o,"/".concat(path),!0]);case 5:if(!(c=r.i18n.__redirect)){t.next=9;break}return r.i18n.__redirect=null,t.abrupt("return",[302,c]);case 9:if(l={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,r.i18n.locale,l),h=ht.detectBrowserLanguage&&I(n)||S(n)||r.i18n.locale||r.i18n.defaultLocale||"",!ht.skipSettingLocaleOnNavigate){t.next=17;break}r.i18n.__pendingLocale=h,r.i18n.__pendingLocalePromise=new Promise((function(t){r.i18n.__resolvePendingLocalePromise=t})),t.next=19;break;case 17:return t.next=19,r.i18n.setLocale(h);case 19:return t.abrupt("return",[null,null]);case 20:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),A=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r.i18n.__pendingLocale){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,r.i18n.setLocale(r.i18n.__pendingLocale);case 4:r.i18n.__resolvePendingLocalePromise(""),r.i18n.__pendingLocale=null;case 6:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),N=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!r.i18n.__pendingLocale){t.next=3;break}return t.next=3,r.i18n.__pendingLocalePromise;case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),D=function(){return"undefined"!=typeof navigator&&navigator.languages?yt(ht.normalizedLocales,navigator.languages):h&&void 0!==h.headers["accept-language"]?yt(ht.normalizedLocales,h.headers["accept-language"].split(",").map((function(t){return t.split(";")[0]}))):void 0},I=function(t){if(ht.strategy!==ct.STRATEGIES.NO_PREFIX)if(C){if("/"!==t.path)return""}else if(_&&!w&&t.path.match(Ot(ht.localeCodes)))return"";var e;k&&(e=r.i18n.getLocaleCookie())||(e=D());var n=e||x;return!n||k&&!w&&r.i18n.getLocaleCookie()||n===r.i18n.locale?"":n},z=function(t){t.locales=Object(re.a)(ht.locales),t.localeCodes=Object(re.a)(ht.localeCodes),t.localeProperties=Object(re.a)(ht.normalizedLocales.find((function(e){return e.code===t.locale}))||{code:t.locale}),t.defaultLocale=ht.defaultLocale,t.differentDomains=ht.differentDomains,t.beforeLanguageSwitch=ht.beforeLanguageSwitch,t.onBeforeLanguageSwitch=ht.onBeforeLanguageSwitch,t.onLanguageSwitched=ht.onLanguageSwitched,t.setLocaleCookie=function(t){return Pt(t,0,{useCookie:k,cookieDomain:$,cookieKey:O,cookieSecure:j,cookieCrossOrigin:P})},t.getLocaleCookie=function(){return jt(0,{useCookie:k,cookieKey:O,localeCodes:ht.localeCodes})},t.setLocale=function(t){return E(t)},t.getBrowserLocale=function(){return D()},t.finalizePendingLocaleChange=A,t.waitForPendingLocaleChange=N,t.__baseUrl=r.i18n.__baseUrl,t.__pendingLocale=r.i18n.__pendingLocale,t.__pendingLocalePromise=r.i18n.__pendingLocalePromise,t.__resolvePendingLocalePromise=r.i18n.__resolvePendingLocalePromise},"function"!=typeof ht.vueI18n){t.next=25;break}return t.next=22,ht.vueI18n(e);case 22:t.t0=t.sent,t.next=26;break;case 25:t.t0=Object(re.a)(ht.vueI18n);case 26:if((M=t.t0).componentInstanceCreatedListener=z,r.i18n=e.i18n=new Kt.a(M),r.i18n.locale="",r.i18n.fallbackLocale=M.fallbackLocale||"",z(r.i18n),B={differentDomains:ht.differentDomains,normalizedLocales:ht.normalizedLocales},r.i18n.__baseUrl=_t(ht.baseUrl,e,"",B),r.i18n.__onNavigate=L,l.a.prototype.$nuxtI18nSeo=Zt,l.a.prototype.$nuxtI18nHead=Wt,!c){t.next=58;break}if(c.$i18n=r.i18n,!c.state.localeDomains){t.next=58;break}F=ne(r.i18n.locales),t.prev=41,F.s();case 43:if((U=F.n()).done){t.next=50;break}if("string"!=typeof(G=U.value)){t.next=47;break}return t.abrupt("continue",48);case 47:G.domain=c.state.localeDomains[G.code];case 48:t.next=43;break;case 50:t.next=55;break;case 52:t.prev=52,t.t1=t.catch(41),F.e(t.t1);case 55:return t.prev=55,F.f(),t.finish(55);case 58:return(X=ht.detectBrowserLanguage?I(o):"")||((K=ht.vuex)&&K.syncLocale&&c&&""!==c.state[K.moduleName].locale?X=c.state[K.moduleName].locale:r.i18n.differentDomains?(V=kt(ht.normalizedLocales),X=V):ht.strategy!==ct.STRATEGIES.NO_PREFIX?(H=S(o),X=H):k&&(X=r.i18n.getLocaleCookie())),X||(X=r.i18n.defaultLocale||""),t.next=63,E(X,{initialSetup:!0});case 63:if(!lt){t.next=71;break}return t.next=66,L(e.route);case 66:Q=t.sent,Y=Object(T.a)(Q,2),Y[0],(J=Y[1])&&location.assign(Object(y.b)(e.base,J));case 71:case"end":return t.stop()}}),t,null,[[41,52,55,58]])})));return function(e){return t.apply(this,arguments)}}();function ie(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function se(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?ie(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):ie(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}l.a.component(v.a.name,v.a),l.a.component(w.a.name,se(se({},w.a),{},{render:function(t,e){return w.a._warned||(w.a._warned=!0,console.warn("<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead")),w.a.render(t,e)}})),l.a.component(S.name,S),l.a.component("NChild",S),l.a.component(I.name,I),Object.defineProperty(l.a.prototype,"$nuxt",{get:function(){var t=this.$root.$options.$nuxt;return t||"undefined"==typeof window?t:window.$nuxt},configurable:!0}),l.a.use(f.a,{keyName:"head",attribute:"data-n-head",ssrAttribute:"data-n-head-ssr",tagIDKeyName:"hid"});var ce={name:"page",mode:"out-in",appear:!1,appearClass:"appear",appearActiveClass:"appear-active",appearToClass:"appear-to"},le=h.a.Store.prototype.registerModule;function ue(path,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=Array.isArray(path)?!!path.reduce((function(t,path){return t&&t[path]}),this.state):path in this.state;return le.call(this,path,t,se({preserveState:r},e))}function he(t){return fe.apply(this,arguments)}function fe(){return(fe=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,c,h,f,d,path,v,m=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return v=function(t,e){if(!t)throw new Error("inject(key, value) has no key provided");if(void 0===e)throw new Error("inject('".concat(t,"', value) has no value provided"));h[t="$"+t]=e,h.context[t]||(h.context[t]=e),c[t]=h[t];var r="__nuxt_"+t+"_installed__";l.a[r]||(l.a[r]=!0,l.a.use((function(){Object.prototype.hasOwnProperty.call(l.a.prototype,t)||Object.defineProperty(l.a.prototype,t,{get:function(){return this.$root.$options[t]}})})))},r=m.length>1&&void 0!==m[1]?m[1]:{},t.next=4,E(0,r);case 4:return o=t.sent,(c=at(e)).$router=o,c.registerModule=ue,h=se({head:{title:"Handbook - Apache ECharts",meta:[{charset:"utf-8"},{name:"viewport",content:"width=device-width, initial-scale=1"},{hid:"description",name:"description",content:"Apache ECharts Handbook"}],link:[{rel:"icon",type:"image/x-icon",href:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"}],style:[],script:[]},store:c,router:o,nuxt:{defaultTransition:ce,transitions:[ce],setTransitions:function(t){return Array.isArray(t)||(t=[t]),t=t.map((function(t){return t=t?"string"==typeof t?Object.assign({},ce,{name:t}):Object.assign({},ce,t):ce})),this.$options.nuxt.transitions=t,t},err:null,dateErr:null,error:function(t){t=t||null,h.context._errored=Boolean(t),t=t?Object(_.p)(t):null;var r=h.nuxt;return this&&(r=this.nuxt||this.$options.nuxt),r.dateErr=Date.now(),r.err=t,e&&(e.nuxt.error=t),t}}},et),c.app=h,f=e?e.next:function(t){return h.router.push(t)},e?d=o.resolve(e.url).route:(path=Object(_.f)(o.options.base,o.options.mode),d=o.resolve(path).route),t.next=14,Object(_.t)(h,{store:c,route:d,next:f,error:h.nuxt.error.bind(h),payload:e?e.payload:void 0,req:e?e.req:void 0,res:e?e.res:void 0,beforeRenderFns:e?e.beforeRenderFns:void 0,ssrContext:e});case 14:return v("config",r),window.__NUXT__&&window.__NUXT__.state&&c.replaceState(window.__NUXT__.state),h.context.enablePreview=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.previewData=Object.assign({},t),v("preview",t)},t.next=20,Xt(h.context);case 20:if("function"!=typeof oe){t.next=23;break}return t.next=23,oe(h.context,v);case 23:return h.context.enablePreview=function(){console.warn("You cannot call enablePreview() outside a plugin.")},t.next=26,new Promise((function(t,e){o.replace(h.context.route.fullPath,t,(function(r){if(!r._isRouter)return e(r);if(2!==r.type)return t();var c=o.afterEach(function(){var e=Object(n.a)(regeneratorRuntime.mark((function e(r,n){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=3,Object(_.j)(r);case 3:h.context.route=e.sent,h.context.params=r.params||{},h.context.query=r.query||{},c(),t();case 8:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}())}))}));case 26:return t.abrupt("return",{store:c,app:h,router:o});case 27:case"end":return t.stop()}}),t)})))).apply(this,arguments)}},56:function(t,e,r){"use strict";e.a={}},73:function(t,e,r){"use strict";r(41),r(37),r(22),r(25),r(16),r(23),r(20),r(17),r(34),r(27),r(28);var n=r(0),o=r.n(n);function c(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return l(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return l(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,h=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){h=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(h)throw o}}}}function l(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var h=window.requestIdleCallback||function(t){var e=Date.now();return setTimeout((function(){t({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-e))}})}),1)},f=window.cancelIdleCallback||function(t){clearTimeout(t)},d=window.IntersectionObserver&&new window.IntersectionObserver((function(t){t.forEach((function(t){var e=t.intersectionRatio,link=t.target;e<=0||!link.__prefetch||link.__prefetch()}))}));e.a={name:"NuxtLink",extends:o.a.component("RouterLink"),props:{prefetch:{type:Boolean,default:!0},noPrefetch:{type:Boolean,default:!1}},mounted:function(){this.prefetch&&!this.noPrefetch&&(this.handleId=h(this.observe,{timeout:2e3}))},beforeDestroy:function(){f(this.handleId),this.__observed&&(d.unobserve(this.$el),delete this.$el.__prefetch)},methods:{observe:function(){d&&this.shouldPrefetch()&&(this.$el.__prefetch=this.prefetchLink.bind(this),d.observe(this.$el),this.__observed=!0)},shouldPrefetch:function(){return this.getPrefetchComponents().length>0},canPrefetch:function(){var t=navigator.connection;return!(this.$nuxt.isOffline||t&&((t.effectiveType||"").includes("2g")||t.saveData))},getPrefetchComponents:function(){return this.$router.resolve(this.to,this.$route,this.append).resolved.matched.map((function(t){return t.components.default})).filter((function(t){return"function"==typeof t&&!t.options&&!t.__prefetched}))},prefetchLink:function(){if(this.canPrefetch()){d.unobserve(this.$el);var t,e=c(this.getPrefetchComponents());try{for(e.s();!(t=e.n()).done;){var r=t.value,n=r();n instanceof Promise&&n.catch((function(){})),r.__prefetched=!0}}catch(t){e.e(t)}finally{e.f()}}}}}}},[[141,4,1,5]]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/e35b2af89343d5fdfb6f.js b/handbook/_nuxt/js/e35b2af89343d5fdfb6f.js
new file mode 100644
index 0000000..0bfc97a
--- /dev/null
+++ b/handbook/_nuxt/js/e35b2af89343d5fdfb6f.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{348: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-box\". (For consistency in the context, the noun form of the word we keep using the \"transform\" rather than \"transformation\").\n\nThe abstract formula of data transform is: `outData = f(inputData)`, where the transform function `f` can be like `filter`, `sort`, `regression`, `boxplot`, `cluster`, `aggregate`(todo) ...\nWith the help of those transform methods, users can be implements the features like:\n\n- Partition data into multiple series.\n- Make some statistics and visualize the result.\n- Adapt some visualization algorithms to data and display the result.\n- Sort data.\n- Remove or choose some kind of empty or special datums.\n- ...\n\n## Get Started to Data Transform\n\nIn echarts, data transform is implemented based on the concept of [dataset](~${optionPath}#dataset). A [dataset.transform](${optionPath}#dataset.transform) can be configured in a dataset instance to indicate that this dataset is to be generated from this `transform`. For example:\n\n```js live\nvar option = {\n dataset: [\n {\n // This dataset is on `datasetIndex: 0`.\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // This dataset is on `datasetIndex: 1`.\n // A `transform` is configured to indicate that the\n // final data of this dataset is transformed via this\n // transform function.\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // There can be optional properties `fromDatasetIndex` or `fromDatasetId`\n // to indicate that where is the input data of the transform from.\n // For example, `fromDatasetIndex: 0` specify the input data is from\n // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the\n // input data is from the dataset having `id: 'a'`.\n // [DEFAULT_RULE]\n // If both `fromDatasetIndex` and `fromDatasetId` are omitted,\n // `fromDatasetIndex: 0` are used by default.\n },\n {\n // This dataset is on `datasetIndex: 2`.\n // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is\n // specified, `fromDatasetIndex: 0` is used by default\n transform: {\n // The \"filter\" transform filters and gets data items only match\n // the given condition in property `config`.\n type: 'filter',\n // Transforms has a property `config`. In this \"filter\" transform,\n // the `config` specify the condition that each result data item\n // should be satisfied. In this case, this transform get all of\n // the data items that the value on dimension \"Year\" equals to 2012.\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // This dataset is on `datasetIndex: 3`\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // In this case, each \"pie\" series reference to a dataset that has\n // the result of its \"filter\" transform.\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n```\n\nLet's summarize the key points of using data transform:\n\n- Generate new data from existing declared data via the declaration of `transform`, `fromDatasetIndex`/`fromDatasetId` in some blank dataset.\n- Series references these datasets to show the result.\n\n## Advanced Usage\n\n#### Piped Transform\n\nThere is a syntactic sugar that pipe transforms like:\n\n```js\noption = {\n dataset: [\n {\n source: [] // The original data\n },\n {\n // Declare transforms in an array to pipe multiple transforms,\n // which makes them execute one by one and take the output of\n // the previous transform as the input of the next transform.\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // Display the result of the piped transform.\n datasetIndex: 1\n }\n};\n```\n\n> Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).\n\n#### Output Multiple Data\n\nIn most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.\n\nFor example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the [example](${exampleEditorPath}boxplot-light-velocity).\n\nWe use prop [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) to satisfy this requirement. For example:\n\n```js\noption = {\n dataset: [\n {\n // Original source data.\n source: []\n },\n {\n transform: {\n type: 'boxplot'\n }\n // After this \"boxplot transform\" two result data generated:\n // result[0]: The boxplot data\n // result[1]: The outlier data\n // By default, when series or other dataset reference this dataset,\n // only result[0] can be visited.\n // If we need to visit result[1], we have to use another dataset\n // as follows:\n },\n {\n // This extra dataset references the dataset above, and retrieves\n // the result[1] as its own data. Thus series or other dataset can\n // reference this dataset to get the data from result[1].\n fromDatasetIndex: 1,\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // Reference the data from result[1].\n datasetIndex: 2\n }\n ]\n};\n```\n\nWhat more, [dataset.fromTransformResult](${optionPath}#dataset.fromTransformResult) and [dataset.transform](${optionPath}#dataset.transform) can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by `fromTransformResult`. For example:\n\n```js\n{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n```\n\n#### Debug in Develop Environment\n\nWhen using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property `transform.print` might help in such case. (`transform.print` is only available in dev environment).\n\n```js\noption = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // The result of this transform will be printed\n // in dev tool via `console.log`.\n print: true\n }\n }\n ]\n};\n```\n\n## Filter Transform\n\nTransform type \"filter\" is a built-in transform that provide data filter according to specified conditions. The basic option is like:\n\n```js live\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // The config is the \"condition\" of this filter.\n // This transform traverse the source data and\n // and retrieve all the items that the \"Year\"\n // is `2011`.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\nThis is another example of filter transform:\n\n<md-example src=\"data-transform-filter\"></md-example>\n\n**About dimension:**\n\nThe `config.dimension` can be:\n\n- Dimension name declared in dataset, like `config: { dimension: 'Year', '=': 2011 }`. Dimension name declaration is not mandatory.\n- Dimension index (start from 0), like `config: { dimension: 3, '=': 2011 }`.\n\n**About relational operator:**\n\nThe relational operator can be:\n`>`(`gt`), `>=`(`gte`), `<`(`lt`), `<=`(`lte`), `=`(`eq`), `!=`(`ne`, `<>`), `reg`. (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:\n\n- Multiple operators are able to appear in one {} item like `{ dimension: 'Price', '>=': 20, '<': 30 }`, which means logical \"and\" (Price >= 20 and Price < 30).\n- 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.\n- If we need to compare \"JS `Date` instance\" or date string (like '2012-05-12'), we need to specify `parser: 'time'` manually, like `config: { dimension: 3, lt: '2012-05-12', parser: 'time' }`.\n- Pure string comparison is supported but can only be used in `=`, `!=`. `>`, `>=`, `<`, `<=` do not support pure string comparison (the \"right value\" of the four operators can not be a \"string\").\n- The operator `reg` can be used to make regular expression test. Like using `{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }` to select all data items that the \"Name\" dimension contains family name Müller.\n\n**About logical relationship:**\n\nSometimes we also need to express logical relationship ( `and` / `or` / `not` ):\n\n```js\noption = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // Use operator \"and\".\n // Similarly, we can also use \"or\", \"not\" in the same place.\n // But \"not\" should be followed with a {...} rather than `[...]`.\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // The condition is \"Year\" is 2011 and \"Price\" is greater\n // or equal to 20 but less than 30.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n```\n\n`and`/`or`/`not` can be nested like:\n\n```js\ntransform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n```\n\n**About parser:**\n\nSome \"parser\" can be specified when make value comparison. At present only supported:\n\n- `parser: 'time'`: Parse the value to date time before comparing. The parser rule is the same as `echarts.time.parse`, where JS `Date` instance, timestamp number (in millisecond) and time string (like `'2012-05-12 03:11:22'`) are supported to be parse to timestamp number, while other value will be parsed to `NaN`.\n- `parser: 'trim'`: Trim the string before making comparison. For non-string, return the original value.\n- `parser: 'number'`: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to `NaN`. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like `'33%'`, `12px`), we should use `parser: 'number'` to convert them to number before making comparison.\n\nThis is an example to show the `parser: 'time'`:\n\n```js\noption = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n```\n\n**Formally definition:**\n\nFinally, we give the formally definition of the filter transform config here:\n\n```ts\ntype FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## The transform \"sort\"\n\nAnother built-in transform is \"sort\".\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // Sort by score.\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"data-transform-sort-bar\"></md-example>\n\nSome extra features about \"sort transform\":\n\n- Order by multiple dimensions is supported. See examples below.\n- The sort rule:\n - By default \"numeric\" (that is, number and numeric-string like `' 123 '`) are able to sorted by numeric order.\n - 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).\n - When \"numeric\" is compared with \"non-numeric-string\", or either of them is compared with other types of value, they are not comparable. So we call the latter one as \"incomparable\" and treat it as \"min value\" or \"max value\" according to the prop `incomparable: 'min' | 'max'`. This feature usually helps to decide whether to put the empty values (like `null`, `undefined`, `NaN`, `''`, `'-'`) or other illegal values to the head or tail.\n- `filter: 'time' | 'trim' | 'number'` can be used, the same as \"filter transform\".\n - If intending to sort time values (JS `Date` instance or time string like `'2012-03-12 11:13:54'`), `parser: 'time'` should be specified. Like `config: { dimension: 'date', order: 'desc', parser: 'time' }`\n - If intending to sort values with unit suffix (like `'33%'`, `'16px'`), need to use `parser: 'number'`.\n\nSee an example of multiple order:\n\n```js\noption = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // Sort by the two dimensions.\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n```\n\n<md-example src=\"doc-example/data-transform-multiple-sort-bar\"></md-example>\n\nFinally, we give the formally definition of the sort transform config here:\n\n```ts\ntype SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n```\n\n## Use External Transforms\n\nBesides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library [ecStat](https://github.com/ecomfe/echarts-stat) as an example:\n\nThis case show how to make a regression line via ecStat:\n\n```js\n// Register the external transform at first.\necharts.registerTransform(ecStatTransform(ecStat).regression);\n```\n\n```js\noption = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // Reference the registered external transform.\n // Note that external transform has a namespace (like 'ecStat:xxx'\n // has namespace 'ecStat').\n // built-in transform (like 'filter', 'sort') does not have a namespace.\n type: 'ecStat:regression',\n config: {\n // Parameters needed by the external transform.\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n```\n\nExamples with echarts-stat:\n\n- [Aggregate](${exampleEditorPath}data-transform-aggregate&edit=1&reset=1)\n- [Bar histogram](${exampleEditorPath}bar-histogram&edit=1&reset=1)\n- [Scatter clustering](${exampleEditorPath}scatter-clustering&edit=1&reset=1)\n- [Scatter linear regression](${exampleEditorPath}scatter-linear-regression&edit=1&reset=1)\n- [Scatter exponential regression](${exampleEditorPath}scatter-exponential-regression&edit=1&reset=1)\n- [Scatter logarithmic regression](${exampleEditorPath}scatter-logarithmic-regression&edit=1&reset=1)\n- [Scatter polynomial regression](${exampleEditorPath}scatter-polynomial-regression&edit=1&reset=1)\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ec37465718176e3cb410.js b/handbook/_nuxt/js/ec37465718176e3cb410.js
new file mode 100644
index 0000000..df2aefa
--- /dev/null
+++ b/handbook/_nuxt/js/ec37465718176e3cb410.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[68],{362: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: 'bar',\n stack: 'x'\n },\n {\n data: [5, 4, 3, 5, 10],\n type: 'bar',\n stack: 'x'\n }\n ]\n};\n```\n\n在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。\n\n> `stack` 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。\n>\n> 比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 `stack` 值就建议分别设为 `'男'` 和 `'女'`。虽然使用 `'a'` 和 `'b'` 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ed098c3662f96f0ef9b7.js b/handbook/_nuxt/js/ed098c3662f96f0ef9b7.js
new file mode 100644
index 0000000..b09a5a8
--- /dev/null
+++ b/handbook/_nuxt/js/ed098c3662f96f0ef9b7.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[85],{379: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)。参见如下配置:\n\n```js\nvar symbolSize = 20;\n\n// 这个 data 变量在这里单独声明,在后面也会用到。\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\n\nmyChart.setOption({\n xAxis: {\n min: -100,\n max: 80,\n type: 'value',\n axisLine: { onZero: false }\n },\n yAxis: {\n min: -30,\n max: 60,\n type: 'value',\n axisLine: { onZero: false }\n },\n series: [\n {\n id: 'a',\n type: 'line',\n smooth: true,\n symbolSize: symbolSize, // 为了方便拖拽,把 symbolSize 尺寸设大了。\n data: data\n }\n ]\n});\n```\n\n既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 [graphic](${optionPath}graphic) 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。\n\n```js\nmyChart.setOption({\n // 声明一个 graphic component,里面有若干个 type 为 'circle' 的 graphic elements。\n // 这里使用了 echarts.util.map 这个帮助方法,其行为和 Array.prototype.map 一样,但是兼容 es5 以下的环境。\n // 用 map 方法遍历 data 的每项,为每项生成一个圆点。\n graphic: echarts.util.map(data, function(dataItem, dataIndex) {\n return {\n // 'circle' 表示这个 graphic element 的类型是圆点。\n type: 'circle',\n\n shape: {\n // 圆点的半径。\n r: symbolSize / 2\n },\n // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置,下面介绍。\n position: myChart.convertToPixel('grid', dataItem),\n\n // 这个属性让圆点不可见(但是不影响他响应鼠标事件)。\n invisible: true,\n // 这个属性让圆点可以被拖拽。\n draggable: true,\n // 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。\n z: 100,\n // 此圆点的拖拽的响应事件,在拖拽过程中会不断被触发。下面介绍详情。\n // 这里使用了 echarts.util.curry 这个帮助方法,意思是生成一个与 onPointDragging\n // 功能一样的新的函数,只不过第一个参数永远为此时传入的 dataIndex 的值。\n ondrag: echarts.util.curry(onPointDragging, dataIndex)\n };\n })\n});\n```\n\n上面的代码中,使用 [convertToPixel](api.html#echartsInstance.convertToPixel) 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。`myChart.convertToPixel('grid', dataItem)` 这句话中,第一个参数 `'grid'` 表示 `dataItem` 在 [grid](${optionPath}grid) 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。\n\n注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系([grid](${optionPath}grid))初始化后才能调用 `myChart.convertToPixel('grid', dataItem)`。\n\n有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:\n\n```js\n// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n // 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。\n // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n // 用更新后的 data,重绘折线图。\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\n上面的代码中,使用了 [convertFromPixel](${mainSitePath}/api.html#echartsInstance.convertFromPixel) 这个 API。它是 [convertToPixel](${mainSitePath}/api.html#echartsInstance.convertToPixel) 的逆向过程。`myChart.convertFromPixel('grid', this.position)` 表示把当前像素坐标转换成 [grid](${optionPath}grid) 组件中直角坐标系的 dataItem 值。\n\n最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:\n\n```js\nwindow.addEventListener('resize', function() {\n // 对每个拖拽圆点重新计算位置,并用 setOption 更新。\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n position: myChart.convertToPixel('grid', item)\n };\n })\n });\n});\n```\n\n## 添加 tooltip 组件\n\n到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 [tooltip](${optionPath}tooltip) 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。\n\n在上述代码中分别添加如下定义:\n\n```js\nmyChart.setOption({\n // ...,\n tooltip: {\n // 表示不使用默认的“显示”“隐藏”触发规则。\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br>Y: ' +\n params.data[1].toFixed(2)\n );\n }\n }\n});\n```\n\n```js\nmyChart.setOption({\n graphic: data.map(function(item, dataIndex) {\n return {\n type: 'circle',\n // ...,\n // 在 mouseover 的时候显示,在 mouseout 的时候隐藏。\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex)\n };\n })\n});\n\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\n\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'hideTip'\n });\n}\n```\n\n这里使用了 [dispatchAction](api.html#echartsInstance.dispatchAction) 来显示隐藏 tooltip。用到了 [showTip](api.html#action.tooltip.showTip)、[hideTip](api.html#action.tooltip.hideTip)。\n\n## 全部代码\n\n总结一下,全部的代码如下:\n\n```js\nimport echarts from 'echarts';\n\nvar symbolSize = 20;\nvar data = [\n [15, 0],\n [-50, 10],\n [-56.5, 20],\n [-46.5, 30],\n [-22.1, 40]\n];\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n tooltip: {\n triggerOn: 'none',\n formatter: function(params) {\n return (\n 'X: ' +\n params.data[0].toFixed(2) +\n '<br />Y: ' +\n params.data[1].toFixed(2)\n );\n }\n },\n xAxis: { min: -100, max: 80, type: 'value', axisLine: { onZero: false } },\n yAxis: { min: -30, max: 60, type: 'value', axisLine: { onZero: false } },\n series: [\n { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data }\n ]\n});\nmyChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return {\n type: 'circle',\n position: myChart.convertToPixel('grid', item),\n shape: { r: symbolSize / 2 },\n invisible: true,\n draggable: true,\n ondrag: echarts.util.curry(onPointDragging, dataIndex),\n onmousemove: echarts.util.curry(showTooltip, dataIndex),\n onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n z: 100\n };\n })\n});\nwindow.addEventListener('resize', function() {\n myChart.setOption({\n graphic: echarts.util.map(data, function(item, dataIndex) {\n return { position: myChart.convertToPixel('grid', item) };\n })\n });\n});\nfunction showTooltip(dataIndex) {\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: dataIndex\n });\n}\nfunction hideTooltip(dataIndex) {\n myChart.dispatchAction({ type: 'hideTip' });\n}\nfunction onPointDragging(dataIndex, dx, dy) {\n data[dataIndex] = myChart.convertFromPixel('grid', this.position);\n myChart.setOption({\n series: [\n {\n id: 'a',\n data: data\n }\n ]\n });\n}\n```\n\n有了这些基础,就可以定制更多的功能了。可以加 [dataZoom](${optionPath}dataZoom) 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/eda65be14bb72a5b114e.js b/handbook/_nuxt/js/eda65be14bb72a5b114e.js
new file mode 100644
index 0000000..a202324
--- /dev/null
+++ b/handbook/_nuxt/js/eda65be14bb72a5b114e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[119],{413: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 source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n对于图例较多时,可以使用可滚动翻页的图例\n\n```js\noption = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n```\n\n## 样式\n\n在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\n图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## 交互\n\n根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n```\n\n## 图例注意事项\n\n图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。\n\n```js\noption = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n```\n\n当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ef651565e34f4fce561e.js b/handbook/_nuxt/js/ef651565e34f4fce561e.js
deleted file mode 100644
index 50eadc5..0000000
--- a/handbook/_nuxt/js/ef651565e34f4fce561e.js
+++ /dev/null
@@ -1 +0,0 @@
-(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 x})),r.d(e,"l",(function(){return _})),r.d(e,"e",(function(){return C})),r.d(e,"b",(function(){return O})),r.d(e,"s",(function(){return k})),r.d(e,"g",(function(){return j})),r.d(e,"h",(function(){return $})),r.d(e,"d",(function(){return P})),r.d(e,"r",(function(){return E})),r.d(e,"j",(function(){return S})),r.d(e,"t",(function(){return L})),r.d(e,"o",(function(){return D})),r.d(e,"q",(function(){return N})),r.d(e,"f",(function(){return T})),r.d(e,"c",(function(){return I})),r.d(e,"i",(function(){return z})),r.d(e,"p",(function(){return M})),r.d(e,"a",(function(){return V})),r.d(e,"u",(function(){return H})),r.d(e,"n",(function(){return Q}));r(16),r(27),r(38),r(39);var n=r(12),o=r(2),c=r(9),l=r(3),h=(r(20),r(24),r(127),r(15),r(17),r(21),r(28),r(25),r(26),r(22),r(32),r(58),r(128),r(109),r(99),r(100),r(181),r(42),r(31),r(0)),f=r(19);function d(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function v(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?d(Object(source),!0).forEach((function(e){Object(c.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):d(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function m(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return w(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return w(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function w(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function y(t){h.default.config.errorHandler&&h.default.config.errorHandler(t)}function x(t){return t.then((function(t){return t.default||t}))}function _(t){return t.$options&&"function"==typeof t.$options.fetch&&!t.$options.fetch.length}function C(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=t.$children||[],o=m(n);try{for(o.s();!(e=o.n()).done;){var c=e.value;c.$fetch?r.push(c):c.$children&&C(c,r)}}catch(t){o.e(t)}finally{o.f()}return r}function O(t,e){if(e||!t.options.__hasNuxtData){var r=t.options._originDataFn||t.options.data||function(){return{}};t.options._originDataFn=r,t.options.data=function(){var data=r.call(this,this);return this.$ssrContext&&(e=this.$ssrContext.asyncData[t.cid]),v(v({},data),e)},t.options.__hasNuxtData=!0,t._Ctor&&t._Ctor.options&&(t._Ctor.options.data=t.options.data)}}function k(t){return t.options&&t._Ctor===t||(t.options?(t._Ctor=t,t.extendOptions=t.options):(t=h.default.extend(t))._Ctor=t,!t.options.name&&t.options.__file&&(t.options.name=t.options.__file)),t}function j(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"components";return Array.prototype.concat.apply([],t.matched.map((function(t,n){return Object.keys(t[r]).map((function(o){return e&&e.push(n),t[r][o]}))})))}function $(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return j(t,e,"instances")}function P(t,e){return Array.prototype.concat.apply([],t.matched.map((function(t,r){return Object.keys(t.components).reduce((function(n,o){return t.components[o]?n.push(e(t.components[o],t.instances[o],t,o,r)):delete t.components[o],n}),[])})))}function E(t,e){return Promise.all(P(t,function(){var t=Object(o.a)(regeneratorRuntime.mark((function t(r,n,o,c){var l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof r||r.options){t.next=11;break}return t.prev=1,t.next=4,r();case 4:r=t.sent,t.next=11;break;case 7:throw t.prev=7,t.t0=t.catch(1),t.t0&&"ChunkLoadError"===t.t0.name&&"undefined"!=typeof window&&window.sessionStorage&&(l=Date.now(),(!(h=parseInt(window.sessionStorage.getItem("nuxt-reload")))||h+6e4<l)&&(window.sessionStorage.setItem("nuxt-reload",l),window.location.reload(!0))),t.t0;case 11:return o.components[c]=r=k(r),t.abrupt("return","function"==typeof e?e(r,n,o,c):r);case 13:case"end":return t.stop()}}),t,null,[[1,7]])})));return function(e,r,n,o){return t.apply(this,arguments)}}()))}function S(t){return R.apply(this,arguments)}function R(){return(R=Object(o.a)(regeneratorRuntime.mark((function t(e){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,E(e);case 4:return t.abrupt("return",v(v({},e),{},{meta:j(e).map((function(t,r){return v(v({},t.options.meta),(e.matched[r]||{}).meta)}))}));case 5:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function L(t,e){return A.apply(this,arguments)}function A(){return(A=Object(o.a)(regeneratorRuntime.mark((function t(e,r){var o,c,h,d;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e.context||(e.context={isStatic:!0,isDev:!1,isHMR:!1,app:e,store:e.store,payload:r.payload,error:r.error,base:e.router.options.base,env:{NUXT_ENV_DEPLOY:"asf"}},r.req&&(e.context.req=r.req),r.res&&(e.context.res=r.res),r.ssrContext&&(e.context.ssrContext=r.ssrContext),e.context.redirect=function(t,path,r){if(t){e.context._redirected=!0;var o=Object(n.a)(path);if("number"==typeof t||"undefined"!==o&&"object"!==o||(r=path||{},path=t,o=Object(n.a)(path),t=302),"object"===o&&(path=e.router.resolve(path).route.fullPath),!/(^[.]{1,2}\/)|(^\/(?!\/))/.test(path))throw path=Object(f.d)(path,r),window.location.replace(path),new Error("ERR_REDIRECT");e.context.next({path:path,query:r,status:t})}},e.context.nuxtState=window.__NUXT__),t.next=3,Promise.all([S(r.route),S(r.from)]);case 3:o=t.sent,c=Object(l.a)(o,2),h=c[0],d=c[1],r.route&&(e.context.route=h),r.from&&(e.context.from=d),e.context.next=r.next,e.context._redirected=!1,e.context._errored=!1,e.context.isHMR=!1,e.context.params=e.context.route.params||{},e.context.query=e.context.route.query||{};case 15:case"end":return t.stop()}}),t)})))).apply(this,arguments)}function D(t,e){return!t.length||e._redirected||e._errored?Promise.resolve():N(t[0],e).then((function(){return D(t.slice(1),e)}))}function N(t,e){var r;return(r=2===t.length?new Promise((function(r){t(e,(function(t,data){t&&e.error(t),r(data=data||{})}))})):t(e))&&r instanceof Promise&&"function"==typeof r.then?r:Promise.resolve(r)}function T(base,t){if("hash"===t)return window.location.hash.replace(/^#\//,"");base=decodeURI(base).slice(0,-1);var path=decodeURI(window.location.pathname);base&&path.startsWith(base)&&(path=path.slice(base.length));var e=(path||"/")+window.location.search+window.location.hash;return Object(f.c)(e)}function I(t,e){return function(t,e){for(var r=new Array(t.length),i=0;i<t.length;i++)"object"===Object(n.a)(t[i])&&(r[i]=new RegExp("^(?:"+t[i].pattern+")$",K(e)));return function(e,n){for(var path="",data=e||{},o=(n||{}).pretty?F:encodeURIComponent,c=0;c<t.length;c++){var l=t[c];if("string"!=typeof l){var h=data[l.name||"pathMatch"],f=void 0;if(null==h){if(l.optional){l.partial&&(path+=l.prefix);continue}throw new TypeError('Expected "'+l.name+'" to be defined')}if(Array.isArray(h)){if(!l.repeat)throw new TypeError('Expected "'+l.name+'" to not repeat, but received `'+JSON.stringify(h)+"`");if(0===h.length){if(l.optional)continue;throw new TypeError('Expected "'+l.name+'" to not be empty')}for(var d=0;d<h.length;d++){if(f=o(h[d]),!r[c].test(f))throw new TypeError('Expected all "'+l.name+'" to match "'+l.pattern+'", but received `'+JSON.stringify(f)+"`");path+=(0===d?l.prefix:l.delimiter)+f}}else{if(f=l.asterisk?U(h):o(h),!r[c].test(f))throw new TypeError('Expected "'+l.name+'" to match "'+l.pattern+'", but received "'+f+'"');path+=l.prefix+f}}else path+=l}return path}}(function(t,e){var r,n=[],o=0,c=0,path="",l=e&&e.delimiter||"/";for(;null!=(r=B.exec(t));){var h=r[0],f=r[1],d=r.index;if(path+=t.slice(c,d),c=d+h.length,f)path+=f[1];else{var v=t[c],m=r[2],w=r[3],y=r[4],x=r[5],_=r[6],C=r[7];path&&(n.push(path),path="");var O=null!=m&&null!=v&&v!==m,k="+"===_||"*"===_,j="?"===_||"*"===_,$=r[2]||l,pattern=y||x;n.push({name:w||o++,prefix:m||"",delimiter:$,optional:j,repeat:k,partial:O,asterisk:Boolean(C),pattern:pattern?X(pattern):C?".*":"[^"+G($)+"]+?"})}}c<t.length&&(path+=t.substr(c));path&&n.push(path);return n}(t,e),e)}function z(t,e){var r={},n=v(v({},t),e);for(var o in n)String(t[o])!==String(e[o])&&(r[o]=!0);return r}function M(t){var e;if(t.message||"string"==typeof t)e=t.message||t;else try{e=JSON.stringify(t,null,2)}catch(r){e="[".concat(t.constructor.name,"]")}return v(v({},t),{},{message:e,statusCode:t.statusCode||t.status||t.response&&t.response.status||500})}window.onNuxtReadyCbs=[],window.onNuxtReady=function(t){window.onNuxtReadyCbs.push(t)};var B=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function F(t,e){var r=e?/[?#]/g:/[/?#]/g;return encodeURI(t).replace(r,(function(t){return"%"+t.charCodeAt(0).toString(16).toUpperCase()}))}function U(t){return F(t,!0)}function G(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function X(t){return t.replace(/([=!:$/()])/g,"\\$1")}function K(t){return t&&t.sensitive?"":"i"}function V(t,e,r){t.$options[e]||(t.$options[e]=[]),t.$options[e].includes(r)||t.$options[e].push(r)}var H=f.b,Q=(f.e,f.a)},107:function(t,e,r){"use strict";var n={gh:{routerBase:"/echarts-handbook",rootPath:"https://apache.github.io/echarts-handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},asf:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},local:{routerBase:"/echarts-handbook/dist",rootPath:"http://localhost/echarts-handbook/dist/",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"},localsite:{routerBase:"/echarts-website/handbook",rootPath:"http://localhost/echarts-website/handbook",exampleViewPath:"http://localhost/echarts-website/examples/${lang}/view.html?c=",exampleEditorPath:"http://localhost/echarts-website/examples/${lang}/editor.html?c=",mainSitePath:"http://localhost/echarts-website/",optionPath:"http://localhost/echarts-website/option.html#",gitRepo:"apache/echarts-handbook"}};var o=function(){var t="asf";if(!n.asf)throw"Deploy config ".concat(t," not exits");return n.asf}();e.a=o},129:function(t,e,r){t.exports={}},130:function(t,e,r){t.exports={}},131:function(t,e,r){t.exports={}},132:function(t,e,r){t.exports={}},133:function(t,e,r){t.exports={}},134:function(t,e,r){t.exports={}},149:function(t,e){const r=[[{title:"快速上手",dir:"get-started"},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:"download"},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:"resource",draft:!0},{title:"获取灵感",dir:"inspiration"},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:"release-note",children:[{title:"ECharts 5.2.0",draft:!0,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:"v5-feature"},{title:"ECharts 5 升级指南",dir:"v5-upgrade-guide"}]}]},{title:"概念篇",dir:"concepts",children:[{title:"图表容器及大小",dir:"chart-size"},{title:"配置项",dir:"options",draft:!0},{title:"系列",dir:"series",draft:!0},{title:"样式",dir:"style"},{title:"数据集",dir:"dataset"},{title:"数据转换",dir:"data-transform"},{title:"坐标系",dir:"coordinate",draft:!0},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:"visual-map"},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:"application",children:[{title:"常用图表类型",dir:"chart-types",children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:"basic-bar"},{title:"堆叠柱状图",dir:"stacked-bar"},{title:"动态排序柱状图",dir:"bar-race",draft:!0},{title:"极坐标系柱状图",dir:"polar-bar",draft:!0},{title:"瀑布图",dir:"waterfall",draft:!0},{title:"视觉映射的柱状图",dir:"visual-map",draft:!0}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:"basic-line"},{title:"堆叠折线图",dir:"stacked-line"},{title:"区域面积图",dir:"area-line"},{title:"平滑曲线图",dir:"smooth-line"},{title:"阶梯线图",dir:"step-line"}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:"basic-pie"},{title:"圆环图",dir:"doughnut"},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:"scatter",children:[{title:"基础散点图",dir:"basic-scatter"}]}]},{title:"移动端优化",dir:"mobile",draft:!0},{title:"跨平台方案",dir:"cross-platform",children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:"dynamic-data"},{title:"数据下钻",dir:"drilldown",draft:!0}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:"rich-text"}]},{title:"交互",dir:"interaction",children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:"connect",draft:!0}]}]},{title:"最佳实践",dir:"best-practice",children:[{title:"移动端优化",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},150:function(t,e){const r=[[{title:"Get Started",dir:"get-started"},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:"download"},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:"resource",draft:!0},{title:"Inspiration",dir:"inspiration"},{title:"Get Help",dir:"help"},{title:"Release Note",dir:"release-note",children:[{title:"ECharts 5.2.0",draft:!0,dir:"5-2-0"},{title:"ECharts 5 Features",dir:"v5-feature"},{title:"ECharts 5 Upgrade Guide",dir:"v5-upgrade-guide"}]}]},{title:"Concepts",dir:"concepts",children:[{title:"Chart Container",dir:"chart-size"},{title:"Chart Option",dir:"options",draft:!0},{title:"Series",dir:"series",draft:!0},{title:"Style",dir:"style"},{title:"Dataset",dir:"dataset"},{title:"Data Transform",dir:"data-transform"},{title:"Coordinate",dir:"coordinate",draft:!0},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:"visual-map"},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:"application",children:[{title:"Common Charts",dir:"chart-types",children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:"basic-bar"},{title:"Stacked Bar",dir:"stacked-bar"},{title:"Bar Racing",dir:"bar-race",draft:!0},{title:"Bar Polar",dir:"polar-bar",draft:!0},{title:"Waterfall",dir:"waterfall",draft:!0}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:"basic-line"},{title:"Stacked Line",dir:"stacked-line"},{title:"Area Chart",dir:"area-line"},{title:"Smoothed Line",dir:"smooth-line"},{title:"Step Line",dir:"step-line"}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:"basic-pie"},{title:"Ring Style",dir:"doughnut"},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:"scatter",children:[{title:"Basic Scatter",dir:"basic-scatter"}]}]},{title:"Mobile",dir:"mobile",draft:!0},{title:"Cross Platform",dir:"cross-platform",children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:"dynamic-data"},{title:"Drilldown",dir:"drilldown",draft:!0}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:"rich-text"}]},{title:"Interaction",dir:"interaction",children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:"connect",draft:!0}]}]},{title:"Best Practice",dir:"best-practice",children:[{title:"Mobile Optimization",dir:"mobile",draft:!0},{title:"Canvas vs. SVG",dir:"canvas-vs-svg"},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:"edit-guide"}]}]];t.exports=r.length<=1?r[0]:r},151:function(t,e){},152:function(t,e,r){"use strict";var n=r(2),o=(r(20),r(15),r(0)),c=r(1),l=window.__NUXT__;function h(){if(!this._hydrated)return this.$fetch()}function f(){if((t=this).$vnode&&t.$vnode.elm&&t.$vnode.elm.dataset&&t.$vnode.elm.dataset.fetchKey){var t;this._hydrated=!0,this._fetchKey=this.$vnode.elm.dataset.fetchKey;var data=l.fetch[this._fetchKey];if(data&&data._error)this.$fetchState.error=data._error;else for(var e in data)o.default.set(this.$data,e,data[e])}}function d(){var t=this;return this._fetchPromise||(this._fetchPromise=v.call(this).then((function(){delete t._fetchPromise}))),this._fetchPromise}function v(){return m.apply(this,arguments)}function m(){return(m=Object(n.a)(regeneratorRuntime.mark((function t(){var e,r,n,o=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return this.$nuxt.nbFetching++,this.$fetchState.pending=!0,this.$fetchState.error=null,this._hydrated=!1,e=null,r=Date.now(),t.prev=6,t.next=9,this.$options.fetch.call(this);case 9:t.next=15;break;case 11:t.prev=11,t.t0=t.catch(6),e=Object(c.p)(t.t0);case 15:if(!((n=this._fetchDelay-(Date.now()-r))>0)){t.next=19;break}return t.next=19,new Promise((function(t){return setTimeout(t,n)}));case 19:this.$fetchState.error=e,this.$fetchState.pending=!1,this.$fetchState.timestamp=Date.now(),this.$nextTick((function(){return o.$nuxt.nbFetching--}));case 23:case"end":return t.stop()}}),t,this,[[6,11]])})))).apply(this,arguments)}e.a={beforeCreate:function(){Object(c.l)(this)&&(this._fetchDelay="number"==typeof this.$options.fetchDelay?this.$options.fetchDelay:200,o.default.util.defineReactive(this,"$fetchState",{pending:!1,error:null,timestamp:Date.now()}),this.$fetch=d.bind(this),Object(c.a)(this,"created",f),Object(c.a)(this,"beforeMount",h))}}},156:function(t,e,r){t.exports=r(157)},157:function(t,e,r){"use strict";r.r(e),function(t){r(22),r(16),r(27);var e=r(12),n=r(2),o=(r(119),r(165),r(170),r(172),r(20),r(17),r(24),r(28),r(42),r(31),r(21),r(25),r(15),r(26),r(0)),c=r(146),l=r(60),h=r(1),f=r(30),d=r(152),v=r(77);function m(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return w(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return w(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function w(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}o.default.__nuxt__fetch__mixin__||(o.default.mixin(d.a),o.default.__nuxt__fetch__mixin__=!0),o.default.component(v.a.name,v.a),o.default.component("NLink",v.a),t.fetch||(t.fetch=c.a);var y,x,_=[],C=window.__NUXT__||{},O=C.config||{};O._app&&(r.p=Object(h.u)(O._app.cdnURL,O._app.assetsPath)),Object.assign(o.default.config,{silent:!0,performance:!1});var k=o.default.config.errorHandler||console.error;function j(t,e,r){for(var n=function(component){var t=function(component,t){if(!component||!component.options||!component.options[t])return{};var option=component.options[t];if("function"==typeof option){for(var e=arguments.length,r=new Array(e>2?e-2:0),n=2;n<e;n++)r[n-2]=arguments[n];return option.apply(void 0,r)}return option}(component,"transition",e,r)||{};return"string"==typeof t?{name:t}:t},o=r?Object(h.g)(r):[],c=Math.max(t.length,o.length),l=[],f=function(i){var e=Object.assign({},n(t[i])),r=Object.assign({},n(o[i]));Object.keys(e).filter((function(t){return void 0!==e[t]&&!t.toLowerCase().includes("leave")})).forEach((function(t){r[t]=e[t]})),l.push(r)},i=0;i<c;i++)f(i);return l}function $(t,e,r){return P.apply(this,arguments)}function P(){return(P=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n){var o,c,l,f,d=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(this._routeChanged=Boolean(y.nuxt.err)||r.name!==e.name,this._paramChanged=!this._routeChanged&&r.path!==e.path,this._queryChanged=!this._paramChanged&&r.fullPath!==e.fullPath,this._diffQuery=this._queryChanged?Object(h.i)(e.query,r.query):[],(this._routeChanged||this._paramChanged)&&this.$loading.start&&!this.$loading.manual&&this.$loading.start(),t.prev=5,!this._queryChanged){t.next=12;break}return t.next=9,Object(h.r)(e,(function(t,e){return{Component:t,instance:e}}));case 9:o=t.sent,o.some((function(t){var n=t.Component,o=t.instance,c=n.options.watchQuery;return!0===c||(Array.isArray(c)?c.some((function(t){return d._diffQuery[t]})):"function"==typeof c&&c.apply(o,[e.query,r.query]))}))&&this.$loading.start&&!this.$loading.manual&&this.$loading.start();case 12:n(),t.next=26;break;case 15:if(t.prev=15,t.t0=t.catch(5),c=t.t0||{},l=c.statusCode||c.status||c.response&&c.response.status||500,f=c.message||"",!/^Loading( CSS)? chunk (\d)+ failed\./.test(f)){t.next=23;break}return window.location.reload(!0),t.abrupt("return");case 23:this.error({statusCode:l,message:f}),this.$nuxt.$emit("routeChanged",e,r,c),n();case 26:case"end":return t.stop()}}),t,this,[[5,15]])})))).apply(this,arguments)}function E(t,e){return C.serverRendered&&e&&Object(h.b)(t,e),t._Ctor=t,t}function S(t){return Object(h.d)(t,function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e,r,n,o,c){var l;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("function"!=typeof e||e.options){t.next=4;break}return t.next=3,e();case 3:e=t.sent;case 4:return l=E(Object(h.s)(e),C.data?C.data[c]:null),n.components[o]=l,t.abrupt("return",l);case 7:case"end":return t.stop()}}),t)})));return function(e,r,n,o,c){return t.apply(this,arguments)}}())}function R(t,e,r){var n=this,o=["nuxti18n"],c=!1;if(void 0!==r&&(o=[],(r=Object(h.s)(r)).options.middleware&&(o=o.concat(r.options.middleware)),t.forEach((function(t){t.options.middleware&&(o=o.concat(t.options.middleware))}))),o=o.map((function(t){return"function"==typeof t?t:("function"!=typeof l.a[t]&&(c=!0,n.error({statusCode:500,message:"Unknown middleware "+t})),l.a[t])})),!c)return Object(h.o)(o,e)}function L(t,e,r){return A.apply(this,arguments)}function A(){return(A=Object(n.a)(regeneratorRuntime.mark((function t(e,r,o){var c,l,d,v,w,x,C,O,k,$,P,E,S,L,A,D=this;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){t.next=2;break}return t.abrupt("return",o());case 2:return!1,e===r?(_=[],!0):(c=[],_=Object(h.g)(r,c).map((function(t,i){return Object(h.c)(r.matched[c[i]].path)(r.params)}))),l=!1,d=function(path){r.path===path.path&&D.$loading.finish&&D.$loading.finish(),r.path!==path.path&&D.$loading.pause&&D.$loading.pause(),l||(l=!0,o(path))},t.next=8,Object(h.t)(y,{route:e,from:r,next:d.bind(this)});case 8:if(this._dateLastError=y.nuxt.dateErr,this._hadError=Boolean(y.nuxt.err),v=[],(w=Object(h.g)(e,v)).length){t.next=27;break}return t.next=15,R.call(this,w,y.context);case 15:if(!l){t.next=17;break}return t.abrupt("return");case 17:return x=(f.a.options||f.a).layout,t.next=20,this.loadLayout("function"==typeof x?x.call(f.a,y.context):x);case 20:return C=t.sent,t.next=23,R.call(this,w,y.context,C);case 23:if(!l){t.next=25;break}return t.abrupt("return");case 25:return y.context.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 27:return w.forEach((function(t){t._Ctor&&t._Ctor.options&&(t.options.asyncData=t._Ctor.options.asyncData,t.options.fetch=t._Ctor.options.fetch)})),this.setTransitions(j(w,e,r)),t.prev=29,t.next=32,R.call(this,w,y.context);case 32:if(!l){t.next=34;break}return t.abrupt("return");case 34:if(!y.context._errored){t.next=36;break}return t.abrupt("return",o());case 36:return"function"==typeof(O=w[0].options.layout)&&(O=O(y.context)),t.next=40,this.loadLayout(O);case 40:return O=t.sent,t.next=43,R.call(this,w,y.context,O);case 43:if(!l){t.next=45;break}return t.abrupt("return");case 45:if(!y.context._errored){t.next=47;break}return t.abrupt("return",o());case 47:k=!0,t.prev=48,$=m(w),t.prev=50,$.s();case 52:if((P=$.n()).done){t.next=63;break}if("function"==typeof(E=P.value).options.validate){t.next=56;break}return t.abrupt("continue",61);case 56:return t.next=58,E.options.validate(y.context);case 58:if(k=t.sent){t.next=61;break}return t.abrupt("break",63);case 61:t.next=52;break;case 63:t.next=68;break;case 65:t.prev=65,t.t0=t.catch(50),$.e(t.t0);case 68:return t.prev=68,$.f(),t.finish(68);case 71:t.next=77;break;case 73:return t.prev=73,t.t1=t.catch(48),this.error({statusCode:t.t1.statusCode||"500",message:t.t1.message}),t.abrupt("return",o());case 77:if(k){t.next=80;break}return this.error({statusCode:404,message:"This page could not be found"}),t.abrupt("return",o());case 80:return t.next=82,Promise.all(w.map(function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n,i){var o,c,l,f,d,m,w,x,p;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n._path=Object(h.c)(e.matched[v[i]].path)(e.params),n._dataRefresh=!1,o=n._path!==_[i],D._routeChanged&&o?n._dataRefresh=!0:D._paramChanged&&o?(c=n.options.watchParam,n._dataRefresh=!1!==c):D._queryChanged&&(!0===(l=n.options.watchQuery)?n._dataRefresh=!0:Array.isArray(l)?n._dataRefresh=l.some((function(t){return D._diffQuery[t]})):"function"==typeof l&&(S||(S=Object(h.h)(e)),n._dataRefresh=l.apply(S[i],[e.query,r.query]))),D._hadError||!D._isMounted||n._dataRefresh){t.next=6;break}return t.abrupt("return");case 6:return f=[],d=n.options.asyncData&&"function"==typeof n.options.asyncData,m=Boolean(n.options.fetch)&&n.options.fetch.length,w=d&&m?30:45,d&&((x=Object(h.q)(n.options.asyncData,y.context)).then((function(t){Object(h.b)(n,t),D.$loading.increase&&D.$loading.increase(w)})),f.push(x)),D.$loading.manual=!1===n.options.loading,m&&((p=n.options.fetch(y.context))&&(p instanceof Promise||"function"==typeof p.then)||(p=Promise.resolve(p)),p.then((function(t){D.$loading.increase&&D.$loading.increase(w)})),f.push(p)),t.abrupt("return",Promise.all(f));case 14:case"end":return t.stop()}}),t)})));return function(e,r){return t.apply(this,arguments)}}()));case 82:l||(this.$loading.finish&&!this.$loading.manual&&this.$loading.finish(),o()),t.next=99;break;case 85:if(t.prev=85,t.t2=t.catch(29),"ERR_REDIRECT"!==(L=t.t2||{}).message){t.next=90;break}return t.abrupt("return",this.$nuxt.$emit("routeChanged",e,r,L));case 90:return _=[],Object(h.k)(L),"function"==typeof(A=(f.a.options||f.a).layout)&&(A=A(y.context)),t.next=96,this.loadLayout(A);case 96:this.error(L),this.$nuxt.$emit("routeChanged",e,r,L),o();case 99:case"end":return t.stop()}}),t,this,[[29,85],[48,73],[50,65,68,71]])})))).apply(this,arguments)}function D(t,r){Object(h.d)(t,(function(t,r,n,c){return"object"!==Object(e.a)(t)||t.options||((t=o.default.extend(t))._Ctor=t,n.components[c]=t),t}))}function N(t){var e=Boolean(this.$options.nuxt.err);this._hadError&&this._dateLastError===this.$options.nuxt.dateErr&&(e=!1);var r=e?(f.a.options||f.a).layout:t.matched[0].components.default.options.layout;"function"==typeof r&&(r=r(y.context)),this.setLayout(r)}function T(t){t._hadError&&t._dateLastError===t.$options.nuxt.dateErr&&t.error()}function I(t,e){var r=this;if(!1!==this._routeChanged||!1!==this._paramChanged||!1!==this._queryChanged){var n=Object(h.h)(t),c=Object(h.g)(t),l=!1;o.default.nextTick((function(){n.forEach((function(t,i){if(t&&!t._isDestroyed&&t.constructor._dataRefresh&&c[i]===t.constructor&&!0!==t.$vnode.data.keepAlive&&"function"==typeof t.constructor.options.data){var e=t.constructor.options.data.call(t);for(var r in e)o.default.set(t.$data,r,e[r]);l=!0}})),l&&window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),T(r)}))}}function z(t){window.onNuxtReadyCbs.forEach((function(e){"function"==typeof e&&e(t)})),"function"==typeof window._onNuxtLoaded&&window._onNuxtLoaded(t),x.afterEach((function(e,r){o.default.nextTick((function(){return t.$nuxt.$emit("routeChanged",e,r)}))}))}function M(){return(M=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,c,l,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return y=e.app,x=e.router,e.store,r=new o.default(y),n=C.layout||"default",t.next=7,r.loadLayout(n);case 7:return r.setLayout(n),c=function(){r.$mount("#__nuxt"),x.afterEach(D),x.afterEach(N.bind(r)),x.afterEach(I.bind(r)),o.default.nextTick((function(){z(r)}))},t.next=11,Promise.all(S(y.context.route));case 11:if(l=t.sent,r.setTransitions=r.$options.nuxt.setTransitions.bind(r),l.length&&(r.setTransitions(j(l,x.currentRoute)),_=x.currentRoute.matched.map((function(t){return Object(h.c)(t.path)(x.currentRoute.params)}))),r.$loading={},C.error&&r.error(C.error),x.beforeEach($.bind(r)),x.beforeEach(L.bind(r)),!C.serverRendered||!Object(h.n)(C.routePath,r.context.route.path)){t.next=20;break}return t.abrupt("return",c());case 20:return f=function(){D(x.currentRoute,x.currentRoute),N.call(r,x.currentRoute),T(r),c()},t.next=23,new Promise((function(t){return setTimeout(t,0)}));case 23:L.call(r,x.currentRoute,x.currentRoute,(function(path){if(path){var t=x.afterEach((function(e,r){t(),f()}));x.push(path,void 0,(function(t){t&&k(t)}))}else f()}));case 24:case"end":return t.stop()}}),t)})))).apply(this,arguments)}Object(f.b)(null,C.config).then((function(t){return M.apply(this,arguments)})).catch(k)}.call(this,r(44))},186:function(t,e,r){"use strict";r(129)},187:function(t,e,r){"use strict";r(130)},191:function(t,e,r){"use strict";r(131)},192:function(t,e,r){"use strict";r(132)},193:function(t,e,r){"use strict";r(133)},194:function(t,e,r){"use strict";r(134)},195:function(t,e,r){"use strict";r.r(e),r.d(e,"state",(function(){return f})),r.d(e,"mutations",(function(){return d})),r.d(e,"actions",(function(){return m}));var n=r(149),o=r.n(n),c=r(150),l=r.n(c),h=r(107),f=function(){return{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:o.a,en:l.a},config:h.a}},d={toggle:function(t,e){t[e]=!t[e]},setDocVersion:function(t,e){t.docVersion=e},setGhVersion:function(t,e){t.ghVersion=e},setHomepage:function(t,e){t.homepage=e},setFilled:function(t){t.filled=!0},setAdBlocked:function(t,e){t.adBlocked=e},setFocusMode:function(t,e){t.focusMode=e}},v=null,m={focusMode:function(t){var e=t.commit;v||(v=setTimeout((function(){return e("setFocusMode",!0)}),1300))},clearFocusMode:function(t){var e=t.commit;v&&(clearTimeout(v),v=null),e("setFocusMode",!1)}}},30:function(t,e,r){"use strict";r.d(e,"b",(function(){return Ee})),r.d(e,"a",(function(){return D}));r(28),r(16),r(24),r(38),r(39);var n=r(2),o=r(9),c=(r(20),r(17),r(21),r(15),r(32),r(0)),l=r(63),h=r(62),f=r(102),d=r.n(f),v=r(47),m=r.n(v),w=r(103),y=r(19),x=r(1);function _(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function C(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?_(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):_(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}var O=function(){return Object(x.m)(r.e(4).then(r.bind(null,262)))},k=function(){return Object(x.m)(Promise.all([r.e(8),r.e(3)]).then(r.bind(null,261)))},j=function(){};c.default.use(w.a);var $={mode:"history",base:"/handbook/",linkActiveClass:"nuxt-link-active",linkExactActiveClass:"nuxt-link-exact-active",scrollBehavior:function(t){if(t.hash){var e=t.hash.substr(1),r=document.getElementById(decodeURIComponent(e))||document.getElementById(e);r&&r.scrollIntoView&&r.scrollIntoView({behavior:"smooth"})}},routes:[{path:"/en",component:O,name:"index___en"},{path:"/zh",component:O,name:"index___zh"},{path:"/zh/*",component:k,name:"all___zh"},{path:"/en/*",component:k,name:"all___en"},{path:"/",component:O,name:"index"},{path:"/*",component:k,name:"all"}],fallback:!1};function P(t,e){var base=e._app&&e._app.basePath||$.base,r=new w.a(C(C({},$),{},{base:base})),n=r.push;r.push=function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:j,r=arguments.length>2?arguments[2]:void 0;return n.call(this,t,e,r)};var o=r.resolve.bind(r);return r.resolve=function(t,e,r){return"string"==typeof t&&(t=Object(y.c)(t)),o(t,e,r)},r}var E={name:"NuxtChild",functional:!0,props:{nuxtChildKey:{type:String,default:""},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0}},render:function(t,e){var r=e.parent,data=e.data,n=e.props,o=r.$createElement;data.nuxtChild=!0;for(var c=r,l=r.$nuxt.nuxt.transitions,h=r.$nuxt.nuxt.defaultTransition,f=0;r;)r.$vnode&&r.$vnode.data.nuxtChild&&f++,r=r.$parent;data.nuxtChildDepth=f;var d=l[f]||h,v={};S.forEach((function(t){void 0!==d[t]&&(v[t]=d[t])}));var m={};R.forEach((function(t){"function"==typeof d[t]&&(m[t]=d[t].bind(c))}));var w=m.beforeEnter;if(m.beforeEnter=function(t){if(window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")})),w)return w.call(c,t)},!1===d.css){var y=m.leave;(!y||y.length<2)&&(m.leave=function(t,e){y&&y.call(c,t),c.$nextTick(e)})}var x=o("routerView",data);return n.keepAlive&&(x=o("keep-alive",{props:n.keepAliveProps},[x])),o("transition",{props:v,on:m},[x])}},S=["name","mode","appear","css","type","duration","enterClass","leaveClass","appearClass","enterActiveClass","enterActiveClass","leaveActiveClass","appearActiveClass","enterToClass","leaveToClass","appearToClass"],R=["beforeEnter","enter","afterEnter","enterCancelled","beforeLeave","leave","afterLeave","leaveCancelled","beforeAppear","appear","afterAppear","appearCancelled"],L={name:"NuxtError",props:{error:{type:Object,default:null}},computed:{statusCode:function(){return this.error&&this.error.statusCode||500},message:function(){return this.error.message||"Error"}},head:function(){return{title:this.message,meta:[{name:"viewport",content:"width=device-width,initial-scale=1.0,minimum-scale=1.0"}]}}},A=(r(186),r(7)),D=Object(A.a)(L,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"__nuxt-error-page"},[r("div",{staticClass:"error"},[r("svg",{attrs:{xmlns:"http://www.w3.org/2000/svg",width:"90",height:"90",fill:"#DBE1EC",viewBox:"0 0 48 48"}},[r("path",{attrs:{d:"M22 30h4v4h-4zm0-16h4v12h-4zm1.99-10C12.94 4 4 12.95 4 24s8.94 20 19.99 20S44 35.05 44 24 35.04 4 23.99 4zM24 40c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z"}})]),t._v(" "),r("div",{staticClass:"title"},[t._v(t._s(t.message))]),t._v(" "),404===t.statusCode?r("p",{staticClass:"description"},[void 0===t.$route?r("a",{staticClass:"error-link",attrs:{href:"/"}}):r("NuxtLink",{staticClass:"error-link",attrs:{to:"/"}},[t._v("Back to the home page")])],1):t._e(),t._v(" "),t._m(0)])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"logo"},[r("a",{attrs:{href:"https://nuxtjs.org",target:"_blank",rel:"noopener"}},[t._v("Nuxt")])])}],!1,null,null,null).exports,N=r(3),T=(r(99),r(100),{name:"Nuxt",components:{NuxtChild:E,NuxtError:D},props:{nuxtChildKey:{type:String,default:void 0},keepAlive:Boolean,keepAliveProps:{type:Object,default:void 0},name:{type:String,default:"default"}},errorCaptured:function(t){this.displayingNuxtError&&(this.errorFromNuxtError=t,this.$forceUpdate())},computed:{routerViewKey:function(){if(void 0!==this.nuxtChildKey||this.$route.matched.length>1)return this.nuxtChildKey||Object(x.c)(this.$route.matched[0].path)(this.$route.params);var t=Object(N.a)(this.$route.matched,1)[0];if(!t)return this.$route.path;var e=t.components.default;if(e&&e.options){var r=e.options;if(r.key)return"function"==typeof r.key?r.key(this.$route):r.key}return/\/$/.test(t.path)?this.$route.path:this.$route.path.replace(/\/$/,"")}},beforeCreate:function(){c.default.util.defineReactive(this,"nuxt",this.$root.$options.nuxt)},render:function(t){var e=this;return this.nuxt.err?this.errorFromNuxtError?(this.$nextTick((function(){return e.errorFromNuxtError=!1})),t("div",{},[t("h2","An error occurred while showing the error page"),t("p","Unfortunately an error occurred and while showing the error page another error occurred"),t("p","Error details: ".concat(this.errorFromNuxtError.toString())),t("nuxt-link",{props:{to:"/"}},"Go back to home")])):(this.displayingNuxtError=!0,this.$nextTick((function(){return e.displayingNuxtError=!1})),t(D,{props:{error:this.nuxt.err}})):t("NuxtChild",{key:this.routerViewKey,props:this.$props})}}),I=(r(22),r(27),r(25),r(26),{name:"NuxtLoading",data:function(){return{percent:0,show:!1,canSucceed:!0,reversed:!1,skipTimerCount:0,rtl:!1,throttle:200,duration:5e3,continuous:!1}},computed:{left:function(){return!(!this.continuous&&!this.rtl)&&(this.rtl?this.reversed?"0px":"auto":this.reversed?"auto":"0px")}},beforeDestroy:function(){this.clear()},methods:{clear:function(){clearInterval(this._timer),clearTimeout(this._throttle),this._timer=null},start:function(){var t=this;return this.clear(),this.percent=0,this.reversed=!1,this.skipTimerCount=0,this.canSucceed=!0,this.throttle?this._throttle=setTimeout((function(){return t.startTimer()}),this.throttle):this.startTimer(),this},set:function(t){return this.show=!0,this.canSucceed=!0,this.percent=Math.min(100,Math.max(0,Math.floor(t))),this},get:function(){return this.percent},increase:function(t){return this.percent=Math.min(100,Math.floor(this.percent+t)),this},decrease:function(t){return this.percent=Math.max(0,Math.floor(this.percent-t)),this},pause:function(){return clearInterval(this._timer),this},resume:function(){return this.startTimer(),this},finish:function(){return this.percent=this.reversed?0:100,this.hide(),this},hide:function(){var t=this;return this.clear(),setTimeout((function(){t.show=!1,t.$nextTick((function(){t.percent=0,t.reversed=!1}))}),500),this},fail:function(t){return this.canSucceed=!1,this},startTimer:function(){var t=this;this.show||(this.show=!0),void 0===this._cut&&(this._cut=1e4/Math.floor(this.duration)),this._timer=setInterval((function(){t.skipTimerCount>0?t.skipTimerCount--:(t.reversed?t.decrease(t._cut):t.increase(t._cut),t.continuous&&(t.percent>=100||t.percent<=0)&&(t.skipTimerCount=1,t.reversed=!t.reversed))}),100)}},render:function(t){var e=t(!1);return this.show&&(e=t("div",{staticClass:"nuxt-progress",class:{"nuxt-progress-notransition":this.skipTimerCount>0,"nuxt-progress-failed":!this.canSucceed},style:{width:this.percent+"%",left:this.left}})),e}}),z=(r(187),Object(A.a)(I,undefined,undefined,!1,null,null,null).exports),M=(r(188),r(148)),B=r.n(M),F=(r(155),r(58),c.default.extend({name:"SidebarNavItem",props:{item:{type:Object},parentPath:{type:String},level:{type:Number}},computed:{link:function(){return"/"+this.$i18n.locale+"/"+this.path}},data:function(){var path=this.parentPath?this.parentPath+"/"+this.item.dir:this.item.dir,t=(this.$route.params.post+"").startsWith(path);return{get path(){return path},collapsed:this.level>=2&&!t}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}})),U=(r(191),Object(A.a)(F,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return t.item.draft?t._e():r("li",{staticClass:"nav-item"},[t.item.children?t.level>1?r("a",{staticClass:"nav-link",on:{click:t.toggleCollapsed}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))]),t._v(" "),r("span",{class:["glyphicon",t.collapsed?"glyphicon-menu-down":"glyphicon-menu-up"]})]):r("div",{staticClass:"nav-link"},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]):r("nuxt-link",{staticClass:"nav-link",attrs:{to:t.link}},[r("span",{staticClass:"title"},[t._v(t._s(t.item.title))])]),t._v(" "),t.item.draft||!t.item.children||t.collapsed?t._e():r("ul",{class:["nav","bd-sidenav","level"+t.level]},t._l(t.item.children,(function(e){return r("SidebarNavItem",{key:e.dir,attrs:{parentPath:t.path,item:e,level:t.level+1}})})),1)],1)}),[],!1,null,null,null).exports),G=c.default.extend({components:{SidebarNavItem:U},mounted:function(){var t=this.$el.querySelector(".actived");t&&B()(t,{time:0,align:{top:0,topOffset:300},isScrollable:function(t){return!!t.className&&t.className.indexOf("bd-sidebar")>=0}})}}),X=(r(192),Object(A.a)(G,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"},[r("div",{staticClass:"bd-docs-nav"},[r("ul",{staticClass:"nav bd-sidenav nav-root level0"},t._l(t.$store.state.posts[this.$i18n.locale],(function(t){return r("SidebarNavItem",{key:t.dir,attrs:{item:t,parentPath:"",level:1}})})),1)])])}),[],!1,null,null,null).exports),K=Object(A.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("源码(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues(GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("版权"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("活动"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("捐赠"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("鸣谢"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/zh/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/zh/index.html"}},[t._v("首页")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("文档"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/feature.html"}},[t._v("特性")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html"}},[t._v("教程")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/option.html"}},[t._v("配置项手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/changelog.html"}},[t._v("版本记录")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/faq.html"}},[t._v("常见问题")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南"}},[t._v("v5 升级指南"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("下载"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download.html"}},[t._v("下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-theme.html"}},[t._v("主题下载")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/download-extension.html"}},[t._v("扩展下载")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/zh/index.html"}},[t._v("示例")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("资源"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/spreadsheet.html"}},[t._v("表格工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/theme-builder.html"}},[t._v("主题构建工具")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/cheat-sheet.html"}},[t._v("术语速查手册")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/resources.html"}},[t._v("更多资源")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("社区"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/events.html"}},[t._v("活动")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/committers.html"}},[t._v("贡献者列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/maillist.html"}},[t._v("邮件列表")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/contributing.html"}},[t._v("如何贡献")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/dependencies.html"}},[t._v("依赖项")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/coding-standard.html"}},[t._v("代码规范")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/zh/security.html"}},[t._v("安全")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('en')"}},[t._v("EN")])])])}],!1,null,null,null).exports,V=Object(A.a)({},(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("nav",{staticClass:"navbar navbar-default navbar-fixed-top",attrs:{role:"navigation"}},[r("div",{staticClass:"container-fluid"},[t._m(0),r("div",{staticClass:"collapse navbar-collapse",attrs:{id:"navbar-collapse"}},[r("ul",{staticClass:"nav navbar-nav navbar-left"},[t._m(1),t._m(2),t._m(3),t._m(4),t._m(5),r("li",{attrs:{id:"nav-contribute"}},[t._m(6),r("ul",{staticClass:"dropdown-menu"},[t._m(7),t._m(8),t._m(9),t._m(10),t._m(11),t._m(12),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts",target:"_blank"}},[t._v("Source Code (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://github.com/apache/echarts/issues",target:"_blank"}},[t._v("Issues (GitHub)"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])]),r("li",{attrs:{id:"nav-others"}},[t._m(13),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://www.apache.org/",target:"_blank"}},[t._v("Apache Software Foundation"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),t._m(14),r("li",[r("a",{attrs:{href:"https://www.apache.org/licenses/",target:"_blank"}},[t._v("License"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/events/current-event",target:"_blank"}},[t._v("Events"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/sponsorship.html",target:"_blank"}},[t._v("Sponsorship"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])]),r("li",[r("a",{attrs:{href:"https://www.apache.org/foundation/thanks.html",target:"_blank"}},[t._v("Thanks"),r("svg",{staticClass:"icon-external-link",attrs:{width:"15px",height:"15px",viewbox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink"}},[r("path",{attrs:{fill:"currentColor",d:"M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"}}),r("polygon",{attrs:{fill:"currentColor",points:"45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"}})])])])])])]),t._m(15)])])])}),[function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",{staticClass:"navbar-header"},[r("button",{staticClass:"navbar-toggle collapsed",attrs:{type:"button","data-toggle":"collapse","data-target":"#navbar-collapse","aria-expanded":"false"}},[r("span",{staticClass:"sr-only"},[t._v("Toggle navigation")]),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"}),r("span",{staticClass:"icon-bar"})]),r("a",{staticClass:"navbar-brand",attrs:{href:"https://echarts.apache.org/en/index.html"}},[r("img",{staticClass:"navbar-logo",attrs:{src:"https://echarts.apache.org/en/images/logo.png",alt:"echarts logo"}})])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-index"}},[r("a",{attrs:{href:"https://echarts.apache.org/en/index.html"}},[t._v("Home")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-doc"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Docs"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/feature.html"}},[t._v("Features")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html"}},[t._v("Tutorials")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/api.html"}},[t._v("API")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/option.html"}},[t._v("Chart Configuration")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/changelog.html"}},[t._v("Changelog")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/faq.html"}},[t._v("FAQ")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide"}},[t._v("V5 Upgrade Guide"),r("span",{staticClass:"new"},[t._v("new")])])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{staticClass:"dropdown",attrs:{id:"nav-download"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Download"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download.html"}},[t._v("Download")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-theme.html"}},[t._v("Download Themes")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/download-extension.html"}},[t._v("Download Extensions")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-examples"}},[r("a",{attrs:{href:"https://echarts.apache.org/examples/en/index.html"}},[t._v("Examples")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",{attrs:{id:"nav-resources"}},[r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Resources"),r("b",{staticClass:"caret"})]),r("ul",{staticClass:"dropdown-menu"},[r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/spreadsheet.html"}},[t._v("Spread Sheet Tool")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/theme-builder.html"}},[t._v("Theme Builder")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/cheat-sheet.html"}},[t._v("Cheat Sheet")])]),r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/resources.html"}},[t._v("More Resources")])])])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("Community"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/events.html"}},[t._v("Events")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/committers.html"}},[t._v("Committers")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/maillist.html"}},[t._v("Mailing List")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/contributing.html"}},[t._v("How to Contribute")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/dependencies.html"}},[t._v("Dependencies")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/coding-standard.html"}},[t._v("Code Standard")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("a",{staticClass:"dropdown-toggle",attrs:{href:"#","data-toggle":"dropdown"}},[t._v("ASF"),r("b",{staticClass:"caret"})])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("li",[r("a",{attrs:{href:"https://echarts.apache.org/en/security.html"}},[t._v("Security")])])},function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("ul",{staticClass:"nav navbar-nav navbar-right"},[r("li",{attrs:{id:"nav-homeen"}},[r("a",{attrs:{href:"javascript:;",onclick:"changeLang('zh')"}},[t._v("中文")])])])}],!1,null,null,null).exports,H=c.default.extend({components:{},mounted:function(){var t=this.$i18n.locale;window.changeLang=function(){window.location.href=window.location.href.replace("/".concat(t,"/"),"zh"===t?"/en/":"/zh/")}},computed:{navComponent:function(){return"zh"===this.$i18n.locale?K:V}}}),Q=(r(193),{components:{Sidebar:X,Navbar:Object(A.a)(H,(function(){var t=this,e=t.$createElement;return(t._self._c||e)(t.navComponent,{tag:"div"})}),[],!1,null,null,null).exports},mounted:function(){var t=location.hash;location.hash="",location.hash=t},computed:{},methods:{}}),W=(r(194),Object(A.a)(Q,(function(){var t=this,e=t.$createElement,r=t._self._c||e;return r("div",[r("navbar"),t._v(" "),r("div",{staticClass:"page-main"},[r("div",{staticClass:"page-content handbook-content single-page container-fluid row flex-xl-nowrap"},[r("sidebar"),t._v(" "),r("div",{staticClass:"bd-content col-sm-7 pl-sm-2 col-12"},[r("div",{staticClass:"post-content content"},[r("nuxt")],1)])],1),t._v(" "),r("link",{attrs:{rel:"stylesheet",href:"//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"}})])],1)}),[],!1,null,null,null).exports);function Y(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return J(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return J(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function J(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var Z={_default:Object(x.s)(W)},tt={render:function(t,e){var r=t("NuxtLoading",{ref:"loading"}),n=t(this.layout||"nuxt"),o=t("div",{domProps:{id:"__layout"},key:this.layoutName},[n]),c=t("transition",{props:{name:"layout",mode:"out-in"},on:{beforeEnter:function(t){window.$nuxt.$nextTick((function(){window.$nuxt.$emit("triggerScroll")}))}}},[o]);return t("div",{domProps:{id:"__nuxt"}},[r,c])},data:function(){return{isOnline:!0,layout:null,layoutName:"",nbFetching:0}},beforeCreate:function(){c.default.util.defineReactive(this,"nuxt",this.$options.nuxt)},created:function(){this.$root.$options.$nuxt=this,window.$nuxt=this,this.refreshOnlineStatus(),window.addEventListener("online",this.refreshOnlineStatus),window.addEventListener("offline",this.refreshOnlineStatus),this.error=this.nuxt.error,this.context=this.$options.context},mounted:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t.$loading=t.$refs.loading;case 1:case"end":return e.stop()}}),e)})))()},watch:{"nuxt.err":"errorChanged"},computed:{isOffline:function(){return!this.isOnline},isFetching:function(){return this.nbFetching>0},isPreview:function(){return Boolean(this.$options.previewData)}},methods:{refreshOnlineStatus:function(){void 0===window.navigator.onLine?this.isOnline=!0:this.isOnline=window.navigator.onLine},refresh:function(){var t=this;return Object(n.a)(regeneratorRuntime.mark((function e(){var r,n;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if((r=Object(x.h)(t.$route)).length){e.next=3;break}return e.abrupt("return");case 3:return t.$loading.start(),n=r.map((function(e){var p=[];if(e.$options.fetch&&e.$options.fetch.length&&p.push(Object(x.q)(e.$options.fetch,t.context)),e.$fetch)p.push(e.$fetch());else{var r,n=Y(Object(x.e)(e.$vnode.componentInstance));try{for(n.s();!(r=n.n()).done;){var component=r.value;p.push(component.$fetch())}}catch(t){n.e(t)}finally{n.f()}}return e.$options.asyncData&&p.push(Object(x.q)(e.$options.asyncData,t.context).then((function(t){for(var r in t)c.default.set(e.$data,r,t[r])}))),Promise.all(p)})),e.prev=5,e.next=8,Promise.all(n);case 8:e.next=15;break;case 10:e.prev=10,e.t0=e.catch(5),t.$loading.fail(e.t0),Object(x.k)(e.t0),t.error(e.t0);case 15:t.$loading.finish();case 16:case"end":return e.stop()}}),e,null,[[5,10]])})))()},errorChanged:function(){if(this.nuxt.err){this.$loading&&(this.$loading.fail&&this.$loading.fail(this.nuxt.err),this.$loading.finish&&this.$loading.finish());var t=(D.options||D).layout;"function"==typeof t&&(t=t(this.context)),this.setLayout(t)}},setLayout:function(t){return t&&Z["_"+t]||(t="default"),this.layoutName=t,this.layout=Z["_"+t],this.layout},loadLayout:function(t){return t&&Z["_"+t]||(t="default"),Promise.resolve(Z["_"+t])}},components:{NuxtLoading:z}};c.default.use(l.a);var et={};(et=function(t,e){if((t=t.default||t).commit)throw new Error("[nuxt] ".concat(e," should export a method that returns a Vuex instance."));return"function"!=typeof t&&(t=Object.assign({},t)),function(t,e){if(t.state&&"function"!=typeof t.state){console.warn("'state' should be a method that returns an object in ".concat(e));var r=Object.assign({},t.state);t=Object.assign({},t,{state:function(){return r}})}return t}(t,e)}(r(195),"store/index.js")).modules=et.modules||{};var nt=et instanceof Function?et:function(){return new l.a.Store(Object.assign({strict:!1},et))};var at=r(153),ot=(r(42),r(31),r(59),r(60)),it=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c,l,h,f;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=e.app,!e.isHMR){t.next=3;break}return t.abrupt("return");case 3:return t.next=5,r.i18n.__onNavigate(e.route);case 5:n=t.sent,o=Object(N.a)(n,3),c=o[0],l=o[1],h=o[2],c&&l&&(f=h?e.route.query:void 0,e.redirect(c,l,f));case 11:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}();ot.a.nuxti18n=it;var st={COMPONENT_OPTIONS_KEY:"nuxtI18n",STRATEGIES:{PREFIX:"prefix",PREFIX_EXCEPT_DEFAULT:"prefix_except_default",PREFIX_AND_DEFAULT:"prefix_and_default",NO_PREFIX:"no_prefix"}},ct=!0,lt=void 0,ut={vueI18n:{fallbackLocale:"en",messages:{en:{inThisPage:"In This Page"},zh:{inThisPage:"本页目录"}}},vueI18nLoader:!1,locales:["en","zh"],defaultLocale:"en",defaultDirection:"ltr",routesNameSeparator:"___",defaultLocaleRouteNameSuffix:"default",strategy:"prefix",lazy:!1,langDir:null,rootRedirect:null,detectBrowserLanguage:{alwaysRedirect:!1,cookieCrossOrigin:!1,cookieDomain:null,cookieKey:"i18n_redirected",cookieSecure:!1,fallbackLocale:"",onlyOnNoPrefix:!1,onlyOnRoot:!0,useCookie:!0},differentDomains:!1,seo:!1,baseUrl:"",vuex:{moduleName:"i18n",syncLocale:!1,syncMessages:!1,syncRouteParams:!0},parsePages:!0,pages:{},skipSettingLocaleOnNavigate:!1,beforeLanguageSwitch:function(){return null},onBeforeLanguageSwitch:function(){},onLanguageSwitched:function(){return null},normalizedLocales:[{code:"en"},{code:"zh"}],localeCodes:["en","zh"]},ht=r(12),ft=(r(65),r(109),r(64),r(127),r(196),r(104)),pt=r.n(ft);function vt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function mt(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?vt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):vt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function gt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return bt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return bt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function bt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function wt(text){return"[nuxt-i18n] ".concat(text)}function yt(t,e){var r,n=[],o=[],c=gt(t);try{for(c.s();!(r=c.n()).done;){var l=r.value,code=l.code,h=l.iso||code;o.push({code:code,iso:h})}}catch(t){c.e(t)}finally{c.f()}var f,d=gt(e.entries());try{var v=function(){var t=Object(N.a)(f.value,2),r=t[0],c=t[1],l=o.find((function(t){return t.iso.toLowerCase()===c.toLowerCase()}));if(l)return n.push({code:l.code,score:1-r/e.length}),"break"};for(d.s();!(f=d.n()).done;){if("break"===v())break}}catch(t){d.e(t)}finally{d.f()}var m,w=gt(e.entries());try{var y=function(){var t=Object(N.a)(m.value,2),r=t[0],c=t[1].split("-")[0].toLowerCase(),l=o.find((function(t){return t.iso.split("-")[0].toLowerCase()===c}));if(l)return n.push({code:l.code,score:.999-r/e.length}),"break"};for(w.s();!(m=w.n()).done;){if("break"===y())break}}catch(t){w.e(t)}finally{w.f()}return n.length>1&&n.sort((function(t,e){return t.score===e.score?e.code.length-t.code.length:e.score-t.score})),n.length?n[0].code:void 0}function xt(t,e,r,n){var o=n.differentDomains,c=n.normalizedLocales;if("function"==typeof t)return t(e);if(o&&r){var l=_t(r,e.req,{normalizedLocales:c});if(l)return l}return t}function _t(t,e,r){var n,o=r.normalizedLocales.find((function(e){return e.code===t}));if(o&&o.domain)return n=window.location.protocol.split(":")[0],"".concat(n,"://").concat(o.domain);console.warn(wt("Could not find domain name for locale ".concat(t)))}function Ct(t,e){var r;if(r=window.location.host){var n=t.find((function(t){return t.domain===r}));if(n)return n.code}return""}function Ot(t){return new RegExp("^/(".concat(t.join("|"),")(?:/|$)"),"i")}function kt(t,e){var r=e.routesNameSeparator,n=e.defaultLocaleRouteNameSuffix,o="(".concat(t.join("|"),")"),c="(?:".concat(r).concat(n,")?"),l=new RegExp("".concat(r).concat(o).concat(c,"$"),"i"),h=Ot(t);return function(t){if(t.name){var e=t.name.match(l);if(e&&e.length>1)return e[1]}else if(t.path){var r=t.path.match(h);if(r&&r.length>1)return r[1]}return""}}function jt(t,e){var r,n=e.useCookie,o=e.cookieKey,c=e.localeCodes;if(n&&((r=pt.a.get(o))&&c.includes(r)))return r}function $t(t,e,r){var n=r.useCookie,o=r.cookieDomain,c=r.cookieKey,l=r.cookieSecure,h=r.cookieCrossOrigin;if(n){var f=new Date,d={expires:new Date(f.setDate(f.getDate()+365)),path:"/",sameSite:h?"none":"lax",secure:h||l};o&&(d.domain=o),pt.a.set(c,t,d)}}function Pt(t,e,r){var n={namespaced:!0,state:function(){return mt(mt(mt({},e.syncLocale?{locale:""}:{}),e.syncMessages?{messages:{}}:{}),e.syncRouteParams?{routeParams:{}}:{})},actions:mt(mt(mt({},e.syncLocale?{setLocale:function(t,e){(0,t.commit)("setLocale",e)}}:{}),e.syncMessages?{setMessages:function(t,e){(0,t.commit)("setMessages",e)}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){(0,t.commit)("setRouteParams",e)}}:{}),mutations:mt(mt(mt({},e.syncLocale?{setLocale:function(t,e){t.locale=e}}:{}),e.syncMessages?{setMessages:function(t,e){t.messages=e}}:{}),e.syncRouteParams?{setRouteParams:function(t,e){t.routeParams=e}}:{}),getters:mt({},e.syncRouteParams?{localeRouteParams:function(t){var e=t.routeParams;return function(t){return e&&e[t]||{}}}}:{})};t.registerModule(e.moduleName,n,{preserveState:!!t.state[e.moduleName]})}function Et(t){return St.apply(this,arguments)}function St(){return(St=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,n,o,c=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r=c.length>1&&void 0!==c[1]?c[1]:null,n=c.length>2&&void 0!==c[2]?c[2]:null,!(o=c.length>3?c[3]:void 0)||!e){t.next=10;break}if(null===r||!o.syncLocale){t.next=7;break}return t.next=7,e.dispatch(o.moduleName+"/setLocale",r);case 7:if(null===n||!o.syncMessages){t.next=10;break}return t.next=10,e.dispatch(o.moduleName+"/setMessages",n);case 10:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var Rt=["params"];function Lt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function At(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Lt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Lt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Dt(t,e){var r=It.call(this,t,e);return r?r.route.fullPath:""}function Nt(t,e){var r=It.call(this,t,e);return r?r.route:void 0}function Tt(t,e){var r=It.call(this,t,e);return r?r.location:void 0}function It(t,e){if(t){var r=this.i18n;if(e=e||r.locale){"string"==typeof t&&(t="/"===t[0]?{path:t}:{name:t});var n=Object.assign({},t);if(n.path&&!n.name){var o=this.router.resolve(n).route,c=this.getRouteBaseName(o);if(c)n={name:Bt(c,e),params:o.params,query:o.query,hash:o.hash};else!(e===ut.defaultLocale&&[st.STRATEGIES.PREFIX_EXCEPT_DEFAULT,st.STRATEGIES.PREFIX_AND_DEFAULT].includes(ut.strategy)||ut.strategy===st.STRATEGIES.NO_PREFIX||r.differentDomains)&&(n.path="/".concat(e).concat(n.path)),n.path=n.path.replace(/\/+$/,"")+(lt?"/":"")||"/"}else{n.name||n.path||(n.name=this.getRouteBaseName()),n.name=Bt(n.name,e);var l=n.params;l&&void 0===l[0]&&l.pathMatch&&(l[0]=l.pathMatch)}var h=this.router.resolve(n);return h.route.name?h:this.router.resolve(t)}}}function zt(t){var e=this.getRouteBaseName();if(!e)return"";var r=this.i18n,n=this.route,o=this.store,c=n.params,l=Object(at.a)(n,Rt),h={};ut.vuex&&ut.vuex.syncRouteParams&&o&&(h=o.getters["".concat(ut.vuex.moduleName,"/localeRouteParams")](t));var f=Object.assign({},l,{name:e,params:At(At(At({},c),h),{},{0:c.pathMatch})}),path=this.localePath(f,t);if(r.differentDomains){var d={differentDomains:r.differentDomains,normalizedLocales:ut.normalizedLocales},v=_t(t,this.req,d);v&&(path=v+path)}return path}function Mt(t){var e=void 0!==t?t:this.route;if(e&&e.name)return e.name.split(ut.routesNameSeparator)[0]}function Bt(t,e){var r=t+(ut.strategy===st.STRATEGIES.NO_PREFIX?"":ut.routesNameSeparator+e);return e===ut.defaultLocale&&ut.strategy===st.STRATEGIES.PREFIX_AND_DEFAULT&&(r+=ut.routesNameSeparator+ut.defaultLocaleRouteNameSuffix),r}var Ft=function(t){return function(){var e={getRouteBaseName:this.getRouteBaseName,i18n:this.$i18n,localePath:this.localePath,localeRoute:this.localeRoute,localeLocation:this.localeLocation,req:null,route:this.$route,router:this.$router,store:this.$store};return t.call.apply(t,[e].concat(Array.prototype.slice.call(arguments)))}},Ut=function(t,e){return function(){var r=t.app,n=(t.req,t.route),o=t.store,c={getRouteBaseName:r.getRouteBaseName,i18n:r.i18n,localePath:r.localePath,localeLocation:r.localeLocation,localeRoute:r.localeRoute,req:null,route:n,router:r.router,store:o};return e.call.apply(e,[c].concat(Array.prototype.slice.call(arguments)))}},qt={install:function(t){t.mixin({methods:{localePath:Ft(Dt),localeRoute:Ft(Nt),localeLocation:Ft(Tt),switchLocalePath:Ft(zt),getRouteBaseName:Ft(Mt)}})}},Gt=function(t){c.default.use(qt);var e=t.app,r=t.store;e.localePath=t.localePath=Ut(t,Dt),e.localeRoute=t.localeRoute=Ut(t,Nt),e.localeLocation=t.localeLocation=Ut(t,Tt),e.switchLocalePath=t.switchLocalePath=Ut(t,zt),e.getRouteBaseName=t.getRouteBaseName=Ut(t,Mt),r&&(r.localePath=e.localePath,r.localeRoute=e.localeRoute,r.localeLocation=e.localeLocation,r.switchLocalePath=e.switchLocalePath,r.getRouteBaseName=e.getRouteBaseName)},Xt=r(105),Kt=r(46);r(197);function Vt(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function Ht(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Vt(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Vt(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}function Qt(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return Wt(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return Wt(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function Wt(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}function Yt(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.addDirAttribute,r=void 0===e||e,n=t.addSeoAttributes,o=void 0!==n&&n;if(!this.$i18n)return{};var c={htmlAttrs:{},link:[],meta:[]},l=this.$i18n.localeProperties,f=l.iso,d=l.dir||ut.defaultDirection;if(r&&(c.htmlAttrs.dir=d),o&&(h.a.hasMetaInfo?h.a.hasMetaInfo(this):this._hasMetaInfo)&&this.$i18n.locale&&this.$i18n.locales&&!1!==this.$options[st.COMPONENT_OPTIONS_KEY]&&(!this.$options[st.COMPONENT_OPTIONS_KEY]||!1!==this.$options[st.COMPONENT_OPTIONS_KEY].seo)){f&&(c.htmlAttrs.lang=f);var v=this.$i18n.locales;m.bind(this)(v,this.$i18n.__baseUrl,c.link),w.bind(this)(this.$i18n.__baseUrl,c.link),y.bind(this)(l,f,c.meta),x.bind(this)(v,f,c.meta)}function m(t,e,link){if(ut.strategy!==st.STRATEGIES.NO_PREFIX){var r,n=new Map,o=Qt(t);try{for(o.s();!(r=o.n()).done;){var c=r.value,l=c.iso;if(l){var h=l.split("-"),f=Object(N.a)(h,2),d=f[0],v=f[1];d&&v&&(c.isCatchallLocale||!n.has(d))&&n.set(d,c),n.set(l,c)}else console.warn(wt("Locale ISO code is required to generate alternate link"))}}catch(t){o.e(t)}finally{o.f()}var m,w=Qt(n.entries());try{for(w.s();!(m=w.n()).done;){var y=Object(N.a)(m.value,2),x=y[0],_=y[1],O=this.switchLocalePath(_.code);O&&link.push({hid:"i18n-alt-".concat(x),rel:"alternate",href:C(O,e),hreflang:x})}}catch(t){w.e(t)}finally{w.f()}if(ut.defaultLocale){var k=this.switchLocalePath(ut.defaultLocale);k&&link.push({hid:"i18n-xd",rel:"alternate",href:C(k,e),hreflang:"x-default"})}}}function w(t,link){var e=this.localeRoute(Ht(Ht({},this.$route),{},{name:this.getRouteBaseName()})),r=e?e.path:null;r&&link.push({hid:"i18n-can",rel:"canonical",href:C(r,t)})}function y(t,e,meta){t&&e&&meta.push({hid:"i18n-og",property:"og:locale",content:_(e)})}function x(t,e,meta){var r=t.filter((function(t){var r=t.iso;return r&&r!==e}));if(r.length){var n=r.map((function(t){return{hid:"i18n-og-alt-".concat(t.iso),property:"og:locale:alternate",content:_(t.iso)}}));meta.push.apply(meta,Object(Kt.a)(n))}}function _(t){return(t||"").replace(/-/g,"_")}function C(t,e){return t.match(/^https?:\/\//)?t:e+t}return c}function Jt(){return Yt.call(this,{addDirAttribute:!1,addSeoAttributes:!0})}function Zt(t,e){return te.apply(this,arguments)}function te(){return(te=Object(n.a)(regeneratorRuntime.mark((function t(e,r){var n,o,c;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=e.app,(o=n.i18n).loadedLanguages||(o.loadedLanguages=[]),o.loadedLanguages.includes(r)||((c=ut.normalizedLocales.find((function(t){return t.code===r})))?c.file||console.warn(wt("Could not find lang file for locale ".concat(r))):console.warn(wt('Attempted to load messages for non-existant locale code "'.concat(r,'"'))));case 4:case"end":return t.stop()}}),t)})))).apply(this,arguments)}var ee=r(48);function re(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return ne(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return ne(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function ne(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}c.default.use(Xt.a);var ae=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,l,h,f,d,v,m,w,x,_,C,O,k,j,$,P,E,S,R,L,A,D,T,I,z,M,B,F,U,G,X,K,V,H,Q,W,Y;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:r=e.app,o=e.route,l=e.store,h=e.req,e.res,f=e.redirect,ut.vuex&&l&&Pt(l,ut.vuex,ut.localeCodes),d=ut.lazy,d&&(!0===d||!0!==d.skipNuxtState),t.next=9;break;case 7:v=t.sent.default,e.beforeNuxtRender((function(t){var e=t.nuxtState,n={},o=r.i18n,c=o.fallbackLocale,l=o.locale;if(l&&l!==c){var h=r.i18n._getMessages()[l];if(h)try{v(h),n[l]=h}catch(t){}}e.__i18n={langs:n}}));case 9:if(m=ut.detectBrowserLanguage,w=m.alwaysRedirect,x=m.fallbackLocale,_=m.onlyOnNoPrefix,C=m.onlyOnRoot,O=m.useCookie,k=m.cookieKey,j=m.cookieDomain,$=m.cookieSecure,P=m.cookieCrossOrigin,E=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,c,h,d,v,m,w,y,x,_=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(o=_.length>1&&void 0!==_[1]?_[1]:{},c=o.initialSetup,h=void 0!==c&&c,n){t.next=3;break}return t.abrupt("return");case 3:if(h||!r.i18n.differentDomains){t.next=5;break}return t.abrupt("return");case 5:if(d=r.i18n.locale,n!==d){t.next=8;break}return t.abrupt("return");case 8:if(!(v=r.i18n.onBeforeLanguageSwitch(d,n,h,e))||!r.i18n.localeCodes.includes(v)){t.next=13;break}if(v!==d){t.next=12;break}return t.abrupt("return");case 12:n=v;case 13:if(h||r.i18n.beforeLanguageSwitch(d,n),O&&r.i18n.setLocaleCookie(n),!ut.langDir){t.next=29;break}if(m=r.i18n.fallbackLocale,!ut.lazy){t.next=27;break}if(!m){t.next=23;break}return w=[],Array.isArray(m)?w=m.map((function(t){return Zt(e,t)})):"object"===Object(ht.a)(m)?(m[n]&&(w=w.concat(m[n].map((function(t){return Zt(e,t)})))),m.default&&(w=w.concat(m.default.map((function(t){return Zt(e,t)}))))):n!==m&&w.push(Zt(e,m)),t.next=23,Promise.all(w);case 23:return t.next=25,Zt(e,n);case 25:t.next=29;break;case 27:return t.next=29,Promise.all(ut.localeCodes.map((function(t){return Zt(e,t)})));case 29:if(r.i18n.locale=n,r.i18n.localeProperties=Object(ee.a)(ut.locales.find((function(t){return t.code===n}))||{code:n}),!ut.vuex){t.next=34;break}return t.next=34,Et(l,n,r.i18n.getLocaleMessage(n),ut.vuex);case 34:y=e.route,x=R(y,n),h?r.i18n.__redirect=x:(r.i18n.onLanguageSwitched(d,n),x&&f(x));case 37:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),S=kt(ut.localeCodes,{routesNameSeparator:ut.routesNameSeparator,defaultLocaleRouteNameSuffix:ut.defaultLocaleRouteNameSuffix}),R=function(t,e){if(!e||r.i18n.differentDomains||ut.strategy===st.STRATEGIES.NO_PREFIX)return"";if(S(t)===e&&(!C&&!_||e!==ut.defaultLocale||ut.strategy!==st.STRATEGIES.PREFIX_AND_DEFAULT))return"";var n=r.switchLocalePath(e);return n||(n=r.localePath(t.fullPath,e)),!n||n===t.fullPath||n.startsWith("//")?"":n},L=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(n){var o,path,c,l,h;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if("/"!==n.path||!ut.rootRedirect){t.next=5;break}return o=302,path=ut.rootRedirect,"string"!=typeof ut.rootRedirect&&(o=ut.rootRedirect.statusCode,path=ut.rootRedirect.path),t.abrupt("return",[o,"/".concat(path),!0]);case 5:if(!(c=r.i18n.__redirect)){t.next=9;break}return r.i18n.__redirect=null,t.abrupt("return",[302,c]);case 9:if(l={differentDomains:ut.differentDomains,normalizedLocales:ut.normalizedLocales},r.i18n.__baseUrl=xt(ut.baseUrl,e,r.i18n.locale,l),h=ut.detectBrowserLanguage&&I(n)||S(n)||r.i18n.locale||r.i18n.defaultLocale||"",!ut.skipSettingLocaleOnNavigate){t.next=17;break}r.i18n.__pendingLocale=h,r.i18n.__pendingLocalePromise=new Promise((function(t){r.i18n.__resolvePendingLocalePromise=t})),t.next=19;break;case 17:return t.next=19,r.i18n.setLocale(h);case 19:return t.abrupt("return",[null,null]);case 20:case"end":return t.stop()}}),t)})));return function(e){return t.apply(this,arguments)}}(),A=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(r.i18n.__pendingLocale){t.next=2;break}return t.abrupt("return");case 2:return t.next=4,r.i18n.setLocale(r.i18n.__pendingLocale);case 4:r.i18n.__resolvePendingLocalePromise(""),r.i18n.__pendingLocale=null;case 6:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),D=function(){var t=Object(n.a)(regeneratorRuntime.mark((function t(){return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!r.i18n.__pendingLocale){t.next=3;break}return t.next=3,r.i18n.__pendingLocalePromise;case 3:case"end":return t.stop()}}),t)})));return function(){return t.apply(this,arguments)}}(),T=function(){return"undefined"!=typeof navigator&&navigator.languages?yt(ut.normalizedLocales,navigator.languages):h&&void 0!==h.headers["accept-language"]?yt(ut.normalizedLocales,h.headers["accept-language"].split(",").map((function(t){return t.split(";")[0]}))):void 0},I=function(t){if(ut.strategy!==st.STRATEGIES.NO_PREFIX)if(C){if("/"!==t.path)return""}else if(_&&!w&&t.path.match(Ot(ut.localeCodes)))return"";var e;O&&(e=r.i18n.getLocaleCookie())||(e=T());var n=e||x;return!n||O&&!w&&r.i18n.getLocaleCookie()||n===r.i18n.locale?"":n},z=function(t){t.locales=Object(ee.a)(ut.locales),t.localeCodes=Object(ee.a)(ut.localeCodes),t.localeProperties=Object(ee.a)(ut.normalizedLocales.find((function(e){return e.code===t.locale}))||{code:t.locale}),t.defaultLocale=ut.defaultLocale,t.differentDomains=ut.differentDomains,t.beforeLanguageSwitch=ut.beforeLanguageSwitch,t.onBeforeLanguageSwitch=ut.onBeforeLanguageSwitch,t.onLanguageSwitched=ut.onLanguageSwitched,t.setLocaleCookie=function(t){return $t(t,0,{useCookie:O,cookieDomain:j,cookieKey:k,cookieSecure:$,cookieCrossOrigin:P})},t.getLocaleCookie=function(){return jt(0,{useCookie:O,cookieKey:k,localeCodes:ut.localeCodes})},t.setLocale=function(t){return E(t)},t.getBrowserLocale=function(){return T()},t.finalizePendingLocaleChange=A,t.waitForPendingLocaleChange=D,t.__baseUrl=r.i18n.__baseUrl,t.__pendingLocale=r.i18n.__pendingLocale,t.__pendingLocalePromise=r.i18n.__pendingLocalePromise,t.__resolvePendingLocalePromise=r.i18n.__resolvePendingLocalePromise},"function"!=typeof ut.vueI18n){t.next=25;break}return t.next=22,ut.vueI18n(e);case 22:t.t0=t.sent,t.next=26;break;case 25:t.t0=Object(ee.a)(ut.vueI18n);case 26:if((M=t.t0).componentInstanceCreatedListener=z,r.i18n=e.i18n=new Xt.a(M),r.i18n.locale="",r.i18n.fallbackLocale=M.fallbackLocale||"",z(r.i18n),B={differentDomains:ut.differentDomains,normalizedLocales:ut.normalizedLocales},r.i18n.__baseUrl=xt(ut.baseUrl,e,"",B),r.i18n.__onNavigate=L,c.default.prototype.$nuxtI18nSeo=Jt,c.default.prototype.$nuxtI18nHead=Yt,!l){t.next=58;break}if(l.$i18n=r.i18n,!l.state.localeDomains){t.next=58;break}F=re(r.i18n.locales),t.prev=41,F.s();case 43:if((U=F.n()).done){t.next=50;break}if("string"!=typeof(G=U.value)){t.next=47;break}return t.abrupt("continue",48);case 47:G.domain=l.state.localeDomains[G.code];case 48:t.next=43;break;case 50:t.next=55;break;case 52:t.prev=52,t.t1=t.catch(41),F.e(t.t1);case 55:return t.prev=55,F.f(),t.finish(55);case 58:return(X=ut.detectBrowserLanguage?I(o):"")||((K=ut.vuex)&&K.syncLocale&&l&&""!==l.state[K.moduleName].locale?X=l.state[K.moduleName].locale:r.i18n.differentDomains?(V=Ct(ut.normalizedLocales),X=V):ut.strategy!==st.STRATEGIES.NO_PREFIX?(H=S(o),X=H):O&&(X=r.i18n.getLocaleCookie())),X||(X=r.i18n.defaultLocale||""),t.next=63,E(X,{initialSetup:!0});case 63:if(!ct){t.next=71;break}return t.next=66,L(e.route);case 66:Q=t.sent,W=Object(N.a)(Q,2),W[0],(Y=W[1])&&location.assign(Object(y.b)(e.base,Y));case 71:case"end":return t.stop()}}),t,null,[[41,52,55,58]])})));return function(e){return t.apply(this,arguments)}}(),oe=r(106),ie=r.n(oe);function se(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function ce(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return le(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return le(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,c=!0,l=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return c=t.done,t},e:function(t){l=!0,o=t},f:function(){try{c||null==r.return||r.return()}finally{if(l)throw o}}}}function le(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var ue=["class-name","class","style"],he=/^@|^v-on:/,fe=/^:|^v-bind:/,pe=/^v-model/,de=["select","textarea","input"];function ve(code,t){return new Function("with(this) { return ("+code+") }").call(t)}function me(t,e,r){if("text"===t.type)return t.value;var n,o=function(t,e,r){var data={};return(t.children||[]).forEach((function(t){if(we(t)&&!be(t)){data.scopedSlots=data.scopedSlots||{};var template=t,n=ye(template),o=template.content.map((function(t){return me(t,e,r)}));data.scopedSlots[n]=function(){return o}}})),data}(t||{},e,r),c=function(t,e){var r=t.tag,n=t.props;return Object.keys(n).reduce((function(data,t){var o=t.replace(/.*:/,""),c=ue.includes(o)?data:data.attrs,l=n[t],h=ie.a.find(ie.a.html,t).attribute,f=de.includes(r);if(pe.test(t)&&l in e&&!f){var d=t.replace(pe,"").split(".").filter((function(t){return t})).reduce((function(t,e){return t[e]=!0,t}),{}),v=d.lazy?"change":"input",m=d.number?function(t){return+t}:d.trim?function(t){return t.trim()}:function(t){return t};c.value=ve(l,e),data.on=data.on||{},data.on[v]=function(t){return e[l]=m(t)}}else if("v-bind"===t){var w=l in e?e[l]:ve(l,e);c=Object.assign(c,w)}else he.test(t)?(t=t.replace(he,""),data.on=data.on||{},data.on[t]=ve(l,e)):fe.test(t)?c[t=t.replace(fe,"")]=l in e?e[l]:ve(l,e):Array.isArray(l)?c[h]=l.join(" "):c[h]=l;return data}),{attrs:{}})}(t||{},r),data=Object.assign({},o,c),l=[],h=ce(t.children);try{for(h.s();!(n=h.n()).done;){var f=n.value;if(!we(f)||be(f)){var d=be(f)?f.content:[f];l.push.apply(l,Object(Kt.a)(d.map((function(t){return me(t,e,r)}))))}}}catch(t){h.e(t)}finally{h.f()}return e(t.tag,data,l)}var ge="default";function be(t){return we(t)&&ye(t)===ge}function we(t){return"template"===t.tag}function ye(t){for(var e="",r=0,n=Object.keys(t.props);r<n.length;r++){var o=n[r];if(o.startsWith("#")||o.startsWith("v-slot:")){e=o.split(/[:#]/,2)[1];break}}return e||ge}var xe={name:"NuxtContent",functional:!0,props:{document:{required:!0}},render:function(t,e){var data=e.data,r=e.props.document,body=(r||{}).body;if(body&&body.children&&Array.isArray(body.children)){var n=[];if(Array.isArray(data.class))n=data.class;else if("object"===Object(ht.a)(data.class)){n=Object.keys(data.class).filter((function(t){return data.class[t]}))}else n=[data.class];return data.class=n.concat("nuxt-content"),data.props=Object.assign(function(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?se(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):se(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}({},body.props),data.props),t("div",data,body.children.map((function(e){return me(e,t,r)})))}}},_e=function(){return Promise.all([r.e(7),r.e(2)]).then(r.bind(null,260))};c.default.component(xe.name,xe);var Ce=function(t,e){var r=null,o=(t.$config?t.$config.content:t.nuxtState.content).dbHash,c=function(){for(var t=arguments.length,e=new Array(t),c=0;c<t;c++)e[c]=arguments[c];if(r)return r.apply(void 0,e);for(var l=["only","without","sortBy","limit","skip","where","search","surround"],h={},f=[],d=function(){var t=m[v];h[t]=function(){for(var e=arguments.length,r=new Array(e),n=0;n<e;n++)r[n]=arguments[n];return f.push({key:t,args:r}),h}},v=0,m=l;v<m.length;v++)d();return h.fetch=Object(n.a)(regeneratorRuntime.mark((function t(){var n,c;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,fetch("/handbook/_nuxt/content/db-".concat(o,".json")).then((function(t){return t.json()}));case 2:return n=t.sent,t.next=5,_e();case 5:return r=t.sent.default(n),c=r.apply(void 0,e),f.forEach((function(t){var e,r=t.key,n=t.args;c=(e=c)[r].apply(e,Object(Kt.a)(n))})),t.abrupt("return",c.fetch());case 9:case"end":return t.stop()}}),t)}))),h};e("content",c),t.$content=c};r(151);function Oe(object,t){var e=Object.keys(object);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(object);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(object,t).enumerable}))),e.push.apply(e,r)}return e}function ke(t){for(var i=1;i<arguments.length;i++){var source=null!=arguments[i]?arguments[i]:{};i%2?Oe(Object(source),!0).forEach((function(e){Object(o.a)(t,e,source[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(source)):Oe(Object(source)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(source,e))}))}return t}c.default.component(d.a.name,d.a),c.default.component(m.a.name,ke(ke({},m.a),{},{render:function(t,e){return m.a._warned||(m.a._warned=!0,console.warn("<no-ssr> has been deprecated and will be removed in Nuxt 3, please use <client-only> instead")),m.a.render(t,e)}})),c.default.component(E.name,E),c.default.component("NChild",E),c.default.component(T.name,T),Object.defineProperty(c.default.prototype,"$nuxt",{get:function(){var t=this.$root.$options.$nuxt;return t||"undefined"==typeof window?t:window.$nuxt},configurable:!0}),c.default.use(h.a,{keyName:"head",attribute:"data-n-head",ssrAttribute:"data-n-head-ssr",tagIDKeyName:"hid"});var je={name:"page",mode:"out-in",appear:!1,appearClass:"appear",appearActiveClass:"appear-active",appearToClass:"appear-to"},$e=l.a.Store.prototype.registerModule;function Pe(path,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=Array.isArray(path)?!!path.reduce((function(t,path){return t&&t[path]}),this.state):path in this.state;return $e.call(this,path,t,ke({preserveState:r},e))}function Ee(t){return Se.apply(this,arguments)}function Se(){return(Se=Object(n.a)(regeneratorRuntime.mark((function t(e){var r,o,l,h,f,d,path,v,m=arguments;return regeneratorRuntime.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return v=function(t,e){if(!t)throw new Error("inject(key, value) has no key provided");if(void 0===e)throw new Error("inject('".concat(t,"', value) has no value provided"));h[t="$"+t]=e,h.context[t]||(h.context[t]=e),l[t]=h[t];var r="__nuxt_"+t+"_installed__";c.default[r]||(c.default[r]=!0,c.default.use((function(){Object.prototype.hasOwnProperty.call(c.default.prototype,t)||Object.defineProperty(c.default.prototype,t,{get:function(){return this.$root.$options[t]}})})))},r=m.length>1&&void 0!==m[1]?m[1]:{},t.next=4,P(0,r);case 4:return o=t.sent,(l=nt(e)).$router=o,l.registerModule=Pe,h=ke({head:{title:"Handbook - Apache ECharts",meta:[{charset:"utf-8"},{name:"viewport",content:"width=device-width, initial-scale=1"},{hid:"description",name:"description",content:"Apache ECharts Handbook"}],link:[{rel:"icon",type:"image/x-icon",href:"https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"}],style:[],script:[]},store:l,router:o,nuxt:{defaultTransition:je,transitions:[je],setTransitions:function(t){return Array.isArray(t)||(t=[t]),t=t.map((function(t){return t=t?"string"==typeof t?Object.assign({},je,{name:t}):Object.assign({},je,t):je})),this.$options.nuxt.transitions=t,t},err:null,dateErr:null,error:function(t){t=t||null,h.context._errored=Boolean(t),t=t?Object(x.p)(t):null;var r=h.nuxt;return this&&(r=this.nuxt||this.$options.nuxt),r.dateErr=Date.now(),r.err=t,e&&(e.nuxt.error=t),t}}},tt),l.app=h,f=e?e.next:function(t){return h.router.push(t)},e?d=o.resolve(e.url).route:(path=Object(x.f)(o.options.base,o.options.mode),d=o.resolve(path).route),t.next=14,Object(x.t)(h,{store:l,route:d,next:f,error:h.nuxt.error.bind(h),payload:e?e.payload:void 0,req:e?e.req:void 0,res:e?e.res:void 0,beforeRenderFns:e?e.beforeRenderFns:void 0,ssrContext:e});case 14:return v("config",r),window.__NUXT__&&window.__NUXT__.state&&l.replaceState(window.__NUXT__.state),h.context.enablePreview=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};h.previewData=Object.assign({},t),v("preview",t)},t.next=20,Gt(h.context);case 20:if("function"!=typeof ae){t.next=23;break}return t.next=23,ae(h.context,v);case 23:return t.next=26,Ce(h.context,v);case 26:t.next=29;break;case 29:return h.context.enablePreview=function(){console.warn("You cannot call enablePreview() outside a plugin.")},t.next=32,new Promise((function(t,e){o.replace(h.context.route.fullPath,t,(function(r){if(!r._isRouter)return e(r);if(2!==r.type)return t();var c=o.afterEach(function(){var e=Object(n.a)(regeneratorRuntime.mark((function e(r,n){return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=3,Object(x.j)(r);case 3:h.context.route=e.sent,h.context.params=r.params||{},h.context.query=r.query||{},c(),t();case 8:case"end":return e.stop()}}),e)})));return function(t,r){return e.apply(this,arguments)}}())}))}));case 32:return t.abrupt("return",{store:l,app:h,router:o});case 33:case"end":return t.stop()}}),t)})))).apply(this,arguments)}},60:function(t,e,r){"use strict";e.a={}},77:function(t,e,r){"use strict";r(42),r(31),r(21),r(24),r(15),r(22),r(17),r(16),r(27),r(25),r(26);var n=r(0);function o(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return c(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return c(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,l=!0,h=!1;return{s:function(){r=r.call(t)},n:function(){var t=r.next();return l=t.done,t},e:function(t){h=!0,o=t},f:function(){try{l||null==r.return||r.return()}finally{if(h)throw o}}}}function c(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,r=new Array(e);i<e;i++)r[i]=t[i];return r}var l=window.requestIdleCallback||function(t){var e=Date.now();return setTimeout((function(){t({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-e))}})}),1)},h=window.cancelIdleCallback||function(t){clearTimeout(t)},f=window.IntersectionObserver&&new window.IntersectionObserver((function(t){t.forEach((function(t){var e=t.intersectionRatio,link=t.target;e<=0||!link.__prefetch||link.__prefetch()}))}));e.a={name:"NuxtLink",extends:n.default.component("RouterLink"),props:{prefetch:{type:Boolean,default:!0},noPrefetch:{type:Boolean,default:!1}},mounted:function(){this.prefetch&&!this.noPrefetch&&(this.handleId=l(this.observe,{timeout:2e3}))},beforeDestroy:function(){h(this.handleId),this.__observed&&(f.unobserve(this.$el),delete this.$el.__prefetch)},methods:{observe:function(){f&&this.shouldPrefetch()&&(this.$el.__prefetch=this.prefetchLink.bind(this),f.observe(this.$el),this.__observed=!0)},shouldPrefetch:function(){return this.getPrefetchComponents().length>0},canPrefetch:function(){var t=navigator.connection;return!(this.$nuxt.isOffline||t&&((t.effectiveType||"").includes("2g")||t.saveData))},getPrefetchComponents:function(){return this.$router.resolve(this.to,this.$route,this.append).resolved.matched.map((function(t){return t.components.default})).filter((function(t){return"function"==typeof t&&!t.options&&!t.__prefetched}))},prefetchLink:function(){if(this.canPrefetch()){f.unobserve(this.$el);var t,e=o(this.getPrefetchComponents());try{for(e.s();!(t=e.n()).done;){var r=t.value,n=r();n instanceof Promise&&n.catch((function(){})),r.__prefetched=!0}}catch(t){e.e(t)}finally{e.f()}}}}}}},[[156,5,1,6]]]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/ef9fabb5ed35c901c904.js b/handbook/_nuxt/js/ef9fabb5ed35c901c904.js
new file mode 100644
index 0000000..91c6c51
--- /dev/null
+++ b/handbook/_nuxt/js/ef9fabb5ed35c901c904.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[37],{331:function(n,w,o){"use strict";o.r(w),w.default=""}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f1d89856a413be3573ba.js b/handbook/_nuxt/js/f1d89856a413be3573ba.js
new file mode 100644
index 0000000..ee80323
--- /dev/null
+++ b/handbook/_nuxt/js/f1d89856a413be3573ba.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[57],{351: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 need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:\n\n```js live\noption = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\nUse scrollable control if there are many legends.\n\n```js\noption = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']\n // ...\n }\n // ...\n};\n```\n\n## Style\n\nFor dark color background, use a light color for the background layer and text while changing the background to translucent.\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\nThe color of legend has many ways to design. For different charts, the legend style can be different.\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## Interactive\n\nDepend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:\n\n```js\noption = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n selected: {\n 'Legend A': true,\n 'Legend B': true,\n 'Legend C': false\n }\n // ...\n }\n // ...\n};\n```\n\n## Tips\n\nThe legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.\n\n```js\noption = {\n legend: {\n data: [\n {\n name: 'Legend A',\n icon: 'rect'\n },\n {\n name: 'Legend B',\n icon: 'circle'\n },\n {\n name: 'Legend C',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: 'Legend A'\n // ...\n },\n {\n name: 'Legend B'\n // ...\n },\n {\n name: 'Legend C'\n // ...\n }\n ]\n // ...\n};\n```\n\nWhile there is only one kind of data in the chart, use the chart title rather than the legend to explain it.\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f35a22d698d69b5f1e7c.js b/handbook/_nuxt/js/f35a22d698d69b5f1e7c.js
new file mode 100644
index 0000000..677884c
--- /dev/null
+++ b/handbook/_nuxt/js/f35a22d698d69b5f1e7c.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[24],{318: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 use `setOption` to fill in data and configs after the chart initialized.\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n\n$.get('data.json').done(function(data) {\n // Structure of data:\n // {\n // categories: [\"Shirt\",\"Wool sweater\",\"Chiffon shirt\",\"Pants\",\"High-heeled shoes\",\"socks\"],\n // values: [5, 20, 36, 10, 10, 20]\n // }\n myChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {},\n xAxis: {\n data: data.categories\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: data.values\n }\n ]\n });\n});\n```\n\nOr display empty axes with all styles defined before fill in the data:\n\n```js\nvar myChart = echarts.init(document.getElementById('main'));\n// Show title, legends and empty axes\nmyChart.setOption({\n title: {\n text: 'Asynchronous Loading Example'\n },\n tooltip: {},\n legend: {\n data: ['Sales']\n },\n xAxis: {\n data: []\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: []\n }\n ]\n});\n\n// Asynchronous Data Loading\n$.get('data.json').done(function(data) {\n // Fill in the data\n myChart.setOption({\n xAxis: {\n data: data.categories\n },\n series: [\n {\n // Find series by name\n name: 'Sales',\n data: data.data\n }\n ]\n });\n});\n```\n\nFor example:\n\n<md-example src=\"doc-example/tutorial-async\"></md-example>\n\nYou need to use `name` to \"navigate\" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the `name` data while updating data.\n\n## loading Animation\n\nWhen it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.\n\nECharts have a simple loading animation by default. You can call [showLoading](api.html#echartsInstance.showLoading) to display. When the data loading was completed, call [hideLoading](api.html#echartsInstance.hideLoading) to hide the animation.\n\n```js\nmyChart.showLoading();\n$.get('data.json').done(function (data) {\n myChart.hideLoading();\n myChart.setOption(...);\n});\n```\n\nHere is the effect:\n\n<md-example src=\"doc-example/tutorial-loading\"></md-example>\n\n## Dynamic Update\n\nECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.\n\nAll data's update was implemented by [setOption](~api.html#echartsInstance.setOption). You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.\n\nCheck the following example.\n\n<md-example src=\"doc-example/tutorial-dynamic-data\"></md-example>\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f72f476b9896127f4160.js b/handbook/_nuxt/js/f72f476b9896127f4160.js
new file mode 100644
index 0000000..0f819cd
--- /dev/null
+++ b/handbook/_nuxt/js/f72f476b9896127f4160.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[38],{332: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 chart, a horizontal column chart can not show all labels, or labels can only be shown tilted. It affects the appliance. Therefore, we use a vertical bar chart to get a better display effect.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xByXtUE7Vz">\n</iframe>\n\n## Suggestions for Using Bar Chart\n\n1. Avoid using too many colors. One bar chart represents one set of metrics in general so that we suggest to use the same color or at least different shades of the same color. You can use a contrasting color to highlight meaningful data points.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xByYRlN7Ef">\n</iframe>\n\n2. The gap between bars should be appropriate. When they are too close, the attention of the user may be focused on the gap between bars. A reasonable width should be not less than twice the gap between the bars.\n\n3. Data on Y-axis should be started from 0, to reflect the value appropriately. If the y-axis is incomplete, it will mislead the user to make wrong judgments. For instance, the chart on the left side shows that the income in 2017 is 4 times higher than in 2014. But the chart on the right side shows the truth that the income in 2017 only increased by 25% compared with 2014.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bar03.jpg">\n</img>\n\n4. When sorting multiple data, if it is not related to some specific value like date, it is better to comply with a certain logic and guide the user to check the data in an intuitive way. In short, logical sorting can lead the user to read data better to a certain extent.\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJhWhGm4M">\n</iframe>\n\nWe don\'t recommend using a 3D bar chart because the data transmission is not accurate. Users even have to guess which is the top of the bar.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/bar/bar04.jpg">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f737ab8a768a8caefcc2.js b/handbook/_nuxt/js/f737ab8a768a8caefcc2.js
new file mode 100644
index 0000000..0e8cf97
--- /dev/null
+++ b/handbook/_nuxt/js/f737ab8a768a8caefcc2.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[97],{391: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 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 [ZRender](https://github.com/ecomfe/zrender) 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。\n\n## 选择哪种渲染器\n\n一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 [特效](${mainSitePath}/examples/editor.html?c=lines-bmap-effect)。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。\n\n选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。\n\n- 在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。\n- 在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n - 在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 [水球图](https://ecomfe.github.io/echarts-liquidfill/example/) 等,SVG 渲染器可能效果更好。\n - 数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。\n\n我们强烈欢迎开发者们[反馈](https://github.com/apache/echarts/issues/new)给我们使用的体验和场景,帮助我们更好的做优化。\n\n注:当前某些特殊的渲染依然需要依赖 Canvas:如[炫光尾迹特效](${optionPath}series-lines.effect)、[带有混合效果的热力图](${mainSitePath}/examples/editor.html?c=heatmap-bmap)等。\n\n## 如何使用渲染器\n\n如果是用如下的方式完整引入`echarts`,代码中已经包含了 SVG 渲染器和 Canvas 渲染器\n\n```js\nimport * as echarts from 'echarts';\n```\n\n如果你是按照 [在项目中引入 Apache ECharts](${lang}/basics/import) 一文中的介绍使用按需引入,则需要手动引入需要的渲染器\n\n```js\nimport * as echarts from 'echarts/core';\n// 可以根据需要选用只用到的渲染器\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n```\n\n然后,我们就可以在代码中,初始化图表实例时,[传入参数](${mainSitePath}/api.html/api.html#echarts.init) 选择渲染器类型:\n\n```js\n// 使用 Canvas 渲染器(默认)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// 等价于:\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f8d25e00e7d9c3a54679.js b/handbook/_nuxt/js/f8d25e00e7d9c3a54679.js
new file mode 100644
index 0000000..c16a053
--- /dev/null
+++ b/handbook/_nuxt/js/f8d25e00e7d9c3a54679.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{341: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 pie chart can display the distribution radio of the data, and widely used in every field, there is still controversy around the pie chart and its deformation chart. Therefore, you should use the pie chart with caution and avoid misunderstanding.\n\n## Suggestion for Using Pie Chart\n\n1. The pie chart is preferred to show the proportion of data in the same dimension. It requests the data to be positive. Please also make sure the total of sectors is 100%.\n\n2. It is hard to compare the data in the pie chart with too many pieces. We suggest to controlling the number of categories under five. While there are too many categories, we might merge some unimportant data together, and name as "other". If all categories cannot be omitted, you should try a bar chart or stacked bar chart as an alternative.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/pie/pie02.jpg">\n</img>\n\n3. The pie chart is not appropriate for the comparison of precise data. The following graph (left below) shows that every sector has almost the same proportion. In this case, you should try a bar chart or rose chart (right below) to achieve a better effect.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/pie/pie03.jpg">\n</img>\n\n4. Visual habits of most people are observing from top to bottom in clockwise. Therefore we recommend you put the largest sector in the first place in the clockwise direction to stress the importance.\n\nThere are two advices for the rest of the data. Arrange sectors from big to small in clockwise or anti-clockwise follows the largest one:\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/pie/pie01.jpg">\n</img>\n\nOrder the sectors according to the size not only consistent with the visual habits but also easier for data\'s identify and comparison. Base on this principle, you can put the part that needs to emphasize (don\'t need to be the largest part) at the prominent position.\n\n5. You can add some decorations like color, motion, style, position to stress some data in a chart. Please be moderate or it will distract the user.\n\n<iframe max-width="830" width="100%" height="400"\n src="https://gallery.echartsjs.com/view-lite.html?cid=xHySlBkIEM&v=1">\n</iframe>\n\n6. 3D pie chart distorted the ratio between each sector, which will cause mistakes and confusion in understanding. Therefore,a 3D pie chart is not recommended.\n\n<img max-width="830" width="100%" height="100%"\nsrc="images/design/pie/pie04.jpg">\n</img>\n'}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js b/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js
new file mode 100644
index 0000000..d8296dc
--- /dev/null
+++ b/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.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/application/chart-types/bar/bar-race.md":[302,8],"./en/application/chart-types/bar/basic-bar.md":[303,9],"./en/application/chart-types/bar/polar-bar.md":[304,10],"./en/application/chart-types/bar/stacked-bar.md":[305,11],"./en/application/chart-types/bar/waterfall.md":[306,12],"./en/application/chart-types/line/area-line.md":[307,13],"./en/application/chart-types/line/basic-line.md":[308,14],"./en/application/chart-types/line/smooth-line.md":[309,15],"./en/application/chart-types/line/stacked-line.md":[310,16],"./en/application/chart-types/line/step-line.md":[311,17],"./en/application/chart-types/pie/basic-pie.md":[312,18],"./en/application/chart-types/pie/doughnut.md":[313,19],"./en/application/chart-types/pie/rose.md":[314,20],"./en/application/chart-types/scatter/basic-scatter.md":[315,21],"./en/application/cross-platform/server.md":[316,22],"./en/application/data/drilldown.md":[317,23],"./en/application/data/dynamic-data.md":[318,24],"./en/application/interaction/drag.md":[319,25],"./en/application/label/rich-text.md":[320,26],"./en/basics/download.md":[321,27],"./en/basics/help.md":[322,28],"./en/basics/import.md":[323,29],"./en/basics/inspiration.md":[324,30],"./en/basics/release-note/5-2-0.md":[325,31],"./en/basics/release-note/v5-feature.md":[326,32],"./en/basics/release-note/v5-upgrade-guide.md":[327,33],"./en/best-practice/aria.md":[328,34],"./en/best-practice/canvas-vs-svg.md":[329,35],"./en/best-practice/design/color-enhance.md":[330,36],"./en/best-practice/mobile.md":[331,37],"./en/best-practice/specification/bar/basic-bar.md":[332,38],"./en/best-practice/specification/bar/bi-directional-bar.md":[333,39],"./en/best-practice/specification/bar/grouped-bar.md":[334,40],"./en/best-practice/specification/bar/stacked-bar.md":[335,41],"./en/best-practice/specification/funnel.md":[336,42],"./en/best-practice/specification/gauge.md":[337,43],"./en/best-practice/specification/line/area.md":[338,44],"./en/best-practice/specification/line/basic-line.md":[339,45],"./en/best-practice/specification/line/stacked-area.md":[340,46],"./en/best-practice/specification/pie/basic-pie.md":[341,47],"./en/best-practice/specification/radar.md":[342,48],"./en/best-practice/specification/scatter/bubble.md":[343,49],"./en/best-practice/specification/scatter/scatter.md":[344,50],"./en/concepts/axis.md":[345,51],"./en/concepts/chart-size.md":[346,52],"./en/concepts/coordinate.md":[347,53],"./en/concepts/data-transform.md":[348,54],"./en/concepts/dataset.md":[349,55],"./en/concepts/event.md":[350,56],"./en/concepts/legend.md":[351,57],"./en/concepts/options.md":[352,58],"./en/concepts/series.md":[353,59],"./en/concepts/style.md":[354,60],"./en/concepts/tooltip.md":[355,61],"./en/concepts/visual-map.md":[356,62],"./en/get-started.md":[357,63],"./en/meta/edit-guide.md":[358,64],"./zh/application/chart-types/bar/bar-race.md":[359,65],"./zh/application/chart-types/bar/basic-bar.md":[360,66],"./zh/application/chart-types/bar/polar-bar.md":[361,67],"./zh/application/chart-types/bar/stacked-bar.md":[362,68],"./zh/application/chart-types/bar/waterfall.md":[363,69],"./zh/application/chart-types/line/area-line.md":[364,70],"./zh/application/chart-types/line/basic-line.md":[365,71],"./zh/application/chart-types/line/smooth-line.md":[366,72],"./zh/application/chart-types/line/stacked-line.md":[367,73],"./zh/application/chart-types/line/step-line.md":[368,74],"./zh/application/chart-types/pie/basic-pie.md":[369,75],"./zh/application/chart-types/pie/doughnut.md":[370,76],"./zh/application/chart-types/pie/rose.md":[371,77],"./zh/application/chart-types/scatter/basic-scatter.md":[372,78],"./zh/application/connect.md":[373,79],"./zh/application/cross-platform/baidu-app.md":[374,80],"./zh/application/cross-platform/server.md":[375,81],"./zh/application/cross-platform/wechat-app.md":[376,82],"./zh/application/data/drilldown.md":[377,83],"./zh/application/data/dynamic-data.md":[378,84],"./zh/application/interaction/drag.md":[379,85],"./zh/application/label/rich-text.md":[380,86],"./zh/application/mobile.md":[381,87],"./zh/basics/download.md":[382,88],"./zh/basics/help.md":[383,89],"./zh/basics/import.md":[384,90],"./zh/basics/inspiration.md":[385,91],"./zh/basics/release-note/5-2-0.md":[386,92],"./zh/basics/release-note/v5-feature.md":[387,93],"./zh/basics/release-note/v5-upgrade-guide.md":[388,94],"./zh/basics/resource.md":[389,95],"./zh/best-practice/aria.md":[390,96],"./zh/best-practice/canvas-vs-svg.md":[391,97],"./zh/best-practice/design/color-enhance.md":[392,98],"./zh/best-practice/mobile.md":[393,99],"./zh/best-practice/specification/bar/basic-bar.md":[394,100],"./zh/best-practice/specification/bar/bi-directional-bar.md":[395,101],"./zh/best-practice/specification/bar/grouped-bar.md":[396,102],"./zh/best-practice/specification/bar/stacked-bar.md":[397,103],"./zh/best-practice/specification/funnel.md":[398,104],"./zh/best-practice/specification/gauge.md":[399,105],"./zh/best-practice/specification/line/area.md":[400,106],"./zh/best-practice/specification/line/basic-line.md":[401,107],"./zh/best-practice/specification/line/stacked-area.md":[402,108],"./zh/best-practice/specification/pie/basic-pie.md":[403,109],"./zh/best-practice/specification/radar.md":[404,110],"./zh/best-practice/specification/scatter/bubble.md":[405,111],"./zh/best-practice/specification/scatter/scatter.md":[406,112],"./zh/concepts/axis.md":[407,113],"./zh/concepts/chart-size.md":[408,114],"./zh/concepts/coordinate.md":[409,115],"./zh/concepts/data-transform.md":[410,116],"./zh/concepts/dataset.md":[411,117],"./zh/concepts/event.md":[412,118],"./zh/concepts/legend.md":[413,119],"./zh/concepts/options.md":[414,120],"./zh/concepts/series.md":[415,121],"./zh/concepts/style.md":[416,122],"./zh/concepts/tooltip.md":[417,123],"./zh/concepts/visual-map.md":[418,124],"./zh/get-started.md":[419,125],"./zh/meta/edit-guide.md":[420,126],"./zh/meta/writing.md":[421,127]};function c(t){if(!n.o(map,t))return Promise.resolve().then((function(){var e=new Error("Cannot find module '"+t+"'");throw e.code="MODULE_NOT_FOUND",e}));var e=map[t],c=e[0];return n.e(e[1]).then((function(){return n(c)}))}c.keys=function(){return Object.keys(map)},c.id=301,t.exports=c},423:function(t,e,n){"use strict";n.r(e);var c=n(2),r=(n(21),n(36),n(103),n(0)),o=n.n(r),l=n(187),d=(n(211),n(212)),m=(n(140),n(102)),h=Object(l.c)({props:{width:{type:[String,Number],default:"100%"},height:{type:[String,Number],default:"350"},src:String},setup:function(t,e){var n=Object(l.a)((function(){return m.a.exampleViewPath.replace("${lang}",e.root.$i18n.locale)+t.src})),c=Object(l.f)("");return{finalSrc:c,visibilityChanged:function(t){t&&(c.value=n.value)}}}}),v=n(7),f=Object(v.a)(h,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("iframe",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],attrs:{width:t.width||200,height:t.height||200,src:t.finalSrc}})}),[],!1,null,null,null).exports,z=(n(37),o.a.extend({props:{type:{type:String,default:"info",validator:function(t){return["info","success","warning","danger"].includes(t)}}}})),y=(n(213),Object(v.a)(z,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("blockquote",{class:"md-alert md-alert-"+t.type},[n("p",[t._t("default")],2)])}),[],!1,null,"a47f983e",null).exports),O=(n(16),n(214)),w=(n(215),n(216)),k=(n(193),n(194),n(195),n(27),n(28),n(22),n(60),{});var C=n(217),_=n(218),x=n.n(_),j=n(188),H=n(15);function S(){var t={},e={},n=1;function c(t,c){var r,time,l=(r=t,time=c,m.getZr().animation.animate({val:0},{loop:!1}).when(time,{val:1}).during((function(){m.getZr().wakeUp()})).done((function(){o.a.nextTick(r)})).start());return e[n]=l,n++}function r(t,c){var r,time,l=(r=t,time=c,m.getZr().animation.animate({val:0},{loop:!0}).when(time,{val:1}).during((function(t,e){m.getZr().wakeUp(),1===e&&o.a.nextTick(r)})).start());return e[n]=l,n++}function l(t){var n=e[t];n&&(m.getZr().animation.removeAnimator(n),delete e[t])}function d(t){l(t)}var m,h=[];return{resize:function(){m&&m.resize()},dispose:function(){m&&(m.dispose(),m=null)},getDataURL:function(){return m.getDataURL({pixelRatio:2,excludeComponents:["toolbox"]})},getOption:function(){return m.getOption()},getInstance:function(){return m},pause:function(){m&&m.getZr().animation.pause()},resume:function(){m&&m.getZr().animation.resume()},run:function(n,code,o){var v,f,z;o=o||{},m||(m=echarts.init(n,o.darkMode?"dark":"",{renderer:o.renderer,useDirtyRect:o.useDirtyRect}),f=(v=m).on,z=v.setOption,v.on=function(t){var e=f.apply(v,arguments);return h.push(t),e},v.setOption=function(){return z.apply(this,arguments)}),function(){for(var t in e)e.hasOwnProperty(t)&&l(t)}(),function(t){h.forEach((function(e){t&&t.off(e)})),h.length=0}(m),t.config=null;var option=new Function("myChart","app","setTimeout","setInterval","clearTimeout","clearInterval","var option;\n"+code+"\nreturn option;")(m,t,c,r,l,d);if(option&&"object"===Object(H.a)(option)){var y=+new Date;m.setOption(option,!0),+new Date-y}}}}var P=n(229),E=n.n(P),$=Object(l.c)({components:{},props:{source:{type:String}},setup:function(t){var e=Object(l.f)(null),n=Object(l.f)(!1);return Object(l.d)((function(){new E.a(e.value,{text:function(e){return t.source}}).on("success",(function(t){t.clearSelection(),n.value=!0,window.setTimeout((function(){n.value=!1}),2e3)}))})),{clipboardChecked:n,copyButton:e}}}),R=(n(230),Object(v.a)($,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"copyButton",staticClass:"clipboard"},[t.clipboardChecked?n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"}})]):n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("svg",{staticClass:"h-6 w-6",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"}})])])])}),[],!1,null,"479657ca",null).exports);function M(){return"undefined"==typeof echarts?(t=["https://cdn.jsdelivr.net/npm/echarts/dist/echarts.js"],Promise.all(t.map((function(t){return"string"==typeof t?{url:t,type:t.match(/\.css$/)?"css":"js"}:t})).map((function(t){if(k[t.url])return k[t.url];var e=new Promise((function(e,n){if("js"===t.type){var script=document.createElement("script");script.src=t.url,script.async=!1,script.onload=function(){e(null)},script.onerror=function(){n()},document.body.appendChild(script)}else if("css"===t.type){var link=document.createElement("link");link.rel="stylesheet",link.href=t.url,link.onload=function(){e(null)},link.onerror=function(){n()},document.body.appendChild(link)}}));return k[t.url]=e,e})))).then((function(){})):Promise.resolve();var t}var N=Object(l.c)({components:{PrismEditor:O.a,CodeBlockCopyClipboard:R},props:{lang:{type:String,default:"js"},code:{type:String},layout:{type:String,default:"tb",validator:function(t){return["lr","tb","rl","bt"].includes(t)}}},setup:function(t,e){var n,c=Object(l.f)(j.a(t.code)),r=Object(l.f)(null);function o(){n&&n.resize()}var d=x()((function(){M().then((function(){n||(Object(C.a)(Object(l.g)(r),o),n=S());try{Object(l.g)(r)&&n.run(Object(l.g)(r),Object(l.g)(c))}catch(t){console.error(t)}}))}),500,{trailing:!0});return Object(l.h)(c,(function(){d()})),Object(l.e)((function(){Object(C.b)(Object(l.g)(r),o)})),{innerCode:c,previewContainer:r,highlighter:function(code){return Object(w.highlight)(code,w.languages[t.lang]||w.languages.js)},visibilityChanged:function(t){t?n?n.resume():d():n&&n.pause()}}}}),D=(n(231),Object(v.a)(N,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.innerCode?n("div",{directives:[{name:"observe-visibility",rawName:"v-observe-visibility",value:t.visibilityChanged,expression:"visibilityChanged"}],class:"md-live layout-"+t.layout},[n("div",{staticClass:"md-live-editor"},[n("div",{staticClass:"md-live-editor-container"},[n("prism-editor",{attrs:{highlight:t.highlighter},model:{value:t.innerCode,callback:function(e){t.innerCode=e},expression:"innerCode"}})],1),t._v(" "),n("div",{staticClass:"md-live-tag"},[t._v("live")]),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.innerCode}})],1),t._v(" "),n("div",{ref:"previewContainer",staticClass:"md-live-preview"})]):t._e()}),[],!1,null,null,null).exports),T=n(232),L=n.n(T),B=(n(233),n(234),n(235),n(236),n(237),n(238),/^(diff)-([\w-]+)/i);var U=Object(l.c)({components:{CodeBlockCopyClipboard:R},props:{lang:{type:String,default:"js"},code:{type:String},lineHighlights:String,fileName:String},setup:function(t,e){var n=Object(l.f)(j.a(t.code)),c=Object(l.a)((function(){return function(t,e){var n="",c=(t=t||"").match(B);c&&(t=c[2],n=L.a.languages.diff),t="vue"===t?"html":t,n||(n=L.a.languages[t]);var r=c?"diff-".concat(t):t,code=n?L.a.highlight(e,n,r):e;return t&&n||(t="text",code=code.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")),{lang:t,code:code}}(t.lang,n.value)}));return{rawCode:n,highlightResult:c}}}),Z=(n(239),Object(v.a)(U,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"md-code-block"},[n("div",{staticClass:"nuxt-content-highlight"},[n("pre",{class:"language-"+t.highlightResult.lang+" line-numbers"},[n("code",{domProps:{innerHTML:t._s(t.highlightResult.code)}})])]),t._v(" "),t.fileName?n("span",{staticClass:"filename"},[t._v(t._s(t.fileName))]):t._e(),t._v(" "),n("code-block-copy-clipboard",{attrs:{source:t.rawCode}})],1)}),[],!1,null,null,null).exports),I=(n(240),Object(l.c)({props:{link:String},setup:function(t){return{fullLink:Object(l.a)((function(){return m.a.optionPath+t.link}))}}})),A=Object(v.a)(I,(function(){var t=this,e=t.$createElement;return(t._self._c||e)("a",{attrs:{href:t.fullLink,target:"_blank"}},[t._v(t._s(t.link))])}),[],!1,null,null,null).exports;o.a.use(l.b),o.a.component("md-example",f),o.a.component("md-alert",y),o.a.component("md-live",D),o.a.component("md-code-block",Z),o.a.component("md-option",A),o.a.directive("observe-visibility",d.a);var V=n(242),W=n.n(V),F=n(298),G={"contents/zh/concepts/tooltip.md":["Ovilia"],"contents/zh/concepts/style.md":["pissang"],"contents/zh/concepts/series.md":["Ovilia"],"contents/zh/concepts/options.md":["Ovilia"],"contents/zh/concepts/legend.md":["Ovilia","pissang","yufeng04"],"contents/zh/concepts/event.md":["100pah","Ovilia","huanghan01","pissang","plainheart"],"contents/zh/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/zh/concepts/data-transform.md":["100pah","pissang"],"contents/zh/concepts/coordinate.md":["Ovilia"],"contents/zh/concepts/chart-size.md":["Ovilia","pissang"],"contents/zh/concepts/axis.md":["Ovilia","huanghan01","pissang","plainheart","yufeng04"],"contents/zh/best-practice/specification/scatter/scatter.md":["pissang"],"contents/zh/best-practice/specification/scatter/bubble.md":["pissang"],"contents/zh/best-practice/specification/radar.md":["pissang"],"contents/zh/best-practice/specification/pie/basic-pie.md":["pissang"],"contents/zh/best-practice/specification/line/stacked-area.md":["pissang"],"contents/zh/best-practice/specification/line/basic-line.md":["pissang"],"contents/zh/best-practice/specification/line/area.md":["pissang"],"contents/zh/best-practice/specification/gauge.md":["pissang"],"contents/zh/best-practice/specification/funnel.md":["pissang"],"contents/zh/best-practice/specification/bar/stacked-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/grouped-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/bi-directional-bar.md":["pissang"],"contents/zh/best-practice/specification/bar/basic-bar.md":["pissang"],"contents/zh/best-practice/mobile.md":["Ovilia"],"contents/zh/best-practice/design/color-enhance.md":["Hansz00","Wdingding","pissang"],"contents/zh/best-practice/canvas-vs-svg.md":["100pah","Ovilia","pissang"],"contents/zh/best-practice/aria.md":["Ovilia","pissang"],"contents/zh/basics/resource.md":["Ovilia","pissang"],"contents/zh/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/zh/basics/release-note/v5-feature.md":["pissang"],"contents/zh/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/zh/basics/inspiration.md":["Ovilia","pissang"],"contents/zh/basics/import.md":["pissang"],"contents/zh/basics/help.md":["100pah","Ovilia","pissang","plainheart"],"contents/zh/basics/download.md":["100pah","Ovilia","pissang"],"contents/zh/application/mobile.md":["Ovilia"],"contents/zh/application/label/rich-text.md":["pissang"],"contents/zh/application/interaction/drag.md":["pissang"],"contents/zh/application/data/dynamic-data.md":["Ovilia","pissang"],"contents/zh/application/data/drilldown.md":["pissang"],"contents/zh/application/cross-platform/wechat-app.md":["Ovilia","pissang"],"contents/zh/application/cross-platform/server.md":["Ovilia","pissang"],"contents/zh/application/cross-platform/baidu-app.md":["Ovilia","pissang"],"contents/zh/application/connect.md":["Ovilia"],"contents/zh/application/chart-types/scatter/basic-scatter.md":["Ovilia","Wdingding","pissang"],"contents/zh/application/chart-types/pie/rose.md":["Ovilia","pissang"],"contents/zh/application/chart-types/pie/doughnut.md":["pissang"],"contents/zh/application/chart-types/pie/basic-pie.md":["Hansz00","Ovilia","pissang"],"contents/zh/application/chart-types/line/step-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/stacked-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/smooth-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/line/basic-line.md":["Hansz00","Ovilia","pissang"],"contents/zh/application/chart-types/line/area-line.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/waterfall.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/stacked-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/polar-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/basic-bar.md":["Ovilia","pissang"],"contents/zh/application/chart-types/bar/bar-race.md":["Ovilia","pissang"],"contents/en/posts.yml":["Ovilia","pissang"],"contents/en/meta/edit-guide.md":["pissang"],"contents/en/get-started.md":["Ovilia","pissang"],"contents/en/concepts/visual-map.md":["pissang"],"contents/en/concepts/tooltip.md":["huanghan01"],"contents/en/concepts/style.md":["pissang"],"contents/en/concepts/series.md":["huanghan01"],"contents/en/concepts/options.md":["huanghan01"],"contents/en/concepts/legend.md":["huanghan01","pissang"],"contents/en/concepts/event.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/dataset.md":["100pah","Ovilia","huanghan01","pissang"],"contents/en/concepts/data-transform.md":["100pah","pissang"],"contents/en/concepts/coordinate.md":["huanghan01"],"contents/en/concepts/chart-size.md":["huanghan01","pissang"],"contents/en/concepts/axis.md":["huanghan01","pissang"],"contents/en/best-practice/specification/scatter/scatter.md":["pissang"],"contents/en/best-practice/specification/scatter/bubble.md":["pissang"],"contents/en/best-practice/specification/radar.md":["pissang"],"contents/en/best-practice/specification/pie/basic-pie.md":["pissang"],"contents/en/best-practice/specification/line/stacked-area.md":["pissang"],"contents/en/best-practice/specification/line/basic-line.md":["pissang"],"contents/en/best-practice/specification/line/area.md":["pissang"],"contents/en/best-practice/specification/gauge.md":["pissang"],"contents/en/best-practice/specification/funnel.md":["pissang"],"contents/en/best-practice/specification/bar/stacked-bar.md":["pissang"],"contents/en/best-practice/specification/bar/grouped-bar.md":["pissang"],"contents/en/best-practice/specification/bar/bi-directional-bar.md":["pissang"],"contents/en/best-practice/specification/bar/basic-bar.md":["pissang"],"contents/en/best-practice/mobile.md":["Hansz00"],"contents/en/best-practice/design/color-enhance.md":["Hansz00","pissang"],"contents/en/best-practice/canvas-vs-svg.md":["100pah","Hansz00","Ovilia","pissang"],"contents/en/best-practice/aria.md":["Hansz00","Ovilia","pissang"],"contents/en/basics/release-note/v5-upgrade-guide.md":["pissang"],"contents/en/basics/release-note/v5-feature.md":["pissang"],"contents/en/basics/release-note/5-2-0.md":["Ovilia","pissang"],"contents/en/basics/inspiration.md":["pissang"],"contents/en/basics/import.md":["pissang"],"contents/en/basics/help.md":["pissang"],"contents/en/basics/download.md":["Ovilia"],"contents/en/application/label/rich-text.md":["pissang"],"contents/en/application/interaction/drag.md":["pissang"],"contents/en/application/data/dynamic-data.md":["Hansz00","Ovilia","pissang"],"contents/en/application/data/drilldown.md":["Hansz00"],"contents/en/application/cross-platform/server.md":["pissang"],"contents/en/application/chart-types/scatter/basic-scatter.md":["Hansz00","pissang"],"contents/en/application/chart-types/pie/rose.md":["Hansz00","pissang"],"contents/en/application/chart-types/pie/doughnut.md":["pissang"],"contents/en/application/chart-types/pie/basic-pie.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/step-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/stacked-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/smooth-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/basic-line.md":["Hansz00","pissang"],"contents/en/application/chart-types/line/area-line.md":["Hank","Hansz00","pissang"],"contents/en/application/chart-types/bar/waterfall.md":["Hansz00","Ovilia","pissang"],"contents/en/application/chart-types/bar/stacked-bar.md":["Hansz00","pissang"],"contents/en/application/chart-types/bar/polar-bar.md":["Hansz00"],"contents/en/application/chart-types/bar/basic-bar.md":["Hank","Hansz00","pissang"],"contents/en/application/chart-types/bar/bar-race.md":["Hansz00","Ovilia","pissang"],"contents/.prettierrc":["pissang"],"contents/zh/get-started.md":["Ovilia","pissang"],"contents/zh/concepts/visual-map.md":["Ovilia","pissang"],"contents/zh/meta/edit-guide.md":["pissang"],"contents/zh/meta/writing.md":["Ovilia","pissang"],"contents/zh/posts.yml":["Ovilia","pissang"]};n(139);var J=Object(l.c)({props:{path:String},setup:function(t){return{contributors:Object(l.a)((function(){return G["contents/".concat(t.path||"",".md")]})),sourcePath:Object(l.a)((function(){return(e=t.path).endsWith(".md")||(e+=".md"),n&&(e+="#".concat(decodeURIComponent(n))),"https://github.com/".concat(m.a.gitRepo,"/tree/master/contents/").concat(e);var e,n}))}}}),K=(n(299),Object(v.a)(J,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"post-contributors"},[n("h3",[n("span",{staticClass:"inline-block align-middle"},[t._v("本文贡献者")]),t._v(" "),n("a",{staticClass:"inline-block align-middle text-sm",attrs:{target:"_blank",href:t.sourcePath,title:"编辑本文"}},[n("svg",{staticClass:"h-8 w-8 inline-block align-middle",attrs:{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor"}},[n("path",{attrs:{"stroke-linecap":"round","stroke-linejoin":"round","stroke-width":"2",d:"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"}})]),t._v(" "),n("span",{staticClass:"inline-block align-middle"},[t._v("在 GitHub 上编辑本页")])])]),t._v(" "),t.contributors&&t.contributors.length?n("div",{staticClass:"post-contributors-list"},t._l(t.contributors,(function(e){return n("a",{key:e,staticClass:"post-contributor",attrs:{href:"https://github.com/"+e,target:"_blank"}},[n("img",{attrs:{alt:e,src:"https://avatars.githubusercontent.com/"+e+"?size=60"}}),t._v(" "),n("span",[t._v(t._s(e))])])})),0):t._e()])}),[],!1,null,null,null).exports),Q={functional:!0,props:{content:String},render:function(t,e){return t({template:"<article>"+e.props.content+"</article>"})}},X=n(300),Y=n.n(X);function tt(t){return t.replace(/^```(\w+?)\s+live\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"{}",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim(),n=n.trim()||"{}";var c=j.b(code.trim(),!0);return'<md-live lang="'.concat(e,'" code="\'').concat(c,'\'" v-bind="').concat(n,'" />')}))}function et(t){return t.replace(/^```(\w+?)\s*({.*?})?\s*?\n([\s\S]+?)^```/gm,(function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"js",n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"",code=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"";e=e.trim();var c=j.b(code.trim(),!0);return'<md-code-block lang="'.concat(e,'" code="\'').concat(c,"'\" line-highlights=\"'").concat(n,"'\" />")}))}function nt(t,e){return["optionPath","mainSitePath","exampleViewPath","exampleEditorPath"].forEach((function(p){var n=m.a[p].replace("${lang}",e);t=t.replace(new RegExp("\\$\\{"+p+"\\}","g"),n)})),t=t.replace(/\$\{lang\}/g,e)}var at={components:{Contributors:K,PostContent:Q},data:function(){return{toc:[]}},mounted:function(){var t,e=this;this.toc=[];for(var s,n=(null===(t=this.$el.querySelector(".post-inner"))||void 0===t?void 0:t.querySelectorAll(" h2,h3"))||[],i=0;i<n.length;i++){var title=n[i].innerText;this.toc.push({title:title,depth:+n[i].nodeName.replace(/\D/g,""),id:(s=title,encodeURIComponent(String(s).trim().toLowerCase().replace(/\s+/g,"-")))})}setTimeout((function(){e._lazyload=new Y.a({elements_selector:"img[data-src], iframe[data-src]",threshold:300})}))},destroyed:function(){this._lazyload&&this._lazyload.destroy()},head:function(){return{meta:[{hid:"docsearch:language",name:"docsearch:language",content:this.$i18n.locale}]}},asyncData:function(t){return Object(c.a)(regeneratorRuntime.mark((function e(){var c,r,o,l,content,d;return regeneratorRuntime.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return c=t.params,r=t.i18n,o="".concat(r.locale,"/").concat(c.pathMatch),e.next=4,n(301)("./".concat(o,".md"));case 4:return l=e.sent,content=nt(et(tt(l.default)),r.locale),d=W()({html:!0,linkify:!0}).use(F.a,{permalink:!1,permalinkAfter:!0,permalinkSymbol:"#",permalinkClass:"permalink"}).use((function(t){var e=t.renderer.rules.image;t.renderer.rules.image=function(t,n,c,r,o){var l=t[n],d=l.attrGet("src");return l.attrPush(["data-src",d]),l.attrSet("src",""),e(t,n,c,r,o)}})),e.abrupt("return",{html:d.render(content),postPath:o});case 8:case"end":return e.stop()}}),e)})))()}},it=Object(v.a)(at,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"post-inner"},[t.toc.length?n("div",{staticClass:"table-of-contents"},[n("h4",{staticClass:"toc-container-header"},[t._v(t._s(t.$t("inThisPage")))]),t._v(" "),n("ul",t._l(t.toc,(function(link){return n("li",{key:link.id,class:{toc2:2===link.depth,toc3:3===link.depth}},[n("NuxtLink",{attrs:{to:"#"+link.id}},[t._v(t._s(link.title))])],1)})),0)]):t._e(),t._v(" "),n("div",{staticClass:"nuxt-content"},[n("post-content",{attrs:{content:t.html}})],1)]),t._v(" "),n("contributors",{attrs:{path:t.postPath}})],1)}),[],!1,null,null,null);e.default=it.exports}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/fc6e9368f0aedefe0966.js b/handbook/_nuxt/js/fc6e9368f0aedefe0966.js
new file mode 100644
index 0000000..3de29ca
--- /dev/null
+++ b/handbook/_nuxt/js/fc6e9368f0aedefe0966.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[65],{359: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` 设为 _n - 1_,否则显示所有柱条\n6. `xAxis.max` 建议设为 `'dataMax'` 表示用数据的最大值作为 X 轴最大值,视觉效果更好\n7. 如果想要实时改变标签,需要将 `series.label.valueAnimation` 设为 `true`\n8. `animationDuration` 设为 `0`,表示第一份数据不需要从 `0` 开始动画(如果希望从 `0` 开始则设为和 `animationDurationUpdate` 相同的值)\n9. `animationDurationUpdate` 建议设为 `3000` 表示每次更新动画时长,这一数值应与调用 `setOption` 改变数据的频率相同\n10. 以 `animationDurationUpdate` 的频率调用 `setInterval`,更新数据值,显示下一个时间点对应的柱条排序\n\n## 示例\n\n完整的例子如下:\n\n```js live\nvar data = [];\nfor (let i = 0; i < 5; ++i) {\n data.push(Math.round(Math.random() * 200));\n}\n\noption = {\n xAxis: {\n max: 'dataMax'\n },\n yAxis: {\n type: 'category',\n data: ['A', 'B', 'C', 'D', 'E'],\n inverse: true,\n animationDuration: 300,\n animationDurationUpdate: 300,\n max: 2 // only the largest 3 bars will be displayed\n },\n series: [\n {\n realtimeSort: true,\n name: 'X',\n type: 'bar',\n data: data,\n label: {\n show: true,\n position: 'right',\n valueAnimation: true\n }\n }\n ],\n legend: {\n show: true\n },\n animationDuration: 3000,\n animationDurationUpdate: 3000,\n animationEasing: 'linear',\n animationEasingUpdate: 'linear'\n};\n\nfunction update() {\n var data = option.series[0].data;\n for (var i = 0; i < data.length; ++i) {\n if (Math.random() > 0.9) {\n data[i] += Math.round(Math.random() * 2000);\n } else {\n data[i] += Math.round(Math.random() * 200);\n }\n }\n myChart.setOption(option);\n}\n\nsetInterval(function() {\n update();\n}, 3000);\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/fc8a3d9e02dfa622da3a.js b/handbook/_nuxt/js/fc8a3d9e02dfa622da3a.js
new file mode 100644
index 0000000..15480ac
--- /dev/null
+++ b/handbook/_nuxt/js/fc8a3d9e02dfa622da3a.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[35],{329: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. Since [ECharts v4.0](https://github.com/apache/echarts/releases) was released, ECharts provided the SVG render as an additional option. You can specify the [renderer parameter](http://echarts.baidu.com/api.html#echarts.init) as `'canvas'` or `'svg'` while initializing a chart.\n\n> SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library [ZRender](https://github.com/ecomfe/zrender). It formed an interchangeable SVG renderer and Canvas renderer.\n\n## How to Choose a Renderer?\n\nGenerally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual [effect](${mainSitePath}/examples/editor.html?c=lines-bmap-effect). However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.\n\nThe choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.\n\n- In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.\n- In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n - 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 [LiquidFill chart](https://ecomfe.github.io/echarts-liquidfill/example/).\n - For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.\n\nWe strongly welcome [feedback](https://github.com/apache/echarts/issues/new) from developers on their experiences and scenarios to help us make better optimizations.\n\nNote: Currently, some special rendering still relies on Canvas: e.g. [trail effect](${optionPath}series-lines.effect), [heatmap with blending effect](${mainSitePath}/examples/editor.html?c=heatmap-bmap), etc.\n\n## How to Use the Renderer\n\nIf `echarts` is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer\n\n```js\nimport * as echarts from 'echarts';\n```\n\nIf you are using treeshakable import as described in [Introducing Apache ECharts in your project](${lang}/basics/import), you will need to import the required renderers manually\n\n```js\nimport * as echarts from 'echarts/core';\n// You can use only the renderers you need\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n```\n\nThen, we can [pass in the parameter](${mainSitePath}/api.html/api.html#echarts.init) when initializing the chart instance in code to select the renderer.\n\n```js\n// Use the Canvas renderer (default)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// Equivalent to.\nvar chart = echarts.init(containerDom);\n\n// using the SVG renderer\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n```\n"}}]);
\ No newline at end of file
diff --git a/handbook/_nuxt/js/fed49c89daacc7a4f92e.js b/handbook/_nuxt/js/fed49c89daacc7a4f92e.js
new file mode 100644
index 0000000..65cba3c
--- /dev/null
+++ b/handbook/_nuxt/js/fed49c89daacc7a4f92e.js
@@ -0,0 +1 @@
+(window.webpackJsonp=window.webpackJsonp||[]).push([[86],{380: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=\"300\"></md-example>\n\n## 文本样式相关的配置项\n\necharts 提供了丰富的文本标签配置项,包括:\n\n- 字体基本样式设置:`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n- 文字颜色:`color`。\n- 文字描边:`textBorderColor`、`textBorderWidth`。\n- 文字阴影:`textShadowColor`、`textShadowBlur`、`textShadowOffsetX`、`textShadowOffsetY`。\n- 文本块或文本片段大小:`lineHeight`、`width`、`height`、`padding`。\n- 文本块或文本片段的对齐:`align`、`verticalAlign`。\n- 文本块或文本片段的边框、背景(颜色或图片):`backgroundColor`、`borderColor`、`borderWidth`、`borderRadius`。\n- 文本块或文本片段的阴影:`shadowColor`、`shadowBlur`、`shadowOffsetX`、`shadowOffsetY`。\n- 文本块的位置和旋转:`position`、`distance`、`rotate`。\n\n可以在各处的 `rich` 属性中定义文本片段样式。例如 [series-bar.label.rich](option.html#series-bar.label.rich)\n\n例如:\n\n```js\nlabelOption = {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n // 这里是文本块的样式设置:\n color: '#333',\n fontSize: 5,\n fontFamily: 'Arial',\n borderWidth: 3,\n backgroundColor: '#984455',\n padding: [3, 10, 10, 5],\n lineHeight: 20,\n\n // rich 里是文本片段的样式设置:\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n }\n }\n};\n```\n\n> 注意:如果不定义 `rich`,不能指定文字块的 `width` 和 `height`。\n\n## 文本、文本框、文本片段的基本样式和装饰\n\n每个文本可以设置基本的字体样式:`fontStyle`、`fontWeight`、`fontSize`、`fontFamily`。\n\n可以设置文字的颜色 `color` 和边框的颜色 `textBorderColor`、`textBorderWidth`。\n\n文本框可以设置边框和背景的样式:`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n文本片段也可以设置边框和背景的样式:`borderColor`、`borderWidth`、`backgroundColor`、`padding`。\n\n例如:\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 1,\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n show: true,\n formatter: [\n 'Plain text',\n '{textBorder|textBorderColor + textBorderWidth}',\n '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}',\n '{bg|backgroundColor + borderRadius + padding}',\n '{border|borderColor + borderWidth + borderRadius + padding}',\n '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'\n ].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#333',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n color: '#000',\n fontSize: 14,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n lineHeight: 30,\n rich: {\n textBorder: {\n fontSize: 20,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n },\n textShadow: {\n fontSize: 16,\n textShadowBlur: 5,\n textShadowColor: '#000',\n textShadowOffsetX: 3,\n textShadowOffsetY: 3,\n color: '#fff'\n },\n bg: {\n backgroundColor: '#339911',\n color: '#fff',\n borderRadius: 15,\n padding: 5\n },\n border: {\n color: '#000',\n borderColor: '#449911',\n borderWidth: 1,\n borderRadius: 3,\n padding: 5\n },\n shadow: {\n backgroundColor: '#992233',\n padding: 5,\n color: '#fff',\n shadowBlur: 5,\n shadowColor: '#336699',\n shadowOffsetX: 6,\n shadowOffsetY: 6\n }\n }\n }\n }\n }\n ]\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: -1,\n max: 1\n }\n};\n```\n\n## 标签的位置\n\n对于折线图、柱状图、散点图等,均可以使用 `label` 来设置标签。标签的相对于图形元素的位置,一般使用 [label.position](option.html#series-scatter.label.position)、[label.distance](option.html#series-scatter.label.distance) 来配置。\n\n试试在下面例子中修改`position`和`distance` 属性:\n\n```js live\noption = {\n series: [\n {\n type: 'scatter',\n symbolSize: 160,\n symbol: 'roundRect',\n data: [[1, 1]],\n label: {\n normal: {\n // 修改 position 和 distance 的值试试\n // 支持:'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'\n position: 'top',\n distance: 10,\n\n show: true,\n formatter: ['Label Text'].join('\\n'),\n backgroundColor: '#eee',\n borderColor: '#555',\n borderWidth: 2,\n borderRadius: 5,\n padding: 10,\n fontSize: 18,\n shadowBlur: 3,\n shadowColor: '#888',\n shadowOffsetX: 0,\n shadowOffsetY: 3,\n textBorderColor: '#000',\n textBorderWidth: 3,\n color: '#fff'\n }\n }\n }\n ],\n xAxis: {\n max: 2\n },\n yAxis: {\n max: 2\n }\n};\n```\n\n> 注意:`position` 在不同的图中可取值有所不同。`distance` 并不是在每个图中都支持。详情请参见 [option 文档](${mainSitePath}option.html)。\n\n## 标签的旋转\n\n某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:\n\n```js live {layout: 'lr'}\nconst labelOption = {\n show: true,\n rotate: 90,\n formatter: '{c} {name|{a}}',\n fontSize: 16,\n rich: {\n name: {}\n }\n};\n\noption = {\n xAxis: [\n {\n type: 'category',\n data: ['2012', '2013', '2014', '2015', '2016']\n }\n ],\n yAxis: [\n {\n type: 'value'\n }\n ],\n series: [\n {\n name: 'Forest',\n type: 'bar',\n barGap: 0,\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [320, 332, 301, 334, 390]\n },\n {\n name: 'Steppe',\n type: 'bar',\n label: labelOption,\n emphasis: {\n focus: 'series'\n },\n data: [220, 182, 191, 234, 290]\n }\n ]\n};\n```\n\n这种场景下,可以结合 [align](option.html#series-bar.label.align) 和 [verticalAlign](option.html#series-bar.label.verticalAlign) 来调整标签位置。\n\n注意,逻辑是,先使用 `align` 和 `verticalAlign` 定位,再旋转。\n\n## 文本片段的排版和对齐\n\n关于排版方式,每个文本片段,可以想象成 CSS 中的 `inline-block`,在文档流中按行放置。\n\n每个文本片段的内容盒尺寸(`content box size`),默认是根据文字大小决定的。但是,也可以设置 `width`、`height` 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(`border box size`),由上述本身尺寸,加上文本片段的 `padding` 来得到。\n\n只有 `'\\n'` 是换行符,能导致换行。\n\n一行内,会有多个文本片段。每行的实际高度,由 `lineHeight` 最大的文本片段决定。文本片段的 `lineHeight` 可直接在 `rich` 中指定,也可以在 `rich` 的父层级中统一指定而采用到 `rich` 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(`border box size`)。\n\n在一行的 `lineHeight` 被决定后,一行内,文本片段的竖直位置,由文本片段的 `verticalAlign` 来指定(这里和 CSS 中的规则稍有不同):\n\n- `'bottom'`:文本片段的盒的底边贴住行底。\n- `'top'`:文本片段的盒的顶边贴住行顶。\n- `'middle'`:居行中。\n\n文本块的宽度,可以直接由文本块的 `width` 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 `align` 决定了文本片段在行中的水平位置:\n\n- 首先,从左向右连续紧靠放置 `align` 为 `'left'` 的文本片段盒。\n- 然后,从右向左连续紧靠放置 `align` 为 `'right'` 的文本片段盒。\n- 最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。\n\n关于文字在文本片段盒中的位置:\n\n- 如果 `align` 为 `'center'`,则文字在文本片段盒中是居中的。\n- 如果 `align` 为 `'left'`,则文字在文本片段盒中是居左的。\n- 如果 `align` 为 `'right'`,则文字在文本片段盒中是居右的。\n\n## 特殊效果:图标、分割线、标题块、简单表格\n\n看下面的例子:\n\n```js live {layout: 'lr'}\noption = {\n series: [\n {\n type: 'scatter',\n data: [\n {\n value: [0, 0],\n label: {\n normal: {\n formatter: [\n '{tc|Center Title}{titleBg|}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n },\n {\n value: [0, 1],\n label: {\n normal: {\n formatter: [\n '{titleBg|Left Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n')\n }\n }\n },\n {\n value: [0, 2],\n label: {\n normal: {\n formatter: [\n '{titleBg|Right Title}',\n ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ',\n '{hr|}',\n ' xxxxx {showers|} xxxxxxxx xxxxxxxxx '\n ].join('\\n'),\n rich: {\n titleBg: {\n align: 'right'\n }\n }\n }\n }\n }\n ],\n symbolSize: 1,\n label: {\n normal: {\n show: true,\n backgroundColor: '#ddd',\n borderColor: '#555',\n borderWidth: 1,\n borderRadius: 5,\n color: '#000',\n fontSize: 14,\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n },\n tc: {\n align: 'center',\n color: '#eee'\n },\n hr: {\n borderColor: '#777',\n width: '100%',\n borderWidth: 0.5,\n height: 0\n },\n sunny: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'\n }\n },\n cloudy: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'\n }\n },\n showers: {\n height: 30,\n align: 'left',\n backgroundColor: {\n image:\n 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'\n }\n }\n }\n }\n }\n }\n ],\n xAxis: {\n show: false,\n min: -1,\n max: 1\n },\n yAxis: {\n show: false,\n min: 0,\n max: 2,\n inverse: true\n }\n};\n```\n\n文本片段的 `backgroundColor` 可以指定为图片后,就可以在文本中使用图标了:\n\n```js\nlabelOption = {\n rich: {\n Sunny: {\n // 这样设定 backgroundColor 就可以是图片了。\n backgroundColor: {\n image: './data/asset/img/weather/sunny_128.png'\n },\n // 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。\n height: 30\n }\n }\n};\n```\n\n分割线实际是用 border 实现的:\n\n```js\nlabelOption = {\n rich: {\n hr: {\n borderColor: '#777',\n // 这里把 width 设置为 '100%',表示分割线的长度充满文本块。\n // 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。\n // 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。\n width: '100%',\n borderWidth: 0.5,\n height: 0\n }\n }\n};\n```\n\n标题块是使用 `backgroundColor` 实现的:\n\n```js\nlabelOption = {\n // 标题文字居左\n formatter: '{titleBg|Left Title}',\n rich: {\n titleBg: {\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n\n// 标题文字居中。\n// 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。\nlabelOption = {\n formatter: '{tc|Center Title}{titleBg|}',\n rich: {\n titleBg: {\n align: 'right',\n backgroundColor: '#000',\n height: 30,\n borderRadius: [5, 5, 0, 0],\n padding: [0, 10, 0, 10],\n width: '100%',\n color: '#eee'\n }\n }\n};\n```\n\n简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 [该例子](${exampleEditorPath}pie-rich-text)\n"}}]);
\ No newline at end of file
diff --git a/handbook/en/application/chart-types/bar/bar-race/index.html b/handbook/en/application/chart-types/bar/bar-race/index.html
new file mode 100644
index 0000000..93bbe09
--- /dev/null
+++ b/handbook/en/application/chart-types/bar/bar-race/index.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1> <h2 id="related-options" tabindex="-1">Related Options</h2> <p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p> <blockquote><p>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.</p></blockquote> <ol><li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li> <li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li> <li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li> <li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li> <li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li> <li><code>xAxis.max</code> is suggested to be set to be <code>'dataMax'</code> so that the maximum of data is used as X maximum.</li> <li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li> <li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn't start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li> <li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li> <li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li></ol> <h2 id="demo" tabindex="-1">Demo</h2> <p>A complete demo:</p> <div class="md-live layout-tb"><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">var data = [];
+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><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>
+ 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="token punctuation">,</span>
+ 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><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>
+ 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><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>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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/bar-race.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,o,n,s,c,h,g,p,b,C,m,I,A,u,f,y,B,w,W,S,G,R,v,Y,x,D,K,k,X,H,Z,F,V,L,E,O,P,J,M,U,z,T,N,Q,q,_,j,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="dynamic-sorting-bar-chart" tabindex="-1">Dynamic Sorting Bar Chart</h1>\n<h2 id="related-options" tabindex="-1">Related Options</h2>\n<p>Bar race is a chart that shows changes in the ranking of data over time and it is supported by default sinde ECharts 5.</p>\n<blockquote>\n<p>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.</p>\n</blockquote>\n<ol>\n<li>Set <code>yAxis.realtimeSort</code> to be <code>true</code> to enable bar race</li>\n<li>Set <code>yAxis.inverse</code> to be <code>true</code> to display longer bars at top</li>\n<li><code>yAxis.animationDuration</code> is suggested to be set to be <code>300</code> for bar reordering animation for the first time</li>\n<li><code>yAxis.animationDurationUpdate</code> is suggested to be set to be <code>300</code> for bar reordering animation for later times</li>\n<li>Set <code>yAxis.max</code> to be <em>n - 1</em> where <em>n</em> is the number of bars to be displayed; otherwise, all bars are displayed</li>\n<li><code>xAxis.max</code> is suggested to be set to be <code>\'dataMax\'</code> so that the maximum of data is used as X maximum.</li>\n<li>If realtime label changing is required, set <code>series.label.valueAnimation</code> to be <code>true</code></li>\n<li>Set <code>animationDuration</code> to be <code>0</code> so that the first animation doesn\'t start from 0; if you wish otherwise, set it to be the same value as <code>animationDurationUpdate</code></li>\n<li><code>animationDurationUpdate</code> is suggested to be set to be <code>3000</code> for animation update duration, which should be the same as the frequency of calling <code>setOption</code></li>\n<li>Call <code>setOption</code> to update data to be of next time with <code>setInterval</code> at the frequency of <code>animationDurationUpdate</code></li>\n</ol>\n<h2 id="demo" tabindex="-1">Demo</h2>\n<p>A complete demo:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiBydW4oKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgewogIHJ1bigpOwp9LCAwKTsKc2V0SW50ZXJ2YWwoZnVuY3Rpb24oKSB7CiAgcnVuKCk7Cn0sIDMwMDApOw\'" v-bind="{}" />\n',postPath:"en/application/chart-types/bar/bar-race"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:b}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:u},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:J}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:b}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:S}]},{title:"Application",dir:G,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:E},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/bar/basic-bar/index.html b/handbook/en/application/chart-types/bar/basic-bar/index.html
new file mode 100644
index 0000000..c26c39e
--- /dev/null
+++ b/handbook/en/application/chart-types/bar/basic-bar/index.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1> <p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p> <p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>'bar'</code>.</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>Let's begin with a basic bar chart:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">/*
+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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for <code>'xAxis'</code>. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the <code>data</code> in <code>'series'</code>.</p> <h2 id="multi-series-bar-chart" tabindex="-1">Multi-series Bar Chart</h2> <p>You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the <code>series</code>.</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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>
+ 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 number">20</span><span class="token punctuation">,</span> <span class="token number">27</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="customized-bar-chart" tabindex="-1">Customized Bar Chart</h2> <h3 id="styles" tabindex="-1">Styles</h3> <p>It is a good idea to install the style of Bar Chart by using <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">'series.itemStyle'</a>. Description of the SCI:</p> <ul><li>Color of column(<code>'color'</code>);</li> <li>Outline color(<code>'borderColor'</code>), width(<code>'borderWidth'</code>), type(<code>'borderType'</code>) of column;</li> <li>Border radius of column(<code>'barBorderRadius'</code>);</li> <li>Transparency(<code>'opacity'</code>);</li> <li>Shadow type(<code>'shadowBlur'</code>, <code>'shadowColor'</code>, <code>'shadowOffsetX'</code>, <code>'shadowOffsetY'</code>)</li></ul> <p>Here is a example:</p> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, we defined the style of the bar chart by <code>'itemStyle'</code> of corresponding <code>series</code>. For complete configuration items and their usage, please check the configuration item manual: <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p> <h3 id="width-and-height-of-column" tabindex="-1">Width and Height of Column</h3> <p>You can use <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> to change the width of the bar. For instance, the <code>'barWidth'</code> in the following case was set to <code>'20%'</code>. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% <code>'barWidth'</code> means 4% for the entire x-axis.</p> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In addition, <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>. When the corresponding height of data is smaller than the limit, ECharts will take 'barMinHeight' as the replaced height.</p> <h3 id="column-spacing" tabindex="-1">Column Spacing</h3> <p>There are two kinds of column spacing. One is the spacing between different series under the same category: <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>. The other is the spacing between categories: <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, the <code>barGap</code> is <code>'20%'</code>. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the <code>barCategoryGap</code> to <code>'40%'</code>, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).</p> <p>Usually, <code>barWidth</code> is not necessary to be clarified if <code>'barGap'</code> and <code>barCategoryGap</code> was set. If you need to make sure the bar is not too wide while the graph is large, try to use <code>barMaxWidth</code> to limit the maximum width of bars.</p> <blockquote><p>In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.</p></blockquote> <h3 id="add-background-color-for-bars" tabindex="-1">Add Background Color for Bars</h3> <p>You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by <a href="https://echarts.apache.org/option.html#series-bar.showBackground">'showBackground'</a> and configured by <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle">'backgroundStyle'</a>.</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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 number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/basic-bar.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,d,o,l,s,n,c,h,g,C,I,p,A,b,m,w,f,y,u,B,O,D,M,S,L,k,x,W,J,Y,G,H,R,v,X,K,F,z,T,E,U,V,j,Q,N,Z,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-bar-chart" tabindex="-1">Basic Bar Chart</h1>\n<p>Bar Chart, is a chart that presents the comparisons among discrete data. The length of the bars is proportionally related to the categorical data.</p>\n<p>To set the bar chart, you need to set the <code>type</code> of <code>series</code> as <code>\'bar\'</code>.</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[Option]</a></p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>Let\'s begin with a basic bar chart:</p>\n<md-code-block lang="js" code="\'LyoKbGl2ZQoKKi8Kb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>In this case, the x-axis is under the category type. Therefore, you should define some corresponding values for <code>\'xAxis\'</code>. Meanwhile, the data type of the y-axis is numerical. The range of the y-axis will be generated automatically by the <code>data</code> in <code>\'series\'</code>.</p>\n<h2 id="multi-series-bar-chart" tabindex="-1">Multi-series Bar Chart</h2>\n<p>You may use a series to represent a group of related data. To show multiple series in the same chart, you need to add one more array under the <code>series</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-bar-chart" tabindex="-1">Customized Bar Chart</h2>\n<h3 id="styles" tabindex="-1">Styles</h3>\n<p>It is a good idea to install the style of Bar Chart by using <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">\'series.itemStyle\'</a>. Description of the SCI:</p>\n<ul>\n<li>Color of column(<code>\'color\'</code>);</li>\n<li>Outline color(<code>\'borderColor\'</code>), width(<code>\'borderWidth\'</code>), type(<code>\'borderType\'</code>) of column;</li>\n<li>Border radius of column(<code>\'barBorderRadius\'</code>);</li>\n<li>Transparency(<code>\'opacity\'</code>);</li>\n<li>Shadow type(<code>\'shadowBlur\'</code>, <code>\'shadowColor\'</code>, <code>\'shadowOffsetX\'</code>, <code>\'shadowOffsetY\'</code>)</li>\n</ul>\n<p>Here is a example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, we defined the style of the bar chart by <code>\'itemStyle\'</code> of corresponding <code>series</code>. For complete configuration items and their usage, please check the configuration item manual: <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="width-and-height-of-column" tabindex="-1">Width and Height of Column</h3>\n<p>You can use <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> to change the width of the bar. For instance, the <code>\'barWidth\'</code> in the following case was set to <code>\'20%\'</code>. It indicates that width of each bar is 20% of the category width. As there are 5 data in every series, 20% <code>\'barWidth\'</code> means 4% for the entire x-axis.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In addition, <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> has limited the maximum width of the bar. For some small value, you can declare a minimum height for the bar: <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>. When the corresponding height of data is smaller than the limit, ECharts will take \'barMinHeight\' as the replaced height.</p>\n<h3 id="column-spacing" tabindex="-1">Column Spacing</h3>\n<p>There are two kinds of column spacing. One is the spacing between different series under the same category: <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>. The other is the spacing between categories: <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, the <code>barGap</code> is <code>\'20%\'</code>. That means the distance between bars under the same category is 20% of the bar width. For instance, if we set the <code>barCategoryGap</code> to <code>\'40%\'</code>, the gap on each side of the bar will take 40% place in categories (compared with the width of the column).</p>\n<p>Usually, <code>barWidth</code> is not necessary to be clarified if <code>\'barGap\'</code> and <code>barCategoryGap</code> was set. If you need to make sure the bar is not too wide while the graph is large, try to use <code>barMaxWidth</code> to limit the maximum width of bars.</p>\n<blockquote>\n<p>In the same cartesian coordinate system, the property will be shared by several column series. To make sure it takes effect on the graph, please set the property on the last bar chart series of the system.</p>\n</blockquote>\n<h3 id="add-background-color-for-bars" tabindex="-1">Add Background Color for Bars</h3>\n<p>You might want to change the background color of bars sometimes. After ECharts v4.7.0, this function can be enabled by <a href="https://echarts.apache.org/option.html#series-bar.showBackground">\'showBackground\'</a> and configured by <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle">\'backgroundStyle\'</a>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/application/chart-types/bar/basic-bar"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:w},{title:"数据集",dir:f},{title:"数据转换",dir:y},{title:"坐标系",dir:u,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:O},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:W,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:E}]}]},{title:U,dir:t,draft:e},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Z,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:U,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:f},{title:"Data Transform",dir:y},{title:"Coordinate",dir:u,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:O},{title:"Event and Action",dir:D}]},{title:"Application",dir:M,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:W,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:F},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Z,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/application/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/bar/stacked-bar/index.html b/handbook/en/application/chart-types/bar/stacked-bar/index.html
new file mode 100644
index 0000000..523bf3a
--- /dev/null
+++ b/handbook/en/application/chart-types/bar/stacked-bar/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="stacked-bar-chart" tabindex="-1">Stacked Bar Chart</h1> <p>Sometimes, 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.</p> <p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p> <blockquote><p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p> <p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</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/application/chart-types/bar/stacked-bar.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,s,n,c,h,p,g,f,u,m,b,C,I,w,A,k,v,y,B,S,D,E,P,x,R,L,T,q,G,H,M,z,J,K,O,V,W,Y,_,F,N,U,X,Q,j,Z,$,tt,et,it){return{layout:"default",data:[{html:"<h1 id=\"stacked-bar-chart\" tabindex=\"-1\">Stacked Bar Chart</h1>\n<p>Sometimes, 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.</p>\n<p>There is a simple way to implement a stacked bar chart by ECharts. You need to set the same string type value for a group of series in <code>stack</code>. The series with the same <code>stack</code> value will be in the same category.</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>In this case, the position of the second series is based on the position of the first series, the height increased is corresponding to the first series' height. Therefore, from the position of the second series, you can find the changing trend of the sum of the two.</p>\n<blockquote>\n<p>The value of <code>stack</code> explained what series will be stacked up together. Theoretically, the specific value of 'stack' is meaningless. However, we prefer some suggestive strings for the convenience of reading.</p>\n<p>For instance, here is a chart with 4 series that counted the amount of male and female. "adult male" and "boy" need to be stacked while "adult female" and "girl" need to be stacked. In this case, the suggestive value of <code>stack</code> is <code>'male'</code> and <code>'female'</code>. Although meaningless strings like <code>'a'</code> and <code>'b'</code> can achieve the same effect but the code will have worse readability.</p>\n</blockquote>\n",postPath:"en/application/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:I},{title:"数据集",dir:w},{title:"数据转换",dir:A},{title:"坐标系",dir:k,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:q},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:W}]}]},{title:Y,dir:e,draft:t},{title:"跨平台方案",dir:_,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:Y,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:I},{title:"Dataset",dir:w},{title:"Data Transform",dir:A},{title:"Coordinate",dir:k,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:B}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:q},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:K},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:_,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/bar/waterfall/index.html b/handbook/en/application/chart-types/bar/waterfall/index.html
new file mode 100644
index 0000000..6ed38a6
--- /dev/null
+++ b/handbook/en/application/chart-types/bar/waterfall/index.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="waterfall" tabindex="-1">Waterfall</h1> <p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p> <p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p> <div class="md-live layout-tb"><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">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+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><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<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 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>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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/waterfall.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,g,s,n,C,c,o,I,h,A,p,w,b,B,m,f,G,S,u,Z,H,K,L,y,R,X,v,D,T,M,V,k,z,N,Y,x,E,J,O,P,W,F,U,j,Q,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="waterfall" tabindex="-1">Waterfall</h1>\n<p>There is no waterfall series in Apache ECharts, but we can simulate the effect using a stacked bar chart.</p>\n<p>Assuming that the values in the data array represent an increase or decrease from the previous value.</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>That is, the first data is <code>900</code> and the second data <code>345</code> represents the addition of <code>345</code> to <code>900</code>, etc. When presenting this data as a stepped waterfall chart, we can use three series: the first is a non-interactive transparent series to implement the suspension bar effect; the second series is used to represent positive numbers; and the second series is used to represent negative numbers.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/application/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:h}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:G,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:u},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:H,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:y},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:X,draft:t},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:T},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:x}]},{title:"散点图",dir:E,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:o},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:h}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:G,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:u},{title:"Event and Action",dir:Z}]},{title:"Application",dir:H,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:y},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:X,draft:t},{title:"Waterfall",dir:v}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:T},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:x}]},{title:"Scatter",dir:E,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/line/area-line/index.html b/handbook/en/application/chart-types/line/area-line/index.html
new file mode 100644
index 0000000..9e220cc
--- /dev/null
+++ b/handbook/en/application/chart-types/line/area-line/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="area-chart" tabindex="-1">Area Chart</h1> <p>The 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.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>'areaStyle'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>'areaStyle'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</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/application/chart-types/line/area-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hank" target="_blank" class="post-contributor"><img alt="Hank" src="https://avatars.githubusercontent.com/Hank?size=60"> <span>Hank</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,c,h,p,g,C,f,I,b,A,u,m,y,w,B,S,v,G,x,E,P,L,k,R,D,M,T,z,F,H,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="area-chart" tabindex="-1">Area Chart</h1>\n<p>The 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.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If you want to change the area style of the line chart, try to use <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a>. Set <code>\'areaStyle\'</code> to <code>{}</code> to use the default type: use the color of series to fill the area in translucent. If you want to change the style, try to override the configuration items in <code>\'areaStyle\'</code>. For example, the color of the second series was changed to yellow with 50% opacity.</p>\n',postPath:"en/application/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:u},{title:"数据集",dir:m},{title:"数据转换",dir:y},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:E},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:k,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:m},{title:"Data Transform",dir:y},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:v}]},{title:"Application",dir:G,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:E},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:k,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/line/basic-line/index.html b/handbook/en/application/chart-types/line/basic-line/index.html
new file mode 100644
index 0000000..cafa734
--- /dev/null
+++ b/handbook/en/application/chart-types/line/basic-line/index.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="basic-line-chart" tabindex="-1">Basic Line Chart</h1> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, we set the type of axis to <code>category</code> and <code>value</code> under <code>xAxis</code> and <code>yAxis</code>. We also clarified the content on the x-axis through <code>data</code>. In <code>series</code>, we set the type to <code>line</code>, and specify the values of three points through <code>data</code>. In this way, we got a simple line chart.</p> <blockquote><p>The <code>type</code> here can be omitted because the defaults of the axis are <code>value</code> while <code>xAxis</code> has specified the category's <code>data</code>. In this case, <code>ECharts</code> can recognize that this is a category axis.</p></blockquote> <h2 id="line-chart-in-cartesian-coordinate-system" tabindex="-1">Line Chart in Cartesian Coordinate System</h2> <p>How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in <code>data</code> of the <code>series</code> is represented by an array containing two elements.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="customized-line-chart" tabindex="-1">Customized Line Chart</h2> <h3 id="line-style" tabindex="-1">Line Style</h3> <p>Line style can be changed by <code>lineStyle</code> setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> to figure out.</p> <p>Here is an example of setting color, line width and type.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.</p> <h3 id="item-style" tabindex="-1">Item Style</h3> <p>Item style can be change by <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a>. It included <code>color</code>, <code>borderColor</code>, <code>borderStyle</code>, <code>borderWidth</code>, <code>borderType</code>, <code>shadowColor</code>, <code>opacity</code> and so on. It works the same as the <code>lineType</code>, so we will not do further discuss.</p> <h2 id="display-value-on-items." tabindex="-1">Display Value on Items.</h2> <p>In the series, the label of the item was specified by <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a>. If we change the <code>show</code> under <code>label</code> to <code>true</code>, the value will be displayed by default. Otherwise, if <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> is <code>true</code>, the label will show only if the mouse moved across the item.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="empty-data" tabindex="-1">Empty Data</h2> <p>In a <code>series</code>, there are empty data. It has some difference with <code>0</code>. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.</p> <p>In ECharts, we use <code>'-'</code> to represent null data, It is applicable for data in other series.</p> <div class="md-live layout-tb"><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 = {
+ 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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please note the difference between the empty data and 0.</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/application/chart-types/line/basic-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,d,a,r,l,o,n,s,c,h,g,C,p,I,A,b,w,y,m,f,B,u,x,v,S,G,L,D,E,O,R,W,z,M,k,H,V,T,J,Q,X,P,K,F,Z,j,U,Y,N,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="basic-line-chart" tabindex="-1">Basic Line Chart</h1>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>We can use the following code to build a line chart which has x-axis as <code>category</code>, y-axis as <code>value</code>:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>In this case, we set the type of axis to <code>category</code> and <code>value</code> under <code>xAxis</code> and <code>yAxis</code>. We also clarified the content on the x-axis through <code>data</code>. In <code>series</code>, we set the type to <code>line</code>, and specify the values of three points through <code>data</code>. In this way, we got a simple line chart.</p>\n<blockquote>\n<p>The <code>type</code> here can be omitted because the defaults of the axis are <code>value</code> while <code>xAxis</code> has specified the category\'s <code>data</code>. In this case, <code>ECharts</code> can recognize that this is a category axis.</p>\n</blockquote>\n<h2 id="line-chart-in-cartesian-coordinate-system" tabindex="-1">Line Chart in Cartesian Coordinate System</h2>\n<p>How to implement if we want the line chart to be continuous? The answer is simple, as long as every value in <code>data</code> of the <code>series</code> is represented by an array containing two elements.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-line-chart" tabindex="-1">Customized Line Chart</h2>\n<h3 id="line-style" tabindex="-1">Line Style</h3>\n<p>Line style can be changed by <code>lineStyle</code> setting. You can specify color, line width, polyline type and opacity etc.. For details, please see the handbook <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> to figure out.</p>\n<p>Here is an example of setting color, line width and type.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>When we set the line width here, the line width of items will not change. The line style of items needs to be set separately.</p>\n<h3 id="item-style" tabindex="-1">Item Style</h3>\n<p>Item style can be change by <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a>. It included <code>color</code>, <code>borderColor</code>, <code>borderStyle</code>, <code>borderWidth</code>, <code>borderType</code>, <code>shadowColor</code>, <code>opacity</code> and so on. It works the same as the <code>lineType</code>, so we will not do further discuss.</p>\n<h2 id="display-value-on-items." tabindex="-1">Display Value on Items.</h2>\n<p>In the series, the label of the item was specified by <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a>. If we change the <code>show</code> under <code>label</code> to <code>true</code>, the value will be displayed by default. Otherwise, if <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> is <code>true</code>, the label will show only if the mouse moved across the item.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="empty-data" tabindex="-1">Empty Data</h2>\n<p>In a <code>series</code>, there are empty data. It has some difference with <code>0</code>. While there are empty elements, the lines chart will ignore that point without pass through it----empty elements will not be connected by the points next by.</p>\n<p>In ECharts, we use <code>\'-\'</code> to represent null data, It is applicable for data in other series.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please note the difference between the empty data and 0.</p>\n</blockquote>\n',postPath:"en/application/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:y},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:x},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:O,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:P}]}]},{title:K,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:y},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:x},{title:"Event and Action",dir:v}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:O,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/application/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/line/smooth-line/index.html b/handbook/en/application/chart-types/line/smooth-line/index.html
new file mode 100644
index 0000000..a7e1dd1
--- /dev/null
+++ b/handbook/en/application/chart-types/line/smooth-line/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1> <p>The 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 <code>smooth</code> to <code>true</code> to achieve this effect.</p> <div class="md-live layout-tb"><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 = {
+ 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 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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/line/smooth-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,c,h,s,p,g,f,C,m,b,u,B,I,A,v,S,y,w,E,P,x,L,k,D,R,G,M,V,z,O,T,_,H,Q,W,J,X,F,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="smooth-line-chart" tabindex="-1">Smooth Line Chart</h1>\n<p>The 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 <code>smooth</code> to <code>true</code> to achieve this effect.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/application/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:I},{title:"数据转换",dir:A},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:D,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:_},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:J}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:I},{title:"Data Transform",dir:A},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:w}]},{title:"Application",dir:E,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:D,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:_},{title:"Ring Style",dir:H},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/line/stacked-line/index.html b/handbook/en/application/chart-types/line/stacked-line/index.html
new file mode 100644
index 0000000..f40c6e6
--- /dev/null
+++ b/handbook/en/application/chart-types/line/stacked-line/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">
+ <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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1> <p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>'stack'</code> in <code>series</code> to decide which series should be stacked together.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/line/stacked-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,c,s,o,h,C,g,p,I,A,f,b,B,m,u,w,L,S,k,y,R,v,G,E,x,D,P,O,H,M,W,z,F,J,V,K,N,Q,T,X,Y,_,j,U,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="stacked-line-chart" tabindex="-1">Stacked Line Chart</h1>\n<p>Similar to the <a href="en/application/chart-types/bar/stacked-bar">Stacked Bar Chart</a>, Stacked Line Chart use the <code>\'stack\'</code> in <code>series</code> to decide which series should be stacked together.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>However, without clarification, it is hard for us to judge whether it is a stacked line chart or normal line chart. Therefore, filling color for the area under the line is recommended to indicate for a stacked bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"en/application/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:S},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:O},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:S},{title:"Event and Action",dir:k}]},{title:"Application",dir:y,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:O},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/line/step-line/index.html b/handbook/en/application/chart-types/line/step-line/index.html
new file mode 100644
index 0000000..3bd0e8f
--- /dev/null
+++ b/handbook/en/application/chart-types/line/step-line/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="step-line-chart" tabindex="-1">Step Line Chart</h1> <p>The 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.</p> <p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>'start'</code>, <code>'end'</code>, and <code>'middle'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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>
+ 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="token number">230</span><span class="token punctuation">,</span> <span class="token number">210</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">'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="token number">430</span><span class="token punctuation">,</span> <span class="token number">410</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">'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="token number">530</span><span class="token punctuation">,</span> <span class="token number">510</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Please focus on the difference of line between three separate types.</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/application/chart-types/line/step-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,c,s,h,g,p,C,I,A,b,w,f,m,u,B,y,k,L,M,v,S,R,D,E,x,G,P,T,z,J,U,V,Z,H,O,W,X,N,K,F,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="step-line-chart" tabindex="-1">Step Line Chart</h1>\n<p>The 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.</p>\n<p>In ECharts, <code>step</code> is used to characterize the connection type of the step line chart. It has three available values: <code>\'start\'</code>, <code>\'end\'</code>, and <code>\'middle\'</code>. For item A and B, these values corresponded that the corner occurred at A, B, and mid-point between A and B.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIFN0YXJ0JywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnc3RhcnQnLAogICAgICBkYXRhOiBbMTIwLCAxMzIsIDEwMSwgMTM0LCA5MCwgMjMwLCAyMTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcCBNaWRkbGUnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0ZXA6ICdtaWRkbGUnLAogICAgICBkYXRhOiBbMjIwLCAyODIsIDIwMSwgMjM0LCAyOTAsIDQzMCwgNDEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgRW5kJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnZW5kJywKICAgICAgZGF0YTogWzQ1MCwgNDMyLCA0MDEsIDQ1NCwgNTkwLCA1MzAsIDUxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>Please focus on the difference of line between three separate types.</p>\n</blockquote>\n',postPath:"en/application/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:t},{title:"系列",dir:w,draft:t},{title:"样式",dir:f},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:E,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:P},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:Z},{title:"南丁格尔图(玫瑰图)",dir:H}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:X,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:w,draft:t},{title:"Style",dir:f},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:L}]},{title:"Application",dir:M,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:E,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:P},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:Z},{title:"Rose Style",dir:H}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/pie/basic-pie/index.html b/handbook/en/application/chart-types/pie/basic-pie/index.html
new file mode 100644
index 0000000..a95325b
--- /dev/null
+++ b/handbook/en/application/chart-types/pie/basic-pie/index.html
@@ -0,0 +1,173 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1> <p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The 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 series. Let's begin with a basic pie chart:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>To be mentioned, the <code>value</code> here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.</p> <h2 id="customized-pie-chart" tabindex="-1">Customized Pie Chart</h2> <h3 id="radius-of-pie-chart" tabindex="-1">Radius of Pie Chart</h3> <p>The radius of pie chart can be defined by <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a>. Both percent string(<code>'60%'</code>) and absolute pixel string(<code>'200'</code>) are available. While it is a percent string, it is proportional related to the shorter container(<code>'div'</code>) edge.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="hide-chart-while-data-sum-is-0" tabindex="-1">Hide Chart While Data Sum is 0</h2> <p>By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don't want to show any shape while all 4 series have value equals 0, you could define <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> to <code>false</code>.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you are willing to hide the label as well, define the <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> to <code>false</code> as well.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/pie/basic-pie.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,a,l,g,o,C,I,n,s,h,A,c,p,b,m,f,u,w,B,v,W,H,Z,y,G,x,V,S,T,U,K,L,N,O,F,P,E,R,z,D,X,Y,J,Q,k,M,j,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="basic-pie-chart" tabindex="-1">Basic Pie Chart</h1>\n<p>Pie charts are mainly used to show the proportion of several categories compared with the total. The radians represent the proportion of each category.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The 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 series. Let\'s begin with a basic pie chart:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>To be mentioned, the <code>value</code> here does not need to be percentage data. ECharts will proportionately distribute their corresponding radians in the pie chart depending on all the data.</p>\n<h2 id="customized-pie-chart" tabindex="-1">Customized Pie Chart</h2>\n<h3 id="radius-of-pie-chart" tabindex="-1">Radius of Pie Chart</h3>\n<p>The radius of pie chart can be defined by <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a>. Both percent string(<code>\'60%\'</code>) and absolute pixel string(<code>\'200\'</code>) are available. While it is a percent string, it is proportional related to the shorter container(<code>\'div\'</code>) edge.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxNTQ4LAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="hide-chart-while-data-sum-is-0" tabindex="-1">Hide Chart While Data Sum is 0</h2>\n<p>By default, if the data sum is 0, the series will divide the shape equally. For instance, if you don\'t want to show any shape while all 4 series have value equals 0, you could define <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> to <code>false</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdEaXJlY3QgVmlzaXQnCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>If you are willing to hide the label as well, define the <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> to <code>false</code> as well.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdwaWUnLAogICAgICAgIHN0aWxsU2hvd1plcm9TdW06IGZhbHNlLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICAgIHNob3c6IGZhbHNlCiAgICAgICAgfQogICAgICAgIGRhdGE6IFt7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnRGlyZWN0IFZpc2l0JwogICAgICAgIH0sIHsKICAgICAgICAgICAgdmFsdWU6IDAsCiAgICAgICAgICAgIG5hbWU6ICdVbmlvbiBBZCcKICAgICAgICB9LCB7CiAgICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgICBuYW1lOiAnU2VhcmNoIEVuZ2luZScKICAgICAgICB9XQogICAgfV0KfTs\'" v-bind="{}" />\n',postPath:"en/application/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:C},{title:"寻求帮助",dir:I},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:f},{title:"数据集",dir:u},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:U,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:X,dir:t,draft:i},{title:"跨平台方案",dir:Y,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:k},{title:"数据下钻",dir:M,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:X,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:g},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:C},{title:"Get Help",dir:I},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:f},{title:"Dataset",dir:u},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:H}]},{title:"Application",dir:Z,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:T}]},{title:"Line",dir:U,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:E},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:Y,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:k},{title:"Drilldown",dir:M,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/application/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/pie/doughnut/index.html b/handbook/en/application/chart-types/pie/doughnut/index.html
new file mode 100644
index 0000000..2b5cd2d
--- /dev/null
+++ b/handbook/en/application/chart-types/pie/doughnut/index.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="doughnut-chart" tabindex="-1">Doughnut Chart</h1> <p>Doughnut 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.</p> <h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2> <p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p> <p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.</p> <h2 id="show-text-in-middle-of-doughnut-from-highlighted-sector" tabindex="-1">Show Text In Middle Of Doughnut From Highlighted Sector</h2> <p>The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix <code>label</code> in the middle of the chart while hiding <code>label</code> in default.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p> <p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</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/application/chart-types/pie/doughnut.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,o,n,h,g,s,c,C,I,A,p,u,m,b,f,w,B,y,v,x,W,G,D,E,L,U,V,Z,H,O,z,J,S,F,R,Y,M,P,T,k,K,N,X,Q,j,_,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="doughnut-chart" tabindex="-1">Doughnut Chart</h1>\n<p>Doughnut 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.</p>\n<h2 id="basic-doughnut-chart" tabindex="-1">Basic Doughnut Chart</h2>\n<p>In ECharts, the radius of the pie chart could also be an array with 2 elements. Every element in the array could be string or value. The first element represents the inner radius while the second one is the outer radius.</p>\n<p>The bar chart, from this perspective, is a subset of the doughnut chart that has inner radius equals to 0.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQSBDYXNlIG9mIERvdWdobnV0IENoYXJ0JywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>If we set one radius to string of a percentage value, while the other to a value, the inner radius will be smaller than the outer radius in some resolution. ECharts will choose the smaller element for the inner radius automatically. However, it will still cause not an unexpected outcome.</p>\n<h2 id="show-text-in-middle-of-doughnut-from-highlighted-sector" tabindex="-1">Show Text In Middle Of Doughnut From Highlighted Sector</h2>\n<p>The previous case gives you a way to show fixed text in the middle of doughnut chart. The next case will show you how to display the corresponding text of the sector highlighted by the mouse. The general idea is to fix <code>label</code> in the middle of the chart while hiding <code>label</code> in default.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>In this case, <code>avoidLabelOverlap</code> is used to control whether ECharts adjust the position of label to avoid overlaps. Default value of <code>avoidLabelOverlap</code> is <code>true</code>. We want the label to be fixed in the middle so that we need to define it as <code>false</code>.</p>\n<p>Therefore, the middle of doughnut chart will show the <code>name</code> of the highlighted sector.</p>\n',postPath:"en/application/chart-types/pie/doughnut"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:g},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:v},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:U,draft:t},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:Z,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:P}]}]},{title:T,dir:i,draft:t},{title:"跨平台方案",dir:k,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:T,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:g},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:v},{title:"Event and Action",dir:x}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:U,draft:t},{title:"Waterfall",dir:V}]},{title:"Line",dir:Z,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:R},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:P}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/pie/rose/index.html b/handbook/en/application/chart-types/pie/rose/index.html
new file mode 100644
index 0000000..73bf4dc
--- /dev/null
+++ b/handbook/en/application/chart-types/pie/rose/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1> <p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p> <p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>'area'</code>. All other configs are the same as a basic pie chart.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/pie/rose.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,c,o,h,g,C,A,I,p,f,b,m,u,B,H,v,w,y,S,E,P,D,O,R,K,x,L,k,V,W,M,Y,G,T,Z,_,z,F,N,U,X,J,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="rose-chart%EF%BC%88nightingale-chart%EF%BC%89" tabindex="-1">Rose Chart(Nightingale Chart)</h1>\n<p>Rose Chart, which was also called the nightingale chart, usually indicates categories by sector of the same radius but different radius.</p>\n<p>ECharts can implement Rose Chart by defining <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> of pie chart to <code>\'area\'</code>. All other configs are the same as a basic pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/application/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:H,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:G},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:_}]}]},{title:z,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:z,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:H,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:y}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:K}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:G},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/chart-types/scatter/basic-scatter/index.html b/handbook/en/application/chart-types/scatter/basic-scatter/index.html
new file mode 100644
index 0000000..52cf906
--- /dev/null
+++ b/handbook/en/application/chart-types/scatter/basic-scatter/index.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1> <p>Scatter 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.</p> <h2 id="simple-example" tabindex="-1">Simple Example</h2> <p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="scatter-chart-in-cartesian-coordinate-system" tabindex="-1">Scatter Chart in Cartesian Coordinate System</h2> <p>In the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in <code>data</code>, but not in <code>xAxis</code> and <code>yAxis</code>.</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="customized-scatter-chart" tabindex="-1">Customized Scatter Chart</h2> <h3 id="symbol-style" tabindex="-1">Symbol Style</h3> <p>Symbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.</p> <p>The built-in shape in ECharts included: <code>'circle'</code>, <code>'rect'</code>(rectangle), <code>'roundRect'</code>(rounded rectangle), <code>'triangle'</code>, <code>'diamond'</code>, <code>'pin'</code> and <code>'arrow'</code>. To use built-in shapes, you need to state the <code>symbol</code> to the corresponding string.</p> <p>If you want to define the shape as any image, try to use <code>'image'</code> following by the path, eg. <code>'image://http://example.com/xxx.png'</code> or <code>'image://./xxx.png'</code>.</p> <p>ECharts <code>symbol</code> also supports SVG vector graphics. You can define <code>symbol</code> as an SVG file path that starts with <code>'path://'</code> to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.</p> <p>Method to find the SVG path: Open an <code>SVG</code> path; Find the path similar as <code><path d="M… L…"></path></code>; Add <code>d</code>'s value after <code>'path://'</code>. Let's check how to define an item to vector shape of heart.</p> <p>Firstly, we need an <code>SVG</code> file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-xml line-numbers"><code><span class="token prolog"><?xml version="1.0" encoding="iso-8859-1"?></span>
+<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://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>xlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xlink<span class="token punctuation">"</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 51.997 51.997<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>enable-background:new 0 0 51.997 51.997;<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>space</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preserve<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>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.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 class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In ECharts, define config <code>symbol</code> as a path of d:</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>In this way, we have a heart vector of the item.</p> <h3 id="symbol-size" tabindex="-1">Symbol Size</h3> <p>The size of symbol is defined by <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a>. It can be s pixel value of the item size, or an array included two numbers, to define the width and height.</p> <p>Besides, it can be defined as a call back function. Here is an example of the format:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">Array</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> params<span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">Array</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</span><span class="token punctuation">]</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">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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/scatter/basic-scatter.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,a,d,r,l,o,s,n,c,h,g,C,p,I,w,M,u,b,m,y,L,A,N,x,f,T,z,S,j,B,D,E,O,v,k,G,V,H,J,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="basic-scatter-chart" tabindex="-1">Basic Scatter Chart</h1>\n<p>Scatter 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.</p>\n<h2 id="simple-example" tabindex="-1">Simple Example</h2>\n<p>The following example is a basic scatter chart configuration with the x-axis as category and the y-axis as value:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="scatter-chart-in-cartesian-coordinate-system" tabindex="-1">Scatter Chart in Cartesian Coordinate System</h2>\n<p>In the previous case, the x-axis of the scatter chart is a discrete category axis and the y-axis is a continuous value axis. However, the normal scene for the scatter chart is to have 2 continuous value axis (also called the cartesian coordinate system). The series type is different in that both x-axis and y-axis value are included in <code>data</code>, but not in <code>xAxis</code> and <code>yAxis</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="customized-scatter-chart" tabindex="-1">Customized Scatter Chart</h2>\n<h3 id="symbol-style" tabindex="-1">Symbol Style</h3>\n<p>Symbol refers to the item shape in a scatter chart. There are three types of config available. The first is ECharts built-in shape, the second is image, the last is the SVG path.</p>\n<p>The built-in shape in ECharts included: <code>\'circle\'</code>, <code>\'rect\'</code>(rectangle), <code>\'roundRect\'</code>(rounded rectangle), <code>\'triangle\'</code>, <code>\'diamond\'</code>, <code>\'pin\'</code> and <code>\'arrow\'</code>. To use built-in shapes, you need to state the <code>symbol</code> to the corresponding string.</p>\n<p>If you want to define the shape as any image, try to use <code>\'image\'</code> following by the path, eg. <code>\'image://http://example.com/xxx.png\'</code> or <code>\'image://./xxx.png\'</code>.</p>\n<p>ECharts <code>symbol</code> also supports SVG vector graphics. You can define <code>symbol</code> as an SVG file path that starts with <code>\'path://\'</code> to locate the vector graphics. The advantages of vector graphics are smaller size and no jagged or blurred.</p>\n<p>Method to find the SVG path: Open an <code>SVG</code> path; Find the path similar as <code><path d="M… L…"></path></code>; Add <code>d</code>\'s value after <code>\'path://\'</code>. Let\'s check how to define an item to vector shape of heart.</p>\n<p>Firstly, we need an <code>SVG</code> file of a heart. You can draw one by vector editing software, or download one from the internet. Here is the content:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>In ECharts, define config <code>symbol</code> as a path of d:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>In this way, we have a heart vector of the item.</p>\n<h3 id="symbol-size" tabindex="-1">Symbol Size</h3>\n<p>The size of symbol is defined by <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a>. It can be s pixel value of the item size, or an array included two numbers, to define the width and height.</p>\n<p>Besides, it can be defined as a call back function. Here is an example of the format:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>The first argument is the data value, and the second argument included other arguments of the data item. In the following instance, we define the size of the item proportional related to the data value.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"en/application/chart-types/scatter/basic-scatter"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:M,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:y},{title:"坐标系",dir:L,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:i},{title:"图例",dir:N},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:z},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:j},{title:"极坐标系柱状图",dir:B,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:O},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:G},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:e,draft:t},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:M,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:y},{title:"Coordinate",dir:L,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:i},{title:"Legend",dir:N},{title:"Event and Action",dir:x}]},{title:"Application",dir:f,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:z},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:j},{title:"Bar Polar",dir:B,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:O},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:G},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/cross-platform/server/index.html b/handbook/en/application/cross-platform/server/index.html
new file mode 100644
index 0000000..002f266
--- /dev/null
+++ b/handbook/en/application/cross-platform/server/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="server-side-rendering" tabindex="-1">Server Side Rendering</h1> <p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p> <p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p> <p>Some solutions contributed by the community are list as follows:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li></ul> <p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</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/application/cross-platform/server.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,s,n,h,o,c,p,m,f,g,u,b,v,C,S,w,x,y,P,E,B,k,R,A,D,j,L,_,G,M,V,T,z,I,N,U,F,H,O,W,$,q,J,X,K,Q,Y,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="server-side-rendering" tabindex="-1">Server Side Rendering</h1>\n<p>Apache ECharts<sup>TM</sup> can be rendered at server-side. For example, the thumbnails in the <a href="https://echarts.apache.org/examples/en/index.html">official examples page</a> are generated at a server.</p>\n<p>Commonly used headless tool is required, for example, <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>, <a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>, <a href="https://github.com/Automattic/node-canvas">node-canvas</a>, <a href="https://github.com/jsdom/jsdom">jsdom</a>, <a href="http://phantomjs.org/">PhantomJS</a>, etc.</p>\n<p>Some solutions contributed by the community are list as follows:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n<p>Notice: if server-side rendering result is different from browser-side rendering, please set <a href="option.html#animation">animation</a> as <code>false</code> and try again.</p>\n',postPath:"en/application/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:C},{title:"数据集",dir:S},{title:"数据转换",dir:w},{title:"坐标系",dir:x,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:A},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:j,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:H}]}]},{title:O,dir:e,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:X,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:S},{title:"Data Transform",dir:w},{title:"Coordinate",dir:x,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:E}]},{title:"Application",dir:B,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:A},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:j,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:N},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:X,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/data/dynamic-data/index.html b/handbook/en/application/data/dynamic-data/index.html
new file mode 100644
index 0000000..ffcd975
--- /dev/null
+++ b/handbook/en/application/data/dynamic-data/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1> <h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2> <p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 punctuation">;</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> <span class="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Or display empty axes with all styles defined before fill in the data:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 punctuation">;</span>
+<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> <span class="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>You need to use <code>name</code> to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the <code>name</code> data while updating data.</p> <h2 id="loading-animation" tabindex="-1">loading Animation</h2> <p>When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.</p> <p>ECharts have a simple loading animation by default. You can call <a href="api.html#echartsInstance.showLoading">showLoading</a> to display. When the data loading was completed, call <a href="api.html#echartsInstance.hideLoading">hideLoading</a> to hide the animation.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">showLoading</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">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> <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Here is the effect:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2> <p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It's surprisingly simple to implement a dynamic update.</p> <p>All data's update was implemented by <a href="~api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p> <p>Check the following example.</p> <p><iframe width="100%" height="350" src=""></iframe></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/application/data/dynamic-data.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,a,d,l,r,n,o,h,c,s,g,p,C,I,m,u,b,A,y,G,f,w,B,Z,R,x,v,S,X,W,E,L,k,Y,F,z,K,V,J,H,Q,O,P,D,M,T,N,j,U,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="asynchronous-data-loading-and-dynamic-update" tabindex="-1">Asynchronous Data Loading and Dynamic Update</h1>\n<h2 id="asynchronous-loading" tabindex="-1">Asynchronous Loading</h2>\n<p>Data in <a href="en/get-started">Getting Started Example</a> is directly updated by using <code>setOption</code>. But in many cases, data need to be filled by asynchronous loading frequently. <code>ECharts</code> can implement asynchronous loading in a simple way. You can get data asynchronously through a function such as jQuery and use <code>setOption</code> to fill in data and configs after the chart initialized.</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gU3RydWN0dXJlIG9mIGRhdGE6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIlNoaXJ0IiwiV29vbCBzd2VhdGVyIiwiQ2hpZmZvbiBzaGlydCIsIlBhbnRzIiwiSGlnaC1oZWVsZWQgc2hvZXMiLCJzb2NrcyJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICdBc3luY2hyb25vdXMgTG9hZGluZyBFeGFtcGxlJwogICAgfSwKICAgIHRvb2x0aXA6IHt9LAogICAgbGVnZW5kOiB7fSwKICAgIHhBeGlzOiB7CiAgICAgIGRhdGE6IGRhdGEuY2F0ZWdvcmllcwogICAgfSwKICAgIHlBeGlzOiB7fSwKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>Or display empty axes with all styles defined before fill in the data:</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIFNob3cgdGl0bGUsIGxlZ2VuZHMgYW5kIGVtcHR5IGF4ZXMKbXlDaGFydC5zZXRPcHRpb24oewogIHRpdGxlOiB7CiAgICB0ZXh0OiAnQXN5bmNocm9ub3VzIExvYWRpbmcgRXhhbXBsZScKICB9LAogIHRvb2x0aXA6IHt9LAogIGxlZ2VuZDogewogICAgZGF0YTogWydTYWxlcyddCiAgfSwKICB4QXhpczogewogICAgZGF0YTogW10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIEFzeW5jaHJvbm91cyBEYXRhIExvYWRpbmcKJC5nZXQoJ2RhdGEuanNvbicpLmRvbmUoZnVuY3Rpb24oZGF0YSkgewogIC8vIEZpbGwgaW4gdGhlIGRhdGEKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICB4QXhpczogewogICAgICBkYXRhOiBkYXRhLmNhdGVnb3JpZXMKICAgIH0sCiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIC8vIEZpbmQgc2VyaWVzIGJ5IG5hbWUKICAgICAgICBuYW1lOiAnU2FsZXMnLAogICAgICAgIGRhdGE6IGRhdGEuZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>You need to use <code>name</code> to "navigate" ECharts when updating data. In the previous example, the chart can update normally depending on the order of series, but we recommend you to add the <code>name</code> data while updating data.</p>\n<h2 id="loading-animation" tabindex="-1">loading Animation</h2>\n<p>When it takes a long time to load the data, the user is facing the empty chart with only axes will wonder if there are bugs appear.</p>\n<p>ECharts have a simple loading animation by default. You can call <a href="api.html#echartsInstance.showLoading">showLoading</a> to display. When the data loading was completed, call <a href="api.html#echartsInstance.hideLoading">hideLoading</a> to hide the animation.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>Here is the effect:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="dynamic-update" tabindex="-1">Dynamic Update</h2>\n<p>ECharts was driven by data, change in data will drive changes in the presentation of the chart. Therefore, It\'s surprisingly simple to implement a dynamic update.</p>\n<p>All data\'s update was implemented by <a href="~api.html#echartsInstance.setOption">setOption</a>. You only need to fetch the data periodically. ECharts will find the difference between two groups of data to use the proper way to choose the animation.</p>\n<p>Check the following example.</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"en/application/data/dynamic-data"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:A},{title:"数据集",dir:y},{title:"数据转换",dir:G},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:W,draft:t},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:H}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:A},{title:"Dataset",dir:y},{title:"Data Transform",dir:G},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:Z}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:W,draft:t},{title:"Waterfall",dir:E}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:J},{title:"Rose Style",dir:H}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/application/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/interaction/drag/index.html b/handbook/en/application/interaction/drag/index.html
new file mode 100644
index 0000000..8ec926d
--- /dev/null
+++ b/handbook/en/application/interaction/drag/index.html
@@ -0,0 +1,217 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1> <p>This 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.</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let's get started from this simple example.</p> <h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2> <p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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>
+
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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">// 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="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel('grid', dataItem)</code>, the first parameter <code>'grid'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p> <p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p> <p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// This function will be called repeatly while dragging.</span>
+<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="token punctuation">;</span>
+ <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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel('grid', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p> <p>Finally, add those code to make graphic elements responsive to change of canvas size.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <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="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="add-tooltip-component" tabindex="-1">Add tooltip component</h2> <p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p> <p>Add these snippets to the code block above:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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> 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p> <h2 id="full-code" tabindex="-1">Full code</h2> <p>Full code is shown as follow:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+
+<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 punctuation">;</span>
+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<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> 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>
+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="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>
+ 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="token punctuation">{</span>
+ <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="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>
+ <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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</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/application/interaction/drag.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,l,a,d,g,o,c,I,r,n,h,C,s,G,p,b,A,m,Z,B,y,X,w,u,R,Y,W,v,F,K,H,V,S,J,U,L,N,k,f,z,x,j,T,M,Q,E,D,P,O,q,_,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="an-example%3A-implement-dragging" tabindex="-1">An Example: Implement Dragging</h1>\n<p>This 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.</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>This example mainly implements that dragging points of a curve and by which the curve is modified. Although it is simple example, but we can do more based on that, like edit charts viually. So let\'s get started from this simple example.</p>\n<h2 id="implement-basic-dragging" tabindex="-1">Implement basic dragging</h2>\n<p>First of all, we create a basic <a href="https://echarts.apache.org/option.html#series-line">line chart (line series)</a>:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKdmFyIGRhdGEgPSBbCiAgWzE1LCAwXSwKICBbLTUwLCAxMF0sCiAgWy01Ni41LCAyMF0sCiAgWy00Ni41LCAzMF0sCiAgWy0yMi4xLCA0MF0KXTsKCm15Q2hhcnQuc2V0T3B0aW9uKHsKICB4QXhpczogewogICAgbWluOiAtMTAwLAogICAgbWF4OiA4MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHlBeGlzOiB7CiAgICBtaW46IC0zMCwKICAgIG1heDogNjAsCiAgICB0eXBlOiAndmFsdWUnLAogICAgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9CiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgaWQ6ICdhJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIC8vIFNldCBhIGJpZyBzeW1ib2xTaXplIGZvciBkcmFnZ2luZyBjb252ZW5pZW5jZS4KICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwKICAgICAgZGF0YTogZGF0YQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<p>Since the symbols in line is not draggable, we make them draggable by using <a href="https://echarts.apache.org/option.html#graphic">graphic component</a> to add draggable circular elements to symbols respectively.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIERlY2xhcmUgYSBncmFwaGljIGNvbXBvbmVudCwgd2hpY2ggY29udGFpbnMgc29tZSBncmFwaGljIGVsZW1lbnRzCiAgLy8gd2l0aCB0aGUgdHlwZSBvZiAnY2lyY2xlJy4KICAvLyBIZXJlIHdlIGhhdmUgdXNlZCB0aGUgbWV0aG9kIGBlY2hhcnRzLnV0aWwubWFwYCwgd2hpY2ggaGFzIHRoZSBzYW1lCiAgLy8gYmVoYXZpb3IgYXMgQXJyYXkucHJvdG90eXBlLm1hcCwgYW5kIGlzIGNvbXBhdGlibGUgd2l0aCBFUzUtLgogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oZGF0YUl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgLy8gJ2NpcmNsZScgbWVhbnMgdGhpcyBncmFwaGljIGVsZW1lbnQgaXMgYSBzaGFwZSBvZiBjaXJjbGUuCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyBUaGUgcmFkaXVzIG9mIHRoZSBjaXJjbGUuCiAgICAgICAgcjogc3ltYm9sU2l6ZSAvIDIKICAgICAgfSwKICAgICAgLy8gVHJhbnNmb3JtIGlzIHVzZWQgdG8gbG9jYXRlZCB0aGUgY2lyY2xlLiBwb3NpdGlvbjoKICAgICAgLy8gW3gsIHldIG1lYW5zIHRyYW5zbGF0ZSB0aGUgY2lyY2xlIHRvIHRoZSBwb3NpdGlvbiBbeCwgeV0uCiAgICAgIC8vIFRoZSBBUEkgYGNvbnZlcnRUb1BpeGVsYCBpcyB1c2VkIHRvIGdldCB0aGUgcG9zaXRpb24gb2YKICAgICAgLy8gdGhlIGNpcmNsZSwgd2hpY2ggd2lsbCBpbnRyb2R1Y2VkIGxhdGVyLgogICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGRhdGFJdGVtKSwKCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBpbnZpc2libGUgKGJ1dCBtb3VzZSBldmVudCB3b3JrcyBhcyBub3JtYWwpLgogICAgICBpbnZpc2libGU6IHRydWUsCiAgICAgIC8vIE1ha2UgdGhlIGNpcmNsZSBkcmFnZ2FibGUuCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8gR2l2ZSBhIGJpZyB6IHZhbHVlLCB3aGljaCBtYWtlcyB0aGUgY2lyY2xlIGNvdmVyIHRoZSBzeW1ib2wKICAgICAgLy8gaW4gbGluZSBzZXJpZXMuCiAgICAgIHo6IDEwMCwKICAgICAgLy8gVGhpcyBpcyB0aGUgZXZlbnQgaGFuZGxlciBvZiBkcmFnZ2luZywgd2hpY2ggd2lsbCBiZSB0cmlnZ2VyZWQKICAgICAgLy8gcmVwZWF0bHkgd2hpbGUgZHJhZ2dpbmcuIFNlZSBtb3JlIGRldGFpbHMgYmVsb3cuCiAgICAgIC8vIEEgdXRpbCBtZXRob2QgYGVjaGFydHMudXRpbC5jdXJyeWAgaXMgdXNlZCBoZXJlIHRvIGdlbmVyYXRlIGEKICAgICAgLy8gbmV3IGZ1bmN0aW9uIHRoZSBzYW1lIGFzIGBvblBvaW50RHJhZ2dpbmdgLCBleGNlcHQgdGhhdCB0aGUKICAgICAgLy8gZmlyc3QgcGFyYW1ldGVyIGlzIGZpeGVkIHRvIGJlIHRoZSBgZGF0YUluZGV4YCBoZXJlLgogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> is used to convert data to its "pixel coodinate", based on which each graphic elements can be rendered on canvas. The term "pixel coodinate" means the coordinate is in canvas pixel, whose origin is the top-left of the canvas. In the sentence <code>myChart.convertToPixel(\'grid\', dataItem)</code>, the first parameter <code>\'grid\'</code> indicates that <code>dataItem</code> should be converted in the first <a href="https://echarts.apache.org/option.html#grid">grid component (cartesian)</a>.</p>\n<p><strong>Notice:</strong> <code>convertToPixel</code> should not be called before the first time that <code>setOption</code> called. Namely, it can only be used after coordinate systems (grid/polar/...) initialized.</p>\n<p>Now points have been made draggable. Then we will bind event listeners on dragging to those points.</p>\n<md-code-block lang="js" code="\'Ly8gVGhpcyBmdW5jdGlvbiB3aWxsIGJlIGNhbGxlZCByZXBlYXRseSB3aGlsZSBkcmFnZ2luZy4KLy8gVGhlIG1pc3Npb24gb2YgdGhpcyBmdW5jdGlvbiBpcyB0byB1cGRhdGUgYHNlcmllcy5kYXRhYCBiYXNlZCBvbgovLyB0aGUgbmV3IHBvaW50cyB1cGRhdGVkIGJ5IGRyYWdnaW5nLCBhbmQgdG8gcmUtcmVuZGVyIHRoZSBsaW5lCi8vIHNlcmllcyBiYXNlZCBvbiB0aGUgbmV3IGRhdGEsIGJ5IHdoaWNoIHRoZSBncmFwaGljIGVsZW1lbnRzIG9mIHRoZQovLyBsaW5lIHNlcmllcyBjYW4gYmUgc3luY2hyb25pemVkIHdpdGggZHJhZ2dpbmcuCmZ1bmN0aW9uIG9uUG9pbnREcmFnZ2luZyhkYXRhSW5kZXgpIHsKICAvLyBIZXJlIHRoZSBgZGF0YWAgaXMgZGVjbGFyZWQgaW4gdGhlIGNvZGUgYmxvY2sgaW4gdGhlIGJlZ2lubmluZwogIC8vIG9mIHRoaXMgYXJ0aWNsZS4gVGhlIGB0aGlzYCByZWZlcnMgdG8gdGhlIGRyYWdnZWQgY2lyY2xlLgogIC8vIGB0aGlzLnBvc2l0aW9uYCBpcyB0aGUgY3VycmVudCBwb3NpdGlvbiBvZiB0aGUgY2lyY2xlLgogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIFJlLXJlbmRlciB0aGUgY2hhcnQgYmFzZWQgb24gdGhlIHVwZGF0ZWQgYGRhdGFgLgogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogWwogICAgICB7CiAgICAgICAgaWQ6ICdhJywKICAgICAgICBkYXRhOiBkYXRhCiAgICAgIH0KICAgIF0KICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>In the code above, API <a href="api.html#echartsInstance.convertFromPixel">convertFromPixel</a> is used, which is the reversed process of <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a>. <code>myChart.convertFromPixel(\'grid\', this.position)</code> converts a pixel coordinate to data item in <a href="https://echarts.apache.org/option.html#grid">grid (cartesian)</a>.</p>\n<p>Finally, add those code to make graphic elements responsive to change of canvas size.</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIFJlLWNhbGN1bGF0ZSB0aGUgcG9zaXRpb24gb2YgZWFjaCBjaXJjbGUgYW5kIHVwZGF0ZSBjaGFydCB1c2luZyBgc2V0T3B0aW9uYC4KICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4gewogICAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgaXRlbSkKICAgICAgfTsKICAgIH0pCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="add-tooltip-component" tabindex="-1">Add tooltip component</h2>\n<p>Now basic functionality have been implemented by parte 1. If we need the data can be displayed realtime when dragging, we can use <a href="https://echarts.apache.org/option.html#tooltip">tooltip component</a> to do that. Nevertheless, tooltip component has its default "show/hide rule", which is not applicable in this case. So we need to customize the "show/hide rule" for our case.</p>\n<p>Add these snippets to the code block above:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyBNZWFucyBkaXNhYmxlIGRlZmF1bHQgInNob3cvaGlkZSBydWxlIi4KICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8gQ3VzdG9taXplICJzaG93L2hpZGUgcnVsZSIsIHNob3cgd2hlbiBtb3VzZSBvdmVyLCBoaWRlIHdoZW4gbW91c2Ugb3V0LgogICAgICBvbm1vdXNlbW92ZTogZWNoYXJ0cy51dGlsLmN1cnJ5KHNob3dUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICBvbm1vdXNlb3V0OiBlY2hhcnRzLnV0aWwuY3VycnkoaGlkZVRvb2x0aXAsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7CgpmdW5jdGlvbiBzaG93VG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdzaG93VGlwJywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBkYXRhSW5kZXgKICB9KTsKfQoKZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlkZVRpcCcKICB9KTsKfQ\'" line-highlights="\'\'" />\n<p>The API <a href="https://echarts.apache.org//api.html#echartsInstance.dispatchAction">dispatchAction</a> is used to show/hide tooltip content, where actions <a href="https://echarts.apache.org//api.html#action.tooltip.showTip">showTip</a> and <a href="api.html#action.tooltip.hideTip">hideTip</a> is dispatched.</p>\n<h2 id="full-code" tabindex="-1">Full code</h2>\n<p>Full code is shown as follow:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>With knowledge introduced above, more feature can be implemented. For example, <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom component</a> can be added to cooperate with the cartesian, or we can make a plotting board on coordinate systems. Use your imagination ~</p>\n',postPath:"en/application/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:r},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:s}]}]},{title:"概念篇",dir:G,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:i},{title:"系列",dir:A,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:X},{title:"视觉映射",dir:t},{title:"图例",dir:w},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:U},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:j}]}]},{title:T,dir:e,draft:i},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:D},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:T,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:r},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:s}]}]},{title:"Concepts",dir:G,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:A,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:X},{title:"Visual Mapping",dir:t},{title:"Legend",dir:w},{title:"Event and Action",dir:u}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:H}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:U},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:f},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:D},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/application/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/application/label/rich-text/index.html b/handbook/en/application/label/rich-text/index.html
new file mode 100644
index 0000000..c86ef6e
--- /dev/null
+++ b/handbook/en/application/label/rich-text/index.html
@@ -0,0 +1,679 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="rich-text" tabindex="-1">Rich Text</h1> <p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p> <ul><li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li> <li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li> <li>Image can be used in text as icon or background.</li> <li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li></ul> <p>At the beginning, the meanings of two terms that will be used below should be clarified:</p> <ul><li>Text Block: The whole block of label text.</li> <li>Text fragment: Some piece of text in a text block.</li></ul> <p>For example:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="options-about-text" tabindex="-1">Options about Text</h2> <p>echarts provides plenty of text options, including:</p> <ul><li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li> <li>Fill of text: <code>color</code>.</li> <li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li> <li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li> <li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li> <li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li> <li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li> <li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li> <li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li></ul> <p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p></blockquote> <h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2> <p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p> <p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p> <p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p> <p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p> <p>For example:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="label-position" tabindex="-1">Label Position</h2> <p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a>.</p> <p>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p></blockquote> <h2 id="label-rotation" tabindex="-1">Label Rotation</h2> <p>Sometimes label is needed to be rotated. For example:</p> <div class="md-live layout-lr"><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">const labelOption = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p><a href="option.html#series-bar.label.align">align</a> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p> <p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p> <h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2> <p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p> <p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p> <p>Only <code>'\n'</code> is the newline character, which breaks a line.</p> <p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p> <p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p> <ul><li><code>'bottom'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li> <li><code>'top'</code>: The top edge of the text fragment sticks to the top edge of the line.</li> <li><code>'middle'</code>: In the middle of the line.</li></ul> <p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p> <ul><li>Firstly, place text fragments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li> <li>Secondly, place text fragments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li> <li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li></ul> <p>The position of text in a text fragment:</p> <ul><li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fragment box.</li> <li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fragment box.</li> <li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fragment box.</li></ul> <h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2> <p>See example:</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Icon is implemented by using image in <code>backgroundColor</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>rich<span class="token operator">:</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>
+ <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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Title block can be implemented by <code>backgroundColor</code>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Title is at left.</span>
+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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</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/application/label/rich-text.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,e,A,i,t,o,d,l,c,n,a,r,s,h,b,m,p,B,Z,G,y,w,f,H,W,x,J,R,u,v,K,V,Y,z,X,k,N,S,L,M,F,O,D,U,j,T,E,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="rich-text" tabindex="-1">Rich Text</h1>\n<p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the beginning, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text fragment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="options-about-text" tabindex="-1">Options about Text</h2>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>For example:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8gU3R5bGVzIGRlZmluZWQgaW4gJ3JpY2gnIGNhbiBiZSBhcHBsaWVkIHRvIHNvbWUgZnJhZ21lbnRzCiAgLy8gb2YgdGV4dCBieSBhZGRpbmcgc29tZSBtYXJrZXJzIHRvIHRob3NlIGZyYWdtZW50LCBsaWtlCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gLgogIC8vIGAnXG4nYCBpcyB0aGUgbmV3bGluZSBjaGFyYWN0ZXIuCiAgZm9ybWF0dGVyOiBbCiAgICAne2F8U3R5bGUgImEiIGlzIGFwcGxpZWQgdG8gdGhpcyBmcmFnbWVudH0nLAogICAgJ3tifFN0eWxlICJiIiBpcyBhcHBsaWVkIHRvIHRoaXMgZnJhZ21lbnR9VGhpcyBmcmFnbWVudCB1c2UgZGVmYXVsdCBzdHlsZXt4fHVzZSBzdHlsZSAieCJ9JwogIF0uam9pbignXG4nKSwKCiAgLy8gU3R5bGVzIGZvciB0aGUgd2hvbGUgdGV4dCBibG9jayBhcmUgZGVmaW5lZCBoZXJlOgogIGNvbG9yOiAnIzMzMycsCiAgZm9udFNpemU6IDUsCiAgZm9udEZhbWlseTogJ0FyaWFsJywKICBib3JkZXJXaWR0aDogMywKICBiYWNrZ3JvdW5kQ29sb3I6ICcjOTg0NDU1JywKICBwYWRkaW5nOiBbMywgMTAsIDEwLCA1XSwKICBsaW5lSGVpZ2h0OiAyMCwKCiAgLy8gU3R5bGVzIGZvciB0ZXh0IGZyYWdtZW50cyBhcmUgZGVmaW5lZCBoZXJlOgogIHJpY2g6IHsKICAgIGE6IHsKICAgICAgY29sb3I6ICdyZWQnLAogICAgICBsaW5lSGVpZ2h0OiAxMAogICAgfSwKICAgIGI6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICd4eHgveHh4LmpwZycKICAgICAgfSwKICAgICAgaGVpZ2h0OiA0MAogICAgfSwKICAgIHg6IHsKICAgICAgZm9udFNpemU6IDE4LAogICAgICBmb250RmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywKICAgICAgYm9yZGVyQ29sb3I6ICcjNDQ5OTMzJywKICAgICAgYm9yZGVyUmFkaXVzOiA0CiAgICB9CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="label-position" tabindex="-1">Label Position</h2>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a>.</p>\n<p>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyBPcHRpb25zOiAnbGVmdCcsICdyaWdodCcsICd0b3AnLCAnYm90dG9tJywgJ2luc2lkZScsICdpbnNpZGVUb3AnLCAnaW5zaWRlTGVmdCcsICdpbnNpZGVSaWdodCcsICdpbnNpZGVCb3R0b20nLCAnaW5zaWRlVG9wTGVmdCcsICdpbnNpZGVUb3BSaWdodCcsICdpbnNpZGVCb3R0b21MZWZ0JywgJ2luc2lkZUJvdHRvbVJpZ2h0JwogICAgICAgICAgcG9zaXRpb246ICd0b3AnLAogICAgICAgICAgZGlzdGFuY2U6IDEwLAoKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IFsnTGFiZWwgVGV4dCddLmpvaW4oJ1xuJyksCiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZWVlJywKICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzU1NScsCiAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgIGJvcmRlclJhZGl1czogNSwKICAgICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgICAgZm9udFNpemU6IDE4LAogICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgICBzaGFkb3dPZmZzZXRYOiAwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgIHRleHRCb3JkZXJDb2xvcjogJyMwMDAnLAogICAgICAgICAgdGV4dEJvcmRlcldpZHRoOiAzLAogICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIG1heDogMgogIH0sCiAgeUF4aXM6IHsKICAgIG1heDogMgogIH0KfTs\'" v-bind="{}" />\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p>\n</blockquote>\n<h2 id="label-rotation" tabindex="-1">Label Rotation</h2>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p><a href="option.html#series-bar.label.align">align</a> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2>\n<p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>\'\\n\'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>\'bottom\'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li>\n<li><code>\'top\'</code>: The top edge of the text fragment sticks to the top edge of the line.</li>\n<li><code>\'middle\'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fragments whose <code>align</code> is <code>\'left\'</code> from left to right continuously.</li>\n<li>Secondly, place text fragments whose <code>align</code> is <code>\'right\'</code> from right to left continuously.</li>\n<li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fragment:</p>\n<ul>\n<li>If <code>align</code> is <code>\'center\'</code>, text aligns at the center of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'left\'</code>, text aligns at the left of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'right\'</code>, text aligns at the right of the text fragment box.</li>\n</ul>\n<h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2>\n<p>See example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgU3Vubnk6IHsKICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgICB9LAogICAgICAgIC8vIENhbiBvbmx5IGhlaWdodCBzcGVjaWZpZWQsIGJ1dCBsZWF2ZSB3aWR0aCBhdXRvIG9idGFpbmVkCiAgICAgICAgLy8gZnJvbSB0aGUgaW1hZ2UsIHdoZXJlIHRoZSBhc3BlY3QgcmF0aW8ga2VwdC4KICAgICAgICBoZWlnaHQ6IDMwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Horizontal rule (like HTML <hr> tag) can be implemented by border:</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgaHI6IHsKICAgICAgICBib3JkZXJDb2xvcjogJyM3NzcnLAogICAgICAgIC8vIHdpZHRoIGlzIHNldCBhcyAnMTAwJScgdG8gZnVsbGZpbGwgdGhlIHRleHQgYmxvY2suCiAgICAgICAgLy8gTm90aWNlLCB0aGUgcGVyY2VudGFnZSBpcyBiYXNlZCBvbiB0aGUgY29udGVudCBib3gsIHdpdGhvdXQKICAgICAgICAvLyBwYWRkaW5nLiBBbHRob3VnaCBpdCBpcyBhIGxpdHRsZSBkaWZmZXJlbnQgZnJvbSBDU1MgcnVsZSwKICAgICAgICAvLyBpdCBpcyBjb252aW5lbnQgaW4gbW9zdCBjYXNlcy4KICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgICAgaGVpZ2h0OiAwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<md-code-block lang="js" code="\'Ly8gVGl0bGUgaXMgYXQgbGVmdC4KZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLApyaWNoOiB7CiAgICB0aXRsZUJnOiB7CiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGNvbG9yOiAnI2VlZScKICAgIH0KfQoKLy8gVGl0bGUgaXMgaW4gdGhlIGNlbnRlciBvZiB0aGUgbGluZS4KLy8gVGhpcyBpbXBsZW1lbnRhdGlvbiBpcyBhIGxpdHRsZSB0cmlja3ksIGJ1dCBpcyB3b3JrcwovLyB3aXRob3V0IG1vcmUgY29tcGxpY2F0ZWQgbGF5b3V0IG1lY2hhbmlzbSBpbnZvbHZlZC4KZm9ybWF0dGVyOiAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKcmljaDogewogICAgdGl0bGVCZzogewogICAgICAgIGFsaWduOiAncmlnaHQnLAogICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMwMDAnLAogICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgYm9yZGVyUmFkaXVzOiBbNSwgNSwgMCwgMF0sCiAgICAgICAgcGFkZGluZzogWzAsIDEwLCAwLCAxMF0sCiAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICBjb2xvcjogJyNlZWUnCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</p>\n',postPath:"en/application/label/rich-text"}],fetch:{},error:e,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:n,children:[{title:"ECharts 5 特性介绍",dir:a},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:B},{title:"数据集",dir:Z},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:g},{title:"坐标轴",dir:w},{title:"视觉映射",dir:C},{title:"图例",dir:f},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:u},{title:"极坐标系柱状图",dir:v,draft:g},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:M}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:O}]}]},{title:D,dir:I,draft:g},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:o},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:n,children:[{title:"ECharts 5 Features",dir:a},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:B},{title:"Dataset",dir:Z},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:g},{title:"Axis",dir:w},{title:"Visual Mapping",dir:C},{title:"Legend",dir:f},{title:"Event and Action",dir:H}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:u},{title:"Bar Polar",dir:v,draft:g},{title:"Waterfall",dir:K}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:L},{title:"Rose Style",dir:M}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/application/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:e}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/basics/download/index.html b/handbook/en/basics/download/index.html
index bc68cfb..a1dcd36 100644
--- a/handbook/en/basics/download/index.html
+++ b/handbook/en/basics/download/index.html
@@ -3,28 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="get-apache-echarts"><a href="#get-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get Apache ECharts</h1>
-<p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p>
-<ul>
-<li>Use From GitHub</li>
-<li>Use From npm</li>
-<li>Use From CDN</li>
-<li>Online Customization</li>
-</ul>
-<p>We'll go over each of these installation methods and the directory structure after download.</p>
-<h2 id="installation"><a href="#installation" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Installation</h2>
-<h3 id="use-from-github"><a href="#use-from-github" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From GitHub</h3>
-<p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">release</a> page of the <a href="https://github.com/apache/echarts" rel="nofollow noopener noreferrer" target="_blank">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p>
-<h3 id="use-from-npm"><a href="#use-from-npm" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From npm</h3>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p>
-<h3 id="use-from-cdn"><a href="#use-from-cdn" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use From CDN</h3>
-<p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">echarts</a> from jsDelivr.</p>
-<h3 id="online-customization"><a href="#online-customization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Online Customization</h3>
-<p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html" rel="nofollow noopener noreferrer" target="_blank">ECharts online customization</a> function.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/basics/download#installation">Installation</a></li><li class="toc3"><a href="/handbook/en/basics/download#use-from-github">Use From GitHub</a></li><li class="toc3"><a href="/handbook/en/basics/download#use-from-npm">Use From npm</a></li><li class="toc3"><a href="/handbook/en/basics/download#use-from-cdn">Use From CDN</a></li><li class="toc3"><a href="/handbook/en/basics/download#online-customization">Online Customization</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/download.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,n,p,o,s,c,h,u,y,g,f,v,m,b,C,x,w,k,E,S,P,B,A,I,R,D,H,N,z,L,G,_,j,U,T,V,F,M,O,W,Z,$,X,Y,q,J,K,Q,tt,et,it,rt,at,lt,dt,nt,pt,ot,st,ct,ht,ut,yt,gt,ft,vt,mt,bt,Ct,xt,wt,kt){return{layout:"default",data:[{article:{slug:m,toc:[{id:E,depth:2,text:S},{id:P,depth:3,text:b},{id:B,depth:3,text:C},{id:A,depth:3,text:x},{id:I,depth:3,text:w}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:"get-apache-echarts"},children:[{type:e,tag:a,props:{href:"#get-apache-echarts",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:"Get Apache ECharts"}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project."}]},{type:t,value:r},{type:e,tag:"ul",props:{},children:[{type:t,value:r},{type:e,tag:c,props:{},children:[{type:t,value:b}]},{type:t,value:r},{type:e,tag:c,props:{},children:[{type:t,value:C}]},{type:t,value:r},{type:e,tag:c,props:{},children:[{type:t,value:x}]},{type:t,value:r},{type:e,tag:c,props:{},children:[{type:t,value:w}]},{type:t,value:r}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"We'll go over each of these installation methods and the directory structure after download."}]},{type:t,value:r},{type:e,tag:"h2",props:{id:E},children:[{type:e,tag:a,props:{href:"#installation",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:S}]},{type:t,value:r},{type:e,tag:h,props:{id:P},children:[{type:e,tag:a,props:{href:"#use-from-github",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:b}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"You can find links to each version on the "},{type:e,tag:a,props:{href:"https://github.com/apache/echarts/releases",rel:[u,y,g],target:f},children:[{type:t,value:"release"}]},{type:t,value:" page of the "},{type:e,tag:a,props:{href:"https://github.com/apache/echarts",rel:[u,y,g],target:f},children:[{type:t,value:"apache/echarts"}]},{type:t,value:" project. Click on the Source code in Assets at the bottom of the download page, and unzip the "},{type:e,tag:R,props:{},children:[{type:t,value:"echarts.js"}]},{type:t,value:" file in the "},{type:e,tag:R,props:{},children:[{type:t,value:"dist"}]},{type:t,value:" directory to include the full ECharts functionality."}]},{type:t,value:r},{type:e,tag:h,props:{id:B},children:[{type:e,tag:a,props:{href:"#use-from-npm",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:C}]},{type:t,value:r},{type:e,tag:"div",props:{className:["nuxt-content-highlight"]},children:[{type:e,tag:"md-code-block",props:{lang:"sh","line-highlights":"","file-name":""},children:[{type:t,value:"npm install echarts --save\n"}]}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"See "},{type:e,tag:a,props:{href:"en/basics/import"},children:[{type:t,value:"Introducing Apache ECharts in your project"}]},{type:t,value:" for details."}]},{type:t,value:r},{type:e,tag:h,props:{id:A},children:[{type:e,tag:a,props:{href:"#use-from-cdn",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:x}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"Recommend referencing "},{type:e,tag:a,props:{href:"https://www.jsdelivr.com/package/npm/echarts",rel:[u,y,g],target:f},children:[{type:t,value:"echarts"}]},{type:t,value:" from jsDelivr."}]},{type:t,value:r},{type:e,tag:h,props:{id:I},children:[{type:e,tag:a,props:{href:"#online-customization",ariaHidden:l,tabIndex:d},children:[{type:e,tag:n,props:{className:[p,o]},children:[]}]},{type:t,value:w}]},{type:t,value:r},{type:e,tag:s,props:{},children:[{type:t,value:"If you want to introduce only some modules to reduce package size, you can use the "},{type:e,tag:a,props:{href:"https://echarts.apache.org//builder.html",rel:[u,y,g],target:f},children:[{type:t,value:"ECharts online customization"}]},{type:t,value:" function."}]}]},dir:"/en/basics",path:D,extension:".md",createdAt:"2021-07-28T08:09:09.439Z",updatedAt:"2021-07-28T08:09:09.440Z"},postPath:"en/basics/download"}],fetch:{},error:H,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:N},{title:"入门篇",dir:z,children:[{title:"获取 ECharts",dir:m},{title:"在项目中引入 ECharts",dir:L},{title:"资源列表",dir:G,draft:i},{title:"获取灵感",dir:_},{title:"寻求帮助",dir:j},{title:"版本介绍",dir:U,children:[{title:T,draft:i,dir:V},{title:"ECharts 5 新特性",dir:F},{title:"ECharts 5 升级指南",dir:M}]}]},{title:"概念篇",dir:O,children:[{title:"图表容器及大小",dir:W},{title:"配置项",dir:Z,draft:i},{title:"系列",dir:$,draft:i},{title:"样式",dir:X},{title:"数据集",dir:Y},{title:"数据转换",dir:q},{title:"坐标系",dir:J,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:k},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:Q,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:tt},{title:"堆叠柱状图",dir:et},{title:"动态排序柱状图",dir:it,draft:i},{title:"极坐标系柱状图",dir:rt,draft:i},{title:"瀑布图",dir:at,draft:i},{title:"视觉映射的柱状图",dir:k,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:lt},{title:"堆叠折线图",dir:dt},{title:"区域面积图",dir:nt},{title:"平滑曲线图",dir:pt},{title:"阶梯线图",dir:ot}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:st},{title:"圆环图",dir:ct},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ht,children:[{title:"基础散点图",dir:ut}]}]},{title:"移动端优化",dir:v,draft:i},{title:"跨平台方案",dir:yt,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:gt},{title:"数据下钻",dir:ft,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:vt}]},{title:"交互",dir:mt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:bt,draft:i}]}]},{title:"最佳实践",dir:Ct,children:[{title:"移动端优化",dir:v,draft:i},{title:xt,dir:wt},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:kt}]}],en:[{title:"Get Started",dir:N},{title:"Basics",dir:z,children:[{title:"Download ECharts",dir:m},{title:"Import ECharts",dir:L},{title:"Resources",dir:G,draft:i},{title:"Inspiration",dir:_},{title:"Get Help",dir:j},{title:"Release Note",dir:U,children:[{title:T,draft:i,dir:V},{title:"ECharts 5 Features",dir:F},{title:"ECharts 5 Upgrade Guide",dir:M}]}]},{title:"Concepts",dir:O,children:[{title:"Chart Container",dir:W},{title:"Chart Option",dir:Z,draft:i},{title:"Series",dir:$,draft:i},{title:"Style",dir:X},{title:"Dataset",dir:Y},{title:"Data Transform",dir:q},{title:"Coordinate",dir:J,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:k},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:K,children:[{title:"Common Charts",dir:Q,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:tt},{title:"Stacked Bar",dir:et},{title:"Bar Racing",dir:it,draft:i},{title:"Bar Polar",dir:rt,draft:i},{title:"Waterfall",dir:at,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:lt},{title:"Stacked Line",dir:dt},{title:"Area Chart",dir:nt},{title:"Smoothed Line",dir:pt},{title:"Step Line",dir:ot}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:st},{title:"Ring Style",dir:ct},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ht,children:[{title:"Basic Scatter",dir:ut}]}]},{title:"Mobile",dir:v,draft:i},{title:"Cross Platform",dir:yt,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:gt},{title:"Drilldown",dir:ft,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:vt}]},{title:"Interaction",dir:mt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:bt,draft:i}]}]},{title:"Best Practice",dir:Ct,children:[{title:"Mobile Optimization",dir:v,draft:i},{title:xt,dir:wt},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:kt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:D,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:H},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","true",-1,"span","icon","icon-link","p","li","h3","nofollow","noopener","noreferrer","_blank","mobile","download","Use From GitHub","Use From npm","Use From CDN","Online Customization","visual-map","installation","Installation","use-from-github","use-from-npm","use-from-cdn","online-customization","code","/en/basics/download",null,"get-started","basics","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1> <p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p> <ul><li>Use From GitHub</li> <li>Use From npm</li> <li>Use From CDN</li> <li>Online Customization</li></ul> <p>We'll go over each of these installation methods and the directory structure after download.</p> <h2 id="installation" tabindex="-1">Installation</h2> <h3 id="use-from-github" tabindex="-1">Use From GitHub</h3> <p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p> <h3 id="use-from-npm" tabindex="-1">Use From npm</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p> <h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3> <p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p> <h3 id="online-customization" tabindex="-1">Online Customization</h3> <p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</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/basics/download.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,h,c,p,f,m,u,b,g,C,w,v,y,E,S,k,x,P,B,A,D,R,G,U,z,L,F,I,j,N,_,V,H,M,O,W,T,X,Y,$,J,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-apache-echarts" tabindex="-1">Get Apache ECharts</h1>\n<p>Apache ECharts offers a variety of installation options, so you can choose any of the following options depending on your project.</p>\n<ul>\n<li>Use From GitHub</li>\n<li>Use From npm</li>\n<li>Use From CDN</li>\n<li>Online Customization</li>\n</ul>\n<p>We\'ll go over each of these installation methods and the directory structure after download.</p>\n<h2 id="installation" tabindex="-1">Installation</h2>\n<h3 id="use-from-github" tabindex="-1">Use From GitHub</h3>\n<p>You can find links to each version on the <a href="https://github.com/apache/echarts/releases">release</a> page of the <a href="https://github.com/apache/echarts">apache/echarts</a> project. Click on the Source code in Assets at the bottom of the download page, and unzip the <code>echarts.js</code> file in the <code>dist</code> directory to include the full ECharts functionality.</p>\n<h3 id="use-from-npm" tabindex="-1">Use From npm</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>See <a href="en/basics/import">Introducing Apache ECharts in your project</a> for details.</p>\n<h3 id="use-from-cdn" tabindex="-1">Use From CDN</h3>\n<p>Recommend referencing <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a> from jsDelivr.</p>\n<h3 id="online-customization" tabindex="-1">Online Customization</h3>\n<p>If you want to introduce only some modules to reduce package size, you can use the <a href="https://echarts.apache.org//builder.html">ECharts online customization</a> function.</p>\n',postPath:"en/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:w},{title:"数据集",dir:v},{title:"数据转换",dir:y},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:A},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:U},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:I},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:_},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:H}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:v},{title:"Data Transform",dir:y},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"Application",dir:P,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:A},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:U}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:I},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:_},{title:"Ring Style",dir:V},{title:"Rose Style",dir:H}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practice",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/basics/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/basics/help/index.html b/handbook/en/basics/help/index.html
index 0615f99..6012468 100644
--- a/handbook/en/basics/help/index.html
+++ b/handbook/en/basics/help/index.html
@@ -3,33 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="get-help"><a href="#get-help" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get Help</h1>
-<h2 id="technical-problems"><a href="#technical-problems" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Technical Problems</h2>
-<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem"><a href="#make-sure-that-existing-documentation-do-not-solve-your-problem" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Make sure that existing documentation do not solve your problem</h3>
-<p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>
-<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>
-<ul>
-<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
-<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">Option Manual</a>: you can try to use the search function</li>
-<li>Articles in this handbook</li>
-<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">FAQ</a></li>
-<li>Searching in <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a></li>
-<li>Using the search engine</li>
-</ul>
-<h3 id="create-the-minimal-reproducible-demo"><a href="#create-the-minimal-reproducible-demo" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Create the Minimal Reproducible Demo</h3>
-<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>
-<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>
-<h3 id="determining-if-its-a-bug"><a href="#determining-if-its-a-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Determining if It's a Bug</h3>
-<h4 id="report-a-bug-or-request-a-new-feature"><a href="#report-a-bug-or-request-a-new-feature" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Report a Bug or Request a New Feature</h4>
-<p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>
-<h4 id="how-to-questions"><a href="#how-to-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How-To Questions</h4>
-<p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>
-<p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>
-<h2 id="non-technical-questions"><a href="#non-technical-questions" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Non-technical questions</h2>
-<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/basics/help#technical-problems">Technical Problems</a></li><li class="toc3"><a href="/handbook/en/basics/help#make-sure-that-existing-documentation-do-not-solve-your-problem">Make sure that existing documentation do not solve your problem</a></li><li class="toc3"><a href="/handbook/en/basics/help#create-the-minimal-reproducible-demo">Create the Minimal Reproducible Demo</a></li><li class="toc3"><a href="/handbook/en/basics/help#determining-if-its-a-bug">Determining if It's a Bug</a></li><li class="toc2"><a href="/handbook/en/basics/help#non-technical-questions">Non-technical questions</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/help.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,l,d,o,p,n,s,h,c,u,y,g,m,v,f,b,x,w,k,C,I,E,P,S,B,R,q,H,N,A,D,M,T,L,_,G,O,V,z,U,F,W,Q,X,Z,$,Y,j,J,K,ee,te,ie,re,ae,le,de,oe,pe,ne,se,he,ce,ue,ye,ge,me,ve,fe,be,xe,we,ke,Ce){return{layout:"default",data:[{article:{slug:v,toc:[{id:x,depth:2,text:w},{id:k,depth:3,text:C},{id:I,depth:3,text:E},{id:P,depth:3,text:S},{id:B,depth:2,text:R}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"get-help"},children:[{type:t,tag:a,props:{href:"#get-help",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:q}]},{type:e,value:r},{type:t,tag:"h2",props:{id:x},children:[{type:t,tag:a,props:{href:"#technical-problems",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:w}]},{type:e,value:r},{type:t,tag:f,props:{id:k},children:[{type:t,tag:a,props:{href:"#make-sure-that-existing-documentation-do-not-solve-your-problem",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:C}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help."}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:"}]},{type:e,value:r},{type:t,tag:"ul",props:{},children:[{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//api.html",rel:[h,c,u],target:y},children:[{type:e,value:"API"}]}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//option.html",rel:[h,c,u],target:y},children:[{type:e,value:"Option Manual"}]},{type:e,value:": you can try to use the search function"}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"Articles in this handbook"}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//faq.html",rel:[h,c,u],target:y},children:[{type:e,value:"FAQ"}]}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"Searching in "},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/issues",rel:[h,c,u],target:y},children:[{type:e,value:"GitHub issue"}]}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"Using the search engine"}]},{type:e,value:r}]},{type:e,value:r},{type:t,tag:f,props:{id:I},children:[{type:t,tag:a,props:{href:"#create-the-minimal-reproducible-demo",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:E}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"Create an example on "},{type:t,tag:a,props:{href:"https://codepen.io/Ovilia/pen/dyYWXWM",rel:[h,c,u],target:y},children:[{type:e,value:"Codepen"}]},{type:e,value:", "},{type:t,tag:a,props:{href:"https://codesandbox.io/s/mystifying-bash-2uthz",rel:[h,c,u],target:y},children:[{type:e,value:"Codesandbox"}]},{type:e,value:", which will make it easier for others to reproduce your problem."}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See "},{type:t,tag:a,props:{href:"https://stackoverflow.com/help/minimal-reproducible-example",rel:[h,c,u],target:y},children:[{type:e,value:"How to Create a Minimal, Reproducible Example"}]},{type:e,value:" for a more detailed description."}]},{type:e,value:r},{type:t,tag:f,props:{id:P},children:[{type:t,tag:a,props:{href:"#determining-if-its-a-bug",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:S}]},{type:e,value:r},{type:t,tag:"h4",props:{id:"report-a-bug-or-request-a-new-feature"},children:[{type:t,tag:a,props:{href:"#report-a-bug-or-request-a-new-feature",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:"Report a Bug or Request a New Feature"}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the "},{type:t,tag:a,props:{href:"https://ecomfe.github.io/echarts-issue-helper/",rel:[h,c,u],target:y},children:[{type:e,value:"issue template"}]},{type:e,value:" to create a new issue and follow the prompts to describe it in detail."}]},{type:e,value:r},{type:t,tag:"h4",props:{id:"how-to-questions"},children:[{type:t,tag:a,props:{href:"#how-to-questions",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:"How-To Questions"}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"If it's not a bug, but you don't know how to achieve something, try the "},{type:t,tag:a,props:{href:"https://stackoverflow.com"},children:[{type:e,value:"stackoverflow.com"}]}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"If you don't get an answer, you can also send an email to the email group "},{type:t,tag:a,props:{href:H},children:[{type:e,value:N}]},{type:e,value:". In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English."}]},{type:e,value:r},{type:t,tag:"h2",props:{id:B},children:[{type:t,tag:a,props:{href:"#non-technical-questions",ariaHidden:l,tabIndex:d},children:[{type:t,tag:o,props:{className:[p,n]},children:[]}]},{type:e,value:R}]},{type:e,value:r},{type:t,tag:s,props:{},children:[{type:e,value:"Other questions can be sent in English to the mail group "},{type:t,tag:a,props:{href:H},children:[{type:e,value:N}]},{type:e,value:"."}]}]},dir:"/en/basics",path:A,extension:".md",createdAt:"2021-07-24T08:39:19.734Z",updatedAt:"2021-07-24T08:46:55.955Z"},postPath:"en/basics/help"}],fetch:{},error:D,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:M},{title:"入门篇",dir:T,children:[{title:"获取 ECharts",dir:L},{title:"在项目中引入 ECharts",dir:_},{title:"资源列表",dir:G,draft:i},{title:"获取灵感",dir:O},{title:"寻求帮助",dir:v},{title:"版本介绍",dir:V,children:[{title:z,draft:i,dir:U},{title:"ECharts 5 新特性",dir:F},{title:"ECharts 5 升级指南",dir:W}]}]},{title:"概念篇",dir:Q,children:[{title:"图表容器及大小",dir:X},{title:"配置项",dir:Z,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:$},{title:"数据转换",dir:Y},{title:"坐标系",dir:j,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:b},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:ee},{title:"堆叠柱状图",dir:te},{title:"动态排序柱状图",dir:ie,draft:i},{title:"极坐标系柱状图",dir:re,draft:i},{title:"瀑布图",dir:ae,draft:i},{title:"视觉映射的柱状图",dir:b,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:le},{title:"堆叠折线图",dir:de},{title:"区域面积图",dir:oe},{title:"平滑曲线图",dir:pe},{title:"阶梯线图",dir:ne}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:se},{title:"圆环图",dir:he},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ce,children:[{title:"基础散点图",dir:ue}]}]},{title:"移动端优化",dir:m,draft:i},{title:"跨平台方案",dir:ye,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ge},{title:"数据下钻",dir:me,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ve}]},{title:"交互",dir:fe,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:be,draft:i}]}]},{title:"最佳实践",dir:xe,children:[{title:"移动端优化",dir:m,draft:i},{title:we,dir:ke},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ce}]}],en:[{title:"Get Started",dir:M},{title:"Basics",dir:T,children:[{title:"Download ECharts",dir:L},{title:"Import ECharts",dir:_},{title:"Resources",dir:G,draft:i},{title:"Inspiration",dir:O},{title:q,dir:v},{title:"Release Note",dir:V,children:[{title:z,draft:i,dir:U},{title:"ECharts 5 Features",dir:F},{title:"ECharts 5 Upgrade Guide",dir:W}]}]},{title:"Concepts",dir:Q,children:[{title:"Chart Container",dir:X},{title:"Chart Option",dir:Z,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:$},{title:"Data Transform",dir:Y},{title:"Coordinate",dir:j,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:b},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:ee},{title:"Stacked Bar",dir:te},{title:"Bar Racing",dir:ie,draft:i},{title:"Bar Polar",dir:re,draft:i},{title:"Waterfall",dir:ae,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:le},{title:"Stacked Line",dir:de},{title:"Area Chart",dir:oe},{title:"Smoothed Line",dir:pe},{title:"Step Line",dir:ne}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:se},{title:"Ring Style",dir:he},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ce,children:[{title:"Basic Scatter",dir:ue}]}]},{title:"Mobile",dir:m,draft:i},{title:"Cross Platform",dir:ye,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ge},{title:"Drilldown",dir:me,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ve}]},{title:"Interaction",dir:fe,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:be,draft:i}]}]},{title:"Best Practice",dir:xe,children:[{title:"Mobile Optimization",dir:m,draft:i},{title:we,dir:ke},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ce}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:A,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:D},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","true",-1,"span","icon","icon-link","p","nofollow","noopener","noreferrer","_blank","li","mobile","help","h3","visual-map","technical-problems","Technical Problems","make-sure-that-existing-documentation-do-not-solve-your-problem","Make sure that existing documentation do not solve your problem","create-the-minimal-reproducible-demo","Create the Minimal Reproducible Demo","determining-if-its-a-bug","Determining if It's a Bug","non-technical-questions","Non-technical questions","Get Help","mailto:dev@echarts.apache.org","dev@echarts.apache.org","/en/basics/help",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="get-help" tabindex="-1">Get Help</h1> <h2 id="technical-problems" tabindex="-1">Technical Problems</h2> <h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3> <p>ECharts has a very large number of users, so it's likely that someone else has encountered and solved a problem you've had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p> <p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li> <li>Articles in this handbook</li> <li><a href="https://echarts.apache.org//faq.html">FAQ</a></li> <li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li> <li>Using the search engine</li></ul> <h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3> <p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p> <p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p> <h3 id="determining-if-it's-a-bug" tabindex="-1">Determining if It's a Bug</h3> <h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4> <p>If it doesn't match the documentation or your intended result, it's probably a bug. If it's a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p> <h4 id="how-to-questions" tabindex="-1">How-To Questions</h4> <p>If it's not a bug, but you don't know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p> <p>If you don't get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p> <h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2> <p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p></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/basics/help.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,o,n,s,h,c,p,u,m,b,f,g,y,v,w,x,C,k,P,S,B,E,R,q,D,I,A,M,L,G,T,H,_,O,V,z,N,U,W,F,Q,X,$,Y,j,J,K,Z,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-help" tabindex="-1">Get Help</h1>\n<h2 id="technical-problems" tabindex="-1">Technical Problems</h2>\n<h3 id="make-sure-that-existing-documentation-do-not-solve-your-problem" tabindex="-1">Make sure that existing documentation do not solve your problem</h3>\n<p>ECharts has a very large number of users, so it\'s likely that someone else has encountered and solved a problem you\'ve had before. By looking at the documentation and using the search engine, you can help yourself to solve the problem in the first place without relying on the community for help.</p>\n<p>Therefore, before doing anything else, make sure that existing documentation and other resources do not solve your problem. Reources that can be helpful include:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">Option Manual</a>: you can try to use the search function</li>\n<li>Articles in this handbook</li>\n<li><a href="https://echarts.apache.org//faq.html">FAQ</a></li>\n<li>Searching in <a href="https://github.com/apache/echarts/issues">GitHub issue</a></li>\n<li>Using the search engine</li>\n</ul>\n<h3 id="create-the-minimal-reproducible-demo" tabindex="-1">Create the Minimal Reproducible Demo</h3>\n<p>Create an example on <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>, <a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a>, which will make it easier for others to reproduce your problem.</p>\n<p>The example should reproduce your problem in the simplest way possible. Removing unnecessary code and data will allow those who help you to locate the problem more quickly, thus allowing your problem to be solved more quickly. See <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to Create a Minimal, Reproducible Example</a> for a more detailed description.</p>\n<h3 id="determining-if-it\'s-a-bug" tabindex="-1">Determining if It\'s a Bug</h3>\n<h4 id="report-a-bug-or-request-a-new-feature" tabindex="-1">Report a Bug or Request a New Feature</h4>\n<p>If it doesn\'t match the documentation or your intended result, it\'s probably a bug. If it\'s a bug, or you have a feature request, use the <a href="https://ecomfe.github.io/echarts-issue-helper/">issue template</a> to create a new issue and follow the prompts to describe it in detail.</p>\n<h4 id="how-to-questions" tabindex="-1">How-To Questions</h4>\n<p>If it\'s not a bug, but you don\'t know how to achieve something, try the <a href="https://stackoverflow.com">stackoverflow.com</a></p>\n<p>If you don\'t get an answer, you can also send an email to the email group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>. In order for more people to understand your question and to get help in future searches, it is highly recommended to send emails in English.</p>\n<h2 id="non-technical-questions" tabindex="-1">Non-technical questions</h2>\n<p>Other questions can be sent in English to the mail group <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>.</p>\n',postPath:"en/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:u},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:g,draft:t},{title:"系列",dir:y,draft:t},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:P},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:E,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:q},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:I,draft:t},{title:"阶梯瀑布图",dir:A},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:T},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:_}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:U}]}]},{title:W,dir:e,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:$},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:J,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:u},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:y,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:P},{title:"Event and Action",dir:S}]},{title:"Application",dir:B,children:[{title:"Common Charts",dir:E,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:q},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:I,draft:t},{title:"Waterfall",dir:A}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:T},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:_}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:$},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:J,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/basics/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/basics/import/index.html b/handbook/en/basics/import/index.html
index 361c709..69f1aab 100644
--- a/handbook/en/basics/import/index.html
+++ b/handbook/en/basics/import/index.html
@@ -3,26 +3,93 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="use-apache-echarts-with-bundler-and-npm"><a aria-hidden="true" href="#use-apache-echarts-with-bundler-and-npm" tabindex="-1"><span class="icon icon-link"></span></a>Use Apache ECharts with bundler and NPM</h1>
-<p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>
-<h2 id="npm-installation-of-echarts"><a aria-hidden="true" href="#npm-installation-of-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM Installation of ECharts</h2>
-<p>You can install ECharts via npm using the following command</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="introduce-echarts"><a aria-hidden="true" href="#introduce-echarts" tabindex="-1"><span class="icon icon-link"></span></a>Introduce ECharts</h2>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="importing-required-charts-and-components-to-have-minimal-bundle"><a aria-hidden="true" href="#importing-required-charts-and-components-to-have-minimal-bundle" tabindex="-1"><span class="icon icon-link"></span></a>Importing Required Charts and Components to Have Minimal Bundle.</h2>
-<p>The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>
-</blockquote>
-<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>
-<h2 id="minimal-option-type-in-typescript"><a aria-hidden="true" href="#minimal-option-type-in-typescript" tabindex="-1"><span class="icon icon-link"></span></a>Minimal Option Type in TypeScript</h2>
-<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/basics/import#npm-installation-of-echarts">NPM Installation of ECharts</a></li><li class="toc2"><a href="/handbook/en/basics/import#introduce-echarts">Introduce ECharts</a></li><li class="toc2"><a href="/handbook/en/basics/import#importing-required-charts-and-components-to-have-minimal-bundle">Importing Required Charts and Components to Have Minimal Bundle.</a></li><li class="toc2"><a href="/handbook/en/basics/import#minimal-option-type-in-typescript">Minimal Option Type in TypeScript</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/import.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,n,l,d,o,p,s,h,c,m,u,y,g,v,f,C,b,x,w,E,k,S,T,B,O,R,I,P,G,N,A,L,q,D,H,M,V,z,_,U,j,F,W,Y,Z,$,X,J,K,Q,ee,te,ie,re,ae,ne,le,de,oe,pe,se,he,ce,me,ue,ye,ge,ve,fe,Ce,be,xe){return{layout:"default",data:[{article:{slug:v,toc:[{id:C,depth:2,text:b},{id:x,depth:2,text:w},{id:E,depth:2,text:k},{id:S,depth:2,text:T}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"use-apache-echarts-with-bundler-and-npm"},children:[{type:t,tag:d,props:{ariaHidden:o,href:"#use-apache-echarts-with-bundler-and-npm",tabIndex:-1},children:[{type:t,tag:p,props:{className:[s,h]},children:[]}]},{type:e,value:"Use Apache ECharts with bundler and NPM"}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"If your development environment uses a package management tool like "},{type:t,tag:l,props:{},children:[{type:e,value:"npm"}]},{type:e,value:B},{type:t,tag:l,props:{},children:[{type:e,value:"yarn"}]},{type:e,value:" and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" via treeshaking."}]},{type:e,value:r},{type:t,tag:c,props:{id:C},children:[{type:t,tag:d,props:{ariaHidden:o,href:"#npm-installation-of-echarts",tabIndex:-1},children:[{type:t,tag:p,props:{className:[s,h]},children:[]}]},{type:e,value:b}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"You can install ECharts via npm using the following command"}]},{type:e,value:r},{type:t,tag:m,props:{className:[u]},children:[{type:t,tag:y,props:{lang:"shell","line-highlights":a,"file-name":a},children:[{type:e,value:"npm install echarts --save\n"}]}]},{type:e,value:r},{type:t,tag:c,props:{id:x},children:[{type:t,tag:d,props:{ariaHidden:o,href:"#introduce-echarts",tabIndex:-1},children:[{type:t,tag:p,props:{className:[s,h]},children:[]}]},{type:e,value:w}]},{type:e,value:r},{type:t,tag:m,props:{className:[u]},children:[{type:t,tag:y,props:{lang:"js","line-highlights":a,"file-name":a},children:[{type:e,value:"import * as echarts from 'echarts';\n\n// initialize the echarts instance\nvar myChart = echarts.init(document.getElementById('main'));\n// Draw the chart\nmyChart.setOption({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', 'pants', 'heels', 'socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n"}]}]},{type:e,value:r},{type:t,tag:c,props:{id:E},children:[{type:t,tag:d,props:{ariaHidden:o,href:"#importing-required-charts-and-components-to-have-minimal-bundle",tabIndex:-1},children:[{type:t,tag:p,props:{className:[s,h]},children:[]}]},{type:e,value:k}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle."}]},{type:e,value:r},{type:t,tag:m,props:{className:[u]},children:[{type:t,tag:y,props:{lang:"js","line-highlights":a,"file-name":a},children:[{type:e,value:"// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts/core';\n// Import bar charts, all with Chart suffix\nimport { BarChart } from 'echarts/charts';\n// import the tooltip, title, and rectangular coordinate system components, all suffixed with Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// The next step is the same as before, initialize the chart and set the configuration items\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n"}]}]},{type:e,value:r},{type:t,tag:"blockquote",props:{},children:[{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import "},{type:t,tag:l,props:{},children:[{type:e,value:O}]},{type:e,value:B},{type:t,tag:l,props:{},children:[{type:e,value:"SVGRenderer"}]},{type:e,value:" as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the "},{type:t,tag:l,props:{},children:[{type:e,value:O}]},{type:e,value:" module, which is not needed."}]},{type:e,value:r}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:'The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.'}]},{type:e,value:r},{type:t,tag:c,props:{id:S},children:[{type:t,tag:d,props:{ariaHidden:o,href:"#minimal-option-type-in-typescript",tabIndex:-1},children:[{type:t,tag:p,props:{className:[s,h]},children:[]}]},{type:e,value:T}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal "},{type:t,tag:l,props:{},children:[{type:e,value:"EChartsOption"}]},{type:e,value:" type. This stricter type can effectively help you check for missing components or charts."}]},{type:e,value:r},{type:t,tag:m,props:{className:[u]},children:[{type:t,tag:y,props:{lang:"ts","line-highlights":a,"file-name":a},children:[{type:e,value:"import * as echarts from 'echarts/core';\nimport {\n BarChart,\n // The series types are defined with the SeriesOption suffix\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // The component types are defined with the suffix ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// Combine an Option type with only required components and charts via ComposeOption\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n"}]}]}]},dir:"/en/basics",path:R,extension:".md",createdAt:"2021-07-24T08:50:13.334Z",updatedAt:"2021-07-24T08:53:38.084Z"},postPath:"en/basics/import"}],fetch:{},error:I,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:P},{title:"入门篇",dir:G,children:[{title:"获取 ECharts",dir:N},{title:"在项目中引入 ECharts",dir:v},{title:"资源列表",dir:A,draft:i},{title:"获取灵感",dir:L},{title:"寻求帮助",dir:q},{title:"版本介绍",dir:D,children:[{title:H,draft:i,dir:M},{title:"ECharts 5 新特性",dir:V},{title:"ECharts 5 升级指南",dir:z}]}]},{title:"概念篇",dir:_,children:[{title:"图表容器及大小",dir:U},{title:"配置项",dir:j,draft:i},{title:"系列",dir:F,draft:i},{title:"样式",dir:W},{title:"数据集",dir:Y},{title:"数据转换",dir:Z},{title:"坐标系",dir:$,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:f},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:Q},{title:"动态排序柱状图",dir:ee,draft:i},{title:"极坐标系柱状图",dir:te,draft:i},{title:"瀑布图",dir:ie,draft:i},{title:"视觉映射的柱状图",dir:f,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:re},{title:"堆叠折线图",dir:ae},{title:"区域面积图",dir:ne},{title:"平滑曲线图",dir:le},{title:"阶梯线图",dir:de}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:oe},{title:"圆环图",dir:pe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:se,children:[{title:"基础散点图",dir:he}]}]},{title:"移动端优化",dir:g,draft:i},{title:"跨平台方案",dir:ce,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:me},{title:"数据下钻",dir:ue,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ye}]},{title:"交互",dir:ge,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ve,draft:i}]}]},{title:"最佳实践",dir:fe,children:[{title:"移动端优化",dir:g,draft:i},{title:Ce,dir:be},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:xe}]}],en:[{title:"Get Started",dir:P},{title:"Basics",dir:G,children:[{title:"Download ECharts",dir:N},{title:"Import ECharts",dir:v},{title:"Resources",dir:A,draft:i},{title:"Inspiration",dir:L},{title:"Get Help",dir:q},{title:"Release Note",dir:D,children:[{title:H,draft:i,dir:M},{title:"ECharts 5 Features",dir:V},{title:"ECharts 5 Upgrade Guide",dir:z}]}]},{title:"Concepts",dir:_,children:[{title:"Chart Container",dir:U},{title:"Chart Option",dir:j,draft:i},{title:"Series",dir:F,draft:i},{title:"Style",dir:W},{title:"Dataset",dir:Y},{title:"Data Transform",dir:Z},{title:"Coordinate",dir:$,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:f},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:Q},{title:"Bar Racing",dir:ee,draft:i},{title:"Bar Polar",dir:te,draft:i},{title:"Waterfall",dir:ie,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:re},{title:"Stacked Line",dir:ae},{title:"Area Chart",dir:ne},{title:"Smoothed Line",dir:le},{title:"Step Line",dir:de}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:oe},{title:"Ring Style",dir:pe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:se,children:[{title:"Basic Scatter",dir:he}]}]},{title:"Mobile",dir:g,draft:i},{title:"Cross Platform",dir:ce,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:me},{title:"Drilldown",dir:ue,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ye}]},{title:"Interaction",dir:ge,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ve,draft:i}]}]},{title:"Best Practice",dir:fe,children:[{title:"Mobile Optimization",dir:g,draft:i},{title:Ce,dir:be},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:xe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:R,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","p","code","a","true","span","icon","icon-link","h2","div","nuxt-content-highlight","md-code-block","mobile","import","visual-map","npm-installation-of-echarts","NPM Installation of ECharts","introduce-echarts","Introduce ECharts","importing-required-charts-and-components-to-have-minimal-bundle","Importing Required Charts and Components to Have Minimal Bundle.","minimal-option-type-in-typescript","Minimal Option Type in TypeScript"," or ","CanvasRenderer","/en/basics/import",null,"get-started","basics","download","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1> <p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p> <h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2> <p>You can install ECharts via npm using the following command</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</span><span class="token punctuation">;</span>
+
+<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 punctuation">;</span>
+<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> <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 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></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="importing-required-charts-and-components-to-have-minimal-bundle." tabindex="-1">Importing Required Charts and Components to Have Minimal Bundle.</h2> <p>The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Import the echarts core module, which provides the necessary interfaces for using echarts.</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/core'</span><span class="token punctuation">;</span>
+<span class="token comment">// Import bar charts, all with Chart suffix</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, and rectangular coordinate system components, 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> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span>
+<span class="token comment">// Import the Canvas renderer, 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>
+ BarChart<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 punctuation">;</span>
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p></blockquote> <p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p> <h2 id="minimal-option-type-in-typescript" tabindex="-1">Minimal Option Type in TypeScript</h2> <p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><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 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 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> 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><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>
+ BarChart<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">var</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/basics/import.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,l,a,r,n,o,c,h,s,b,g,p,m,I,C,G,u,y,B,v,Z,w,X,W,J,V,R,f,N,Y,k,z,F,H,A,E,S,U,K,M,Q,L,T,D,x,j,P,O,q,_,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="use-apache-echarts-with-bundler-and-npm" tabindex="-1">Use Apache ECharts with bundler and NPM</h1>\n<p>If your development environment uses a package management tool like <code>npm</code> or <code>yarn</code> and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts<sup>TM</sup> via treeshaking.</p>\n<h2 id="npm-installation-of-echarts" tabindex="-1">NPM Installation of ECharts</h2>\n<p>You can install ECharts via npm using the following command</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="introduce-echarts" tabindex="-1">Introduce ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIGluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIERyYXcgdGhlIGNoYXJ0Cm15Q2hhcnQuc2V0T3B0aW9uKHsKICB0aXRsZTogewogICAgdGV4dDogJ0VDaGFydHMgR2V0dGluZyBTdGFydGVkIEV4YW1wbGUnCiAgfSwKICB0b29sdGlwOiB7fSwKICB4QXhpczogewogICAgZGF0YTogWydzaGlydCcsICdjYXJkaWdhbicsICdjaGlmZm9uJywgJ3BhbnRzJywgJ2hlZWxzJywgJ3NvY2tzJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9KTs\'" line-highlights="\'\'" />\n<h2 id="importing-required-charts-and-components-to-have-minimal-bundle." tabindex="-1">Importing Required Charts and Components to Have Minimal Bundle.</h2>\n<p>The above code will import all the charts and components in ECharts, but if you don\'t want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle.</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBlY2hhcnRzIGNvcmUgbW9kdWxlLCB3aGljaCBwcm92aWRlcyB0aGUgbmVjZXNzYXJ5IGludGVyZmFjZXMgZm9yIHVzaW5nIGVjaGFydHMuCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8gSW1wb3J0IGJhciBjaGFydHMsIGFsbCB3aXRoIENoYXJ0IHN1ZmZpeAppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKLy8gaW1wb3J0IHRoZSB0b29sdGlwLCB0aXRsZSwgYW5kIHJlY3Rhbmd1bGFyIGNvb3JkaW5hdGUgc3lzdGVtIGNvbXBvbmVudHMsIGFsbCBzdWZmaXhlZCB3aXRoIENvbXBvbmVudAppbXBvcnQgewogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIEltcG9ydCB0aGUgQ2FudmFzIHJlbmRlcmVyLCBub3RlIHRoYXQgaW50cm9kdWNpbmcgdGhlIENhbnZhc1JlbmRlcmVyIG9yIFNWR1JlbmRlcmVyIGlzIGEgcmVxdWlyZWQgc3RlcAppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIFJlZ2lzdGVyIHRoZSByZXF1aXJlZCBjb21wb25lbnRzCmVjaGFydHMudXNlKFsKICBUaXRsZUNvbXBvbmVudCwKICBUb29sdGlwQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnQsCiAgQmFyQ2hhcnQsCiAgQ2FudmFzUmVuZGVyZXIKXSk7CgovLyBUaGUgbmV4dCBzdGVwIGlzIHRoZSBzYW1lIGFzIGJlZm9yZSwgaW5pdGlhbGl6ZSB0aGUgY2hhcnQgYW5kIHNldCB0aGUgY29uZmlndXJhdGlvbiBpdGVtcwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import <code>CanvasRenderer</code> or <code>SVGRenderer</code> as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the <code>CanvasRenderer</code> module, which is not needed.</p>\n</blockquote>\n<p>The "Full Code" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project.</p>\n<h2 id="minimal-option-type-in-typescript" tabindex="-1">Minimal Option Type in TypeScript</h2>\n<p>For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal <code>EChartsOption</code> type. This stricter type can effectively help you check for missing components or charts.</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIFRoZSBzZXJpZXMgdHlwZXMgYXJlIGRlZmluZWQgd2l0aCB0aGUgU2VyaWVzT3B0aW9uIHN1ZmZpeAogIEJhclNlcmllc09wdGlvbiwKICBMaW5lQ2hhcnQsCiAgTGluZVNlcmllc09wdGlvbgp9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsKICBUaXRsZUNvbXBvbmVudCwKICAvLyBUaGUgY29tcG9uZW50IHR5cGVzIGFyZSBkZWZpbmVkIHdpdGggdGhlIHN1ZmZpeCBDb21wb25lbnRPcHRpb24KICBUaXRsZUNvbXBvbmVudE9wdGlvbiwKICBHcmlkQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnRPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NvbXBvbmVudHMnOwppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIENvbWJpbmUgYW4gT3B0aW9uIHR5cGUgd2l0aCBvbmx5IHJlcXVpcmVkIGNvbXBvbmVudHMgYW5kIGNoYXJ0cyB2aWEgQ29tcG9zZU9wdGlvbgp0eXBlIEVDT3B0aW9uID0gZWNoYXJ0cy5Db21wb3NlT3B0aW9uPAogIHwgQmFyU2VyaWVzT3B0aW9uCiAgfCBMaW5lU2VyaWVzT3B0aW9uCiAgfCBUaXRsZUNvbXBvbmVudE9wdGlvbgogIHwgR3JpZENvbXBvbmVudE9wdGlvbgo-OwoKLy8gUmVnaXN0ZXIgdGhlIHJlcXVpcmVkIGNvbXBvbmVudHMKZWNoYXJ0cy51c2UoWwogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudCwKICBCYXJDaGFydCwKICBDYW52YXNSZW5kZXJlcgpdKTsKCnZhciBvcHRpb246IEVDT3B0aW9uID0gewogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n',postPath:"en/basics/import"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:C,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:u},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:w},{title:"事件与行为",dir:X}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:V},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:N,draft:t},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:A},{title:"阶梯线图",dir:E}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:K}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:Q}]}]},{title:L,dir:e,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:D}]},{title:"数据处理",dir:x,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:P,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:L,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:w},{title:"Event and Action",dir:X}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:V},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:N,draft:t},{title:"Waterfall",dir:Y}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:A},{title:"Step Line",dir:E}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:U},{title:"Rose Style",dir:K}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:Q}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:D}]},{title:"Data",dir:x,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:P,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/basics/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/basics/inspiration/index.html b/handbook/en/basics/inspiration/index.html
index 0fe8333..198f4de 100644
--- a/handbook/en/basics/inspiration/index.html
+++ b/handbook/en/basics/inspiration/index.html
@@ -3,15 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="get-inspired"><a href="#get-inspired" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get Inspired</h1>
-<p>The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p>
-<ul>
-<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">Apache ECharts Official Examples</a></li>
-<li>"Applications - Common Charts" in this handbook</li>
-</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,o,s,c,h,p,f,g,u,b,m,v,y,C,w,k,E,x,P,S,B,A,R,D,L,I,_,G,T,V,H,M,z,N,O,U,Z,$,q,F,W,X,j,J,K,Q,Y,tt,it,et,rt,at){return{layout:"default",data:[{article:{slug:d,toc:[],body:{type:"root",children:[{type:e,tag:"h1",props:{id:"get-inspired"},children:[{type:e,tag:"a",props:{href:"#get-inspired",ariaHidden:"true",tabIndex:-1},children:[{type:e,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:i,value:"Get Inspired"}]},{type:i,value:r},{type:e,tag:"p",props:{},children:[{type:i,value:'The following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".'}]},{type:i,value:r},{type:e,tag:"ul",props:{},children:[{type:i,value:r},{type:e,tag:"li",props:{},children:[{type:e,tag:"a",props:{href:"https://echarts.apache.org//examples",rel:["nofollow","noopener","noreferrer"],target:"_blank"},children:[{type:i,value:"Apache ECharts Official Examples"}]}]},{type:i,value:r},{type:e,tag:"li",props:{},children:[{type:i,value:'"Applications - Common Charts" in this handbook'}]},{type:i,value:r}]}]},dir:"/en/basics",path:n,extension:".md",createdAt:"2021-07-24T08:47:14.252Z",updatedAt:"2021-07-24T08:53:01.555Z"},postPath:"en/basics/inspiration"}],fetch:{},error:o,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:s},{title:"入门篇",dir:c,children:[{title:"获取 ECharts",dir:h},{title:"在项目中引入 ECharts",dir:p},{title:"资源列表",dir:f,draft:t},{title:"获取灵感",dir:d},{title:"寻求帮助",dir:g},{title:"版本介绍",dir:u,children:[{title:b,draft:t,dir:m},{title:"ECharts 5 新特性",dir:v},{title:"ECharts 5 升级指南",dir:y}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:k,draft:t},{title:"系列",dir:E,draft:t},{title:"样式",dir:x},{title:"数据集",dir:P},{title:"数据转换",dir:S},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:l},{title:"图例",dir:R},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:I,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:_},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:T,draft:t},{title:"极坐标系柱状图",dir:V,draft:t},{title:"瀑布图",dir:H,draft:t},{title:"视觉映射的柱状图",dir:l,draft:t}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:N},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:U},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:$},{title:"圆环图",dir:q},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:X}]}]},{title:"移动端优化",dir:a,draft:t},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:tt,draft:t}]}]},{title:"最佳实践",dir:it,children:[{title:"移动端优化",dir:a,draft:t},{title:et,dir:rt},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:at}]}],en:[{title:"Get Started",dir:s},{title:"Basics",dir:c,children:[{title:"Download ECharts",dir:h},{title:"Import ECharts",dir:p},{title:"Resources",dir:f,draft:t},{title:"Inspiration",dir:d},{title:"Get Help",dir:g},{title:"Release Note",dir:u,children:[{title:b,draft:t,dir:m},{title:"ECharts 5 Features",dir:v},{title:"ECharts 5 Upgrade Guide",dir:y}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:k,draft:t},{title:"Series",dir:E,draft:t},{title:"Style",dir:x},{title:"Dataset",dir:P},{title:"Data Transform",dir:S},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:l},{title:"Legend",dir:R},{title:"Event and Action",dir:D}]},{title:"Application",dir:L,children:[{title:"Common Charts",dir:I,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:_},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:T,draft:t},{title:"Bar Polar",dir:V,draft:t},{title:"Waterfall",dir:H,draft:t}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:N},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:U},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:$},{title:"Ring Style",dir:q},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:X}]}]},{title:"Mobile",dir:a,draft:t},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:tt,draft:t}]}]},{title:"Best Practice",dir:it,children:[{title:"Mobile Optimization",dir:a,draft:t},{title:et,dir:rt},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:at}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:n,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:o},content:{dbHash:"570e7c13"}}}}(!0,"text","element","\n","mobile","inspiration","visual-map","/en/basics/inspiration",null,"get-started","basics","download","import","resource","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="get-inspired" tabindex="-1">Get Inspired</h1> <p>The following list provides some ideas when you have a question "I don't know how to design a chart" or "I don't know how to use Apache ECharts to achieve a certain effect".</p> <ul><li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li> <li>"Applications - Common Charts" in this handbook</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/en/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,o,s,c,h,p,f,u,m,g,b,C,v,w,E,P,S,k,x,B,y,A,R,D,L,q,G,I,_,V,M,T,z,O,U,H,N,W,$,F,X,j,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="get-inspired" tabindex="-1">Get Inspired</h1>\n<p>The following list provides some ideas when you have a question "I don\'t know how to design a chart" or "I don\'t know how to use Apache ECharts to achieve a certain effect".</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">Apache ECharts Official Examples</a></li>\n<li>"Applications - Common Charts" in this handbook</li>\n</ul>\n',postPath:"en/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:b,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:E},{title:"坐标系",dir:P,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:B,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:A},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:q},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:I},{title:"堆叠折线图",dir:_},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:O},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:H,children:[{title:"基础散点图",dir:N}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:E},{title:"Coordinate",dir:P,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:x}]},{title:"Application",dir:B,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:A},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:q}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:I},{title:"Stacked Line",dir:_},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:O},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:H,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/basics/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/basics/release-note/5-2-0/index.html b/handbook/en/basics/release-note/5-2-0/index.html
new file mode 100644
index 0000000..c1bdc5f
--- /dev/null
+++ b/handbook/en/basics/release-note/5-2-0/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">
+ <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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="what's-new-in-apache-echarts-5.2.0" tabindex="-1">What's New in Apache ECharts 5.2.0</h1> <h2 id="universal-transition" tabindex="-1">Universal Transition</h2> <p>Natural 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 animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p> <p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p> <div class="md-live layout-lr"><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">function makeRandomData() {
+ 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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p> <p>How cool would this be? Let's have a look!</p> <h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3> <p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p> <p>As follows, switching between a pie chart and a bar chart.</p> <div class="md-live layout-bt"><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">const dataset = {
+ 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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>More transitions between common charts.</p> <p><img src alt data-src="images/5-2-0/universal-transition.gif"></p> <p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p> <p><img src alt data-src="images/5-2-0/universal-transition-2.gif"></p> <p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p> <p><img src alt data-src="images/5-2-0/universal-transition-3.gif"></p> <blockquote><p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p></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 connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It's even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p> <p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</p> <div class="md-live layout-lr"><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 = {
+ 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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p> <p>Aggregation of data.</p> <p><img src alt data-src="images/5-2-0/group-transition.gif"></p> <p>Drilling down of a single series into two series:</p> <p><img src alt data-src="images/5-2-0/group-transition-2.gif"></p> <p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p> <p>At this point, we know you're already eager to try it out. But don't worry, there are even more new features in 5.2.0 that are worth checking out.</p> <h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2> <p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p> <ul><li><code>'series'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li> <li><code>'data'</code> assigns colors in the palette according to data items, with each data item using a different color.</li></ul> <p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>'series'</code> and the pie chart was fixed with <code>'data'</code>.</p> <p>And now with this new feature, we can assign a different color to each data item in the bar chart.</p> <div class="md-live layout-lr"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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 number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Or use one color uniformly in the pie chart.</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p> <h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2> <p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>More configurations for label positions.</p> <p><img src alt data-src="images/5-2-0/polar-bar-label.jpg"></p> <p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p> <h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2> <p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p> <p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>If you don't want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p> <h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2> <p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> indices <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">1000</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 punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <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 punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p> <p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).
+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 can also bring significant performance gains.</p> <h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2> <p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span>
+ 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> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="summary" tabindex="-1">Summary</h2> <p>If you're interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p> <p>If you're interested in what's next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p> <h3 id="full-changelog" tabindex="-1">Full Changelog</h3> <h4 id="break-changes" tabindex="-1">Break Changes</h4> <ul><li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="all-changes" tabindex="-1">All Changes</h4> <ul><li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/apache/echarts/pull/15182">#15182</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code> can use <code>'inherit'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] Display an empty cicle when pie don't have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] Fix tooltip formatter doesn't renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] Set label to be inside when position is <code>'middle'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] Fix 'clampData' undefined error in 'getMarkerPosition' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can't be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] Change the default <code>borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] Change the default <code>borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] Fix lines can't be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn't work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li> <li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</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/en/basics/release-note/5-2-0.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,s,o,r,n,h,g,l,c,d,I,p,C,A,u,m,b,f,w,y,B,G,F,v,x,Z,H,X,R,J,W,Y,K,k,S,V,z,N,O,L,T,D,U,M,E,Q,j,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="what\'s-new-in-apache-echarts-5.2.0" tabindex="-1">What\'s New in Apache ECharts 5.2.0</h1>\n<h2 id="universal-transition" tabindex="-1">Universal Transition</h2>\n<p>Natural 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 animation capability. Next, we will see how this <strong>Universal Transition</strong> adds expressiveness and narrative power to the chart.</p>\n<p>In previous versions, transition animations had certain limitations: they could only be used for the position, size of the same shape, and they could only work on the same type of series. For example, the following example reflects the change in data percent through the change in sector shape in a pie chart.</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>And starting with 5.2.0, we introduced universal transition, a more powerful animation feature. With that, transitions are no longer limited to between series of the same type. Now, we can use this cross-series morphing to animate between any type of series and any type of shapes.</p>\n<p>How cool would this be? Let\'s have a look!</p>\n<h3 id="morphing-transition-across-series" tabindex="-1">Morphing transition across series</h3>\n<p>With <code>universalTransition: true</code> set to enable universion transition feature, switching from pie charts to bar charts, or from bar charts to scatter charts, or even between more complex charts like Sunburst and Treemap, can be morphed naturally.</p>\n<p>As follows, switching between a pie chart and a bar chart.</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIGFzc29jaWF0ZSB0aGUgc2VyaWVzIHRvIGJlIGFuaW1hdGVkIGJ5IGlkCiAgICAgIGlkOiAnU2NvcmUnLAogICAgICByYWRpdXM6IFswLCAnNTAlJ10sCiAgICAgIHVuaXZlcnNhbFRyYW5zaXRpb246IHRydWUsCiAgICAgIGFuaW1hdGlvbkR1cmF0aW9uVXBkYXRlOiAxMDAwCiAgICB9CiAgXQp9Owpjb25zdCBiYXJPcHRpb24gPSB7CiAgZGF0YXNldDogW2RhdGFzZXRdLAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICAvLyBhc3NvY2lhdGUgdGhlIHNlcmllcyB0byBiZSBhbmltYXRlZCBieSBpZAogICAgICBpZDogJ1Njb3JlJywKICAgICAgLy8gRWFjaCBkYXRhIHdpbGwgaGF2ZSBhIGRpZmZlcmVudCBjb2xvcgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8gVXNlIHRoZSBub3RNZXJnZSBmb3JtIHRvIHJlbW92ZSB0aGUgYXhlcwogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>More transitions between common charts.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>Such transitions are no longer limited to just the basic line, bar, and pie charts, but also between bars and maps:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>or between Sunburst and Treemap, or even between very flexible custom series can be transitions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>Note that you need to configure the series ids to ensure that there is a one-to-one correspondence between the series that need to be animated for the transition.</p>\n</blockquote>\n<h3 id="data-split-and-merge-animations" tabindex="-1">Data split and merge animations</h3>\n<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>\n<p>In order to be able to express the possible many-to-many connections between data, in 5.2.0 we introduced a new concept <code>groupId</code>. We can set the group to the whole series via <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.dataGroupId</a>, or more fine-grained by <a href="https://echarts.apache.org/option.html#series-bar.dataGroupId">series.data.groupId</a> to set the group to which each data belongs. It\'s even easier if you use a <code>dataset</code> to manage the data, you can use <code>encode.itemGroupId</code> to specify a dimension encoded as <code>groupId</code>.</p>\n<p>For example, if we want to implement a drill-down animation for a bar chart, we can set the entire series of data after the drill-down to the same <code>groupId</code>, which then corresponds to the data before the drill-down</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXSwKICAgICAgWydDb3dzJywgMV0sCiAgICAgIFsnU2hlZXAnLCAyXSwKICAgICAgWydQaWdzJywgMV0KICAgIF0KICB9LAogIHsKICAgIGRhdGFHcm91cElkOiAnZnJ1aXRzJywKICAgIGRhdGE6IFsKICAgICAgWydBcHBsZXMnLCA0XSwKICAgICAgWydPcmFuZ2VzJywgMl0sCiAgICAgIFsnT3JhbmdlcycsIDJdCiAgICBdCiAgfSwKICB7CiAgICBkYXRhR3JvdXBJZDogJ2NhcnMnLAogICAgZGF0YTogWwogICAgICBbJ1RveW90YScsIDRdLAogICAgICBbJ09wZWwnLCAyXSwKICAgICAgWydWb2xrc3dhZ2VuJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>With <code>groupId</code>, we can also implement richer aggregation and drill-down animations.</p>\n<p>Aggregation of data.</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>Drilling down of a single series into two series:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>Universal transition take the ability to express the relationships and evolution of data to a new level, giving wings to your visualization creation inspiration.</p>\n<p>At this point, we know you\'re already eager to try it out. But don\'t worry, there are even more new features in 5.2.0 that are worth checking out.</p>\n<h2 id="color-palette-picking-strategy" tabindex="-1">Color palette picking strategy</h2>\n<p>In the above universal transition example, you may have noticed that we use a <code>colorBy</code> configuration that was not available in the previous version. This configuration is also a new feature we added in this version to configure different granularity of color palette color picking for the series. This configuration currently supports two strategies.</p>\n<ul>\n<li><code>\'series\'</code> assigns the colors in the palette by series, so that all data in the same series are in the same color.</li>\n<li><code>\'data\'</code> assigns colors in the palette according to data items, with each data item using a different color.</li>\n</ul>\n<p>Previously, we fixed this strategy for each type of series, for example, the bar chart was fixed with <code>\'series\'</code> and the pie chart was fixed with <code>\'data\'</code>.</p>\n<p>And now with this new feature, we can assign a different color to each data item in the bar chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>Or use one color uniformly in the pie chart.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>This configuration allows us to avoid the trouble of finding palette colors and setting them one by one, and may provide convenience in specific scenarios. We will further enhance this configuration later to provide more strategies.</p>\n<h2 id="labels-for-polar-bar-charts" tabindex="-1">Labels for polar bar charts</h2>\n<p>In this version we have implemented labels for bar charts on polar coordinates and support rich label positioning configurations. The following is a progress chart with labels displayed at the start points.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyBUcnkgY2hhbmdpbmcgaXQgdG8gJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>More configurations for label positions.</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>This flexible label position configuration item greatly enriches the expressiveness of the polar bar chart, allowing the text to clearly match the corresponding data.</p>\n<h2 id="pie-chart-style-for-empty-data" tabindex="-1">Pie chart style for empty data</h2>\n<p>In the previous version, if there was no data in the pie chart, the screen might be completely blank. Because there was no visual element, users may wonder if there was a bug.</p>\n<p>To solve this problem, in this version we will default to display a gray placeholder circle when there is no data to prevent the screen from being completely blank. We can configure the style of this placeholder circle with <code>emptyCircleStyle</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyBjaGFuZ2UgdGhlIHN0eWxlIHRvIGVtcHR5IGNpcmNsZQogICAgICAgIGNvbG9yOiAndHJhbnNwYXJlbnQnLAogICAgICAgIGJvcmRlckNvbG9yOiAnI2RkZCcsCiAgICAgICAgYm9yZGVyV2lkdGg6IDEKICAgICAgfQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>If you don\'t want to show this gray circle, you can also set <code>showEmptyCircle: false</code> to turn it off.</p>\n<h2 id="performance-enhancements-for-high-dimensional-data" tabindex="-1">Performance enhancements for high-dimensional data</h2>\n<p>We have introduced <a href="https://echarts.apache.org/option.html#dataset">dataset</a> since 4.0 to manage chart data. However, in some extreme scenarios with particularly high-dimensional (>100) data, we may encounter some dramatic performance degradation, such as the following scenario of visualizing a thousand-dimensional data through a thousand series (<a href="https://github.com/apache/echarts/issues/11907">#11907</a>), which may even may lead to getting stuck.</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuIC4gaW5kaWNlc10sCiAgICBzb3VyY2U6IEFycmF5LmZyb20oQXJyYXkoMTApLCAoXywgaSkgPT4gewogICAgICByZXR1cm4gewogICAgICAgIGRhdGU6IGksCiAgICAgICAgLi4uIC5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>The reason for this performance problem is that we process the high-dimensional dataset at the bottom of each series as needed and save a copy of the processed data and the meta information about the dimensions of the data. This meant that the <code>1000 x 1000</code> dimensions had to be processed and saved in the example, which put a huge pressure on memory and garbage collection, resulting in a dramatic performance drop for high dimensions.</p>\n<p>In the new version we have optimized this problem so that all series share the dataset storage as much as possible (whether or not they do depends on how the series uses the data).\nThis 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>\n<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 can also bring significant performance gains.</p>\n<h2 id="type-optimization-for-custom-series" tabindex="-1">Type optimization for custom series</h2>\n<p>Custom series provide a very flexible way to create series graphs. Compared to other series, the learning curve for custom series can be a bit steep. Therefore, in this release, we have further optimized the type of the core method <code>renderItem</code> in the custom series by making more precise inferences about the types of the parameters and return values of <code>renderItem</code>, so that it is possible to infer which properties of the elements can be set based on the type returned:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBUaGUgZ3JvdXAgdHlwZSB1c2VzIGNoaWxkcmVuIHRvIHN0b3JlIGNoaWxkcmVuIG9mIG90aGVyIHR5cGVzCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIGF0dHJpYnV0ZXMKICAgICAgICAgIHNoYXBlOiB7IHI6IDEwLCBjeDogMCwgY3k6IDAgfSwKICAgICAgICAgIC8vIENvbmZpZ3VyYWJsZSBzdHlsZXMKICAgICAgICAgIHN0eWxlOiB7IGZpbGw6ICdyZWQnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdyZWN0JywKICAgICAgICAgIC8vIHJlY3QgaGFzIHRoZSBmb2xsb3dpbmcgY29uZmlndXJhYmxlIHNoYXBlIHByb3BlcnRpZXMKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIEN1c3RvbSBwYXRoIHNoYXBlcwogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>If you\'re interested in some of the features and optimizations in 5.2.0, you may want to update to the latest version of Apache ECharts and try it out for yourself.</p>\n<p>If you\'re interested in what\'s next for Apache ECharts, you can also follow our development plans at <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a>. Feel free to join us as a contributor (learn more at <a href="https://github.com/apache/echarts/wiki">Wiki</a>).</p>\n<h3 id="full-changelog" tabindex="-1">Full Changelog</h3>\n<h4 id="break-changes" tabindex="-1">Break Changes</h4>\n<ul>\n<li>[Fix][pie] Negative value will be filtered <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="all-changes" tabindex="-1">All Changes</h4>\n<ul>\n<li><strong>[Feature] Introduce universal transition to all series. <a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] Add <code>series.colorBy</code> <a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] Support sector label positions for polar bars <a href="https://github.com/apache/echarts/pull/15182">#15182</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] Add <code>rippleEffect.number</code> <a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] Add <code>pointer.showAbove</code> to allow pointer show above the title and details. <a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code> can use <code>\'inherit\'</code> to be not higlighted. <a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] Display an empty cicle when pie don\'t have value. <a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] Fix dataset performance drops signifcantly on high dimensions data. <a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] Optimize format in time axis <a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] Optimize text font compatibility with legacy code. <a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] Optimize memory when chart instance is still hold after dispose <a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] Optimize color gradient when having infinite value. <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] Optimize date parsing <a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] Fix render bug. <a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] Fix style lost after update <a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] Gradient should follow orient. <a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] Fix tooltip formatter doesn\'t renders HTMLElement if tooltip position is specified. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] Tooltip should clear content when formatter returns null. <a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] Set label to be inside when position is <code>\'middle\'</code> <a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] Fix \'clampData\' undefined error in \'getMarkerPosition\' <a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] Fix old nodes not removed when disabled animation <a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] Fix edge may not removed when update data <a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] Fix <code>borderRadius</code> can\'t be reset in pie series and sunburst series when setting it to <code>null</code> or <code>undefined</code> <a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] Fix unexpected <code>none</code> or <code>null</code> fillStyle may be warned in firefox <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] Hightlight multiple series through <code>chart.dispatchAction</code> not work as expected <a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] Fix drag bug when using <code>series.nodes</code> to represent data. <a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] Optimize exported SVG compatibility for Powerpoint. <a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] Fix <code>text.lineHeight</code> not work <a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] Change the default <code>borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] Change the default <code>borderJoin</code> to <code>round</code>. <a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] Fix <code>label.show</code> set to <code>false</code> will throw error <a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] Fix pictorialBar zero value label display. <a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] Fix lines can\'t be cleared by chart.clear() <a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] Fix endLabel not display when only set <code>emphasis.show</code> to <code>true</code>. <a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] Fix rect path not closed. <a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] Add <code>treeAncestors</code> in callback params <a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] Fix error when running setOption twice with different data <a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] Fix radar symbol border is scaled <a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] Fix symbolOffset and symbolKeepAspect doesn\'t work in markPoint. <a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] Fix data index and series index is missing. <a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] Tooltip arrow will follow borderWidth. <a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] Fix geo switch from hidden to show fail. <a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] Optimize type of <code>renderItem</code> in custom series.</li>\n<li>[Fix][type] Optimize option type of <code>echarts.init</code>. <a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] There is no <code>polarIndex</code> when coordinate of series is polar <a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] Optimize type when using SVG source in geo component. <a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] Fix wrong type for <code>pie</code> data and <code>map</code> data. <a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"en/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:s},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:e},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:d},{title:"ECharts 5 升级指南",dir:I},{title:5.2,dir:p}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:e},{title:"系列",dir:m,draft:e},{title:"样式",dir:b},{title:"数据集",dir:f},{title:"数据转换",dir:w},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:F}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:H},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:L,children:[{title:"基础散点图",dir:T}]}]},{title:D,dir:t,draft:e},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:s},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:e},{title:"Inspiration",dir:g},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:d},{title:"ECharts 5 Upgrade Guide",dir:I},{title:5.2,dir:p}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:m,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:f},{title:"Data Transform",dir:w},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:F}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:H},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:L,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/basics/release-note/v5-feature/index.html b/handbook/en/basics/release-note/v5-feature/index.html
new file mode 100644
index 0000000..cc8605c
--- /dev/null
+++ b/handbook/en/basics/release-note/v5-feature/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1> <p>Data 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.</p> <p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p> <img data-src="images/feature-v5/echarts-5-en.png" width="800px"> <p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p> <h2 id="storytelling" tabindex="-1">Storytelling</h2> <p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p> <h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4> <p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p> <h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4> <p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p> <p>Imagine what amazing visualizations you can create with these dynamic effects!</p> <h2 id="visual-design" tabindex="-1">Visual Design</h2> <p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p> <h4 id="overall-design" tabindex="-1">Overall Design</h4> <p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>Let's look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</p> <img data-src="images/feature-v5/new-theme-light.png" width="500px"> <img data-src="images/feature-v5/new-theme-dark.png" width="500px"> <p>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="label" tabindex="-1">Label</h4> <p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p> <p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p> <p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p> <p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p> <p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="time-axis" tabindex="-1">Time Axis</h4> <p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis's label content to different needs.</p> <p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p> <p>The display of the time scale at different dataZoom granularities.</p> <img data-src="images/feature-v5/time-axis.png" width="600px"> <img data-src="images/feature-v5/time-axis-2.png" width="600px"> <h4 id="tooltip" tabindex="-1">Tooltip</h4> <p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</p> <img data-src="images/feature-v5/new-tooltip.png" width="400px"> <img data-src="images/feature-v5/new-tooltip-2.png" width="400px"> <p>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p> <h4 id="gauge" tabindex="-1">Gauge</h4> <p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p> <p>Different styles of gauge pointers.</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p> <iframe width="600" height="600" src=""></iframe> <h4 id="round-corner" tabindex="-1">Round Corner</h4> <p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don't underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p> <iframe width="400" height="400" src=""></iframe> <h2 id="interactivity" tabindex="-1">Interactivity</h2> <p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p> <h4 id="multi-state" tabindex="-1">Multi-State</h4> <p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p> <p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p> <p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p> <p>In addition, we've added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p> <h4 id="performance-improvements" tabindex="-1">Performance improvements</h4> <h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5> <p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p> <p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>You can see the effect by enable dirty rectangle optimization on the new example page.</p> <h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5> <p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p> <p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p> <h2 id="development-experience" tabindex="-1">Development Experience</h2> <p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p> <h4 id="datasets" tabindex="-1">Datasets</h4> <p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p> <h4 id="internationalization" tabindex="-1">Internationalization</h4> <p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p> <p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// import the lang object and set when init</span>
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4> <p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p> <p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p> <p>In addition, if a developer's component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p> <h2 id="accessibility" tabindex="-1">Accessibility</h2> <p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p> <p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p> <h4 id="theme-colors" tabindex="-1">Theme Colors</h4> <p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p> <p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p> <h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4> <p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p> <iframe width="600" height="350" src=""></iframe> <p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p> <iframe width="600" height="350" src=""></iframe> <h2 id="summary" tabindex="-1">Summary</h2> <p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p> <p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We'll be working on future developments with even more enthusiasm, and we'll see you all in 6 with even more enthusiasm!</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/basics/release-note/v5-feature.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,n,r,o,s,d,l,h,c,p,m,g,f,u,y,b,v,w,x,C,k,E,T,z,A,I,S,D,R,P,W,L,B,G,V,F,M,j,O,q,Y,Z,_,H,U,J,N,K,Q,X,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="new-features-in-echarts-5" tabindex="-1">New features in ECharts 5</h1>\n<p>Data 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.</p>\n<p>Apache ECharts has always been committed to making it easier for developers to create flexible and rich visualizations. In the latest release of Apache ECharts 5, we have focused on enhancing the storytelling of charts, allowing developers to tell the story behind the data in a simpler way.</p>\n<img data-src="images/feature-v5/echarts-5-en.png" width="800px" />\n<p>"The core of Apache ECharts 5 is "Show, do not tell", which is a comprehensive upgrade of five topics and 15 features around the stroy telling of visualizations, allowing charts to better tell the story behind the data. It helps developers to create visualizations that meet the needs of various scenarios more easily.</p>\n<h2 id="storytelling" tabindex="-1">Storytelling</h2>\n<p>The importance of animation to human cognition cannot be overstated. In our previous work, we used initialization animations and transition animations to help users understand the connection between data transformations, making the appearance of charts and transformations seem less rigid. This time, we have even enhanced our animation capabilities, even more significantly. We hope to further exploit the role of animation to help users\' cognition, and help them understand the story behind the chart more easily with the dynamic stroy function of the chart.</p>\n<h4 id="bar%2Fline-racing" tabindex="-1">Bar/Line Racing</h4>\n<p>Apache ECharts 5 adds support for dynamically sorted bar-racing and dynamically sorted line-racing charts to help developers easily create time-series charts that show changes in data over time and tell the evolution of data.</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>The dynamic sorting chart shows the derivation of different categories in the ranking over time. The developer can enable this effect in ECharts with a few simple configuration code.</p>\n<h4 id="custom-series-animation" tabindex="-1">Custom Series Animation</h4>\n<p>In addition to dynamic sorting charts, Apache ECharts 5 provides even richer and more powerful animations in the custom series, supporting interpolation animations for label value text, transition animations for morph, combine, separate, and other effects of graphics.</p>\n<p>Imagine what amazing visualizations you can create with these dynamic effects!</p>\n<h2 id="visual-design" tabindex="-1">Visual Design</h2>\n<p>The role of visual design is not only to make the chart look better, but more importantly, a design that conforms to the principles of visualization can help users understand more quickly what the chart is trying to say and eliminate as much misunderstanding as possible from poor design.</p>\n<h4 id="overall-design" tabindex="-1">Overall Design</h4>\n<p>We have found that a large percentage of developers use the default theme style for ECharts, so it is important to have an elegant default theme design. In Apache ECharts 5, we redesigned the default theme style, optimizing it for different charts and components. For example, we took into account factors such as differentiation between colors, contrast with background colors, and harmony with adjacent colors, and ensured that people with color blindness could clearly distinguish data.</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>Let\'s look at the new version of the light and dark theme styles using the most commonly used bar chart as an example.</p>\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n<p>For the data area zoom, timeline and other interactive components, we also designed a new style and provide a better interactive experience:</p>\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n<h4 id="label" tabindex="-1">Label</h4>\n<p>Labels are one of the core elements of a chart, and clear and unambiguous labels help users to have a more accurate understanding of the data. Apache ECharts 5 provides a variety of new labeling features that allow dense labels to be clearly displayed and accurately represented.</p>\n<p>Apache ECharts 5 can be enabled to automatically hide overlapping labels through a configuration item. For labels that exceed the display area, you can choose to automatically truncate or line break them. Dense pie chart labels now have a more aesthetically pleasing automatic layout.</p>\n<p>These features can help avoid text that is too dense and affects readability. And, no additional code needs to be written by the developer for them to take effect by default, greatly simplifying the development cost for developers.</p>\n<p>We also provide several configuration options to allow developers to actively control the layout strategy of tabs, such as tab dragging, overall display at the edge of the canvas, connecting with guide lines and graphical elements, and still linking to highlight the associated relationships.</p>\n<p>The new label feature allows you to have very clear label presentation even in a confined space mobile:</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="time-axis" tabindex="-1">Time Axis</h4>\n<p>Apache ECharts 5 brings a time axis suitable for expressing timestamp scales. The default design of the time axis highlights important information more prominently and provides more flexible customization capabilities, allowing developers to tailor the time axis\'s label content to different needs.</p>\n<p>First of all, the time axis is no longer split absolutely evenly as before, but instead selects more meaningful points like year, month, day, and whole point to display, and can show different levels of scales at the same time. The <code>formatter</code> of labels supports templates for time (e.g. <code>{yyyy}-{MM}-{dd}</code>), and different <code>formatter</code> can be specified for labels with different time granularity, which can be combined with rich text labels to create eye-catching and diverse time effects.</p>\n<p>The display of the time scale at different dataZoom granularities.</p>\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n<h4 id="tooltip" tabindex="-1">Tooltip</h4>\n<p>Tooltip is one of the most commonly used visualization components to help users interactively understand the details of data. In Apache ECharts 5, we have optimized the style of the tooltip, making the default display of the tooltip elegant and clear by adjusting the font style, color, arrow pointing to the graph, border color following the graph color, and other features. The rendering logic of rich text has been improved to ensure that the display is consistent with the HTML way, allowing users to choose different technical solutions to achieve the same effect in different scenarios.</p>\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n<p>In addition to this, we have also added the ability to sort the list in the tip box by value size or category order this time.</p>\n<h4 id="gauge" tabindex="-1">Gauge</h4>\n<p>We have seen a lot of cool gauge charts created by community users, but the way they are configured is often complex and tricky. Therefore, we have upgraded the gauge to support image or vector path drawing pointers, anchor configurations, progress bars, rounded corner effects, and more.</p>\n<p>Different styles of gauge pointers.</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>These upgrades not only allow developers to achieve cool effects with simpler configuration items, but also bring richer customization capabilities.</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="round-corner" tabindex="-1">Round Corner</h4>\n<p>Apache ECharts 5 supports round corner for pie charts, sunburst charts, and treemap charts. Don\'t underestimate the simplicity of the rounded corners configuration, but combine them with other effects to create a more personalized visualization.</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="interactivity" tabindex="-1">Interactivity</h2>\n<p>The interactivity of the visualization helps users explore the work and deepen their understanding of the main idea of the diagram.</p>\n<h4 id="multi-state" tabindex="-1">Multi-State</h4>\n<p>In ECharts 4, there were two interactive states, <code>emphasis</code> and <code>normal</code>, graph will enter the <code>emphasis</code> state when the mouse hovered to distinguish the data.</p>\n<p>This time in Apache ECharts 5, we have added a new effect of <strong>blur</strong> other non-related elements to the original mouse hover highlighting, so that the target data can be focused.</p>\n<p>For example, in this <a href="https://echarts.apache.org/examples/en/editor.html?c=bar-y-category-stack">bar chart</a> example, when the mouse hovers over a series, other non-related series will fade out, thus highlighting more clearly the comparison of data in the focused series. of data in the comparison. On diagrams with more complex data structures such as relationship, tree, sunburst, sankey, etc., it is also possible to see the connections between data by fading out non-related elements. Also, colors, shadows, and other styles that can be set in <code>emphasis</code> can now be set in <code>blur</code>.</p>\n<p>In addition, we\'ve added <strong>click to select</strong> to all series, an interaction that was previously only available in a few series such as pie charts and maps, allowing developers to set it to single or multiple selection mode, and to listen to the <code>selectchanged</code> event to get all the selected shapes for further processing. As with <code>emphasis</code> and <code>blur</code>, the selection style can also be configured in <code>select</code>.</p>\n<h4 id="performance-improvements" tabindex="-1">Performance improvements</h4>\n<h5 id="dirty-rectangle-rendering" tabindex="-1">Dirty Rectangle Rendering</h5>\n<p>Apache ECharts 5 has new support for dirty rectangle rendering to address performance bottlenecks in large scenes with only local changes. When using the Canvas renderer, the dirty rectangle rendering technique detects and updates only the parts of the view that have changed, rather than any changes causing a complete redraw of the canvas. This can help improve rendering frame rates in some special scenarios, such as scenes where the mouse frequently triggers some graphical highlighting many times. In the past for such scenes, additional Canvas layers were used to optimize performance, but this approach is not universal for all scenes and does not work well for complex styles. Dirty Rectangle rendering does a good job of satisfying both performance and display correctness.</p>\n<p>A visual demonstration of a dirty rectangle, with the red boxed area redrawn for the frame.</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>You can see the effect by enable dirty rectangle optimization on the new example page.</p>\n<h5 id="line-chart-performance-optimization-for-real-time-time-series-data" tabindex="-1">Line Chart Performance Optimization for Real-Time Time-Series Data</h5>\n<p>In addition, the performance of line graphs with large amounts of data has also seen a significant performance improvement. We often encounter the need for high-performance plotting of large amounts of real-time time-series data, which will be updated every hundreds or tens of milliseconds.</p>\n<p>Apache ECharts 5 deeply optimizes CPU consumption, memory usage, and initialization time in these scenarios, enabling real-time updates (less than 30ms per update) for millions of data, and even rendering within 1s for ten millions of data, with low memory usage and smooth tooltip interactions.</p>\n<h2 id="development-experience" tabindex="-1">Development Experience</h2>\n<p>We want such a powerful visualization tool to be used by more developers in a simpler way, so the developer experience is also a very important aspect for us.</p>\n<h4 id="datasets" tabindex="-1">Datasets</h4>\n<p>ECharts 5 enhances the data transformation capabilities of datasets, allowing developers to implement common data processing such as filtering, sorting, aggregating, histogram, simple clustering, regression, etc. in a simple way. Developers can use these functions in a uniform and declarative way, and can easily implement common data operations.</p>\n<h4 id="internationalization" tabindex="-1">Internationalization</h4>\n<p>The original internationalization implementation of ECharts takes the form of different distribution files packaged according to different language parameters. In this way, the dynamic language and main code are bound together, and the only way to switch languages when using ECharts is to reload different language versions of ECharts distributions.</p>\n<p>Therefore, starting with Apache ECharts 5, the dynamic language is separated from the main code. To switch languages, you only need to load the corresponding language, use the <code>registerLocale</code> function to mount the language object in a similar way to mount the theme, and then reinitialize it to complete the language switch.</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdAplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpOwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwgewogIGxvY2FsZTogJ0RFJwp9KTs\'" line-highlights="\'\'" />\n<h4 id="typescript-refactoring" tabindex="-1">TypeScript Refactoring</h4>\n<p>In order to continue to refactor and develop new features more safely and efficiently, we started the development of Apache ECharts 5 by rewriting the code using TypeScript. The strong typing brought by TypeScript gave us the confidence to refactor the code drastically to achieve more exciting features during the development of ECharts 5.</p>\n<p>For developers, we can also generate better and more code-compliant <code>DTS</code> type description files directly from TypeScript code. Until now, ECharts type description files have been maintained by community developers and published to <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>, which is a lot of work, so thanks for your contribution.</p>\n<p>In addition, if a developer\'s component is introduced on-demand, we provide a <code>ComposeOption</code> type method that can combine a configuration item type that contains only the introduced components, which can bring stricter type checking and help you detect unintroduced component types in advance.</p>\n<h2 id="accessibility" tabindex="-1">Accessibility</h2>\n<p>Apache ECharts has always taken accessibility design seriously, and we want to make the information conveyed by charts equally to be accessed. We also want to make this possible for chart developers at a very low development cost, thus making developers more willing to support the accessibility.</p>\n<p>In the last major release, we supported automatic intelligent generation of chart descriptions based on different chart types and data, making it very easy for developers to support DOM description information for charts. In ECharts 5, we have also made more accessibility improvements to help people with visual impairments better understand the chart content.</p>\n<h4 id="theme-colors" tabindex="-1">Theme Colors</h4>\n<p>We took accessibility into account when designing the new default theme, and we repeatedly tested the brightness and color values of the colors to help accessibility users clearly identify the chart data.</p>\n<p>Moreover, for developers with further accessibility needs, we also provide special high-contrast themes to further differentiate the data with higher contrast colors.</p>\n<h4 id="decal-patterns" tabindex="-1">Decal Patterns</h4>\n<p>ECharts 5 also provides a new feature of decals to help users further differentiate data by using patterns to assist with color representation.</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>In addition, decal patterns can also help in some other scenarios, such as: helping to better distinguish data in printed materials like newspapers and books that have only a single color or very few colors; using graphical elements to facilitate a more intuitive understanding of the data by the user.</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="summary" tabindex="-1">Summary</h2>\n<p>In addition to the features described above, Apache ECharts has been improved in a very large number of details to help developers more easily create charts that good by default, are flexible in configuration, and tell the story behind the data with charts.</p>\n<p>Thank you to all the developers who have used ECharts, and even participated in community contributions, for making Apache ECharts 5 possible. We\'ll be working on future developments with even more enthusiasm, and we\'ll see you all in 6 with even more enthusiasm!</p>\n',postPath:"en/basics/release-note/v5-feature"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:r,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:d,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:y,draft:e},{title:"系列",dir:b,draft:e},{title:"样式",dir:v},{title:"数据集",dir:w},{title:"数据转换",dir:x},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:k},{title:"视觉映射",dir:i},{title:"图例",dir:E},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:A,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:I},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:e},{title:"阶梯瀑布图",dir:P},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:W,children:[{title:"基础折线图",dir:L},{title:"堆叠折线图",dir:B},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:j},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:q,children:[{title:"基础散点图",dir:Y}]}]},{title:Z,dir:t,draft:e},{title:"跨平台方案",dir:_,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:X,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Z,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:r,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:s},{title:"Resources",dir:d,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:b,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:w},{title:"Data Transform",dir:x},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:k},{title:"Visual Mapping",dir:i},{title:"Legend",dir:E},{title:"Event and Action",dir:T}]},{title:"Application",dir:z,children:[{title:"Common Charts",dir:A,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:I},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:e},{title:"Waterfall",dir:P}]},{title:"Line",dir:W,children:[{title:"Basic Line",dir:L},{title:"Stacked Line",dir:B},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:j},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:q,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:_,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:X,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/v5-feature",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/basics/release-note/v5-upgrade-guide/index.html b/handbook/en/basics/release-note/v5-upgrade-guide/index.html
new file mode 100644
index 0000000..ce32ed4
--- /dev/null
+++ b/handbook/en/basics/release-note/v5-upgrade-guide/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1> <p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won't need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We'll try to explain these changes in detail in this document.</p> <h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2> <h4 id="default-theme" tabindex="-1">Default theme</h4> <p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Or, to make a simple <code>v4</code> theme.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> themeEC4 <span class="token operator">=</span> <span class="token punctuation">{</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><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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="importing-echarts" tabindex="-1">Importing ECharts</h4> <h5 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h5> <p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p> <p>So if you are importing <code>echarts</code> like this:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</span><span class="token punctuation">;</span>
+<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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h5 id="tree-shaking-api" tabindex="-1">tree-shaking API</h5> <p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 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.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p> <p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</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/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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p> <h5 id="dependency-adjustment" tabindex="-1">Dependency Adjustment</h5> <blockquote><p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p></blockquote> <p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p> <ul><li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</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/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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Need to introduce the <code>grid</code> component separately again</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p> <ul><li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> AriaComponent <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>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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Or</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/aria'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="removes-built-in-geojson" tabindex="-1">Removes Built-in GeoJSON</h4> <p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p> <h4 id="browser-compatibility" tabindex="-1">Browser Compatibility</h4> <p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p> <h4 id="echarts-configuration-item-adjustment" tabindex="-1">ECharts configuration item adjustment</h4> <h5 id="visual-style-settings-priority-change" tabindex="-1">Visual style settings priority change</h5> <p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p> <p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p> <p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p> <h5 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h5> <p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p> <p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p> <h2 id="echarts-related-extensions" tabindex="-1">ECharts Related Extensions</h2> <p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p> <ul><li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li> <li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li> <li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li></ul> <h2 id="deprecated-api" tabindex="-1">Deprecated API</h2> <p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p> <p>The deprecated API and their corresponding new API are listed as follows:</p> <ul><li>Transform related props of a graphic element are changed:
+<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 effects these places:
+<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>textBoxShadowColor => shadowColor</li> <li>textBoxShadowBlur => shadowBlur</li> <li>textBoxShadowOffsetX => shadowOffsetX</li> <li>textBoxShadowOffsetY => shadowOffsetY</li></ul></li> <li>Note: these props are not changed:
+<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>series.emphasis.scaleSize</code> instead.</li></ul></li> <li><code>map series</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/contents/en/basics/release-note/v5-upgrade-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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,o,d,a,n,r,l,c,s,h,p,g,u,m,b,f,y,v,I,w,C,x,S,A,k,B,W,G,J,Y,M,N,U,Z,V,T,j,z,L,R,X,E,P,F,H,D,O,Q,K,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-upgrade-guide" tabindex="-1">Apache ECharts 5 Upgrade Guide</h1>\n<p>This guide is for those who want to upgrade from echarts 4.x (hereafter <code>v4</code>) to echarts 5.x (hereafter <code>v5</code>). You can find out what new features <code>v5</code> brings that are worth upgrading in <a href="en/basics/release-note/v5-feature">New Features in ECharts 5</a>. In most cases, developers won\'t need to do anything extra for this upgrade, as echarts has always tried to keep the API as stable and backward-compatible as possible. However, <code>v5</code> still brings some breaking changes that require special attention. In addition, in some cases, <code>v5</code> provides a better API to replace the previous one, and these superseded APIs will no longer be recommended (though we have tried to be as compatible as possible with these changes). We\'ll try to explain these changes in detail in this document.</p>\n<h2 id="breaking-changes" tabindex="-1">Breaking Changes</h2>\n<h4 id="default-theme" tabindex="-1">Default theme</h4>\n<p>First of all, the default theme has been changed. <code>v5</code> has made a lot of changes and optimizations on the theme design. If you still want to keep the colors of the old version, you can manually declare the colors as follows.</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>Or, to make a simple <code>v4</code> theme.</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="importing-echarts" tabindex="-1">Importing ECharts</h4>\n<h5 id="removing-support-for-default-exports" tabindex="-1">Removing Support for Default Exports</h5>\n<p>Since <code>v5</code>, echarts only provides <code>named exports</code>.</p>\n<p>So if you are importing <code>echarts</code> like this:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIE9yIGltcG9ydCBjb3JlIG1vZHVsZQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>It will throw error in <code>v5</code>. You need to change the code as follows to import the entire module.</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8gT3IKaW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<h5 id="tree-shaking-api" tabindex="-1">tree-shaking API</h5>\n<p>In 5.0.1, we introduced the new <a href="en/basics/import">tree-shaking API</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIE5vdGUgdGhhdCB0aGUgQ2FudmFzIHJlbmRlcmVyIGlzIG5vIGxvbmdlciBpbmNsdWRlZCBieSBkZWZhdWx0IGFuZCBuZWVkcyB0byBiZSBpbXBvcnRlZCBleHBsaWN0bHksIG9yIGltcG9ydCB0aGUgU1ZHUmVuZGVyZXIgaWYgeW91IG5lZWQgdG8gdXNlIHRoZSBTVkcgcmVuZGVyaW5nIG1vZGUKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>To make it easier for you to know which modules you need to import based on your option, our new example page adds a new feature to generate the three-shakable code, you can check the <code>Full Code</code> tab on the example page to see the modules you need to introduce and the related code.</p>\n<p>In most cases, we recommend using the new tree-shaking interface whenever possible, as it maximizes the power of the packaging tool tree-shaking and effectively resolves namespace conflicts and prevents the exposure of internal structures. If you are still using the CommonJS method of writing modules, the previous approach is still supported:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>Second, because our source code has been rewritten using TypeScript, <code>v5</code> will no longer support importing files from <code>echarts/src</code>. You need to change it to import from <code>echarts/lib</code>.</p>\n<h5 id="dependency-adjustment" tabindex="-1">Dependency Adjustment</h5>\n<blockquote>\n<p>Note: This section is only for developers who use tree-shaking interfaces to ensure a minimal bundle size, not for those who imports the whole package.</p>\n</blockquote>\n<p>In order to keep the size of the bundle small enough, we remove some dependencies that would have been imported by default. For example, as mentioned above, when using the new on-demand interface, <code>CanvasRenderer</code> is no longer introduced by default, which ensures that unneeded Canvas rendering code is not imported when only SVG rendering mode is used, and in addition, the following dependencies are adjusted.</p>\n<ul>\n<li>The right-angle coordinate system component is no longer introduced by default when using line charts and bar charts, so the following introduction method was used before</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>Need to introduce the <code>grid</code> component separately again</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>Reference issues: <a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li><code>aria</code> components are no longer imported by default. You need import it manually if necessary.</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>Or</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="removes-built-in-geojson" tabindex="-1">Removes Built-in GeoJSON</h4>\n<p><code>v5</code> removes the built-in geoJSON (previously in the <code>echarts/map</code> folder). These geoJSON files were always sourced from third parties. If users still need them, they can go get them from the old version, or find more appropriate data and register it with ECharts via the registerMap interface.</p>\n<h4 id="browser-compatibility" tabindex="-1">Browser Compatibility</h4>\n<p>IE8 is no longer supported by <code>v5</code>. We no longer maintain and upgrade the previous <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML renderer</a> for IE8 compatibility. If developers have a strong need for a VML renderer, they are welcome to submit a pull request to upgrade the VML renderer or maintain a separate third-party VML renderer, as we support registration of standalone renderers starting with <code>v5.0.1</code>.</p>\n<h4 id="echarts-configuration-item-adjustment" tabindex="-1">ECharts configuration item adjustment</h4>\n<h5 id="visual-style-settings-priority-change" tabindex="-1">Visual style settings priority change</h5>\n<p>The priority of the visuals between <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are reversed since <code>v5</code>.</p>\n<p>That is, previously in <code>v4</code>, the visuals (i.e., color, symbol, symbolSize, ...) that generated by <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> has the highest priority, which will overwrite the same visuals settings in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a>. That brought troubles when needing to specify specific style to some certain data items while using <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a>. Since <code>v5</code>, the visuals specified in <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> has the highest priority.</p>\n<p>In most cases, users will probably not notice this change when migrating from <code>v4</code> to <code>v5</code>. But users can still check that if <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> and <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> are both specified.</p>\n<h5 id="padding-for-rich-text" tabindex="-1"><code>padding</code> for Rich Text</h5>\n<p><code>v5</code> adjusts the <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> to make it more compliant with CSS specifications. In <code>v4</code>, for example <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>33</code> and <code>padding-bottom</code> is <code>11</code>. The position of the top and bottom is adjusted in <code>v5</code>, <code>rich. .padding: [11, 22, 33, 44]</code> means that <code>padding-top</code> is <code>11</code> and <code>padding-bottom</code> is <code>33</code>.</p>\n<p>If the user is using <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>, this order needs to be adjusted.</p>\n<h2 id="echarts-related-extensions" tabindex="-1">ECharts Related Extensions</h2>\n<p>These extensions need to be upgraded to new version to support echarts <code>v5</code>:</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="deprecated-api" tabindex="-1">Deprecated API</h2>\n<p>Some of the API and echarts options are deprecated since <code>v5</code>, but are still backward compatible. Users can <strong>keep using these deprecated API</strong>, with only some warning will be printed to console in dev mode. But if users have spare time, it is recommended to upgraded to new API for the consideration of long term maintenance.</p>\n<p>The deprecated API and their corresponding new API are listed as follows:</p>\n<ul>\n<li>Transform related props of a graphic element are changed:\n<ul>\n<li>Changes:\n<ul>\n<li><code>position: [number, number]</code> are changed to <code>x: number</code>/<code>y: number</code>.</li>\n<li><code>scale: [number, number]</code> are changed to <code>scaleX: number</code>/<code>scaleY: number</code>.</li>\n<li><code>origin: [number, number]</code> are changed to <code>originX: number</code>/<code>originY: number</code>.</li>\n</ul>\n</li>\n<li>The <code>position</code>, <code>scale</code> and <code>origin</code> are still supported but deprecated.</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element.</li>\n<li>In <code>custom series</code>: the declarations of each element in the return of <code>renderItem</code>.</li>\n<li>Directly use zrender graphic elements.</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text related props on graphic elements are changed:\n<ul>\n<li>Changes:\n<ul>\n<li>The declaration of attached text (or say, rect text) are changed.\n<ul>\n<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>\n<li>These related props at the left part below are deprecated. Use the right part below instead.\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<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.\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign);</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>Note: these props are not changed:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>It effects these places:\n<ul>\n<li>In the <code>graphic</code> components: the declarations of each element. [compat, but not accurately the same in some complicated cases.]</li>\n<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>\n<li>Directly use zrender API to create graphic elements. [No compat, breaking change].</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>API on chart instance:\n<ul>\n<li><code>chart.one(...)</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>label</code>:\n<ul>\n<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>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>option <code>series.hoverAnimation</code> is deprecated. Use <code>series.emphasis.scale</code> instead.</li>\n</ul>\n</li>\n<li><code>line series</code>:\n<ul>\n<li>option <code>series.clipOverflow</code> is deprecated. Use <code>series.clip</code> instead.</li>\n</ul>\n</li>\n<li><code>custom series</code>:\n<ul>\n<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>\n</ul>\n</li>\n<li><code>sunburst series</code>:\n<ul>\n<li>Action type <code>highlight</code> is deprecated. Use <code>sunburstHighlight</code> instead.</li>\n<li>Action type <code>downplay</code> is deprecated. Use <code>sunburstUnhighlight</code> instead.</li>\n<li>option <code>series.downplay</code> is deprecated. Use <code>series.blur</code> instead.</li>\n<li>option <code>series.highlightPolicy</code> is deprecated. Use <code>series.emphasis.focus</code> instead.</li>\n</ul>\n</li>\n<li><code>pie series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>pieSelect</code> => <code>select</code></li>\n<li><code>pieUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code></li>\n<li><code>pieselected</code> => <code>selected</code></li>\n<li><code>pieunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.label.margin</code> is deprecated. Use <code>series.label.edgeDistance</code> instead.</li>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>map series</code>:\n<ul>\n<li>The action type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code></li>\n<li><code>mapSelect</code> => <code>select</code></li>\n<li><code>mapUnSelect</code> => <code>unselect</code></li>\n</ul>\n</li>\n<li>The event type at the left part below are deprecated. Use the right part instead:\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code></li>\n<li><code>mapselected</code> => <code>selected</code></li>\n<li><code>mapunselected</code> => <code>unselected</code></li>\n</ul>\n</li>\n<li>option <code>series.mapType</code> is deprecated. Use <code>series.map</code> instead.</li>\n<li>option <code>series.mapLocation</code> is deprecated.</li>\n</ul>\n</li>\n<li><code>graph series</code>:\n<ul>\n<li>option <code>series.focusNodeAdjacency</code> is deprecated. Use <code>series.emphasis: { focus: \'adjacency\'}</code> instead.</li>\n</ul>\n</li>\n<li><code>gauge series</code>:\n<ul>\n<li>option <code>series.clockWise</code> is deprecated. Use <code>series.clockwise</code> instead.</li>\n<li>option <code>series.hoverOffset</code> is deprecated. Use <code>series.emphasis.scaleSize</code> instead.</li>\n</ul>\n</li>\n<li><code>dataZoom component</code>:\n<ul>\n<li>option <code>dataZoom.handleIcon</code> need prefix <code>path://</code> if using SVGPath.</li>\n</ul>\n</li>\n<li><code>radar</code>:\n<ul>\n<li>option <code>radar.name</code> is deprecated. Use <code>radar.axisName</code> instead.</li>\n<li>option <code>radar.nameGap</code> is deprecated. Use <code>radar.axisNameGap</code> instead.</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> is deprecated. Use <code>echarts.time.format</code> instead.</li>\n<li><code>echarts.number.parseDate</code> is deprecated. Use <code>echarts.time.parse</code> instead.</li>\n<li><code>echarts.format.getTextRect</code> is deprecated.</li>\n</ul>\n</li>\n</ul>\n',postPath:"en/basics/release-note/v5-upgrade-guide"}],fetch:{},error:o,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:u}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:f,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:v},{title:"数据集",dir:I},{title:"数据转换",dir:w},{title:"坐标系",dir:C,draft:e},{title:"坐标轴",dir:x},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:B,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:Y,draft:e},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:N,children:[{title:"基础折线图",dir:U},{title:"堆叠折线图",dir:Z},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:T},{title:"阶梯线图",dir:j}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:E}]}]},{title:P,dir:t,draft:e},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:D,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:r},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:u}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:f,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:I},{title:"Data Transform",dir:w},{title:"Coordinate",dir:C,draft:e},{title:"Axis",dir:x},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:A}]},{title:"Application",dir:k,children:[{title:"Common Charts",dir:B,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:Y,draft:e},{title:"Waterfall",dir:M}]},{title:"Line",dir:N,children:[{title:"Basic Line",dir:U},{title:"Stacked Line",dir:Z},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:T},{title:"Step Line",dir:j}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:L},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:D,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:o}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/en/best-practice/aria/index.html b/handbook/en/best-practice/aria/index.html
index 6c3116d..da47410 100644
--- a/handbook/en/best-practice/aria/index.html
+++ b/handbook/en/best-practice/aria/index.html
@@ -3,26 +3,32 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="web-accessibility"><a href="#web-accessibility" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Web Accessibility</h1>
-<p><a href="https://www.w3.org/WAI/intro/aria" rel="nofollow noopener noreferrer" target="_blank">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p>
-<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>
-<p>About the configuration item:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/aria-pie"></iframe>
-<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="overall-description-modification"><a href="#overall-description-modification" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Overall Description Modification</h2>
-<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>
-<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> configuration item.</p>
-<h2 id="customize-template-description"><a href="#customize-template-description" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Template Description</h2>
-<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>
-<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p>
-<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text" rel="nofollow noopener noreferrer" target="_blank">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>'{title}'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>'Prize Distribution Chart'</code>, the description of this part will be <code>'This is a chart about "Prize Distribution Chart"'</code>.</p>
-<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>
-<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria" rel="nofollow noopener noreferrer" target="_blank">ARIA Document</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/best-practice/aria#overall-description-modification">Overall Description Modification</a></li><li class="toc2"><a href="/handbook/en/best-practice/aria#customize-template-description">Customize Template Description</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/best-practice/aria.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,l,d,n,p,o,s,h,c,u,y,g,f,v,m,b,w,C,x,A,E,k,P,R,S,T,D,I,B,W,M,U,V,z,L,N,_,H,G,O,F,Y,Z,$,j,X,q,J,K,Q,ee,te,ie,re,ae,le,de,ne,pe,oe,se,he,ce,ue,ye,ge,fe,ve,me,be,we,Ce,xe){return{layout:"default",data:[{article:{slug:y,toc:[{id:C,depth:2,text:x},{id:A,depth:2,text:E}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"web-accessibility"},children:[{type:t,tag:a,props:{href:"#web-accessibility",ariaHidden:c,tabIndex:-1},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:"Web Accessibility"}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:t,tag:a,props:{href:"https://www.w3.org/WAI/intro/aria",rel:[n,p,o],target:s},children:[{type:e,value:"WAI-ARIA"}]},{type:e,value:", the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"The Accessibility function was turn off by default, turn it on by define the value of "},{type:t,tag:a,props:{href:k,rel:[n,p,o],target:s},children:[{type:e,value:P}]},{type:e,value:" as "},{type:t,tag:d,props:{},children:[{type:e,value:c}]},{type:e,value:". ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"About the configuration item:"}]},{type:e,value:r},{type:t,tag:"div",props:{className:[R]},children:[{type:t,tag:S,props:{lang:"js","line-highlights":h,"file-name":h},children:[{type:e,value:"option = {\n aria: {\n show: true\n },\n title: {\n text: 'Referrer of a User',\n x: 'center'\n },\n series: [\n {\n name: 'Referrer',\n type: 'pie',\n data: [\n { value: 335, name: 'Direct Visit' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Union Ad' },\n { value: 135, name: 'Video Ad' },\n { value: 1548, name: 'Search Engine' }\n ]\n }\n ]\n};\n"}]}]},{type:e,value:r},{type:t,tag:"md-example",props:{src:"doc-example/aria-pie"},children:[{type:e,value:r}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"There will be an "},{type:t,tag:d,props:{},children:[{type:e,value:"area-label"}]},{type:e,value:" attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:"}]},{type:e,value:r},{type:t,tag:"div",props:{className:[R]},children:[{type:t,tag:S,props:{lang:"null","line-highlights":h,"file-name":h},children:[{type:e,value:'This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n'}]}]},{type:e,value:r},{type:t,tag:"h2",props:{id:C},children:[{type:t,tag:a,props:{href:"#overall-description-modification",ariaHidden:c,tabIndex:-1},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:x}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"Under this circumstance, user can define the overall description by "},{type:t,tag:a,props:{href:T,rel:[n,p,o],target:s},children:[{type:e,value:m}]},{type:e,value:" configuration item."}]},{type:e,value:r},{type:t,tag:"h2",props:{id:A},children:[{type:t,tag:a,props:{href:"#customize-template-description",ariaHidden:c,tabIndex:-1},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:E}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"The basic process to generate a description: If "},{type:t,tag:a,props:{href:k,rel:[n,p,o],target:s},children:[{type:e,value:P}]},{type:e,value:" is "},{type:t,tag:d,props:{},children:[{type:e,value:c}]},{type:e,value:", then generate the ARIA description (otherwise, no.). If "},{type:t,tag:a,props:{href:T,rel:[n,p,o],target:s},children:[{type:e,value:m}]},{type:e,value:" was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use "},{type:t,tag:d,props:{},children:[{type:e,value:m}]},{type:e,value:" to cover the default if needed."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"While using the template to generate, firstly make sure whether the title "},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#title.text",rel:[n,p,o],target:s},children:[{type:e,value:"title.text"}]},{type:e,value:" exist to decide to use "},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.general.withTitle",rel:[n,p,o],target:s},children:[{type:e,value:b}]},{type:e,value:" or "},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.general.withoutTitle",rel:[n,p,o],target:s},children:[{type:e,value:"aria.general.withoutTitle"}]},{type:e,value:" as the overall description. Configuration item "},{type:t,tag:d,props:{},children:[{type:e,value:b}]},{type:e,value:" and "},{type:t,tag:d,props:{},children:[{type:e,value:"'{title}'"}]},{type:e,value:" will be replaced by the chart title. In another word, if "},{type:t,tag:d,props:{},children:[{type:e,value:b}]},{type:e,value:" was defined as "},{type:t,tag:d,props:{},children:[{type:e,value:'This is a chart about "{title}"'}]},{type:e,value:", and the title is "},{type:t,tag:d,props:{},children:[{type:e,value:"'Prize Distribution Chart'"}]},{type:e,value:", the description of this part will be "},{type:t,tag:d,props:{},children:[{type:e,value:"'This is a chart about \"Prize Distribution Chart\"'"}]},{type:e,value:"."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart."}]},{type:e,value:r},{type:t,tag:l,props:{},children:[{type:e,value:"The complete process of generating description, please check: "},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#aria",rel:[n,p,o],target:s},children:[{type:e,value:"ARIA Document"}]},{type:e,value:"."}]}]},dir:"/en/best-practice",path:D,extension:".md",createdAt:"2021-06-04T12:26:37.915Z",updatedAt:"2021-07-21T09:55:26.921Z"},postPath:"en/best-practice/aria"}],fetch:{},error:I,state:{filled:!1,docVersion:h,ghVersion:h,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:B},{title:"入门篇",dir:W,children:[{title:"获取 ECharts",dir:M},{title:"在项目中引入 ECharts",dir:U},{title:"资源列表",dir:V,draft:i},{title:"获取灵感",dir:z},{title:"寻求帮助",dir:L},{title:"版本介绍",dir:N,children:[{title:_,draft:i,dir:H},{title:"ECharts 5 新特性",dir:G},{title:"ECharts 5 升级指南",dir:O}]}]},{title:"概念篇",dir:F,children:[{title:"图表容器及大小",dir:Y},{title:"配置项",dir:Z,draft:i},{title:"系列",dir:$,draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:j},{title:"数据转换",dir:X},{title:"坐标系",dir:q,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:w},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Q},{title:"堆叠柱状图",dir:ee},{title:"动态排序柱状图",dir:te,draft:i},{title:"极坐标系柱状图",dir:ie,draft:i},{title:"瀑布图",dir:re,draft:i},{title:"视觉映射的柱状图",dir:w,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ae},{title:"堆叠折线图",dir:le},{title:"区域面积图",dir:de},{title:"平滑曲线图",dir:ne},{title:"阶梯线图",dir:pe}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:oe},{title:"圆环图",dir:se},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:he,children:[{title:"基础散点图",dir:ce}]}]},{title:"移动端优化",dir:u,draft:i},{title:"跨平台方案",dir:ue,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ye},{title:"数据下钻",dir:ge,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:fe}]},{title:"交互",dir:ve,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:me,draft:i}]}]},{title:"最佳实践",dir:be,children:[{title:"移动端优化",dir:u,draft:i},{title:we,dir:Ce},{title:"无障碍访问",dir:y}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:xe}]}],en:[{title:"Get Started",dir:B},{title:"Basics",dir:W,children:[{title:"Download ECharts",dir:M},{title:"Import ECharts",dir:U},{title:"Resources",dir:V,draft:i},{title:"Inspiration",dir:z},{title:"Get Help",dir:L},{title:"Release Note",dir:N,children:[{title:_,draft:i,dir:H},{title:"ECharts 5 Features",dir:G},{title:"ECharts 5 Upgrade Guide",dir:O}]}]},{title:"Concepts",dir:F,children:[{title:"Chart Container",dir:Y},{title:"Chart Option",dir:Z,draft:i},{title:"Series",dir:$,draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:j},{title:"Data Transform",dir:X},{title:"Coordinate",dir:q,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:w},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Q},{title:"Stacked Bar",dir:ee},{title:"Bar Racing",dir:te,draft:i},{title:"Bar Polar",dir:ie,draft:i},{title:"Waterfall",dir:re,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ae},{title:"Stacked Line",dir:le},{title:"Area Chart",dir:de},{title:"Smoothed Line",dir:ne},{title:"Step Line",dir:pe}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:oe},{title:"Ring Style",dir:se},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:he,children:[{title:"Basic Scatter",dir:ce}]}]},{title:"Mobile",dir:u,draft:i},{title:"Cross Platform",dir:ue,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ye},{title:"Drilldown",dir:ge,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:fe}]},{title:"Interaction",dir:ve,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:me,draft:i}]}]},{title:"Best Practice",dir:be,children:[{title:"Mobile Optimization",dir:u,draft:i},{title:we,dir:Ce},{title:"Aria",dir:y}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:xe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:D,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","code","nofollow","noopener","noreferrer","_blank","","true","mobile","aria","span","icon","icon-link","aria.description","aria.general.withTitle","visual-map","overall-description-modification","Overall Description Modification","customize-template-description","Customize Template Description","https://echarts.apache.org/option.html#aria.show","aria.show","nuxt-content-highlight","md-code-block","https://echarts.apache.org/option.html#aria.description","/en/best-practice/aria",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="web-accessibility" tabindex="-1">Web Accessibility</h1> <p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p> <p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p> <p>About the configuration item:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p> <pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.
+</code></pre> <h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2> <p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p> <p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p> <h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2> <p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p> <p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p> <p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>'{title}'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>'Prize Distribution Chart'</code>, the description of this part will be <code>'This is a chart about "Prize Distribution Chart"'</code>.</p> <p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p> <p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</a>.</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/best-practice/aria.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,l,o,n,h,s,c,p,g,f,m,u,b,I,C,w,A,y,v,W,B,E,T,x,S,D,R,k,P,Z,V,F,H,U,z,J,L,G,M,K,X,O,Y,q,N,_,j,Q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="web-accessibility" tabindex="-1">Web Accessibility</h1>\n<p><a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite developed by W3C, defines a way to make Web content and Web applications more accessible to people with disabilities. ECharts 4.0 complied with the specification, support generating description based on the chart configuration intelligently, to allows blind people to understand the content of the chart with the help of reading devices, to make the chart accessible to more people.</p>\n<p>The Accessibility function was turn off by default, turn it on by define the value of <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> as <code>true</code>. ECharts will automatically generate a description of the chart according to the title, chart, data, etc.. Users can also change the description through the configuration item.</p>\n<p>About the configuration item:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAnUmVmZXJyZXIgb2YgYSBVc2VyJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1JlZmVycmVyJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgVmlzaXQnIH0sCiAgICAgICAgeyB2YWx1ZTogMzEwLCBuYW1lOiAnRW1haWwgTWFya2V0aW5nJyB9LAogICAgICAgIHsgdmFsdWU6IDIzNCwgbmFtZTogJ1VuaW9uIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdTZWFyY2ggRW5naW5lJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>There will be an <code>area-label</code> attribute on the Chart DOM. With the help of the reading device, blind people can understand by hearing the following message:</p>\n<pre><code>This is a chart about "Referrer of a User" with type Pie chart named Referrer. The data is as follows: the data of Direct Visit is 335,the data of Mail Marketing is 310,the data of Union Ad is 234,the data of Video Ad is 135,the data of Search Engine is 1548.\n</code></pre>\n<h2 id="overall-description-modification" tabindex="-1">Overall Description Modification</h2>\n<p>For some charts, the default item description cannot show the info of the whole chart. In the following scatter chart, the description generated by default can include all the items, however, hearing info of hundreds of items has no helps to understand the information the chart represented.</p>\n<p>Under this circumstance, user can define the overall description by <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> configuration item.</p>\n<h2 id="customize-template-description" tabindex="-1">Customize Template Description</h2>\n<p>Except for the overall description modify, we also provide the template of generating the description. You can easily modify the description in fine-grain level.</p>\n<p>The basic process to generate a description: If <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> is <code>true</code>, then generate the ARIA description (otherwise, no.). If <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> was defined, use it as the overall description (otherwise, use the default to generate the description.). We provide the basic algorithm, it needs to be changed only if the description generated is not suitable. You can even use <code>aria.description</code> to cover the default if needed.</p>\n<p>While using the template to generate, firstly make sure whether the title <a href="https://echarts.apache.org/option.html#title.text">title.text</a> exist to decide to use <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> or <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> as the overall description. Configuration item <code>aria.general.withTitle</code> and <code>\'{title}\'</code> will be replaced by the chart title. In another word, if <code>aria.general.withTitle</code> was defined as <code>This is a chart about "{title}"</code>, and the title is <code>\'Prize Distribution Chart\'</code>, the description of this part will be <code>\'This is a chart about "Prize Distribution Chart"\'</code>.</p>\n<p>After generating the title, ECharts will splice the description of the series and data after the title part. Every part of the template can include template variables, to be replaced by the actual value in the chart.</p>\n<p>The complete process of generating description, please check: <a href="https://echarts.apache.org/option.html#aria">ARIA Document</a>.</p>\n',postPath:"en/best-practice/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:b,draft:t},{title:"系列",dir:I,draft:t},{title:"样式",dir:C},{title:"数据集",dir:w},{title:"数据转换",dir:A},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:v},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:T,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:F},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:U}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:L}]},{title:"散点图",dir:G,children:[{title:"基础散点图",dir:M}]}]},{title:K,dir:e,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:Y,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:I,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:w},{title:"Data Transform",dir:A},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:v},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:B}]},{title:"Application",dir:E,children:[{title:"Common Charts",dir:T,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:F},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:U}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:J},{title:"Rose Style",dir:L}]},{title:"Scatter",dir:G,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:Y,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/best-practice/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/best-practice/canvas-vs-svg/index.html b/handbook/en/best-practice/canvas-vs-svg/index.html
index 70f5e26..c9909c9 100644
--- a/handbook/en/best-practice/canvas-vs-svg/index.html
+++ b/handbook/en/best-practice/canvas-vs-svg/index.html
@@ -3,36 +3,21 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="render-with-svg-or-canvas"><a href="#render-with-svg-or-canvas" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Render with SVG or Canvas</h1>
-<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>
-<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while initializing a chart.</p>
-<blockquote>
-<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>
-</blockquote>
-<h2 id="how-to-choose-a-renderer"><a href="#how-to-choose-a-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Choose a Renderer?</h2>
-<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>
-<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>
-<ul>
-<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>
-<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
-<ul>
-<li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener noreferrer" target="_blank">LiquidFill chart</a>.</li>
-<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>
-</ul>
-</li>
-</ul>
-<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>
-<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap" rel="nofollow noopener noreferrer" target="_blank">heatmap with blending effect</a>, etc.</p>
-<h2 id="how-to-use-the-renderer"><a href="#how-to-use-the-renderer" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Use the Renderer</h2>
-<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/best-practice/canvas-vs-svg#how-to-choose-a-renderer">How to Choose a Renderer?</a></li><li class="toc2"><a href="/handbook/en/best-practice/canvas-vs-svg#how-to-use-the-renderer">How to Use the Renderer</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/best-practice/canvas-vs-svg.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,r,i,a,l,n,d,s,o,p,h,c,u,y,g,v,m,f,b,w,C,S,x,k,E,G,R,V,I,P,B,A,D,H,L,N,z,T,q,_,M,U,F,Z,j,O,W,Y,$,X,J,K,Q,ee,te,re,ie,ae,le,ne,de,se,oe,pe,he,ce,ue,ye,ge,ve,me,fe,be,we){return{layout:"default",data:[{article:{slug:u,toc:[{id:k,depth:2,text:E},{id:G,depth:2,text:R}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"render-with-svg-or-canvas"},children:[{type:t,tag:a,props:{href:"#render-with-svg-or-canvas",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[v,m]},children:[]}]},{type:e,value:"Render with SVG or Canvas"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since "},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/releases",rel:[n,d,s],target:o},children:[{type:e,value:"ECharts v4.0"}]},{type:e,value:" was released, ECharts provided the SVG render as an additional option. You can specify the "},{type:t,tag:a,props:{href:"http://echarts.baidu.com/api.html#echarts.init",rel:[n,d,s],target:o},children:[{type:e,value:"renderer parameter"}]},{type:e,value:" as "},{type:t,tag:f,props:{},children:[{type:e,value:"'canvas'"}]},{type:e,value:" or "},{type:t,tag:f,props:{},children:[{type:e,value:"'svg'"}]},{type:e,value:" while initializing a chart."}]},{type:e,value:i},{type:t,tag:"blockquote",props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library "},{type:t,tag:a,props:{href:"https://github.com/ecomfe/zrender",rel:[n,d,s],target:o},children:[{type:e,value:"ZRender"}]},{type:e,value:". It formed an interchangeable SVG renderer and Canvas renderer."}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:"h2",props:{id:k},children:[{type:t,tag:a,props:{href:"#how-to-choose-a-renderer",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[v,m]},children:[]}]},{type:e,value:E}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual "},{type:t,tag:a,props:{href:"https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect",rel:[n,d,s],target:o},children:[{type:e,value:"effect"}]},{type:e,value:". However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements."}]},{type:e,value:i},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:h,props:{},children:[{type:e,value:"In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them."}]},{type:e,value:i},{type:t,tag:h,props:{},children:[{type:e,value:"In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n"},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:h,props:{},children:[{type:e,value:"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 "},{type:t,tag:a,props:{href:"https://ecomfe.github.io/echarts-liquidfill/example/",rel:[n,d,s],target:o},children:[{type:e,value:"LiquidFill chart"}]},{type:e,value:"."}]},{type:e,value:i},{type:t,tag:h,props:{},children:[{type:e,value:"For larger amounts of data (>1k is an experience value), canvas renderer is always recommended."}]},{type:e,value:i}]},{type:e,value:i}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"We strongly welcome "},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/issues/new",rel:[n,d,s],target:o},children:[{type:e,value:"feedback"}]},{type:e,value:" from developers on their experiences and scenarios to help us make better optimizations."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Note: Currently, some special rendering still relies on Canvas: e.g. "},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#series-lines.effect",rel:[n,d,s],target:o},children:[{type:e,value:"trail effect"}]},{type:e,value:", "},{type:t,tag:a,props:{href:"https://echarts.apache.org//examples/editor.html?c=heatmap-bmap",rel:[n,d,s],target:o},children:[{type:e,value:"heatmap with blending effect"}]},{type:e,value:", etc."}]},{type:e,value:i},{type:t,tag:"h2",props:{id:G},children:[{type:t,tag:a,props:{href:"#how-to-use-the-renderer",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[v,m]},children:[]}]},{type:e,value:R}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"If "},{type:t,tag:f,props:{},children:[{type:e,value:"echarts"}]},{type:e,value:" is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer"}]},{type:e,value:i},{type:t,tag:b,props:{className:[w]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":p,"file-name":p},children:[{type:e,value:"import * as echarts from 'echarts';\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"If you are using treeshakable import as described in "},{type:t,tag:a,props:{href:"en/basics/import"},children:[{type:e,value:"Introducing Apache ECharts in your project"}]},{type:e,value:", you will need to import the required renderers manually"}]},{type:e,value:i},{type:t,tag:b,props:{className:[w]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":p,"file-name":p},children:[{type:e,value:"import * as echarts from 'echarts/core';\n// You can use only the renderers you need\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Then, we can "},{type:t,tag:a,props:{href:"https://echarts.apache.org//api.html/api.html#echarts.init",rel:[n,d,s],target:o},children:[{type:e,value:"pass in the parameter"}]},{type:e,value:" when initializing the chart instance in code to select the renderer."}]},{type:e,value:i},{type:t,tag:b,props:{className:[w]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":p,"file-name":p},children:[{type:e,value:"// Use the Canvas renderer (default)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// Equivalent to.\nvar chart = echarts.init(containerDom);\n\n// using the SVG renderer\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n"}]}]}]},dir:"/en/best-practice",path:V,extension:".md",createdAt:"2021-06-04T12:26:37.915Z",updatedAt:"2021-07-21T10:03:29.001Z"},postPath:"en/best-practice/canvas-vs-svg"}],fetch:{},error:I,state:{filled:!1,docVersion:p,ghVersion:p,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:P},{title:"入门篇",dir:B,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:D},{title:"资源列表",dir:H,draft:r},{title:"获取灵感",dir:L},{title:"寻求帮助",dir:N},{title:"版本介绍",dir:z,children:[{title:T,draft:r,dir:q},{title:"ECharts 5 新特性",dir:_},{title:"ECharts 5 升级指南",dir:M}]}]},{title:"概念篇",dir:U,children:[{title:"图表容器及大小",dir:F},{title:"配置项",dir:Z,draft:r},{title:"系列",dir:j,draft:r},{title:"样式",dir:O},{title:"数据集",dir:W},{title:"数据转换",dir:Y},{title:"坐标系",dir:$,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:x},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:Q},{title:"动态排序柱状图",dir:ee,draft:r},{title:"极坐标系柱状图",dir:te,draft:r},{title:"瀑布图",dir:re,draft:r},{title:"视觉映射的柱状图",dir:x,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ie},{title:"堆叠折线图",dir:ae},{title:"区域面积图",dir:le},{title:"平滑曲线图",dir:ne},{title:"阶梯线图",dir:de}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:se},{title:"圆环图",dir:oe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:pe,children:[{title:"基础散点图",dir:he}]}]},{title:"移动端优化",dir:c,draft:r},{title:"跨平台方案",dir:ce,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ue},{title:"数据下钻",dir:ye,draft:r}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ge}]},{title:"交互",dir:ve,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:me,draft:r}]}]},{title:"最佳实践",dir:fe,children:[{title:"移动端优化",dir:c,draft:r},{title:be,dir:u},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:we}]}],en:[{title:"Get Started",dir:P},{title:"Basics",dir:B,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:D},{title:"Resources",dir:H,draft:r},{title:"Inspiration",dir:L},{title:"Get Help",dir:N},{title:"Release Note",dir:z,children:[{title:T,draft:r,dir:q},{title:"ECharts 5 Features",dir:_},{title:"ECharts 5 Upgrade Guide",dir:M}]}]},{title:"Concepts",dir:U,children:[{title:"Chart Container",dir:F},{title:"Chart Option",dir:Z,draft:r},{title:"Series",dir:j,draft:r},{title:"Style",dir:O},{title:"Dataset",dir:W},{title:"Data Transform",dir:Y},{title:"Coordinate",dir:$,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:x},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:Q},{title:"Bar Racing",dir:ee,draft:r},{title:"Bar Polar",dir:te,draft:r},{title:"Waterfall",dir:re,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ie},{title:"Stacked Line",dir:ae},{title:"Area Chart",dir:le},{title:"Smoothed Line",dir:ne},{title:"Step Line",dir:de}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:se},{title:"Ring Style",dir:oe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:pe,children:[{title:"Basic Scatter",dir:he}]}]},{title:"Mobile",dir:c,draft:r},{title:"Cross Platform",dir:ce,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ue},{title:"Drilldown",dir:ye,draft:r}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ge}]},{title:"Interaction",dir:ve,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:me,draft:r}]}]},{title:"Best Practice",dir:fe,children:[{title:"Mobile Optimization",dir:c,draft:r},{title:be,dir:u},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:we}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:V,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","nofollow","noopener","noreferrer","_blank","","li","mobile","canvas-vs-svg","true","span","icon","icon-link","code","div","nuxt-content-highlight","md-code-block","js","visual-map","how-to-choose-a-renderer","How to Choose a Renderer?","how-to-use-the-renderer","How to Use the Renderer","/en/best-practice/canvas-vs-svg",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1> <p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p> <p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>'canvas'</code> or <code>'svg'</code> while initializing a chart.</p> <blockquote><p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p></blockquote> <h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2> <p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p> <p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p> <ul><li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li> <li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.
+<ul><li>In situations where many instances of ECharts have to be created and the browser is prone to crashing (probably because the number of Canvas is causing the memory footprint to exceed the phone's capacity), the SVG renderer can be used to make improvements. Roughly speaking, the SVG renderer may work better if the chart is running on a low-end Android, or if we are using specific charts such as the <a href="https://ecomfe.github.io/echarts-liquidfill/example/">LiquidFill chart</a>.</li> <li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li></ul></li></ul> <p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p> <p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">heatmap with blending effect</a>, etc.</p> <h2 id="how-to-use-the-renderer" tabindex="-1">How to Use the Renderer</h2> <p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">// 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" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Use the Canvas renderer (default)</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">'canvas'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<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 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/best-practice/canvas-vs-svg.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,n,d,l,s,o,h,c,p,m,g,b,f,u,w,v,y,C,I,Z,S,V,k,G,R,W,B,X,x,Y,E,H,J,L,N,P,z,F,M,A,D,j,U,T,q,K,O,_,Q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="render-with-svg-or-canvas" tabindex="-1">Render with SVG or Canvas</h1>\n<p>Most of the browser-side chart libraries are using SVG or Canvas as their underlying render because they are interchangeable. However, they show notable differences in some specific scenarios and cases. As a result, it is hard to find a standard choice between them.</p>\n<p>Canvas has been used as the renderer (VML for IE8-) of ECharts from the beginning. Since <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> was released, ECharts provided the SVG render as an additional option. You can specify the <a href="http://echarts.baidu.com/api.html#echarts.init">renderer parameter</a> as <code>\'canvas\'</code> or <code>\'svg\'</code> while initializing a chart.</p>\n<blockquote>\n<p>SVG and Canvas have a significant difference in use. The simultaneous transparent support in ECharts between SVG and Canvas is because of the abstraction and implementation of the underlying library <a href="https://github.com/ecomfe/zrender">ZRender</a>. It formed an interchangeable SVG renderer and Canvas renderer.</p>\n</blockquote>\n<h2 id="how-to-choose-a-renderer%3F" tabindex="-1">How to Choose a Renderer?</h2>\n<p>Generally, Canvas is more suitable for charts with a large number of elements (heat map, large-scale line or scatter plot in geo or parallel coordinates, etc.), and with visual <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">effect</a>. However, SVG has an important advantage: It has less memory usage (which is important for mobile devices), no blur when using the browser zoom.</p>\n<p>The choice of renderer can be based on a combination of hardware and software environment, data volume and functional requirements.</p>\n<ul>\n<li>In scenarios where the hardware and software environment is good and the amount of data is not too large, both renderers will work and there is not much need to agonise over them.</li>\n<li>In scenarios where the environment is poor and performance issues arise that require optimisation, experimentation can be used to determine which renderer to use. For example, there are these experiences.\n<ul>\n<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>.</li>\n<li>For larger amounts of data (>1k is an experience value), canvas renderer is always recommended.</li>\n</ul>\n</li>\n</ul>\n<p>We strongly welcome <a href="https://github.com/apache/echarts/issues/new">feedback</a> from developers on their experiences and scenarios to help us make better optimizations.</p>\n<p>Note: Currently, some special rendering still relies on Canvas: e.g. <a href="https://echarts.apache.org/option.html#series-lines.effect">trail effect</a>, <a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">heatmap with blending effect</a>, etc.</p>\n<h2 id="how-to-use-the-renderer" tabindex="-1">How to Use the Renderer</h2>\n<p>If <code>echarts</code> is fully imported in the following way, the code already contains an SVG renderer and a Canvas renderer</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>If you are using treeshakable import as described in <a href="en/basics/import">Introducing Apache ECharts in your project</a>, you will need to import the required renderers manually</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyBZb3UgY2FuIHVzZSBvbmx5IHRoZSByZW5kZXJlcnMgeW91IG5lZWQKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>Then, we can <a href="https://echarts.apache.org//api.html/api.html#echarts.init">pass in the parameter</a> when initializing the chart instance in code to select the renderer.</p>\n<md-code-block lang="js" code="\'Ly8gVXNlIHRoZSBDYW52YXMgcmVuZGVyZXIgKGRlZmF1bHQpCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdjYW52YXMnIH0pOwovLyBFcXVpdmFsZW50IHRvLgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIHVzaW5nIHRoZSBTVkcgcmVuZGVyZXIKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ3N2ZycgfSk7\'" line-highlights="\'\'" />\n',postPath:"en/best-practice/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:n,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:s,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:h},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:u,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:v},{title:"数据集",dir:y},{title:"数据转换",dir:C},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:S},{title:"事件与行为",dir:V}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:B},{title:"极坐标系柱状图",dir:X,draft:e},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:J},{title:"平滑曲线图",dir:L},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:P},{title:"圆环图",dir:z},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:A}]}]},{title:D,dir:t,draft:e},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:D,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:n,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:l},{title:"Resources",dir:s,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:h},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:v},{title:"Dataset",dir:y},{title:"Data Transform",dir:C},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:S},{title:"Event and Action",dir:V}]},{title:"Application",dir:k,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:B},{title:"Bar Polar",dir:X,draft:e},{title:"Waterfall",dir:x}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:J},{title:"Smoothed Line",dir:L},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:P},{title:"Ring Style",dir:z},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:A}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/best-practice/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/axis/index.html b/handbook/en/concepts/axis/index.html
index f7f11e0..04bba64 100644
--- a/handbook/en/concepts/axis/index.html
+++ b/handbook/en/concepts/axis/index.html
@@ -3,36 +3,283 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="axis"><a href="#axis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Axis</h1>
-<p>The x/y-axis in the Cartesian coordinate system.</p>
-<h2 id="x-axis-y-axis"><a href="#x-axis-y-axis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x-axis, y-axis</h2>
-<p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p>
-<p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">
-</p>
-<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="axis-line"><a href="#axis-line" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Axis Line</h2>
-<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="tick"><a href="#tick" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Tick</h2>
-<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="label"><a href="#label" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Label</h2>
-<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="example"><a href="#example" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Example</h2>
-<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">Official Website</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/axis#x-axis-y-axis">x-axis, y-axis</a></li><li class="toc2"><a href="/handbook/en/concepts/axis#axis-line">Axis Line</a></li><li class="toc2"><a href="/handbook/en/concepts/axis#tick">Tick</a></li><li class="toc2"><a href="/handbook/en/concepts/axis#label">Label</a></li><li class="toc2"><a href="/handbook/en/concepts/axis#example">Example</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/axis.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,n,r,l,d,s,p,o,h,c,y,g,u,x,m,v,f,b,A,S,k,w,T,C,L,P,E,N,B,I,D,R,H,_,z,M,G,V,O,Q,W,Y,J,U,X,Z,j,F,$,q,K,ee,te,ie,ae,ne,re,le,de,se,pe,oe,he,ce,ye,ge,ue,xe,me,ve,fe,be,Ae,Se,ke,we,Te,Ce,Le,Pe){return{layout:"default",data:[{article:{slug:A,toc:[{id:C,depth:2,text:L},{id:P,depth:2,text:E},{id:N,depth:2,text:B},{id:S,depth:2,text:w},{id:I,depth:2,text:D}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:A},children:[{type:t,tag:l,props:{href:"#axis",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:R}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"The x/y-axis in the Cartesian coordinate system."}]},{type:e,value:i},{type:t,tag:x,props:{id:C},children:[{type:t,tag:l,props:{href:"#x-axis-y-axis",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:L}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating."}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:t,tag:"img",props:{"max-width":"830",width:H,height:H,src:"images/design/axis/charts_axis_img02.jpg"},children:[]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:"}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:'The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".'}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"When x-axis has a large span, we can use the zoom method to display part of the data in the chart."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n dataZoom: []\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html#xAxis.offset",rel:[m,v,f],target:b},children:[{type:e,value:"offset"}]},{type:e,value:" to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: 'Sales Time'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: 'Sales Quantity'\n // ...\n },\n {\n type: 'value',\n name: 'Sales Price'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:x,props:{id:P},children:[{type:t,tag:l,props:{href:"#axis-line",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:E}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"ECharts provide the config of "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html#xAxis.axisLine",rel:[m,v,f],target:b},children:[{type:e,value:"axisLine"}]},{type:e,value:". You can change the setting according to the demand, such as the arrow on two sides and the style of axes."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:x,props:{id:N},children:[{type:t,tag:l,props:{href:"#tick",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:B}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:_},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html#xAxis.axisTick",rel:[m,v,f],target:b},children:[{type:e,value:"axisTick"}]},{type:e,value:". You can change the setting according to the demand, such as the length of ticks, and the style of ticks."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:x,props:{id:S},children:[{type:t,tag:l,props:{href:"#label",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:w}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:_},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html#xAxis.axisLabel",rel:[m,v,f],target:b},children:[{type:e,value:"axisLabel"}]},{type:e,value:". You can change the setting according to the demand, such as the text alignment and the customized label content."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:o,props:{lang:p,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} ¥',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:x,props:{id:I},children:[{type:t,tag:l,props:{href:"#example",ariaHidden:h,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:D}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation."}]},{type:e,value:i},{type:t,tag:d,props:{className:[s]},children:[{type:t,tag:"md-live",props:{lang:p,layout:"tb"},children:[{type:e,value:"option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n axisLabel: {\n rotate: 30\n },\n data: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: 'Precipitation',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: 'Temperature',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: 'Precipitation',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: 'Temperature',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n"}]}]},{type:e,value:i},{type:t,tag:r,props:{},children:[{type:e,value:"These are the concise intro of the usage of axis config. Check more details at: "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html#xAxis",rel:[m,v,f],target:b},children:[{type:e,value:"Official Website"}]},{type:e,value:"."}]}]},dir:"/en/concepts",path:z,extension:".md",createdAt:"2021-06-04T12:26:37.918Z",updatedAt:"2021-07-29T06:23:03.234Z"},postPath:"en/concepts/axis"}],fetch:{},error:M,state:{filled:!1,docVersion:n,ghVersion:n,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:G},{title:"入门篇",dir:V,children:[{title:"获取 ECharts",dir:O},{title:"在项目中引入 ECharts",dir:Q},{title:"资源列表",dir:W,draft:a},{title:"获取灵感",dir:Y},{title:"寻求帮助",dir:J},{title:"版本介绍",dir:U,children:[{title:X,draft:a,dir:Z},{title:"ECharts 5 新特性",dir:j},{title:"ECharts 5 升级指南",dir:F}]}]},{title:"概念篇",dir:$,children:[{title:"图表容器及大小",dir:q},{title:"配置项",dir:K,draft:a},{title:"系列",dir:"series",draft:a},{title:"样式",dir:"style"},{title:"数据集",dir:ee},{title:"数据转换",dir:te},{title:"坐标系",dir:ie,draft:a},{title:"坐标轴",dir:A},{title:"视觉映射",dir:T},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ae,children:[{title:"常用图表类型",dir:ne,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:re},{title:"堆叠柱状图",dir:le},{title:"动态排序柱状图",dir:de,draft:a},{title:"极坐标系柱状图",dir:se,draft:a},{title:"瀑布图",dir:pe,draft:a},{title:"视觉映射的柱状图",dir:T,draft:a}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:oe},{title:"堆叠折线图",dir:he},{title:"区域面积图",dir:ce},{title:"平滑曲线图",dir:ye},{title:"阶梯线图",dir:ge}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ue},{title:"圆环图",dir:xe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:me,children:[{title:"基础散点图",dir:ve}]}]},{title:"移动端优化",dir:k,draft:a},{title:"跨平台方案",dir:fe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:be},{title:"数据下钻",dir:Ae,draft:a}]},{title:"标签",dir:S,children:[{title:"富文本标签",dir:Se}]},{title:"交互",dir:ke,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:we,draft:a}]}]},{title:"最佳实践",dir:Te,children:[{title:"移动端优化",dir:k,draft:a},{title:Ce,dir:Le},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Pe}]}],en:[{title:"Get Started",dir:G},{title:"Basics",dir:V,children:[{title:"Download ECharts",dir:O},{title:"Import ECharts",dir:Q},{title:"Resources",dir:W,draft:a},{title:"Inspiration",dir:Y},{title:"Get Help",dir:J},{title:"Release Note",dir:U,children:[{title:X,draft:a,dir:Z},{title:"ECharts 5 Features",dir:j},{title:"ECharts 5 Upgrade Guide",dir:F}]}]},{title:"Concepts",dir:$,children:[{title:"Chart Container",dir:q},{title:"Chart Option",dir:K,draft:a},{title:"Series",dir:"series",draft:a},{title:"Style",dir:"style"},{title:"Dataset",dir:ee},{title:"Data Transform",dir:te},{title:"Coordinate",dir:ie,draft:a},{title:R,dir:A},{title:"Visual Mapping",dir:T},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ae,children:[{title:"Common Charts",dir:ne,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:re},{title:"Stacked Bar",dir:le},{title:"Bar Racing",dir:de,draft:a},{title:"Bar Polar",dir:se,draft:a},{title:"Waterfall",dir:pe,draft:a}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:oe},{title:"Stacked Line",dir:he},{title:"Area Chart",dir:ce},{title:"Smoothed Line",dir:ye},{title:"Step Line",dir:ge}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ue},{title:"Ring Style",dir:xe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:me,children:[{title:"Basic Scatter",dir:ve}]}]},{title:"Mobile",dir:k,draft:a},{title:"Cross Platform",dir:fe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:be},{title:"Drilldown",dir:Ae,draft:a}]},{title:w,dir:S,children:[{title:"Rich Text",dir:Se}]},{title:"Interaction",dir:ke,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:we,draft:a}]}]},{title:"Best Practice",dir:Te,children:[{title:"Mobile Optimization",dir:k,draft:a},{title:Ce,dir:Le},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Pe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:a,routePath:z,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:M},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"","p","a","div","nuxt-content-highlight","js","md-code-block","true",-1,"span","icon","icon-link","h2","nofollow","noopener","noreferrer","_blank","axis","label","mobile","Label","visual-map","x-axis-y-axis","x-axis, y-axis","axis-line","Axis Line","tick","Tick","example","Example","Axis","100%","ECharts provide the config ","/en/concepts/axis",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="axis" tabindex="-1">Axis</h1> <p>The x/y-axis in the Cartesian coordinate system.</p> <h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2> <p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p> <p><img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"></p> <p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="axis-line" tabindex="-1">Axis Line</h2> <p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="tick" tabindex="-1">Tick</h2> <p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="label" tabindex="-1">Label</h2> <p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="example" tabindex="-1">Example</h2> <p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p> <div class="md-live layout-tb"><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 = {
+ 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 number">100.7</span><span class="token punctuation">,</span> <span class="token number">125.6</span><span class="token punctuation">,</span> <span class="token number">112.2</span><span class="token punctuation">,</span> <span class="token number">78.7</span><span class="token punctuation">,</span> <span class="token number">48.8</span><span class="token punctuation">,</span> <span class="token number">36.0</span><span class="token punctuation">,</span> <span class="token number">19.3</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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</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/axis.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,a,d,l,I,C,r,o,A,s,n,h,c,p,u,b,m,x,B,w,f,y,L,G,K,H,Z,W,v,X,T,F,J,O,S,V,k,M,Y,z,D,R,U,E,Q,j,N,P,q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="axis" tabindex="-1">Axis</h1>\n<p>The x/y-axis in the Cartesian coordinate system.</p>\n<h2 id="x-axis%2C-y-axis" tabindex="-1">x-axis, y-axis</h2>\n<p>Both x-axis and y-axis included axis line, tick, label and title. Some chart will use the grid to assist the data viewing and calculating.</p>\n<p><img max-width="830" width="100%" height="100%"\nsrc="images/design/axis/charts_axis_img02.jpg">\n</img></p>\n<p>A normal 2D coordinate system has x-axis and y-axis. X-axis located at the bottom while y-axis at the left side in common. The Config is shown below:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>The x-axis is usually used to declare the number of categories which was also called the aspects of observing the data: "Sales Time", "Sales Location" and "product name", etc.. The y-axis usually used to indicate the numerical value of categories. These data are used to examine the quantitative value of a certain type of data or some indicator you need to analyze, such as "Sales Quantity" and "Sales Price".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>When x-axis has a large span, we can use the zoom method to display part of the data in the chart.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBuYW1lOiAnU2FsZXMgUXVhbnRpdHknCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>In two-dimensional data, there can be more than two axes. There are usually two x or y axes at the same time in ECharts. You can change the config <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> to avoid overlaps of axes at the same place. X-axes can be displayed at the top and bottom, y-axes at left and right.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAnU2FsZXMgVGltZScKICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1NhbGVzIFF1YW50aXR5JwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICdTYWxlcyBQcmljZScKICAgICAgLy8gLi4uCiAgICB9CiAgXQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="axis-line" tabindex="-1">Axis Line</h2>\n<p>ECharts provide the config of <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a>. You can change the setting according to the demand, such as the arrow on two sides and the style of axes.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tick" tabindex="-1">Tick</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a>. You can change the setting according to the demand, such as the length of ticks, and the style of ticks.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="label" tabindex="-1">Label</h2>\n<p>ECharts provide the config <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a>. You can change the setting according to the demand, such as the text alignment and the customized label content.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKlJywKICAgICAgYWxpZ246ICdjZW50ZXInCiAgICAgIC8vIC4uLgogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="example" tabindex="-1">Example</h2>\n<p>The y-axis on the left side represents the monthly average temperature in Tokyo, the y-axis on the right side represents the precipitation of Tokyo. The x-axis represents the time. It reflects the trend and relation between the average temperature and precipitation.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIHJvdGF0ZTogMzAKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgICdKYW51YXJ5JywKICAgICAgICAnRmVicnVhcnknLAogICAgICAgICdNYXJjaCcsCiAgICAgICAgJ0FwcmlsJywKICAgICAgICAnTWF5JywKICAgICAgICAnSnVuZScsCiAgICAgICAgJ0p1bHknLAogICAgICAgICdBdWd1c3QnLAogICAgICAgICdTZXB0ZW1iZXInLAogICAgICAgICdPY3RvYmVyJywKICAgICAgICAnTm92ZW1iZXInLAogICAgICAgICdEZWNlbWJlcicKICAgICAgXQogICAgfQogIF0sCiAgeUF4aXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1ByZWNpcGl0YXRpb24nLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUwLAogICAgICBwb3NpdGlvbjogJ3JpZ2h0JywKICAgICAgYXhpc0xhYmVsOiB7CiAgICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBtbCcKICAgICAgfQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3ZhbHVlJywKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1LAogICAgICBwb3NpdGlvbjogJ2xlZnQnLAogICAgICBheGlzTGFiZWw6IHsKICAgICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IMKwQycKICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdQcmVjaXBpdGF0aW9uJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHlBeGlzSW5kZXg6IDAsCiAgICAgIGRhdGE6IFs2LCAzMiwgNzAsIDg2LCA2OC43LCAxMDAuNywgMTI1LjYsIDExMi4yLCA3OC43LCA0OC44LCAzNi4wLCAxOS4zXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1RlbXBlcmF0dXJlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzbW9vdGg6IHRydWUsCiAgICAgIHlBeGlzSW5kZXg6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICA2LjAsCiAgICAgICAgMTAuMiwKICAgICAgICAxMC4zLAogICAgICAgIDExLjUsCiAgICAgICAgMTAuMywKICAgICAgICAxMy4yLAogICAgICAgIDE0LjMsCiAgICAgICAgMTYuNCwKICAgICAgICAxOC4wLAogICAgICAgIDE2LjUsCiAgICAgICAgMTIuMCwKICAgICAgICA1LjIKICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>These are the concise intro of the usage of axis config. Check more details at: <a href="https://echarts.apache.org/option.html#xAxis">Official Website</a>.</p>\n',postPath:"en/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:o},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:h}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:x},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:T,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:D}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:I},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:o},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:h}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:x},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"Application",dir:G,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:T,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:M},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/en/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/chart-size/index.html b/handbook/en/concepts/chart-size/index.html
index cbf3fe9..492cedc 100644
--- a/handbook/en/concepts/chart-size/index.html
+++ b/handbook/en/concepts/chart-size/index.html
@@ -3,39 +3,38 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="chart-container-and-size"><a href="#chart-container-and-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Chart Container and Size</h1>
-<p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p>
-<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>
-<h2 id="initialization"><a href="#initialization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Initialization</h2>
-<h3 id="define-a-parent-container-in-html"><a href="#define-a-parent-container-in-html" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define a Parent Container in HTML</h3>
-<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>
-<h3 id="specify-the-chart-size"><a href="#specify-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Specify the chart size</h3>
-<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="reactive-of-the-container-size"><a href="#reactive-of-the-container-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Reactive of the Container Size</h2>
-<h3 id="listen-to-the-container-size-to-change-the-chart-size"><a href="#listen-to-the-container-size-to-change-the-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Listen to the Container Size to Change the Chart Size</h3>
-<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>
-<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>
-<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.resize</code></a> to resize the chart.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="state-a-specific-chart-size"><a href="#state-a-specific-chart-size" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>State a Specific Chart Size</h3>
-<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p>**Tips: ** Pay attention to how the API defined while reading the file. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>
-</blockquote>
-<h3 id="dispose-and-rebuild-of-the-container-node"><a href="#dispose-and-rebuild-of-the-container-node" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dispose and Rebuild of the Container Node</h3>
-<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>
-<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>
-<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> to initialize after the container was added again.</p>
-<blockquote>
-<p>**Tips: ** Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>
-</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/chart-size#initialization">Initialization</a></li><li class="toc3"><a href="/handbook/en/concepts/chart-size#define-a-parent-container-in-html">Define a Parent Container in HTML</a></li><li class="toc3"><a href="/handbook/en/concepts/chart-size#specify-the-chart-size">Specify the chart size</a></li><li class="toc2"><a href="/handbook/en/concepts/chart-size#reactive-of-the-container-size">Reactive of the Container Size</a></li><li class="toc3"><a href="/handbook/en/concepts/chart-size#listen-to-the-container-size-to-change-the-chart-size">Listen to the Container Size to Change the Chart Size</a></li><li class="toc3"><a href="/handbook/en/concepts/chart-size#state-a-specific-chart-size">State a Specific Chart Size</a></li><li class="toc3"><a href="/handbook/en/concepts/chart-size#dispose-and-rebuild-of-the-container-node">Dispose and Rebuild of the Container Node</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/chart-size.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,l,n,d,p,h,s,o,c,y,g,u,v,f,m,b,w,z,x,C,I,S,P,k,E,B,N,R,A,D,H,T,L,_,M,G,V,j,W,O,U,q,F,Z,$,X,Y,J,K,Q,ee,te,ie,ae,re,le,ne,de,pe,he,se,oe,ce,ye,ge,ue,ve,fe,me,be,we,ze,xe,Ce,Ie,Se,Pe,ke,Ee,Be,Ne,Re,Ae,De){return{layout:"default",data:[{article:{slug:x,toc:[{id:k,depth:2,text:E},{id:B,depth:3,text:N},{id:R,depth:3,text:A},{id:D,depth:2,text:H},{id:T,depth:3,text:L},{id:_,depth:3,text:M},{id:G,depth:3,text:V}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"chart-container-and-size"},children:[{type:t,tag:r,props:{href:"#chart-container-and-size",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:"Chart Container and Size"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"In "},{type:t,tag:r,props:{href:"en/get-started"},children:[{type:e,value:j}]},{type:e,value:", we introduced the API to initialize the ECharts "},{type:t,tag:r,props:{href:C,rel:[y,g,u],target:v},children:[{type:t,tag:n,props:{},children:[{type:e,value:I}]}]},{type:e,value:". "},{type:t,tag:r,props:{href:C,rel:[y,g,u],target:v},children:[{type:e,value:"API Document"}]},{type:e,value:" has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Refer to several common usage scenarios, here is the example to initialize a chart and change the size."}]},{type:e,value:i},{type:t,tag:"h2",props:{id:k},children:[{type:t,tag:r,props:{href:"#initialization",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:E}]},{type:e,value:i},{type:t,tag:f,props:{id:B},children:[{type:t,tag:r,props:{href:"#define-a-parent-container-in-html",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:N}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"In general, you need to define a "},{type:t,tag:n,props:{},children:[{type:e,value:"<div>"}]},{type:e,value:" node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring "},{type:t,tag:n,props:{},children:[{type:e,value:"opts.width"}]},{type:e,value:" or "},{type:t,tag:n,props:{},children:[{type:e,value:"opts.height"}]},{type:e,value:", the size of the chart will default to the size of the node."}]},{type:e,value:i},{type:t,tag:m,props:{className:[b]},children:[{type:t,tag:w,props:{lang:S,"line-highlights":d,"file-name":d},children:[{type:e,value:'<div id="main" style="width: 600px;height:400px;"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"To be noticed, before calling "},{type:t,tag:n,props:{},children:[{type:e,value:I}]},{type:e,value:", you need to make sure the container already has width and height."}]},{type:e,value:i},{type:t,tag:f,props:{id:R},children:[{type:t,tag:r,props:{href:"#specify-the-chart-size",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:A}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning."}]},{type:e,value:i},{type:t,tag:m,props:{className:[b]},children:[{type:t,tag:w,props:{lang:S,"line-highlights":d,"file-name":d},children:[{type:e,value:'<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'), null, {\n width: 600,\n height: 400\n });\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:"h2",props:{id:D},children:[{type:t,tag:r,props:{href:"#reactive-of-the-container-size",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:H}]},{type:e,value:i},{type:t,tag:f,props:{id:T},children:[{type:t,tag:r,props:{href:"#listen-to-the-container-size-to-change-the-chart-size",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:L}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"In some cases, we want to accordingly change the chart size while the size of containers changed."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"You can listen to "},{type:t,tag:n,props:{},children:[{type:e,value:"window.onresize"}]},{type:e,value:" of the site to catch the event that the browser is resized. Then use "},{type:t,tag:r,props:{href:"https://echarts.apache.org/api.html#echartsInstance.resize",rel:[y,g,u],target:v},children:[{type:t,tag:n,props:{},children:[{type:e,value:"echartsInstance.resize"}]}]},{type:e,value:" to resize the chart."}]},{type:e,value:i},{type:t,tag:m,props:{className:[b]},children:[{type:t,tag:w,props:{lang:S,"line-highlights":d,"file-name":d},children:[{type:e,value:'<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n window.onresize = function() {\n myChart.resize();\n };\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:f,props:{id:_},children:[{type:t,tag:r,props:{href:"#state-a-specific-chart-size",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:M}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Except for calling "},{type:t,tag:n,props:{},children:[{type:e,value:W}]},{type:e,value:" without parameters, you can state the height and width to implement the chart size different from the size of the container."}]},{type:e,value:i},{type:t,tag:m,props:{className:[b]},children:[{type:t,tag:w,props:{lang:"js","line-highlights":d,"file-name":d},children:[{type:e,value:"myChart.resize({\n width: 800,\n height: 400\n});\n"}]}]},{type:e,value:i},{type:t,tag:O,props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"**Tips: ** Pay attention to how the API defined while reading the file. "},{type:t,tag:n,props:{},children:[{type:e,value:W}]},{type:e,value:" API was sometimes mistaken for the form like "},{type:t,tag:n,props:{},children:[{type:e,value:"myCharts.resize(800, 400)"}]},{type:e,value:" which do not exist."}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:f,props:{id:G},children:[{type:t,tag:r,props:{href:"#dispose-and-rebuild-of-the-container-node",ariaHidden:p,tabIndex:h},children:[{type:t,tag:s,props:{className:[o,c]},children:[]}]},{type:e,value:V}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists."}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"The correct way is, call "},{type:t,tag:r,props:{href:U,rel:[y,g,u],target:v},children:[{type:t,tag:n,props:{},children:[{type:e,value:q}]}]},{type:e,value:" to dispose the instance after the container was disposed, and call "},{type:t,tag:r,props:{href:C,rel:[y,g,u],target:v},children:[{type:e,value:I}]},{type:e,value:" to initialize after the container was added again."}]},{type:e,value:i},{type:t,tag:O,props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"**Tips: ** Call "},{type:t,tag:r,props:{href:U,rel:[y,g,u],target:v},children:[{type:t,tag:n,props:{},children:[{type:e,value:q}]}]},{type:e,value:" to release resources while disposing the node to avoid memory leaks."}]},{type:e,value:i}]}]},dir:"/en/concepts",path:F,extension:".md",createdAt:"2021-06-04T12:26:37.918Z",updatedAt:"2021-07-29T06:25:53.259Z"},postPath:"en/concepts/chart-size"}],fetch:{},error:Z,state:{filled:!1,docVersion:d,ghVersion:d,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:$},{title:"入门篇",dir:X,children:[{title:"获取 ECharts",dir:Y},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:J,draft:a},{title:"获取灵感",dir:K},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:Q,children:[{title:ee,draft:a,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:te},{title:"ECharts 5 升级指南",dir:ie}]}]},{title:"概念篇",dir:ae,children:[{title:"图表容器及大小",dir:x},{title:"配置项",dir:re,draft:a},{title:"系列",dir:"series",draft:a},{title:"样式",dir:"style"},{title:"数据集",dir:le},{title:"数据转换",dir:ne},{title:"坐标系",dir:de,draft:a},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:P},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:pe,children:[{title:"常用图表类型",dir:he,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:se},{title:"堆叠柱状图",dir:oe},{title:"动态排序柱状图",dir:ce,draft:a},{title:"极坐标系柱状图",dir:ye,draft:a},{title:"瀑布图",dir:ge,draft:a},{title:"视觉映射的柱状图",dir:P,draft:a}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ue},{title:"堆叠折线图",dir:ve},{title:"区域面积图",dir:fe},{title:"平滑曲线图",dir:me},{title:"阶梯线图",dir:be}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:we},{title:"圆环图",dir:ze},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:xe,children:[{title:"基础散点图",dir:Ce}]}]},{title:"移动端优化",dir:z,draft:a},{title:"跨平台方案",dir:Ie,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Se},{title:"数据下钻",dir:Pe,draft:a}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ke}]},{title:"交互",dir:Ee,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Be,draft:a}]}]},{title:"最佳实践",dir:Ne,children:[{title:"移动端优化",dir:z,draft:a},{title:Re,dir:Ae},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:De}]}],en:[{title:j,dir:$},{title:"Basics",dir:X,children:[{title:"Download ECharts",dir:Y},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:J,draft:a},{title:"Inspiration",dir:K},{title:"Get Help",dir:"help"},{title:"Release Note",dir:Q,children:[{title:ee,draft:a,dir:"5-2-0"},{title:"ECharts 5 Features",dir:te},{title:"ECharts 5 Upgrade Guide",dir:ie}]}]},{title:"Concepts",dir:ae,children:[{title:"Chart Container",dir:x},{title:"Chart Option",dir:re,draft:a},{title:"Series",dir:"series",draft:a},{title:"Style",dir:"style"},{title:"Dataset",dir:le},{title:"Data Transform",dir:ne},{title:"Coordinate",dir:de,draft:a},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:P},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:pe,children:[{title:"Common Charts",dir:he,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:se},{title:"Stacked Bar",dir:oe},{title:"Bar Racing",dir:ce,draft:a},{title:"Bar Polar",dir:ye,draft:a},{title:"Waterfall",dir:ge,draft:a}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ue},{title:"Stacked Line",dir:ve},{title:"Area Chart",dir:fe},{title:"Smoothed Line",dir:me},{title:"Step Line",dir:be}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:we},{title:"Ring Style",dir:ze},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:xe,children:[{title:"Basic Scatter",dir:Ce}]}]},{title:"Mobile",dir:z,draft:a},{title:"Cross Platform",dir:Ie,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Se},{title:"Drilldown",dir:Pe,draft:a}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ke}]},{title:"Interaction",dir:Ee,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Be,draft:a}]}]},{title:"Best Practice",dir:Ne,children:[{title:"Mobile Optimization",dir:z,draft:a},{title:Re,dir:Ae},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:De}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:a,routePath:F,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:Z},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","code","","true",-1,"span","icon","icon-link","nofollow","noopener","noreferrer","_blank","h3","div","nuxt-content-highlight","md-code-block","mobile","chart-size","https://echarts.apache.org//api.html#echarts.init","echarts.init","html","visual-map","initialization","Initialization","define-a-parent-container-in-html","Define a Parent Container in HTML","specify-the-chart-size","Specify the chart size","reactive-of-the-container-size","Reactive of the Container Size","listen-to-the-container-size-to-change-the-chart-size","Listen to the Container Size to Change the Chart Size","state-a-specific-chart-size","State a Specific Chart Size","dispose-and-rebuild-of-the-container-node","Dispose and Rebuild of the Container Node","Get Started","resize()","blockquote","https://echarts.apache.org/api.html#echartsInstance.dispose","echartsInstance.dispose","/en/concepts/chart-size",null,"get-started","basics","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="chart-container-and-size" tabindex="-1">Chart Container and Size</h1> <p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p> <p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p> <h2 id="initialization" tabindex="-1">Initialization</h2> <h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3> <p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p> <h3 id="specify-the-chart-size" tabindex="-1">Specify the chart size</h3> <p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="reactive-of-the-container-size" tabindex="-1">Reactive of the Container Size</h2> <h3 id="listen-to-the-container-size-to-change-the-chart-size" tabindex="-1">Listen to the Container Size to Change the Chart Size</h3> <p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p> <p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p> <p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> to resize the chart.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
+ <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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="state-a-specific-chart-size" tabindex="-1">State a Specific Chart Size</h3> <p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p></blockquote> <h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3> <p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p> <p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p> <p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p> <blockquote><p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</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/concepts/chart-size.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,d,n,l,h,o,c,s,p,g,f,m,b,C,u,w,I,z,B,P,y,A,S,k,v,x,W,D,R,G,Z,L,X,H,E,N,V,Y,j,T,J,M,F,K,Q,O,U,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="chart-container-and-size" tabindex="-1">Chart Container and Size</h1>\n<p>In <a href="en/get-started">Get Started</a>, we introduced the API to initialize the ECharts <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>. <a href="https://echarts.apache.org//api.html#echarts.init">API Document</a> has introduced the specific meaning of each parameters. Please read and understand the document before reading the following content.</p>\n<p>Refer to several common usage scenarios, here is the example to initialize a chart and change the size.</p>\n<h2 id="initialization" tabindex="-1">Initialization</h2>\n<h3 id="define-a-parent-container-in-html" tabindex="-1">Define a Parent Container in HTML</h3>\n<p>In general, you need to define a <code><div></code> node and use the CSS to change the width and height. While initializing, import the chart into the node. Without declaring <code>opts.width</code> or <code>opts.height</code>, the size of the chart will default to the size of the node.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>To be noticed, before calling <code>echarts.init</code>, you need to make sure the container already has width and height.</p>\n<h3 id="specify-the-chart-size" tabindex="-1">Specify the chart size</h3>\n<p>If the height and width of the container do not exist, or you wish the chart size not equal to the container, you can initialize the size at the beginning.</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="reactive-of-the-container-size" tabindex="-1">Reactive of the Container Size</h2>\n<h3 id="listen-to-the-container-size-to-change-the-chart-size" tabindex="-1">Listen to the Container Size to Change the Chart Size</h3>\n<p>In some cases, we want to accordingly change the chart size while the size of containers changed.</p>\n<p>For instance, the container has a height of 300px and a width of 100% site width. If you are willing to change the site width while stable the chart width as 100% of it, try the following method.</p>\n<p>You can listen to <code>window.onresize</code> of the site to catch the event that the browser is resized. Then use <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> to resize the chart.</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="state-a-specific-chart-size" tabindex="-1">State a Specific Chart Size</h3>\n<p>Except for calling <code>resize()</code> without parameters, you can state the height and width to implement the chart size different from the size of the container.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>Tips: Pay attention to how the API defined while reading the documentation. <code>resize()</code> API was sometimes mistaken for the form like <code>myCharts.resize(800, 400)</code> which do not exist.</p>\n</blockquote>\n<h3 id="dispose-and-rebuild-of-the-container-node" tabindex="-1">Dispose and Rebuild of the Container Node</h3>\n<p>We assume that there exist several bookmark pages and each page contained some charts. In this case, the content in other pages will be removed in DOM when select one page. The user will not find the chart after reselecting these pages.</p>\n<p>Essentially, this is because the container node of the charts was removed. Even if the node is added again later, the node where the graph is located no longer exists.</p>\n<p>The correct way is, call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to dispose the instance after the container was disposed, and call <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> to initialize after the container was added again.</p>\n<blockquote>\n<p>Tips: Call <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> to release resources while disposing the node to avoid memory leaks.</p>\n</blockquote>\n',postPath:"en/concepts/chart-size"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:h,draft:e},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:C,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:w},{title:"数据集",dir:I},{title:"数据转换",dir:z},{title:"坐标系",dir:B,draft:e},{title:"坐标轴",dir:P},{title:"视觉映射",dir:i},{title:"图例",dir:y},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:D,draft:e},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:Z},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:E}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:J,dir:t,draft:e},{title:"跨平台方案",dir:M,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:F}]},{title:"数据处理",dir:K,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:O,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:l},{title:"Resources",dir:h,draft:e},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:C,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:w},{title:"Dataset",dir:I},{title:"Data Transform",dir:z},{title:"Coordinate",dir:B,draft:e},{title:"Axis",dir:P},{title:"Visual Mapping",dir:i},{title:"Legend",dir:y},{title:"Event and Action",dir:A}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:D,draft:e},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:Z},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:E}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:M,children:[{title:"Server Side Rendering",dir:F}]},{title:"Data",dir:K,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:O,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/data-transform/index.html b/handbook/en/concepts/data-transform/index.html
index 667317b..a632283 100644
--- a/handbook/en/concepts/data-transform/index.html
+++ b/handbook/en/concepts/data-transform/index.html
@@ -3,126 +3,591 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="data-transform"><a href="#data-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Data Transform</h1>
-<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p>
-<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
-With the help of those transform methods, users can be implements the features like:</p>
-<ul>
-<li>Partition data into multiple series.</li>
-<li>Make some statistics and visualize the result.</li>
-<li>Adapt some visualization algorithms to data and display the result.</li>
-<li>Sort data.</li>
-<li>Remove or choose some kind of empty or special datums.</li>
-<li>...</li>
-</ul>
-<h2 id="get-started-to-data-transform"><a href="#get-started-to-data-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get Started to Data Transform</h2>
-<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>Let's summarize the key points of using data transform:</p>
-<ul>
-<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>
-<li>Series references these datasets to show the result.</li>
-</ul>
-<h2 id="advanced-usage"><a href="#advanced-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Advanced Usage</h2>
-<h4 id="piped-transform"><a href="#piped-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piped Transform</h4>
-<p>There is a syntactic sugar that pipe transforms like:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>
-</blockquote>
-<h4 id="output-multiple-data"><a href="#output-multiple-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Output Multiple Data</h4>
-<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>
-<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
-<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h4 id="debug-in-develop-environment"><a href="#debug-in-develop-environment" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Debug in Develop Environment</h4>
-<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="filter-transform"><a href="#filter-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Filter Transform</h2>
-<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>This is another example of filter transform:</p>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-filter"></iframe>
-<p><strong>About dimension:</strong></p>
-<p>The <code>config.dimension</code> can be:</p>
-<ul>
-<li>Dimension name declared in dataset, like <code>config: { dimension: 'Year', '=': 2011 }</code>. Dimension name declaration is not mandatory.</li>
-<li>Dimension index (start from 0), like <code>config: { dimension: 3, '=': 2011 }</code>.</li>
-</ul>
-<p><strong>About relational operator:</strong></p>
-<p>The relational operator can be:
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="data-transform" tabindex="-1">Data Transform</h1> <p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p> <p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...
+With the help of those transform methods, users can be implements the features like:</p> <ul><li>Partition data into multiple series.</li> <li>Make some statistics and visualize the result.</li> <li>Adapt some visualization algorithms to data and display the result.</li> <li>Sort data.</li> <li>Remove or choose some kind of empty or special datums.</li> <li>...</li></ul> <h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2> <p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p> <div class="md-live layout-tb"><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">var option = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Let's summarize the key points of using data transform:</p> <ul><li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li> <li>Series references these datasets to show the result.</li></ul> <h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2> <h4 id="piped-transform" tabindex="-1">Piped Transform</h4> <p>There is a syntactic sugar that pipe transforms like:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p></blockquote> <h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4> <p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p> <p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p> <p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token punctuation">{</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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4> <p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="filter-transform" tabindex="-1">Filter Transform</h2> <p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>This is another example of filter transform:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p><strong>About dimension:</strong></p> <p>The <code>config.dimension</code> can be:</p> <ul><li>Dimension name declared in dataset, like <code>config: { dimension: 'Year', '=': 2011 }</code>. Dimension name declaration is not mandatory.</li> <li>Dimension index (start from 0), like <code>config: { dimension: 3, '=': 2011 }</code>.</li></ul> <p><strong>About relational operator:</strong></p> <p>The relational operator can be:
<code>></code>(<code>gt</code>), <code>>=</code>(<code>gte</code>), <code><</code>(<code>lt</code>), <code><=</code>(<code>lte</code>), <code>=</code>(<code>eq</code>), <code>!=</code>(<code>ne</code>, <code><></code>), <code>reg</code>. (The name in the parentheses are aliases). They follows the common semantics.
-Besides the common number comparison, there is some extra features:</p>
-<ul>
-<li>Multiple operators are able to appear in one {} item like <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li>
-<li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like ' 123 '. White spaces and line breaks will be auto trimmed in the conversion.</li>
-<li>If we need to compare "JS <code>Date</code> instance" or date string (like '2012-05-12'), we need to specify <code>parser: 'time'</code> manually, like <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>.</li>
-<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>
-<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>
-</ul>
-<p><strong>About logical relationship:</strong></p>
-<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><strong>About parser:</strong></p>
-<p>Some "parser" can be specified when make value comparison. At present only supported:</p>
-<ul>
-<li><code>parser: 'time'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>'2012-05-12 03:11:22'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>
-<li><code>parser: 'trim'</code>: Trim the string before making comparison. For non-string, return the original value.</li>
-<li><code>parser: 'number'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>'33%'</code>, <code>12px</code>), we should use <code>parser: 'number'</code> to convert them to number before making comparison.</li>
-</ul>
-<p>This is an example to show the <code>parser: 'time'</code>:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><strong>Formally definition:</strong></p>
-<p>Finally, we give the formally definition of the filter transform config here:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="the-transform-sort"><a href="#the-transform-sort" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The transform "sort"</h2>
-<p>Another built-in transform is "sort".</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=data-transform-sort-bar"></iframe>
-<p>Some extra features about "sort transform":</p>
-<ul>
-<li>Order by multiple dimensions is supported. See examples below.</li>
-<li>The sort rule:
-<ul>
-<li>By default "numeric" (that is, number and numeric-string like <code>' 123 '</code>) are able to sorted by numeric order.</li>
-<li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li>
-<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: 'min' | 'max'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>) or other illegal values to the head or tail.</li>
-</ul>
-</li>
-<li><code>filter: 'time' | 'trim' | 'number'</code> can be used, the same as "filter transform".
-<ul>
-<li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>'2012-03-12 11:13:54'</code>), <code>parser: 'time'</code> should be specified. Like <code>config: { dimension: 'date', order: 'desc', parser: 'time' }</code></li>
-<li>If intending to sort values with unit suffix (like <code>'33%'</code>, <code>'16px'</code>), need to use <code>parser: 'number'</code>.</li>
-</ul>
-</li>
-</ul>
-<p>See an example of multiple order:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/data-transform-multiple-sort-bar"></iframe>
-<p>Finally, we give the formally definition of the sort transform config here:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="use-external-transforms"><a href="#use-external-transforms" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Use External Transforms</h2>
-<p>Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat" rel="nofollow noopener noreferrer" target="_blank">ecStat</a> as an example:</p>
-<p>This case show how to make a regression line via ecStat:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Examples with echarts-stat:</p>
-<ul>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Aggregate</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Bar histogram</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter clustering</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter linear regression</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter exponential regression</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter logarithmic regression</a></li>
-<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">Scatter polynomial regression</a></li>
-</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/data-transform#get-started-to-data-transform">Get Started to Data Transform</a></li><li class="toc2"><a href="/handbook/en/concepts/data-transform#advanced-usage">Advanced Usage</a></li><li class="toc2"><a href="/handbook/en/concepts/data-transform#filter-transform">Filter Transform</a></li><li class="toc2"><a href="/handbook/en/concepts/data-transform#the-transform-sort">The transform "sort"</a></li><li class="toc2"><a href="/handbook/en/concepts/data-transform#use-external-transforms">Use External Transforms</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/data-transform.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,r,n,i,p,l,s,o,d,h,y,c,u,g,m,v,f,b,x,T,k,w,D,I,S,C,E,N,P,A,B,L,R,M,V,O,H,F,Y,q,G,U,_,W,z,K,J,Z,Q,$,j,X,ee,te,ae,re,ne,ie,pe,le,se,oe,de,he,ye,ce,ue,ge,me,ve,fe,be,xe,Te,ke,we,De,Ie,Se,Ce,Ee,Ne,Pe,Ae,Be,Le,Re,Me,Ve,Oe,He,Fe,Ye,qe,Ge,Ue){return{layout:"default",data:[{article:{slug:N,toc:[{id:F,depth:2,text:Y},{id:q,depth:2,text:G},{id:U,depth:2,text:_},{id:W,depth:2,text:z},{id:K,depth:2,text:J}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:N},children:[{type:t,tag:s,props:{href:"#data-transform",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:Z}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"Data transform"}]},{type:e,value:" has been supported since Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" 5. In echarts, the term "},{type:t,tag:r,props:{},children:[{type:e,value:"data transform"}]},{type:e,value:' means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").'}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"The abstract formula of data transform is: "},{type:t,tag:r,props:{},children:[{type:e,value:"outData = f(inputData)"}]},{type:e,value:", where the transform function "},{type:t,tag:r,props:{},children:[{type:e,value:"f"}]},{type:e,value:" can be like "},{type:t,tag:r,props:{},children:[{type:e,value:"filter"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"sort"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"regression"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"boxplot"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"cluster"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"aggregate"}]},{type:e,value:"(todo) ...\nWith the help of those transform methods, users can be implements the features like:"}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Partition data into multiple series."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Make some statistics and visualize the result."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Adapt some visualization algorithms to data and display the result."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Sort data."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Remove or choose some kind of empty or special datums."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"..."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:S,props:{id:F},children:[{type:t,tag:s,props:{href:"#get-started-to-data-transform",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:Y}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"In echarts, data transform is implemented based on the concept of "},{type:t,tag:s,props:{href:"~https://echarts.apache.org/option.html##dataset"},children:[{type:e,value:B}]},{type:e,value:". A "},{type:t,tag:s,props:{href:Q,rel:[y,c,u],target:g},children:[{type:e,value:$}]},{type:e,value:" can be configured in a dataset instance to indicate that this dataset is to be generated from this "},{type:t,tag:r,props:{},children:[{type:e,value:j}]},{type:e,value:X}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:ee,props:{lang:m,layout:"tb"},children:[{type:e,value:"var option = {\n dataset: [\n {\n // This dataset is on `datasetIndex: 0`.\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // This dataset is on `datasetIndex: 1`.\n // A `transform` is configured to indicate that the\n // final data of this dataset is transformed via this\n // transform function.\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // There can be optional properties `fromDatasetIndex` or `fromDatasetId`\n // to indicate that where is the input data of the transform from.\n // For example, `fromDatasetIndex: 0` specify the input data is from\n // the dataset on `datasetIndex: 0`, or `fromDatasetId: 'a'` specify the\n // input data is from the dataset having `id: 'a'`.\n // [DEFAULT_RULE]\n // If both `fromDatasetIndex` and `fromDatasetId` are omitted,\n // `fromDatasetIndex: 0` are used by default.\n },\n {\n // This dataset is on `datasetIndex: 2`.\n // Similarly, if neither `fromDatasetIndex` nor `fromDatasetId` is\n // specified, `fromDatasetIndex: 0` is used by default\n transform: {\n // The \"filter\" transform filters and gets data items only match\n // the given condition in property `config`.\n type: 'filter',\n // Transforms has a property `config`. In this \"filter\" transform,\n // the `config` specify the condition that each result data item\n // should be satisfied. In this case, this transform get all of\n // the data items that the value on dimension \"Year\" equals to 2012.\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // This dataset is on `datasetIndex: 3`\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // In this case, each \"pie\" series reference to a dataset that has\n // the result of its \"filter\" transform.\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Let's summarize the key points of using data transform:"}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Generate new data from existing declared data via the declaration of "},{type:t,tag:r,props:{},children:[{type:e,value:j}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"fromDatasetIndex"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"fromDatasetId"}]},{type:e,value:" in some blank dataset."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Series references these datasets to show the result."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:S,props:{id:q},children:[{type:t,tag:s,props:{href:"#advanced-usage",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:G}]},{type:e,value:a},{type:t,tag:L,props:{id:"piped-transform"},children:[{type:t,tag:s,props:{href:"#piped-transform",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:"Piped Transform"}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"There is a syntactic sugar that pipe transforms like:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [] // The original data\n },\n {\n // Declare transforms in an array to pipe multiple transforms,\n // which makes them execute one by one and take the output of\n // the previous transform as the input of the next transform.\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // Display the result of the piped transform.\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe)."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:L,props:{id:"output-multiple-data"},children:[{type:t,tag:s,props:{href:"#output-multiple-data",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:"Output Multiple Data"}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series."}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the "},{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity",rel:[y,c,u],target:g},children:[{type:e,value:"example"}]},{type:e,value:C}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"We use prop "},{type:t,tag:s,props:{href:te,rel:[y,c,u],target:g},children:[{type:e,value:ae}]},{type:e,value:" to satisfy this requirement. For example:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n // Original source data.\n source: []\n },\n {\n transform: {\n type: 'boxplot'\n }\n // After this \"boxplot transform\" two result data generated:\n // result[0]: The boxplot data\n // result[1]: The outlier data\n // By default, when series or other dataset reference this dataset,\n // only result[0] can be visited.\n // If we need to visit result[1], we have to use another dataset\n // as follows:\n },\n {\n // This extra dataset references the dataset above, and retrieves\n // the result[1] as its own data. Thus series or other dataset can\n // reference this dataset to get the data from result[1].\n fromDatasetIndex: 1,\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // Reference the data from result[1].\n datasetIndex: 2\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"What more, "},{type:t,tag:s,props:{href:te,rel:[y,c,u],target:g},children:[{type:e,value:ae}]},{type:e,value:" and "},{type:t,tag:s,props:{href:Q,rel:[y,c,u],target:g},children:[{type:e,value:$}]},{type:e,value:" can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by "},{type:t,tag:r,props:{},children:[{type:e,value:"fromTransformResult"}]},{type:e,value:X}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:L,props:{id:"debug-in-develop-environment"},children:[{type:t,tag:s,props:{href:"#debug-in-develop-environment",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:"Debug in Develop Environment"}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property "},{type:t,tag:r,props:{},children:[{type:e,value:re}]},{type:e,value:" might help in such case. ("},{type:t,tag:r,props:{},children:[{type:e,value:re}]},{type:e,value:" is only available in dev environment)."}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // The result of this transform will be printed\n // in dev tool via `console.log`.\n print: true\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:U},children:[{type:t,tag:s,props:{href:"#filter-transform",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:_}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:'Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:'}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:ee,props:{lang:m,layout:"tb"},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // The config is the \"condition\" of this filter.\n // This transform traverse the source data and\n // and retrieve all the items that the \"Year\"\n // is `2011`.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"This is another example of filter transform:"}]},{type:e,value:a},{type:t,tag:R,props:{src:"data-transform-filter"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:E,props:{},children:[{type:e,value:"About dimension:"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"The "},{type:t,tag:r,props:{},children:[{type:e,value:"config.dimension"}]},{type:e,value:" can be:"}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Dimension name declared in dataset, like "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 'Year', '=': 2011 }"}]},{type:e,value:". Dimension name declaration is not mandatory."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Dimension index (start from 0), like "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 3, '=': 2011 }"}]},{type:e,value:C}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:E,props:{},children:[{type:e,value:"About relational operator:"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"The relational operator can be:\n"},{type:t,tag:r,props:{},children:[{type:e,value:">"}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"gt"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:">="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"gte"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:"<"}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"lt"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:"<="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"lte"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:"="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"eq"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:"!="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"ne"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"<>"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:"reg"}]},{type:e,value:". (The name in the parentheses are aliases). They follows the common semantics.\nBesides the common number comparison, there is some extra features:"}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Multiple operators are able to appear in one {} item like "},{type:t,tag:r,props:{},children:[{type:e,value:"{ dimension: 'Price', '>=': 20, '<': 30 }"}]},{type:e,value:', which means logical "and" (Price >= 20 and Price < 30).'}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"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."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:'If we need to compare "JS '},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:" instance\" or date string (like '2012-05-12'), we need to specify "},{type:t,tag:r,props:{},children:[{type:e,value:P}]},{type:e,value:" manually, like "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 3, lt: '2012-05-12', parser: 'time' }"}]},{type:e,value:C}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Pure string comparison is supported but can only be used in "},{type:t,tag:r,props:{},children:[{type:e,value:"="}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"!="}]},{type:e,value:". "},{type:t,tag:r,props:{},children:[{type:e,value:">"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:">="}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"<"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"<="}]},{type:e,value:' do not support pure string comparison (the "right value" of the four operators can not be a "string").'}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"The operator "},{type:t,tag:r,props:{},children:[{type:e,value:"reg"}]},{type:e,value:" can be used to make regular expression test. Like using "},{type:t,tag:r,props:{},children:[{type:e,value:"{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }"}]},{type:e,value:' to select all data items that the "Name" dimension contains family name Müller.'}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:E,props:{},children:[{type:e,value:"About logical relationship:"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Sometimes we also need to express logical relationship ( "},{type:t,tag:r,props:{},children:[{type:e,value:"and"}]},{type:e,value:" / "},{type:t,tag:r,props:{},children:[{type:e,value:"or"}]},{type:e,value:" / "},{type:t,tag:r,props:{},children:[{type:e,value:"not"}]},{type:e,value:" ):"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // Use operator \"and\".\n // Similarly, we can also use \"or\", \"not\" in the same place.\n // But \"not\" should be followed with a {...} rather than `[...]`.\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // The condition is \"Year\" is 2011 and \"Price\" is greater\n // or equal to 20 but less than 30.\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"and"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"or"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"not"}]},{type:e,value:" can be nested like:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"transform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:E,props:{},children:[{type:e,value:"About parser:"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:'Some "parser" can be specified when make value comparison. At present only supported:'}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:P}]},{type:e,value:": Parse the value to date time before comparing. The parser rule is the same as "},{type:t,tag:r,props:{},children:[{type:e,value:"echarts.time.parse"}]},{type:e,value:", where JS "},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:" instance, timestamp number (in millisecond) and time string (like "},{type:t,tag:r,props:{},children:[{type:e,value:"'2012-05-12 03:11:22'"}]},{type:e,value:") are supported to be parse to timestamp number, while other value will be parsed to "},{type:t,tag:r,props:{},children:[{type:e,value:V}]},{type:e,value:C}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"parser: 'trim'"}]},{type:e,value:": Trim the string before making comparison. For non-string, return the original value."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:O}]},{type:e,value:": Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to "},{type:t,tag:r,props:{},children:[{type:e,value:V}]},{type:e,value:". In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like "},{type:t,tag:r,props:{},children:[{type:e,value:"'33%'"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"12px"}]},{type:e,value:"), we should use "},{type:t,tag:r,props:{},children:[{type:e,value:O}]},{type:e,value:" to convert them to number before making comparison."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"This is an example to show the "},{type:t,tag:r,props:{},children:[{type:e,value:P}]},{type:e,value:":"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:t,tag:E,props:{},children:[{type:e,value:"Formally definition:"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Finally, we give the formally definition of the filter transform config here:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:"ts","line-highlights":p,"file-name":p},children:[{type:e,value:"type FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:W},children:[{type:t,tag:s,props:{href:"#the-transform-sort",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:z}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:'Another built-in transform is "sort".'}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // Sort by score.\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:R,props:{src:"data-transform-sort-bar"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:'Some extra features about "sort transform":'}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"Order by multiple dimensions is supported. See examples below."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"The sort rule:\n"},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:'By default "numeric" (that is, number and numeric-string like '},{type:t,tag:r,props:{},children:[{type:e,value:"' 123 '"}]},{type:e,value:") are able to sorted by numeric order."}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:'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).'}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:'When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop '},{type:t,tag:r,props:{},children:[{type:e,value:"incomparable: 'min' | 'max'"}]},{type:e,value:". This feature usually helps to decide whether to put the empty values (like "},{type:t,tag:r,props:{},children:[{type:e,value:"null"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"undefined"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:V}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"''"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"'-'"}]},{type:e,value:") or other illegal values to the head or tail."}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"filter: 'time' | 'trim' | 'number'"}]},{type:e,value:' can be used, the same as "filter transform".\n'},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"If intending to sort time values (JS "},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:" instance or time string like "},{type:t,tag:r,props:{},children:[{type:e,value:"'2012-03-12 11:13:54'"}]},{type:e,value:D},{type:t,tag:r,props:{},children:[{type:e,value:P}]},{type:e,value:" should be specified. Like "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 'date', order: 'desc', parser: 'time' }"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"If intending to sort values with unit suffix (like "},{type:t,tag:r,props:{},children:[{type:e,value:"'33%'"}]},{type:e,value:o},{type:t,tag:r,props:{},children:[{type:e,value:"'16px'"}]},{type:e,value:"), need to use "},{type:t,tag:r,props:{},children:[{type:e,value:O}]},{type:e,value:C}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"See an example of multiple order:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // Sort by the two dimensions.\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:R,props:{src:"doc-example/data-transform-multiple-sort-bar"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Finally, we give the formally definition of the sort transform config here:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:"ts","line-highlights":p,"file-name":p},children:[{type:e,value:"type SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:K},children:[{type:t,tag:s,props:{href:"#use-external-transforms",ariaHidden:f,tabIndex:b},children:[{type:t,tag:x,props:{className:[T,k]},children:[]}]},{type:e,value:J}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library "},{type:t,tag:s,props:{href:"https://github.com/ecomfe/echarts-stat",rel:[y,c,u],target:g},children:[{type:e,value:"ecStat"}]},{type:e,value:" as an example:"}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"This case show how to make a regression line via ecStat:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"// Register the external transform at first.\necharts.registerTransform(ecStatTransform(ecStat).regression);\n"}]}]},{type:e,value:a},{type:t,tag:d,props:{className:[h]},children:[{type:t,tag:v,props:{lang:m,"line-highlights":p,"file-name":p},children:[{type:e,value:"option = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // Reference the registered external transform.\n // Note that external transform has a namespace (like 'ecStat:xxx'\n // has namespace 'ecStat').\n // built-in transform (like 'filter', 'sort') does not have a namespace.\n type: 'ecStat:regression',\n config: {\n // Parameters needed by the external transform.\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:i,props:{},children:[{type:e,value:"Examples with echarts-stat:"}]},{type:e,value:a},{type:t,tag:w,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Aggregate"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Bar histogram"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Scatter clustering"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Scatter linear regression"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Scatter exponential regression"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Scatter logarithmic regression"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1",rel:[y,c,u],target:g},children:[{type:e,value:"Scatter polynomial regression"}]}]},{type:e,value:a}]}]},dir:"/en/concepts",path:ne,extension:".md",createdAt:"2021-06-04T12:26:37.918Z",updatedAt:"2021-07-29T06:27:28.876Z"},postPath:"en/concepts/data-transform"}],fetch:{},error:ie,state:{filled:!1,docVersion:p,ghVersion:p,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:pe},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:le},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:se,draft:l},{title:"获取灵感",dir:oe},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:de,children:[{title:he,draft:l,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:ye},{title:"ECharts 5 升级指南",dir:ce}]}]},{title:"概念篇",dir:ue,children:[{title:"图表容器及大小",dir:ge},{title:"配置项",dir:me,draft:l},{title:"系列",dir:"series",draft:l},{title:"样式",dir:"style"},{title:"数据集",dir:B},{title:"数据转换",dir:N},{title:"坐标系",dir:ve,draft:l},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:H},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:fe,children:[{title:"常用图表类型",dir:be,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:xe},{title:"堆叠柱状图",dir:Te},{title:"动态排序柱状图",dir:ke,draft:l},{title:"极坐标系柱状图",dir:we,draft:l},{title:"瀑布图",dir:De,draft:l},{title:"视觉映射的柱状图",dir:H,draft:l}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:Ie},{title:"堆叠折线图",dir:Se},{title:"区域面积图",dir:Ce},{title:"平滑曲线图",dir:Ee},{title:"阶梯线图",dir:Ne}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Pe},{title:"圆环图",dir:Ae},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Be,children:[{title:"基础散点图",dir:Le}]}]},{title:"移动端优化",dir:A,draft:l},{title:"跨平台方案",dir:Re,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Me},{title:"数据下钻",dir:Ve,draft:l}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Oe}]},{title:"交互",dir:He,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Fe,draft:l}]}]},{title:"最佳实践",dir:Ye,children:[{title:"移动端优化",dir:A,draft:l},{title:qe,dir:Ge},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ue}]}],en:[{title:"Get Started",dir:pe},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:le},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:se,draft:l},{title:"Inspiration",dir:oe},{title:"Get Help",dir:"help"},{title:"Release Note",dir:de,children:[{title:he,draft:l,dir:"5-2-0"},{title:"ECharts 5 Features",dir:ye},{title:"ECharts 5 Upgrade Guide",dir:ce}]}]},{title:"Concepts",dir:ue,children:[{title:"Chart Container",dir:ge},{title:"Chart Option",dir:me,draft:l},{title:"Series",dir:"series",draft:l},{title:"Style",dir:"style"},{title:"Dataset",dir:B},{title:Z,dir:N},{title:"Coordinate",dir:ve,draft:l},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:H},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:fe,children:[{title:"Common Charts",dir:be,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:xe},{title:"Stacked Bar",dir:Te},{title:"Bar Racing",dir:ke,draft:l},{title:"Bar Polar",dir:we,draft:l},{title:"Waterfall",dir:De,draft:l}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:Ie},{title:"Stacked Line",dir:Se},{title:"Area Chart",dir:Ce},{title:"Smoothed Line",dir:Ee},{title:"Step Line",dir:Ne}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Pe},{title:"Ring Style",dir:Ae},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Be,children:[{title:"Basic Scatter",dir:Le}]}]},{title:"Mobile",dir:A,draft:l},{title:"Cross Platform",dir:Re,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Me},{title:"Drilldown",dir:Ve,draft:l}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Oe}]},{title:"Interaction",dir:He,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Fe,draft:l}]}]},{title:"Best Practice",dir:Ye,children:[{title:"Mobile Optimization",dir:A,draft:l},{title:qe,dir:Ge},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ue}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:l,routePath:ne,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:ie},content:{dbHash:"570e7c13"}}}}("text","element","\n","code","li","p","",!0,"a",", ","div","nuxt-content-highlight","nofollow","noopener","noreferrer","_blank","js","md-code-block","true",-1,"span","icon","icon-link","ul","), ","(","h2",".","strong","data-transform","parser: 'time'","mobile","dataset","h4","md-example","Date","NaN","parser: 'number'","visual-map","get-started-to-data-transform","Get Started to Data Transform","advanced-usage","Advanced Usage","filter-transform","Filter Transform","the-transform-sort",'The transform "sort"',"use-external-transforms","Use External Transforms","Data Transform","https://echarts.apache.org/option.html##dataset.transform","dataset.transform","transform",". For example:","md-live","https://echarts.apache.org/option.html##dataset.fromTransformResult","dataset.fromTransformResult","transform.print","/en/concepts/data-transform",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+Besides the common number comparison, there is some extra features:</p> <ul><li>Multiple operators are able to appear in one {} item like <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>, which means logical "and" (Price >= 20 and Price < 30).</li> <li>The data value can be "numeric string". Numeric string is a string that can be converted to number. Like ' 123 '. White spaces and line breaks will be auto trimmed in the conversion.</li> <li>If we need to compare "JS <code>Date</code> instance" or date string (like '2012-05-12'), we need to specify <code>parser: 'time'</code> manually, like <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>.</li> <li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li> <li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li></ul> <p><strong>About logical relationship:</strong></p> <p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><strong>About parser:</strong></p> <p>Some "parser" can be specified when make value comparison. At present only supported:</p> <ul><li><code>parser: 'time'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>'2012-05-12 03:11:22'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li> <li><code>parser: 'trim'</code>: Trim the string before making comparison. For non-string, return the original value.</li> <li><code>parser: 'number'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>'33%'</code>, <code>12px</code>), we should use <code>parser: 'number'</code> to convert them to number before making comparison.</li></ul> <p>This is an example to show the <code>parser: 'time'</code>:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><strong>Formally definition:</strong></p> <p>Finally, we give the formally definition of the filter transform config here:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">FilterTransform</span> <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> 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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="the-transform-%22sort%22" tabindex="-1">The transform "sort"</h2> <p>Another built-in transform is "sort".</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 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">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 punctuation">,</span>
+ <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>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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>
+ <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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>Some extra features about "sort transform":</p> <ul><li>Order by multiple dimensions is supported. See examples below.</li> <li>The sort rule:
+<ul><li>By default "numeric" (that is, number and numeric-string like <code>' 123 '</code>) are able to sorted by numeric order.</li> <li>Otherwise "non-numeric-string" are also able to be ordered among themselves. This might help to the case like grouping data items with the same tag, especially when multiple dimensions participated in the sort (See example below).</li> <li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: 'min' | 'max'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>) or other illegal values to the head or tail.</li></ul></li> <li><code>filter: 'time' | 'trim' | 'number'</code> can be used, the same as "filter transform".
+<ul><li>If intending to sort time values (JS <code>Date</code> instance or time string like <code>'2012-03-12 11:13:54'</code>), <code>parser: 'time'</code> should be specified. Like <code>config: { dimension: 'date', order: 'desc', parser: 'time' }</code></li> <li>If intending to sort values with unit suffix (like <code>'33%'</code>, <code>'16px'</code>), need to use <code>parser: 'number'</code>.</li></ul></li></ul> <p>See an example of multiple order:</p> <div class="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 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">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 punctuation">,</span>
+ <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>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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>
+ <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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>Finally, we give the formally definition of the sort transform config here:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">SortTransform</span> <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> 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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="use-external-transforms" tabindex="-1">Use External Transforms</h2> <p>Besides built-in transforms (like 'filter', 'sort'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p> <p>This case show how to make a regression line via ecStat:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Register the external transform at first.</span>
+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://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Examples with echarts-stat:</p> <ul><li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li> <li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></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/en/concepts/data-transform.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,g,t,i,I,o,C,a,l,d,n,A,c,s,r,m,h,b,y,p,G,u,Z,B,W,w,J,M,X,R,f,F,L,z,H,S,N,Y,V,v,x,D,T,k,K,E,U,j,O,Q,q,P,_,$,ee,ge,te){return{layout:"default",data:[{html:'<h1 id="data-transform" tabindex="-1">Data Transform</h1>\n<p><code>Data transform</code> has been supported since Apache ECharts<sup>TM</sup> 5. In echarts, the term <code>data transform</code> means that generate new data from user provided source data and transform functions. both This feature is enable users to process data in declarative way, and provides users some common "transform functions" to make that kind of tasks "out-of-the-box". (For consistency in the context, the noun form of the word we keep using the "transform" rather than "transformation").</p>\n<p>The abstract formula of data transform is: <code>outData = f(inputData)</code>, where the transform function <code>f</code> can be like <code>filter</code>, <code>sort</code>, <code>regression</code>, <code>boxplot</code>, <code>cluster</code>, <code>aggregate</code>(todo) ...\nWith the help of those transform methods, users can be implements the features like:</p>\n<ul>\n<li>Partition data into multiple series.</li>\n<li>Make some statistics and visualize the result.</li>\n<li>Adapt some visualization algorithms to data and display the result.</li>\n<li>Sort data.</li>\n<li>Remove or choose some kind of empty or special datums.</li>\n<li>...</li>\n</ul>\n<h2 id="get-started-to-data-transform" tabindex="-1">Get Started to Data Transform</h2>\n<p>In echarts, data transform is implemented based on the concept of <a href="~https://echarts.apache.org/option.html##dataset">dataset</a>. A <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can be configured in a dataset instance to indicate that this dataset is to be generated from this <code>transform</code>. For example:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAwYC4KICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0NlcmVhbCcsIDIzMSwgMTQsIDIwMTFdLAogICAgICAgIFsnVG9mdScsIDIzNSwgNSwgMjAxMV0sCiAgICAgICAgWydEdW1wbGluZycsIDM0MSwgMjUsIDIwMTFdLAogICAgICAgIFsnQmlzY3VpdCcsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnQ2VyZWFsJywgMjAxLCAxOSwgMjAxMl0sCiAgICAgICAgWydUb2Z1JywgMjU1LCA3LCAyMDEyXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjQxLCAyNywgMjAxMl0sCiAgICAgICAgWydCaXNjdWl0JywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydDZXJlYWwnLCAxODEsIDIxLCAyMDEzXSwKICAgICAgICBbJ1RvZnUnLCAzOTUsIDQsIDIwMTNdLAogICAgICAgIFsnRHVtcGxpbmcnLCAyODEsIDMxLCAyMDEzXSwKICAgICAgICBbJ0Jpc2N1aXQnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnQ2VyZWFsJywgMjExLCAxNywgMjAxNF0sCiAgICAgICAgWydUb2Z1JywgMzQ1LCAzLCAyMDE0XSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjExLCAzNSwgMjAxNF0sCiAgICAgICAgWydCaXNjdWl0JywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICAgIC8vIGlkOiAnYScKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAxYC4KICAgICAgLy8gQSBgdHJhbnNmb3JtYCBpcyBjb25maWd1cmVkIHRvIGluZGljYXRlIHRoYXQgdGhlCiAgICAgIC8vIGZpbmFsIGRhdGEgb2YgdGhpcyBkYXRhc2V0IGlzIHRyYW5zZm9ybWVkIHZpYSB0aGlzCiAgICAgIC8vIHRyYW5zZm9ybSBmdW5jdGlvbi4KICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8gVGhlcmUgY2FuIGJlIG9wdGlvbmFsIHByb3BlcnRpZXMgYGZyb21EYXRhc2V0SW5kZXhgIG9yIGBmcm9tRGF0YXNldElkYAogICAgICAvLyB0byBpbmRpY2F0ZSB0aGF0IHdoZXJlIGlzIHRoZSBpbnB1dCBkYXRhIG9mIHRoZSB0cmFuc2Zvcm0gZnJvbS4KICAgICAgLy8gRm9yIGV4YW1wbGUsIGBmcm9tRGF0YXNldEluZGV4OiAwYCBzcGVjaWZ5IHRoZSBpbnB1dCBkYXRhIGlzIGZyb20KICAgICAgLy8gdGhlIGRhdGFzZXQgb24gYGRhdGFzZXRJbmRleDogMGAsIG9yIGBmcm9tRGF0YXNldElkOiAnYSdgIHNwZWNpZnkgdGhlCiAgICAgIC8vIGlucHV0IGRhdGEgaXMgZnJvbSB0aGUgZGF0YXNldCBoYXZpbmcgYGlkOiAnYSdgLgogICAgICAvLyBbREVGQVVMVF9SVUxFXQogICAgICAvLyBJZiBib3RoIGBmcm9tRGF0YXNldEluZGV4YCBhbmQgYGZyb21EYXRhc2V0SWRgIGFyZSBvbWl0dGVkLAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAgYXJlIHVzZWQgYnkgZGVmYXVsdC4KICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZGF0YXNldCBpcyBvbiBgZGF0YXNldEluZGV4OiAyYC4KICAgICAgLy8gU2ltaWxhcmx5LCBpZiBuZWl0aGVyIGBmcm9tRGF0YXNldEluZGV4YCBub3IgYGZyb21EYXRhc2V0SWRgIGlzCiAgICAgIC8vIHNwZWNpZmllZCwgYGZyb21EYXRhc2V0SW5kZXg6IDBgIGlzIHVzZWQgYnkgZGVmYXVsdAogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBUaGUgImZpbHRlciIgdHJhbnNmb3JtIGZpbHRlcnMgYW5kIGdldHMgZGF0YSBpdGVtcyBvbmx5IG1hdGNoCiAgICAgICAgLy8gdGhlIGdpdmVuIGNvbmRpdGlvbiBpbiBwcm9wZXJ0eSBgY29uZmlnYC4KICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyBUcmFuc2Zvcm1zIGhhcyBhIHByb3BlcnR5IGBjb25maWdgLiBJbiB0aGlzICJmaWx0ZXIiIHRyYW5zZm9ybSwKICAgICAgICAvLyB0aGUgYGNvbmZpZ2Agc3BlY2lmeSB0aGUgY29uZGl0aW9uIHRoYXQgZWFjaCByZXN1bHQgZGF0YSBpdGVtCiAgICAgICAgLy8gc2hvdWxkIGJlIHNhdGlzZmllZC4gSW4gdGhpcyBjYXNlLCB0aGlzIHRyYW5zZm9ybSBnZXQgYWxsIG9mCiAgICAgICAgLy8gdGhlIGRhdGEgaXRlbXMgdGhhdCB0aGUgdmFsdWUgb24gZGltZW5zaW9uICJZZWFyIiBlcXVhbHMgdG8gMjAxMi4KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEyIH0KICAgICAgfQogICAgfSwKICAgIHsKICAgICAgLy8gVGhpcyBkYXRhc2V0IGlzIG9uIGBkYXRhc2V0SW5kZXg6IDNgCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTMgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWycyNSUnLCAnNTAlJ10sCiAgICAgIC8vIEluIHRoaXMgY2FzZSwgZWFjaCAicGllIiBzZXJpZXMgcmVmZXJlbmNlIHRvIGEgZGF0YXNldCB0aGF0IGhhcwogICAgICAvLyB0aGUgcmVzdWx0IG9mIGl0cyAiZmlsdGVyIiB0cmFuc2Zvcm0uCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogNTAsCiAgICAgIGNlbnRlcjogWyc3NSUnLCAnNTAlJ10sCiAgICAgIGRhdGFzZXRJbmRleDogMwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Let\'s summarize the key points of using data transform:</p>\n<ul>\n<li>Generate new data from existing declared data via the declaration of <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> in some blank dataset.</li>\n<li>Series references these datasets to show the result.</li>\n</ul>\n<h2 id="advanced-usage" tabindex="-1">Advanced Usage</h2>\n<h4 id="piped-transform" tabindex="-1">Piped Transform</h4>\n<p>There is a syntactic sugar that pipe transforms like:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXSAvLyBUaGUgb3JpZ2luYWwgZGF0YQogICAgfSwKICAgIHsKICAgICAgLy8gRGVjbGFyZSB0cmFuc2Zvcm1zIGluIGFuIGFycmF5IHRvIHBpcGUgbXVsdGlwbGUgdHJhbnNmb3JtcywKICAgICAgLy8gd2hpY2ggbWFrZXMgdGhlbSBleGVjdXRlIG9uZSBieSBvbmUgYW5kIHRha2UgdGhlIG91dHB1dCBvZgogICAgICAvLyB0aGUgcHJldmlvdXMgdHJhbnNmb3JtIGFzIHRoZSBpbnB1dCBvZiB0aGUgbmV4dCB0cmFuc2Zvcm0uCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8gRGlzcGxheSB0aGUgcmVzdWx0IG9mIHRoZSBwaXBlZCB0cmFuc2Zvcm0uCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Note: theoretically any type of transform is able to have multiple input data and multiple output data. But when a transform is piped, it is only able to take one input (except it is the first transform of the pipe) and product one output (except it is the last transform of the pipe).</p>\n</blockquote>\n<h4 id="output-multiple-data" tabindex="-1">Output Multiple Data</h4>\n<p>In most cases, transform functions only need to produce one data. But there is indeed scenarios that a transform function needs to produce multiple data, each of whom might be used by different series.</p>\n<p>For example, in the built-in boxplot transform, besides boxplot data produced, the outlier data are also produced, which can be used in a scatter series. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=boxplot-light-velocity">example</a>.</p>\n<p>We use prop <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> to satisfy this requirement. For example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8gT3JpZ2luYWwgc291cmNlIGRhdGEuCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIEFmdGVyIHRoaXMgImJveHBsb3QgdHJhbnNmb3JtIiB0d28gcmVzdWx0IGRhdGEgZ2VuZXJhdGVkOgogICAgICAvLyByZXN1bHRbMF06IFRoZSBib3hwbG90IGRhdGEKICAgICAgLy8gcmVzdWx0WzFdOiBUaGUgb3V0bGllciBkYXRhCiAgICAgIC8vIEJ5IGRlZmF1bHQsIHdoZW4gc2VyaWVzIG9yIG90aGVyIGRhdGFzZXQgcmVmZXJlbmNlIHRoaXMgZGF0YXNldCwKICAgICAgLy8gb25seSByZXN1bHRbMF0gY2FuIGJlIHZpc2l0ZWQuCiAgICAgIC8vIElmIHdlIG5lZWQgdG8gdmlzaXQgcmVzdWx0WzFdLCB3ZSBoYXZlIHRvIHVzZSBhbm90aGVyIGRhdGFzZXQKICAgICAgLy8gYXMgZm9sbG93czoKICAgIH0sCiAgICB7CiAgICAgIC8vIFRoaXMgZXh0cmEgZGF0YXNldCByZWZlcmVuY2VzIHRoZSBkYXRhc2V0IGFib3ZlLCBhbmQgcmV0cmlldmVzCiAgICAgIC8vIHRoZSByZXN1bHRbMV0gYXMgaXRzIG93biBkYXRhLiBUaHVzIHNlcmllcyBvciBvdGhlciBkYXRhc2V0IGNhbgogICAgICAvLyByZWZlcmVuY2UgdGhpcyBkYXRhc2V0IHRvIGdldCB0aGUgZGF0YSBmcm9tIHJlc3VsdFsxXS4KICAgICAgZnJvbURhdGFzZXRJbmRleDogMSwKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8gUmVmZXJlbmNlIHRoZSBkYXRhIGZyb20gcmVzdWx0WzFdLgogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p>What more, <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> and <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> can both appear in one dataset, which means that the input of the transform is from retrieved from the upstream result specified by <code>fromTransformResult</code>. For example:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="debug-in-develop-environment" tabindex="-1">Debug in Develop Environment</h4>\n<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code>transform.print</code> might help in such case. (<code>transform.print</code> is only available in dev environment).</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyBUaGUgcmVzdWx0IG9mIHRoaXMgdHJhbnNmb3JtIHdpbGwgYmUgcHJpbnRlZAogICAgICAgIC8vIGluIGRldiB0b29sIHZpYSBgY29uc29sZS5sb2dgLgogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="filter-transform" tabindex="-1">Filter Transform</h2>\n<p>Transform type "filter" is a built-in transform that provide data filter according to specified conditions. The basic option is like:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8gVGhlIGNvbmZpZyBpcyB0aGUgImNvbmRpdGlvbiIgb2YgdGhpcyBmaWx0ZXIuCiAgICAgICAgLy8gVGhpcyB0cmFuc2Zvcm0gdHJhdmVyc2UgdGhlIHNvdXJjZSBkYXRhIGFuZAogICAgICAgIC8vIGFuZCByZXRyaWV2ZSBhbGwgdGhlIGl0ZW1zIHRoYXQgdGhlICJZZWFyIgogICAgICAgIC8vIGlzIGAyMDExYC4KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAncGllJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" v-bind="{}" />\n<p>This is another example of filter transform:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p><strong>About dimension:</strong></p>\n<p>The <code>config.dimension</code> can be:</p>\n<ul>\n<li>Dimension name declared in dataset, like <code>config: { dimension: \'Year\', \'=\': 2011 }</code>. Dimension name declaration is not mandatory.</li>\n<li>Dimension index (start from 0), like <code>config: { dimension: 3, \'=\': 2011 }</code>.</li>\n</ul>\n<p><strong>About relational operator:</strong></p>\n<p>The relational operator can be:\n<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.\nBesides the common number comparison, there is some extra features:</p>\n<ul>\n<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>\n<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>\n<li>If we need to compare "JS <code>Date</code> instance" or date string (like \'2012-05-12\'), we need to specify <code>parser: \'time\'</code> manually, like <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>.</li>\n<li>Pure string comparison is supported but can only be used in <code>=</code>, <code>!=</code>. <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> do not support pure string comparison (the "right value" of the four operators can not be a "string").</li>\n<li>The operator <code>reg</code> can be used to make regular expression test. Like using <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> to select all data items that the "Name" dimension contains family name Müller.</li>\n</ul>\n<p><strong>About logical relationship:</strong></p>\n<p>Sometimes we also need to express logical relationship ( <code>and</code> / <code>or</code> / <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8gVXNlIG9wZXJhdG9yICJhbmQiLgogICAgICAgICAgLy8gU2ltaWxhcmx5LCB3ZSBjYW4gYWxzbyB1c2UgIm9yIiwgIm5vdCIgaW4gdGhlIHNhbWUgcGxhY2UuCiAgICAgICAgICAvLyBCdXQgIm5vdCIgc2hvdWxkIGJlIGZvbGxvd2VkIHdpdGggYSB7Li4ufSByYXRoZXIgdGhhbiBgWy4uLl1gLgogICAgICAgICAgYW5kOiBbCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9LAogICAgICAgICAgICB7IGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMjAsICc8JzogMzAgfQogICAgICAgICAgXQogICAgICAgIH0KICAgICAgICAvLyBUaGUgY29uZGl0aW9uIGlzICJZZWFyIiBpcyAyMDExIGFuZCAiUHJpY2UiIGlzIGdyZWF0ZXIKICAgICAgICAvLyBvciBlcXVhbCB0byAyMCBidXQgbGVzcyB0aGFuIDMwLgogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> can be nested like:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>About parser:</strong></p>\n<p>Some "parser" can be specified when make value comparison. At present only supported:</p>\n<ul>\n<li><code>parser: \'time\'</code>: Parse the value to date time before comparing. The parser rule is the same as <code>echarts.time.parse</code>, where JS <code>Date</code> instance, timestamp number (in millisecond) and time string (like <code>\'2012-05-12 03:11:22\'</code>) are supported to be parse to timestamp number, while other value will be parsed to <code>NaN</code>.</li>\n<li><code>parser: \'trim\'</code>: Trim the string before making comparison. For non-string, return the original value.</li>\n<li><code>parser: \'number\'</code>: Force to convert the value to number before making comparison. If not possible to be converted to a meaningful number, converted to <code>NaN</code>. In most cases it is not necessary, because by default the value will be auto converted to number if possible before making comparison. But the default conversion is strict while this parser provide a loose strategy. If we meet the case that number string with unit suffix (like <code>\'33%\'</code>, <code>12px</code>), we should use <code>parser: \'number\'</code> to convert them to number before making comparison.</li>\n</ul>\n<p>This is an example to show the <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>Formally definition:</strong></p>\n<p>Finally, we give the formally definition of the filter transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="the-transform-%22sort%22" tabindex="-1">The transform "sort"</h2>\n<p>Another built-in transform is "sort".</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyBTb3J0IGJ5IHNjb3JlLgogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnYXNjJyB9CiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>Some extra features about "sort transform":</p>\n<ul>\n<li>Order by multiple dimensions is supported. See examples below.</li>\n<li>The sort rule:\n<ul>\n<li>By default "numeric" (that is, number and numeric-string like <code>\' 123 \'</code>) are able to sorted by numeric order.</li>\n<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>\n<li>When "numeric" is compared with "non-numeric-string", or either of them is compared with other types of value, they are not comparable. So we call the latter one as "incomparable" and treat it as "min value" or "max value" according to the prop <code>incomparable: \'min\' | \'max\'</code>. This feature usually helps to decide whether to put the empty values (like <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>) or other illegal values to the head or tail.</li>\n</ul>\n</li>\n<li><code>filter: \'time\' | \'trim\' | \'number\'</code> can be used, the same as "filter transform".\n<ul>\n<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>\n<li>If intending to sort values with unit suffix (like <code>\'33%\'</code>, <code>\'16px\'</code>), need to use <code>parser: \'number\'</code>.</li>\n</ul>\n</li>\n</ul>\n<p>See an example of multiple order:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIFNvcnQgYnkgdGhlIHR3byBkaW1lbnNpb25zLgogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>Finally, we give the formally definition of the sort transform config here:</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="use-external-transforms" tabindex="-1">Use External Transforms</h2>\n<p>Besides built-in transforms (like \'filter\', \'sort\'), we can also use external transforms to provide more powerful functionalities. Here we use a third-party library <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> as an example:</p>\n<p>This case show how to make a regression line via ecStat:</p>\n<md-code-block lang="js" code="\'Ly8gUmVnaXN0ZXIgdGhlIGV4dGVybmFsIHRyYW5zZm9ybSBhdCBmaXJzdC4KZWNoYXJ0cy5yZWdpc3RlclRyYW5zZm9ybShlY1N0YXRUcmFuc2Zvcm0oZWNTdGF0KS5yZWdyZXNzaW9uKTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyBSZWZlcmVuY2UgdGhlIHJlZ2lzdGVyZWQgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgIC8vIE5vdGUgdGhhdCBleHRlcm5hbCB0cmFuc2Zvcm0gaGFzIGEgbmFtZXNwYWNlIChsaWtlICdlY1N0YXQ6eHh4JwogICAgICAgIC8vIGhhcyBuYW1lc3BhY2UgJ2VjU3RhdCcpLgogICAgICAgIC8vIGJ1aWx0LWluIHRyYW5zZm9ybSAobGlrZSAnZmlsdGVyJywgJ3NvcnQnKSBkb2VzIG5vdCBoYXZlIGEgbmFtZXNwYWNlLgogICAgICAgIHR5cGU6ICdlY1N0YXQ6cmVncmVzc2lvbicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICAvLyBQYXJhbWV0ZXJzIG5lZWRlZCBieSB0aGUgZXh0ZXJuYWwgdHJhbnNmb3JtLgogICAgICAgICAgbWV0aG9kOiAnZXhwb25lbnRpYWwnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogeyB0eXBlOiAnY2F0ZWdvcnknIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnc2NhdHRlcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YXNldEluZGV4OiAwCiAgICB9LAogICAgewogICAgICBuYW1lOiAncmVncmVzc2lvbicsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3ltYm9sOiAnbm9uZScsCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>Examples with echarts-stat:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=data-transform-aggregate&edit=1&reset=1">Aggregate</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=bar-histogram&edit=1&reset=1">Bar histogram</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-clustering&edit=1&reset=1">Scatter clustering</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-linear-regression&edit=1&reset=1">Scatter linear regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-exponential-regression&edit=1&reset=1">Scatter exponential regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">Scatter logarithmic regression</a></li>\n<li><a href="https://echarts.apache.org/examples/en/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">Scatter polynomial regression</a></li>\n</ul>\n',postPath:"en/concepts/data-transform"}],fetch:{},error:i,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:I},{title:"入门篇",dir:o,children:[{title:"获取 ECharts",dir:C},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:l,draft:e},{title:"获取灵感",dir:d},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:c},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:r}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:b,draft:e},{title:"系列",dir:y,draft:e},{title:"样式",dir:p},{title:"数据集",dir:G},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:M,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:f},{title:"极坐标系柱状图",dir:F,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:v},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:k}]}]},{title:K,dir:g,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:g,draft:e},{title:ee,dir:ge},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:I},{title:"Basics",dir:o,children:[{title:"Download ECharts",dir:C},{title:"Import ECharts",dir:a},{title:"Resources",dir:l,draft:e},{title:"Inspiration",dir:d},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:c},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:r}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:y,draft:e},{title:"Style",dir:p},{title:"Dataset",dir:G},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:M,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:f},{title:"Bar Polar",dir:F,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:v},{title:"Ring Style",dir:x},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:k}]}]},{title:"Mobile",dir:g,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:g,draft:e},{title:ee,dir:ge},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:i}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/dataset/index.html b/handbook/en/concepts/dataset/index.html
index 8264f1e..f40ee53 100644
--- a/handbook/en/concepts/dataset/index.html
+++ b/handbook/en/concepts/dataset/index.html
@@ -3,124 +3,478 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="dataset"><a href="#dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dataset</h1>
-<p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>
-<h2 id="define-data-under-series"><a href="#define-data-under-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> under <code>series</code></h2>
-<p>If data is defined under <code>series</code>, for example:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.
-However, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p>
-<h2 id="define-data-in-dataset"><a href="#define-data-in-dataset" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Define <code>data</code> in <code>dataset</code></h2>
-<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>
-<ul>
-<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>
-<li>Divide data from other configurations. The data often change but others not. It is
-Easy to manage separately.</li>
-<li>Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.</li>
-<li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li>
-</ul>
-<p>Here is a simple <code>dataset</code> example:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>Or try to use the "array of classes" format:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="map-from-data-to-chart"><a href="#map-from-data-to-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Chart</h2>
-<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>
-<p>In short, you can set these configs of mapping:</p>
-<ul>
-<li>Specify 'column' or 'row' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>
-<li>Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li>
-</ul>
-<p>The details of the configuration are shown below:</p>
-<h2 id="map-row-or-column-of-dataset-to-series"><a href="#map-row-or-column-of-dataset-to-series" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map Row or Column of <code>dataset</code> to <code>series</code></h2>
-<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>
-<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>
-<ul>
-<li>'column': Default, the series are placed above the column of <code>dataset</code>.</li>
-<li>'row': The series is placed above the row of <code>dataset</code>.</li>
-</ul>
-<p>Check this case:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by" rel="nofollow noopener noreferrer" target="_blank">this case</a>.</p>
-<h2 id="dimension"><a href="#dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Dimension</h2>
-<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>
-<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>'score'</code>, <code>'amount'</code>, <code>'product'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p>
-<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>
-<p>Dimension type can be the following values:</p>
-<ul>
-<li><code>'number'</code>: Default, normal data.</li>
-<li><code>'ordinal'</code>: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>
-<li><code>'time'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>'time'</code>. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>'time'<code>), the dimension type will also be</code>'time'`. See <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a> for more time type support.</li>
-<li><code>'float'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'float'</code> dimension.</li>
-<li><code>'int'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'int'</code> dimension.</li>
-</ul>
-<h2 id="map-from-data-to-charts-seriesencode"><a href="#map-from-data-to-charts-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Map from Data to Charts (series.encode)</h2>
-<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> to make a mapping:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>The basic structure of <code>series.encode</code> declaration:</p>
-<ul>
-<li>To the left of the colon: Specific name of axis or label.</li>
-<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>
-</ul>
-<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>
-<p>Attribute suggested by <code>series.encode</code></p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1" rel="nofollow noopener noreferrer" target="_blank">example</a> of <code>series.encode</code>.</p>
-<h2 id="default-seriesencode"><a href="#default-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Default series.encode</h2>
-<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>
-<ul>
-<li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>
-<li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>
-</ul>
-<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
-<h2 id="some-normal-settings-of-seriesencode"><a href="#some-normal-settings-of-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Some Normal Settings of series.encode</h2>
-<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>
-<p>A:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>
-<p>A:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Q: How to set the 2nd column as a label?</p>
-<p>A:
-We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>
-<p>A:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Q: How to define the dimension name if is not included in the dataset?</p>
-<p>A:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Q: How to map the 3rd column to the size of the scatter chart?</p>
-<p>A:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>Q: I specified a mapping in encode, why it is not worked?</p>
-<p>A: Check your spelling, such as misspell the dimension name <code>'Life Expectancy'</code> to <code>'Life Expectency'</code> in encode.</p>
-<h2 id="visual-channel-mapping"><a href="#visual-channel-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Channel Mapping</h2>
-<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0" rel="nofollow noopener noreferrer" target="_blank">example</a>.</p>
-<h2 id="formats-of-charts"><a href="#formats-of-charts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Formats of Charts</h2>
-<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>
-<blockquote>
-<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> or <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a>.</p>
-</blockquote>
-<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>
-<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> in this format right now.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="how-to-reference-several-datasets"><a href="#how-to-reference-several-datasets" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>How to Reference Several Datasets</h2>
-<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a>. For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="seriesdata-in-echarts-3"><a href="#seriesdata-in-echarts-3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>series.data in ECharts 3</h2>
-<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> but not <code>dataset</code>.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>In fact, <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines" rel="nofollow noopener noreferrer" target="_blank">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData" rel="nofollow noopener noreferrer" target="_blank">appendData</a> which is not supported by <code>dataset</code>.</p>
-<h2 id="others"><a href="#others" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Others</h2>
-<p>The following charts now support dataset:
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="dataset" tabindex="-1">Dataset</h1> <p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p> <h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2> <p>If data is defined under <code>series</code>, for example:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.
+However, it is not conducive to the data sharing for multiple series as well as mapping arrangement of chart types and series based on the original data. The other disadvantage is that programmers always need to divide the data in separate series (and categories) first.</p> <h2 id="define-data-in-dataset" 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 data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li> <li>Divide data from other configurations. The data often change but others not. It is
+Easy to manage separately.</li> <li>Data can be reused by several series or component, you don't need to create copies of a large amount of data for every series.</li> <li>Support more common data format, such as a 2D array, array of classes, etc., to avoid users from converting for data format to a certain extent.</li></ul> <p>Here is a simple <code>dataset</code> example:</p> <div class="md-live layout-tb"><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 = {
+ 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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Or try to use the "array of classes" format:</p> <div class="md-live layout-tb"><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 = {
+ 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">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">93.7</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> <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 string">'2017'</span><span class="token operator">:</span> <span class="token number">55.1</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> <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">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">82.5</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> <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">,</span> <span class="token string">'2017'</span><span class="token operator">:</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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="map-from-data-to-chart" tabindex="-1">Map from Data to Chart</h2> <p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p> <p>In short, you can set these configs of mapping:</p> <ul><li>Specify 'column' or 'row' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li> <li>Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li></ul> <p>The details of the configuration are shown below:</p> <h2 id="map-row-or-column-of-dataset-to-series" tabindex="-1">Map Row or Column of <code>dataset</code> to <code>series</code></h2> <p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p> <p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p> <ul><li>'column': Default, the series are placed above the column of <code>dataset</code>.</li> <li>'row': The series is placed above the row of <code>dataset</code>.</li></ul> <p>Check this case:</p> <div class="md-live layout-tb"><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 = {
+ 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">]</span><span class="token punctuation">,</span>
+ 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><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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p> <h2 id="dimension" tabindex="-1">Dimension</h2> <p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p> <p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>'score'</code>, <code>'amount'</code>, <code>'product'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p> <p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> option1 <span class="token operator">=</span> <span class="token punctuation">{</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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p> <p>Dimension type can be the following values:</p> <ul><li><code>'number'</code>: Default, normal data.</li> <li><code>'ordinal'</code>: String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li> <li><code>'time'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>'time'</code>. For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>'time'<code>), the dimension type will also be</code>'time'`. See <a href="https://echarts.apache.org/option.html##series.data">data</a> for more time type support.</li> <li><code>'float'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'float'</code> dimension.</li> <li><code>'int'</code>: Use <code>TypedArray</code> to optimize the performance in <code>'int'</code> dimension.</li></ul> <h2 id="map-from-data-to-charts-(series.encode)" tabindex="-1">Map from Data to Charts (series.encode)</h2> <p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> to make a mapping:</p> <div class="md-live layout-tb"><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">var option = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>The basic structure of <code>series.encode</code> declaration:</p> <ul><li>To the left of the colon: Specific name of axis or label.</li> <li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li></ul> <p>Generally, the following info is not necessary to be defined. Fill in as needed.</p> <p>Attribute suggested by <code>series.encode</code></p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Supported in every coordinate and series:</span>
+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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p> <h2 id="default-series.encode" tabindex="-1">Default series.encode</h2> <p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p> <ul><li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li> <li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li></ul> <p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default">example</a>.</p> <h2 id="some-normal-settings-of-series.encode" tabindex="-1">Some Normal Settings of series.encode</h2> <p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p> <p>A:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p> <p>A:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Q: How to set the 2nd column as a label?</p> <p>A:
+We now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Q: How to show the 2nd and 3rd column in the tooltip?</p> <p>A:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Q: How to define the dimension name if is not included in the dataset?</p> <p>A:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Q: How to map the 3rd column to the size of the scatter chart?</p> <p>A:</p> <div class="md-live layout-tb"><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">var option = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Q: I specified a mapping in encode, why it is not worked?</p> <p>A: Check your spelling, such as misspell the dimension name <code>'Life Expectancy'</code> to <code>'Life Expectency'</code> in encode.</p> <h2 id="visual-channel-mapping" tabindex="-1">Visual Channel Mapping</h2> <p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p> <h2 id="formats-of-charts" tabindex="-1">Formats of Charts</h2> <p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p> <blockquote><p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv">dsv</a> or <a href="https://github.com/mholt/PapaParse">PapaParse</a>.</p></blockquote> <p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p> <p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> in this format right now.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="how-to-reference-several-datasets" tabindex="-1">How to Reference Several Datasets</h2> <p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a>. For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">// 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="series.data-in-echarts-3" tabindex="-1">series.data in ECharts 3</h2> <p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</code>.</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>In fact, <a href="https://echarts.apache.org/option.html##series.data">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData">appendData</a> which is not supported by <code>dataset</code>.</p> <h2 id="others" tabindex="-1">Others</h2> <p>The following charts now support dataset:
<code>line</code>, <code>bar</code>, <code>pie</code>, <code>scatter</code>, <code>effectScatter</code>, <code>parallel</code>, <code>candlestick</code>, <code>map</code>, <code>funnel</code>, <code>custom</code>.
-ECharts will support more charts in the future.</p>
-<p>In the end, here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-link" rel="nofollow noopener noreferrer" target="_blank">example</a> of several charts shared one <code>dataset</code> with linkage interaction.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/dataset#define-data-under-series">Define data under series</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#define-data-in-dataset">Define data in dataset</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-from-data-to-chart">Map from Data to Chart</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-row-or-column-of-dataset-to-series">Map Row or Column of dataset to series</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#dimension">Dimension</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#map-from-data-to-charts-seriesencode">Map from Data to Charts (series.encode)</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#default-seriesencode">Default series.encode</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#some-normal-settings-of-seriesencode">Some Normal Settings of series.encode</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#visual-channel-mapping">Visual Channel Mapping</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#formats-of-charts">Formats of Charts</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#how-to-reference-several-datasets">How to Reference Several Datasets</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#seriesdata-in-echarts-3">series.data in ECharts 3</a></li><li class="toc2"><a href="/handbook/en/concepts/dataset#others">Others</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/dataset.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,r,p,n,i,l,s,o,d,y,c,h,u,g,v,m,f,x,b,w,C,I,k,A,D,N,T,M,S,E,H,B,P,L,R,z,W,O,G,U,q,F,Q,_,V,J,Y,j,Z,$,X,K,ee,te,ae,re,pe,ne,ie,le,se,oe,de,ye,ce,he,ue,ge,ve,me,fe,xe,be,we,Ce,Ie,ke,Ae,De,Ne,Te,Me,Se,Ee,He,Be,Pe,Le,Re,ze,We,Oe,Ge,Ue,qe,Fe,Qe,_e,Ve,Je,Ye,je,Ze,$e,Xe,Ke,et,tt,at,rt,pt,nt,it,lt,st,ot,dt,yt,ct){return{layout:"default",data:[{article:{slug:h,toc:[{id:$,depth:2,text:"Define data under series"},{id:X,depth:2,text:"Define data in dataset"},{id:K,depth:2,text:ee},{id:te,depth:2,text:"Map Row or Column of dataset to series"},{id:ae,depth:2,text:re},{id:pe,depth:2,text:ne},{id:ie,depth:2,text:le},{id:se,depth:2,text:oe},{id:de,depth:2,text:ye},{id:ce,depth:2,text:he},{id:ue,depth:2,text:ge},{id:ve,depth:2,text:me},{id:"others",depth:2,text:"Others"}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:h},children:[{type:t,tag:n,props:{href:"#dataset",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:fe}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:" is a component dedicated to manage data. Although you can set the data in "},{type:t,tag:r,props:{},children:[{type:e,value:H}]},{type:e,value:" for every series, we recommend you use the "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:' to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.'}]},{type:e,value:a},{type:t,tag:I,props:{id:$},children:[{type:t,tag:n,props:{href:"#define-data-under-series",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:O},{type:t,tag:r,props:{},children:[{type:e,value:D}]},{type:e,value:xe},{type:t,tag:r,props:{},children:[{type:e,value:N}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"If data is defined under "},{type:t,tag:r,props:{},children:[{type:e,value:N}]},{type:e,value:", for example:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:be}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:O},{type:t,tag:r,props:{},children:[{type:e,value:D}]},{type:e,value:xe},{type:t,tag:r,props:{},children:[{type:e,value:N}]},{type:e,value:' is suitable for customization for some special data structures such as "tree", "graph" and large data.\nHowever, 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.'}]},{type:e,value:a},{type:t,tag:I,props:{id:X},children:[{type:t,tag:n,props:{href:"#define-data-in-dataset",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:O},{type:t,tag:r,props:{},children:[{type:e,value:D}]},{type:e,value:" in "},{type:t,tag:r,props:{},children:[{type:e,value:h}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Here are the advantages if you define "},{type:t,tag:r,props:{},children:[{type:e,value:D}]},{type:e,value:" in "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:":"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"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."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"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."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Here is a simple "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:" example:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Provide a set of data.\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // Declare an x-axis (category axis).\n // The category map the first row in the dataset by default.\n xAxis: { type: 'category' },\n // Declare a y-axis (value axis).\n yAxis: {},\n // Declare several 'bar' series,\n // every series will auto-map to each rows by default.\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'Or try to use the "array of classes" format:'}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // Define the dimension of array. In cartesian coordinate system,\n // if the type of x-axis is category, map the first dimension to\n // x-axis by default, the second dimension to y-axis.\n // You can also specify 'series.encode' to complete the map\n // without specify dimensions. Please see below.\n\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:e,value:a},{type:t,tag:I,props:{id:K},children:[{type:t,tag:n,props:{href:"#map-from-data-to-chart",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:ee}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"In short, you can set these configs of mapping:"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"Specify 'column' or 'row' of "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:" to map the "},{type:t,tag:r,props:{},children:[{type:e,value:N}]},{type:e,value:". You can use "},{type:t,tag:n,props:{href:we,rel:[l,s,o],target:d},children:[{type:e,value:"series.seriesLayoutBy"}]},{type:e,value:" to configure it. The default is to map according to the column."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"Rule of specifying dimension mapping: how to mapping from dimensions of 'dataset' to "},{type:t,tag:r,props:{},children:[{type:e,value:G}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"tooltip"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:U}]},{type:e,value:q},{type:t,tag:r,props:{},children:[{type:e,value:L}]},{type:e,value:". To configure the mapping, please use "},{type:t,tag:n,props:{href:Ce,rel:[l,s,o],target:d},children:[{type:e,value:E}]},{type:e,value:q},{type:t,tag:n,props:{href:F,rel:[l,s,o],target:d},children:[{type:e,value:L}]},{type:e,value:". The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in "},{type:t,tag:r,props:{},children:[{type:e,value:R}]},{type:e,value:"; three-column chart mapping with each row in "},{type:t,tag:r,props:{},children:[{type:e,value:R}]},{type:e,value:" one by one."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The details of the configuration are shown below:"}]},{type:e,value:a},{type:t,tag:I,props:{id:te},children:[{type:t,tag:n,props:{href:"#map-row-or-column-of-dataset-to-series",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:"Map Row or Column of "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:" to "},{type:t,tag:r,props:{},children:[{type:e,value:N}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"After having the dataset, you can configure flexibly: how the data map to the axis and graph series."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"You can use "},{type:t,tag:r,props:{},children:[{type:e,value:Q}]},{type:e,value:" to change the understanding of row and column of the chart. "},{type:t,tag:r,props:{},children:[{type:e,value:Q}]},{type:e,value:" can be:"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"'column': Default, the series are placed above the column of "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"'row': The series is placed above the row of "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:A}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Check this case:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // These series will show in the first coordinate, each series map a row in dataset.\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // These series will show in the second coordinate, each series map a column in dataset.\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The effect of configuration is shown in "},{type:t,tag:n,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by",rel:[l,s,o],target:d},children:[{type:e,value:"this case"}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:I,props:{id:ae},children:[{type:t,tag:n,props:{href:"#dimension",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:re}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.'}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, "},{type:t,tag:r,props:{},children:[{type:e,value:"'score'"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"'amount'"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"'product'"}]},{type:e,value:" are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in "},{type:t,tag:r,props:{},children:[{type:e,value:R}]},{type:e,value:". You can also use "},{type:t,tag:r,props:{},children:[{type:e,value:"dataset.sourceHeader: true"}]},{type:e,value:" to declare that the first column (row) represents the dimension name."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Try to use single "},{type:t,tag:r,props:{},children:[{type:e,value:"dataset.dimensions"}]},{type:e,value:" or some "},{type:t,tag:r,props:{},children:[{type:e,value:"series.dimensions"}]},{type:e,value:" to define the dimensions, therefore you can specify the name and type together."}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"var option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // can be abbreviated as 'string', to indicate dimension name 。\n 'amount',\n // Specify dimensions in 'type'.\n { name: 'product', type: 'ordinal' }\n ],\n source: []\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: []\n },\n series: {\n type: 'line',\n // series.dimensions will cover the config in dataset.dimension\n dimensions: [\n null, // use null if you do not want dimension name.\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"In most cases, you don't need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Dimension type can be the following values:"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"'number'"}]},{type:e,value:": Default, normal data."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"'ordinal'"}]},{type:e,value:": String types data like categories, text can be used on the axis only with the dimension type 'ordinal'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:_}]},{type:e,value:": To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as "},{type:t,tag:r,props:{},children:[{type:e,value:_}]},{type:e,value:". For instance, ECharts will auto-analyze if the data of this dimension is '2017-05-10'"},{type:t,tag:r,props:{},children:[{type:e,value:". If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) ="}]},{type:e,value:_},{type:t,tag:r,props:{},children:[{type:e,value:"), the dimension type will also be"}]},{type:e,value:"'time'`. See "},{type:t,tag:n,props:{href:B,rel:[l,s,o],target:d},children:[{type:e,value:D}]},{type:e,value:" for more time type support."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:Ie}]},{type:e,value:": Use "},{type:t,tag:r,props:{},children:[{type:e,value:ke}]},{type:e,value:Ae},{type:t,tag:r,props:{},children:[{type:e,value:Ie}]},{type:e,value:De}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"'int'"}]},{type:e,value:": Use "},{type:t,tag:r,props:{},children:[{type:e,value:ke}]},{type:e,value:Ae},{type:t,tag:r,props:{},children:[{type:e,value:"'int'"}]},{type:e,value:De}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:I,props:{id:pe},children:[{type:t,tag:n,props:{href:"#map-from-data-to-charts-seriesencode",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:ne}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"After understand the concept of dimension, you can use "},{type:t,tag:n,props:{href:Ce,rel:[l,s,o],target:d},children:[{type:e,value:E}]},{type:e,value:" to make a mapping:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:"var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // Map \"amount\" column to x-axis.\n x: 'amount',\n // Map \"product\" row to y-axis.\n y: 'product'\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The basic structure of "},{type:t,tag:r,props:{},children:[{type:e,value:E}]},{type:e,value:" declaration:"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"To the left of the colon: Specific name of axis or label."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array)."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Generally, the following info is not necessary to be defined. Fill in as needed."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Attribute suggested by "},{type:t,tag:r,props:{},children:[{type:e,value:E}]}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:'// Supported in every coordinate and series:\nencode: {\n // Display the value of dimension named "product" and "score" in tooltip.\n tooltip: [\'product\', \'score\']\n // Connect dimension name of "Dimension 1" and "Dimension 3" as the series name. (Avoid to repeat longer names in series.name)\n seriesName: [1, 3],\n // Means to use the value in "Dimension 2" as the id. It makes the new and old data correspond by id\n // when using setOption to update data, so that it can show animation properly.\n itemId: 2,\n // The itemName will show in the legend of Pie Charts.\n itemName: 3\n}\n\n// Grid/cartesian coordinate unique configs:\nencode: {\n // Map "Dimension 1", "Dimension 5" and "dimension named \'score\'" to x-axis:\n x: [1, 5, \'score\'],\n // Map "Dimension 0" to y-axis:\n y: 0\n}\n\n// singleAxis unique configs:\nencode: {\n single: 3\n}\n\n// Polar coordinate unique configs:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// Geo-coordinate unique configs:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// For some charts without coordinate like pie chart, funnel chart:\nencode: {\n value: 3\n}\n'}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"This is a richer "},{type:t,tag:n,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1",rel:[l,s,o],target:d},children:[{type:e,value:z}]},{type:e,value:" of "},{type:t,tag:r,props:{},children:[{type:e,value:E}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:I,props:{id:ie},children:[{type:t,tag:n,props:{href:"#default-seriesencode",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:le}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if "},{type:t,tag:r,props:{},children:[{type:e,value:E}]},{type:e,value:" is not specified. The default rule is:"}]},{type:e,value:a},{type:t,tag:S,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = 'category'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes."}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row)."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"While the default rule cannot fulfill the requirements, you can configure "},{type:t,tag:r,props:{},children:[{type:e,value:"encode"}]},{type:e,value:" by yourself, which is not complicate. Here is an "},{type:t,tag:n,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=dataset-default",rel:[l,s,o],target:d},children:[{type:e,value:z}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:I,props:{id:se},children:[{type:t,tag:n,props:{href:"#some-normal-settings-of-seriesencode",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:oe}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to set the 3rd column as x-axis, 5th column as y-axis?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:P}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"option = {\n series: {\n // dimensionIndex count from 0, so the 3rd line is dimensions[2].\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to set the 3rd row as x-axis, 5th row as y-axis?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:P}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"option = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to set the 2nd column as a label?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"A:\nWe now support to trace value from specific dimension for "},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html##series.label.formatter",rel:[l,s,o],target:d},children:[{type:e,value:"label.formatter"}]},{type:e,value:":"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"series: {\n label: {\n // `'{@score}'` means the value in the dimension named \"score\".\n // `'{@[4]}'` means the value in dimension 4.\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to show the 2nd and 3rd column in the tooltip?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:P}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"option = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to define the dimension name if is not included in the dataset?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:P}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"var option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: How to map the 3rd column to the size of the scatter chart?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:P}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:T,props:{lang:v,layout:M},children:[{type:e,value:"var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // means the 3rd column\n min: 2, // lower bound\n max: 15, // higher bound\n inRange: {\n // Size of the bubble.\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Q: I specified a mapping in encode, why it is not worked?"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"A: Check your spelling, such as misspell the dimension name "},{type:t,tag:r,props:{},children:[{type:e,value:"'Life Expectancy'"}]},{type:e,value:" to "},{type:t,tag:r,props:{},children:[{type:e,value:"'Life Expectency'"}]},{type:e,value:" in encode."}]},{type:e,value:a},{type:t,tag:I,props:{id:de},children:[{type:t,tag:n,props:{href:"#visual-channel-mapping",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:ye}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"We can map visual channel by using "},{type:t,tag:n,props:{href:F,rel:[l,s,o],target:d},children:[{type:e,value:L}]},{type:e,value:". Check details in the "},{type:t,tag:n,props:{href:F,rel:[l,s,o],target:d},children:[{type:e,value:L}]},{type:e,value:" document. Here is an "},{type:t,tag:n,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0",rel:[l,s,o],target:d},children:[{type:e,value:z}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:I,props:{id:ce},children:[{type:t,tag:n,props:{href:"#formats-of-charts",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:he}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like 'MS Excel' and 'Numbers' all uses a two-dimensional table. Their data can be exported to JSON format and input to "},{type:t,tag:r,props:{},children:[{type:e,value:R}]},{type:e,value:" and avoid some steps of data processing."}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"You can switch .csv file to JSON using tools like "},{type:t,tag:n,props:{href:"https://github.com/d3/d3-dsv",rel:[l,s,o],target:d},children:[{type:e,value:"dsv"}]},{type:e,value:" or "},{type:t,tag:n,props:{href:"https://github.com/mholt/PapaParse",rel:[l,s,o],target:d},children:[{type:e,value:"PapaParse"}]},{type:e,value:A}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don't support "},{type:t,tag:n,props:{href:we,rel:[l,s,o],target:d},children:[{type:e,value:Q}]},{type:e,value:" in this format right now."}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"dataset: [\n {\n // column by column key-value array is a normal format\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // row by row key-value\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n"}]}]},{type:e,value:a},{type:t,tag:I,props:{id:ue},children:[{type:t,tag:n,props:{href:"#how-to-reference-several-datasets",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:ge}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"ECharts support to define several datasets at the same moment. Series can assign the one to reference by "},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html##series.datasetIndex",rel:[l,s,o],target:d},children:[{type:e,value:"series.datasetIndex"}]},{type:e,value:". For example:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:"var option = {\n dataset: [\n {\n // 1st Dataset\n source: []\n },\n {\n // 2nd Dataset\n source: []\n },\n {\n // 3rd Dataset。\n source: []\n }\n ],\n series: [\n {\n // Use 2nd dataset\n datasetIndex: 2\n },\n {\n // Use 1st dataset\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:I,props:{id:ve},children:[{type:t,tag:n,props:{href:"#seriesdata-in-echarts-3",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:me}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the "},{type:t,tag:n,props:{href:B,rel:[l,s,o],target:d},children:[{type:e,value:H}]},{type:e,value:", then use "},{type:t,tag:n,props:{href:B,rel:[l,s,o],target:d},children:[{type:e,value:H}]},{type:e,value:" but not "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:u,props:{className:[g]},children:[{type:t,tag:k,props:{lang:v,"line-highlights":y,"file-name":y},children:[{type:e,value:be}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"In fact, "},{type:t,tag:n,props:{href:B,rel:[l,s,o],target:d},children:[{type:e,value:H}]},{type:e,value:" is an important setting method which will always exist. Some special non-table format chart like "},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html##series-treemap",rel:[l,s,o],target:d},children:[{type:e,value:"treemap"}]},{type:e,value:C},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html##series-graph",rel:[l,s,o],target:d},children:[{type:e,value:"graph"}]},{type:e,value:q},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html##series-lines",rel:[l,s,o],target:d},children:[{type:e,value:"lines"}]},{type:e,value:" still cannot be edit in dataset, you still need to use "},{type:t,tag:n,props:{href:B,rel:[l,s,o],target:d},children:[{type:e,value:H}]},{type:e,value:". In another way, for render huge amount of data (over a million), you need to use "},{type:t,tag:n,props:{href:"https://echarts.apache.org/api.html#echartsInstance.appendData",rel:[l,s,o],target:d},children:[{type:e,value:"appendData"}]},{type:e,value:" which is not supported by "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:I,props:{id:"others"},children:[{type:t,tag:n,props:{href:"#others",ariaHidden:m,tabIndex:f},children:[{type:t,tag:x,props:{className:[b,w]},children:[]}]},{type:e,value:"Others"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The following charts now support dataset:\n"},{type:t,tag:r,props:{},children:[{type:e,value:V}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:J}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:Y}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:j}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"effectScatter"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"parallel"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"candlestick"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"map"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"funnel"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"custom"}]},{type:e,value:".\nECharts will support more charts in the future."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"In the end, here is an "},{type:t,tag:n,props:{href:"https://echarts.apache.org/examples/en/editor.html?c=dataset-link",rel:[l,s,o],target:d},children:[{type:e,value:z}]},{type:e,value:" of several charts shared one "},{type:t,tag:r,props:{},children:[{type:e,value:h}]},{type:e,value:" with linkage interaction."}]}]},dir:"/en/concepts",path:Ne,extension:".md",createdAt:"2021-06-04T12:26:37.918Z",updatedAt:"2021-07-21T15:13:37.999Z"},postPath:"en/concepts/dataset"}],fetch:{},error:Te,state:{filled:!1,docVersion:y,ghVersion:y,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:Me},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:Se},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:Ee,draft:i},{title:"获取灵感",dir:He},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:Be,children:[{title:Pe,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:Le},{title:"ECharts 5 升级指南",dir:Re}]}]},{title:"概念篇",dir:ze,children:[{title:"图表容器及大小",dir:We},{title:"配置项",dir:Oe,draft:i},{title:"系列",dir:N,draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:h},{title:"数据转换",dir:Ge},{title:"坐标系",dir:Ue,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:Z},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:qe,children:[{title:"常用图表类型",dir:Fe,children:[{title:"柱状图",dir:J,children:[{title:"基础柱状图",dir:Qe},{title:"堆叠柱状图",dir:_e},{title:"动态排序柱状图",dir:Ve,draft:i},{title:"极坐标系柱状图",dir:Je,draft:i},{title:"瀑布图",dir:Ye,draft:i},{title:"视觉映射的柱状图",dir:Z,draft:i}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:je},{title:"堆叠折线图",dir:Ze},{title:"区域面积图",dir:$e},{title:"平滑曲线图",dir:Xe},{title:"阶梯线图",dir:Ke}]},{title:"饼图",dir:Y,children:[{title:"基础饼图",dir:et},{title:"圆环图",dir:tt},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:at}]}]},{title:"移动端优化",dir:W,draft:i},{title:"跨平台方案",dir:rt,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:D,children:[{title:"动态的异步数据",dir:pt},{title:"数据下钻",dir:nt,draft:i}]},{title:"标签",dir:U,children:[{title:"富文本标签",dir:it}]},{title:"交互",dir:lt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:st,draft:i}]}]},{title:"最佳实践",dir:ot,children:[{title:"移动端优化",dir:W,draft:i},{title:dt,dir:yt},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ct}]}],en:[{title:"Get Started",dir:Me},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:Se},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:Ee,draft:i},{title:"Inspiration",dir:He},{title:"Get Help",dir:"help"},{title:"Release Note",dir:Be,children:[{title:Pe,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:Le},{title:"ECharts 5 Upgrade Guide",dir:Re}]}]},{title:"Concepts",dir:ze,children:[{title:"Chart Container",dir:We},{title:"Chart Option",dir:Oe,draft:i},{title:"Series",dir:N,draft:i},{title:"Style",dir:"style"},{title:fe,dir:h},{title:"Data Transform",dir:Ge},{title:"Coordinate",dir:Ue,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:Z},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:qe,children:[{title:"Common Charts",dir:Fe,children:[{title:"Bar",dir:J,children:[{title:"Basic Bar",dir:Qe},{title:"Stacked Bar",dir:_e},{title:"Bar Racing",dir:Ve,draft:i},{title:"Bar Polar",dir:Je,draft:i},{title:"Waterfall",dir:Ye,draft:i}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:je},{title:"Stacked Line",dir:Ze},{title:"Area Chart",dir:$e},{title:"Smoothed Line",dir:Xe},{title:"Step Line",dir:Ke}]},{title:"Pie",dir:Y,children:[{title:"Basic Pie",dir:et},{title:"Ring Style",dir:tt},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:at}]}]},{title:"Mobile",dir:W,draft:i},{title:"Cross Platform",dir:rt,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:D,children:[{title:"Dynamic Data",dir:pt},{title:"Drilldown",dir:nt,draft:i}]},{title:"Label",dir:U,children:[{title:"Rich Text",dir:it}]},{title:"Interaction",dir:lt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:st,draft:i}]}]},{title:"Best Practice",dir:ot,children:[{title:"Mobile Optimization",dir:W,draft:i},{title:dt,dir:yt},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ct}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:Ne,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:Te},content:{dbHash:"570e7c13"}}}}("text","element","\n","code","p","a",!0,"nofollow","noopener","noreferrer","_blank","","li","dataset","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link",", ","h2","md-code-block",".","data","series","md-live","tb","ul","series.encode","series.data","https://echarts.apache.org/option.html##series.data","A:","visualMap","dataset.source","example","mobile","Define ","axis","label"," and ","https://echarts.apache.org/option.html##visualMap","seriesLayoutBy","'time'","line","bar","pie","scatter","visual-map","define-data-under-series","define-data-in-dataset","map-from-data-to-chart","Map from Data to Chart","map-row-or-column-of-dataset-to-series","dimension","Dimension","map-from-data-to-charts-seriesencode","Map from Data to Charts (series.encode)","default-seriesencode","Default series.encode","some-normal-settings-of-seriesencode","Some Normal Settings of series.encode","visual-channel-mapping","Visual Channel Mapping","formats-of-charts","Formats of Charts","how-to-reference-several-datasets","How to Reference Several Datasets","seriesdata-in-echarts-3","series.data in ECharts 3","Dataset"," under ","option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n","https://echarts.apache.org/option.html##series.seriesLayoutBy","https://echarts.apache.org/option.html##series.encode","'float'","TypedArray"," to optimize the performance in "," dimension.","/en/concepts/dataset",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+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="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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,o,d,s,n,g,l,c,r,I,h,C,p,A,m,u,b,y,B,w,f,G,Z,W,X,v,L,H,N,J,Y,M,F,z,S,x,V,D,R,O,j,k,E,Q,K,T,U,P,q,_,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="dataset" tabindex="-1">Dataset</h1>\n<p><code>dataset</code> is a component dedicated to manage data. Although you can set the data in <code>series.data</code> for every series, we recommend you use the <code>dataset</code> to manage the data since ECharts 4 so that the data can be reused by multiple components and convenient for the separation of "data and configs". After all, data is the most common part to be changed while other configurations will mostly not change at runtime.</p>\n<h2 id="define-data-under-series" tabindex="-1">Define <code>data</code> under <code>series</code></h2>\n<p>If data is defined under <code>series</code>, for example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>Define <code>data</code> under <code>series</code> is suitable for customization for some special data structures such as "tree", "graph" and large data.\nHowever, 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>\n<h2 id="define-data-in-dataset" tabindex="-1">Define <code>data</code> in <code>dataset</code></h2>\n<p>Here are the advantages if you define <code>data</code> in <code>dataset</code>:</p>\n<ul>\n<li>Follow the ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</li>\n<li>Divide data from other configurations. The data often change but others not. It is\nEasy to manage separately.</li>\n<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>\n<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>\n</ul>\n<p>Here is a simple <code>dataset</code> example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gUHJvdmlkZSBhIHNldCBvZiBkYXRhLgogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgLy8gRGVjbGFyZSBhbiB4LWF4aXMgKGNhdGVnb3J5IGF4aXMpLgogIC8vIFRoZSBjYXRlZ29yeSBtYXAgdGhlIGZpcnN0IHJvdyBpbiB0aGUgZGF0YXNldCBieSBkZWZhdWx0LgogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyBEZWNsYXJlIGEgeS1heGlzICh2YWx1ZSBheGlzKS4KICB5QXhpczoge30sCiAgLy8gRGVjbGFyZSBzZXZlcmFsICdiYXInIHNlcmllcywKICAvLyBldmVyeSBzZXJpZXMgd2lsbCBhdXRvLW1hcCB0byBlYWNoIHJvd3MgYnkgZGVmYXVsdC4KICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Or try to use the "array of classes" format:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8gRGVmaW5lIHRoZSBkaW1lbnNpb24gb2YgYXJyYXkuIEluIGNhcnRlc2lhbiBjb29yZGluYXRlIHN5c3RlbSwKICAgIC8vIGlmIHRoZSB0eXBlIG9mIHgtYXhpcyBpcyBjYXRlZ29yeSwgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8KICAgIC8vIHgtYXhpcyBieSBkZWZhdWx0LCB0aGUgc2Vjb25kIGRpbWVuc2lvbiB0byB5LWF4aXMuCiAgICAvLyBZb3UgY2FuIGFsc28gc3BlY2lmeSAnc2VyaWVzLmVuY29kZScgdG8gY29tcGxldGUgdGhlIG1hcAogICAgLy8gd2l0aG91dCBzcGVjaWZ5IGRpbWVuc2lvbnMuIFBsZWFzZSBzZWUgYmVsb3cuCgogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="map-from-data-to-chart" tabindex="-1">Map from Data to Chart</h2>\n<p>The ideas of data visualization: (I) Provide the data, (II)Mapping from data to visual to become a chart.</p>\n<p>In short, you can set these configs of mapping:</p>\n<ul>\n<li>Specify \'column\' or \'row\' of <code>dataset</code> to map the <code>series</code>. You can use <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> to configure it. The default is to map according to the column.</li>\n<li>Rule of specifying dimension mapping: how to mapping from dimensions of \'dataset\' to <code>axis</code>, <code>tooltip</code>, <code>label</code> and <code>visualMap</code>. To configure the mapping, please use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> and <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. The previous case did not give the mapping configuration so that ECharts will follow the default: if x-axis is category, mapping to the first row in <code>dataset.source</code>; three-column chart mapping with each row in <code>dataset.source</code> one by one.</li>\n</ul>\n<p>The details of the configuration are shown below:</p>\n<h2 id="map-row-or-column-of-dataset-to-series" tabindex="-1">Map Row or Column of <code>dataset</code> to <code>series</code></h2>\n<p>After having the dataset, you can configure flexibly: how the data map to the axis and graph series.</p>\n<p>You can use <code>seriesLayoutBy</code> to change the understanding of row and column of the chart. <code>seriesLayoutBy</code> can be:</p>\n<ul>\n<li>\'column\': Default, the series are placed above the column of <code>dataset</code>.</li>\n<li>\'row\': The series is placed above the row of <code>dataset</code>.</li>\n</ul>\n<p>Check this case:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8gVGhlc2Ugc2VyaWVzIHdpbGwgc2hvdyBpbiB0aGUgZmlyc3QgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgcm93IGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyBUaGVzZSBzZXJpZXMgd2lsbCBzaG93IGluIHRoZSBzZWNvbmQgY29vcmRpbmF0ZSwgZWFjaCBzZXJpZXMgbWFwIGEgY29sdW1uIGluIGRhdGFzZXQuCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0sCiAgICB7IHR5cGU6ICdiYXInLCB4QXhpc0luZGV4OiAxLCB5QXhpc0luZGV4OiAxIH0KICBdCn07\'" v-bind="{}" />\n<p>The effect of configuration is shown in <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-series-layout-by">this case</a>.</p>\n<h2 id="dimension" tabindex="-1">Dimension</h2>\n<p>Most of the data described in commonly used charts is a "two-dimensional table" structure, in the previous case, we use a 2D array to contain a two-dimensional table. Now, when we map a series to a column, that column was called a "dimension" and each row was called "item", vice versa.</p>\n<p>The dimension can have their name to display in the chart. Dimension name can be defined in the first column (row). In the previous case, <code>\'score\'</code>, <code>\'amount\'</code>, <code>\'product\'</code> are the name of dimensions. The actual data locate from the second row. ECharts will automatically check if the first column (row) contained dimension name in <code>dataset.source</code>. You can also use <code>dataset.sourceHeader: true</code> to declare that the first column (row) represents the dimension name.</p>\n<p>Try to use single <code>dataset.dimensions</code> or some <code>series.dimensions</code> to define the dimensions, therefore you can specify the name and type together.</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8gY2FuIGJlIGFiYnJldmlhdGVkIGFzICdzdHJpbmcnLCB0byBpbmRpY2F0ZSBkaW1lbnNpb24gbmFtZSDjgIIKICAgICAgJ2Ftb3VudCcsCiAgICAgIC8vIFNwZWNpZnkgZGltZW5zaW9ucyBpbiAndHlwZScuCiAgICAgIHsgbmFtZTogJ3Byb2R1Y3QnLCB0eXBlOiAnb3JkaW5hbCcgfQogICAgXSwKICAgIHNvdXJjZTogW10KICB9CiAgLy8gLi4uCn07Cgp2YXIgb3B0aW9uMiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFtdCiAgfSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdsaW5lJywKICAgIC8vIHNlcmllcy5kaW1lbnNpb25zIHdpbGwgY292ZXIgdGhlIGNvbmZpZyBpbiBkYXRhc2V0LmRpbWVuc2lvbgogICAgZGltZW5zaW9uczogWwogICAgICBudWxsLCAvLyB1c2UgbnVsbCBpZiB5b3UgZG8gbm90IHdhbnQgZGltZW5zaW9uIG5hbWUuCiAgICAgICdhbW91bnQnLAogICAgICB7IG5hbWU6ICdwcm9kdWN0JywgdHlwZTogJ29yZGluYWwnIH0KICAgIF0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>In most cases, you don\'t need to define the dimension type because the ECharts will automatically judge it. If the judgment is inaccurate, you can define it manually.</p>\n<p>Dimension type can be the following values:</p>\n<ul>\n<li><code>\'number\'</code>: Default, normal data.</li>\n<li><code>\'ordinal\'</code>: String types data like categories, text can be used on the axis only with the dimension type \'ordinal\'. ECharts will try to judge this type automatically but might be inaccurate, so you can specify manually.</li>\n<li><code>\'time\'</code>: To represent time data, ECharts can automatically analyze data as timestamp if the dimension type is defined as <code>\'time\'</code>. For instance, ECharts will auto-analyze if the data of this dimension is \'2017-05-10\'<code>. If the dimension is used as time axis ([axis.type](https://echarts.apache.org/option.html##xAxis.type) =</code>\'time\'<code>), the dimension type will also be</code>\'time\'`. See <a href="https://echarts.apache.org/option.html##series.data">data</a> for more time type support.</li>\n<li><code>\'float\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'float\'</code> dimension.</li>\n<li><code>\'int\'</code>: Use <code>TypedArray</code> to optimize the performance in <code>\'int\'</code> dimension.</li>\n</ul>\n<h2 id="map-from-data-to-charts-(series.encode)" tabindex="-1">Map from Data to Charts (series.encode)</h2>\n<p>After understand the concept of dimension, you can use <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> to make a mapping:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8gTWFwICJhbW91bnQiIGNvbHVtbiB0byB4LWF4aXMuCiAgICAgICAgeDogJ2Ftb3VudCcsCiAgICAgICAgLy8gTWFwICJwcm9kdWN0IiByb3cgdG8geS1heGlzLgogICAgICAgIHk6ICdwcm9kdWN0JwogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>The basic structure of <code>series.encode</code> declaration:</p>\n<ul>\n<li>To the left of the colon: Specific name of axis or label.</li>\n<li>To the right of the colon: Dimension name (string) or number(int, count from 0), to specify one or several dimensions (using array).</li>\n</ul>\n<p>Generally, the following info is not necessary to be defined. Fill in as needed.</p>\n<p>Attribute suggested by <code>series.encode</code></p>\n<md-code-block lang="js" code="\'Ly8gU3VwcG9ydGVkIGluIGV2ZXJ5IGNvb3JkaW5hdGUgYW5kIHNlcmllczoKZW5jb2RlOiB7CiAgLy8gRGlzcGxheSB0aGUgdmFsdWUgb2YgZGltZW5zaW9uIG5hbWVkICJwcm9kdWN0IiBhbmQgInNjb3JlIiBpbiB0b29sdGlwLgogIHRvb2x0aXA6IFsncHJvZHVjdCcsICdzY29yZSddCiAgLy8gQ29ubmVjdCBkaW1lbnNpb24gbmFtZSBvZiAiRGltZW5zaW9uIDEiIGFuZCAiRGltZW5zaW9uIDMiIGFzIHRoZSBzZXJpZXMgbmFtZS4gKEF2b2lkIHRvIHJlcGVhdCBsb25nZXIgbmFtZXMgaW4gc2VyaWVzLm5hbWUpCiAgc2VyaWVzTmFtZTogWzEsIDNdLAogIC8vIE1lYW5zIHRvIHVzZSB0aGUgdmFsdWUgaW4gIkRpbWVuc2lvbiAyIiBhcyB0aGUgaWQuIEl0IG1ha2VzIHRoZSBuZXcgYW5kIG9sZCBkYXRhIGNvcnJlc3BvbmQgYnkgaWQKCS8vIHdoZW4gdXNpbmcgc2V0T3B0aW9uIHRvIHVwZGF0ZSBkYXRhLCBzbyB0aGF0IGl0IGNhbiBzaG93IGFuaW1hdGlvbiBwcm9wZXJseS4KICBpdGVtSWQ6IDIsCiAgLy8gVGhlIGl0ZW1OYW1lIHdpbGwgc2hvdyBpbiB0aGUgbGVnZW5kIG9mIFBpZSBDaGFydHMuCiAgaXRlbU5hbWU6IDMKfQoKLy8gR3JpZC9jYXJ0ZXNpYW4gY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgLy8gTWFwICJEaW1lbnNpb24gMSIsICJEaW1lbnNpb24gNSIgYW5kICJkaW1lbnNpb24gbmFtZWQgJ3Njb3JlJyIgdG8geC1heGlzOgogIHg6IFsxLCA1LCAnc2NvcmUnXSwKICAvLyBNYXAgIkRpbWVuc2lvbiAwIiB0byB5LWF4aXM6CiAgeTogMAp9CgovLyBzaW5nbGVBeGlzIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBzaW5nbGU6IDMKfQoKLy8gUG9sYXIgY29vcmRpbmF0ZSB1bmlxdWUgY29uZmlnczoKZW5jb2RlOiB7CiAgcmFkaXVzOiAzLAogIGFuZ2xlOiAyCn0KCi8vIEdlby1jb29yZGluYXRlIHVuaXF1ZSBjb25maWdzOgplbmNvZGU6IHsKICBsbmc6IDMsCiAgbGF0OiAyCn0KCi8vIEZvciBzb21lIGNoYXJ0cyB3aXRob3V0IGNvb3JkaW5hdGUgbGlrZSBwaWUgY2hhcnQsIGZ1bm5lbCBjaGFydDoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>This is a richer <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode1">example</a> of <code>series.encode</code>.</p>\n<h2 id="default-series.encode" tabindex="-1">Default series.encode</h2>\n<p>It is worth mentioning that ECharts will use some default mapping rules for some general charts (line, bar, scatter, candlestick, etc.) if <code>series.encode</code> is not specified. The default rule is:</p>\n<ul>\n<li>In coordinate system (eg. Cartesian, Polar): + If there is category axis (axis.type = \'category\'), map the first column(row) to the axis and each subsequent column(row) to each series. + If both axes is not the category, then map every two columns in one series to two axes.</li>\n<li>Without axis (such as Pie Chart): + Use the first column(row) as the name, second column(row) as value. ECharts will not set the name if there is only one column(row).</li>\n</ul>\n<p>While the default rule cannot fulfill the requirements, you can configure <code>encode</code> by yourself, which is not complicate. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-default">example</a>.</p>\n<h2 id="some-normal-settings-of-series.encode" tabindex="-1">Some Normal Settings of series.encode</h2>\n<p>Q: How to set the 3rd column as x-axis, 5th column as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8gZGltZW5zaW9uSW5kZXggY291bnQgZnJvbSAwLCBzbyB0aGUgM3JkIGxpbmUgaXMgZGltZW5zaW9uc1syXS4KICAgIGVuY29kZTogeyB4OiAyLCB5OiA0IH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to set the 3rd row as x-axis, 5th row as y-axis?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to set the 2nd column as a label?</p>\n<p>A:\nWe now support to trace value from specific dimension for <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gdGhlIGRpbWVuc2lvbiBuYW1lZCAic2NvcmUiLgogICAgLy8gYCd7QFs0XX0nYCBtZWFucyB0aGUgdmFsdWUgaW4gZGltZW5zaW9uIDQuCiAgICBmb3JtYXR0ZXI6ICdhYWF7QHByb2R1Y3R9YmJie0BzY29yZX1jY2N7QFs0XX1kZGQnOwogIH0KfQ\'" line-highlights="\'\'" />\n<p>Q: How to show the 2nd and 3rd column in the tooltip?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>Q: How to define the dimension name if is not included in the dataset?</p>\n<p>A:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Q: How to map the 3rd column to the size of the scatter chart?</p>\n<p>A:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8gbWVhbnMgdGhlIDNyZCBjb2x1bW4KICAgIG1pbjogMiwgLy8gbG93ZXIgYm91bmQKICAgIG1heDogMTUsIC8vIGhpZ2hlciBib3VuZAogICAgaW5SYW5nZTogewogICAgICAvLyBTaXplIG9mIHRoZSBidWJibGUuCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>Q: I specified a mapping in encode, why it is not worked?</p>\n<p>A: Check your spelling, such as misspell the dimension name <code>\'Life Expectancy\'</code> to <code>\'Life Expectency\'</code> in encode.</p>\n<h2 id="visual-channel-mapping" tabindex="-1">Visual Channel Mapping</h2>\n<p>We can map visual channel by using <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a>. Check details in the <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> document. Here is an <a href="https://echarts.apache.org/examples/en/editor.html?c=dataset-encode0">example</a>.</p>\n<h2 id="formats-of-charts" tabindex="-1">Formats of Charts</h2>\n<p>In most of the normal chart, the data is suitable to be described in the form of a two-dimensional table. That well-known software like \'MS Excel\' and \'Numbers\' all uses a two-dimensional table. Their data can be exported to JSON format and input to <code>dataset.source</code> and avoid some steps of data processing.</p>\n<blockquote>\n<p>You can switch .csv file to JSON using tools like <a href="https://github.com/d3/d3-dsv">dsv</a> or <a href="https://github.com/mholt/PapaParse">PapaParse</a>.</p>\n</blockquote>\n<p>As the example shown behind, in the data transmission of JavaScript, the two-dimensional data can be stored directly by two-dimensional array.</p>\n<p>Expect from the two-dimensional array, the dataset also supports using key-value which is also a common way. However, we don\'t support <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> in this format right now.</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIGNvbHVtbiBieSBjb2x1bW4ga2V5LXZhbHVlIGFycmF5IGlzIGEgbm9ybWFsIGZvcm1hdAogICAgc291cmNlOiBbCiAgICAgIHsgcHJvZHVjdDogJ01hdGNoYSBMYXR0ZScsIGNvdW50OiA4MjMsIHNjb3JlOiA5NS44IH0sCiAgICAgIHsgcHJvZHVjdDogJ01pbGsgVGVhJywgY291bnQ6IDIzNSwgc2NvcmU6IDgxLjQgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgY291bnQ6IDEwNDIsIHNjb3JlOiA5MS4yIH0sCiAgICAgIHsgcHJvZHVjdDogJ1dhbG51dCBCcm93bmllJywgY291bnQ6IDk4OCwgc2NvcmU6IDc2LjkgfQogICAgXQogIH0sCiAgewogICAgLy8gcm93IGJ5IHJvdyBrZXktdmFsdWUKICAgIHNvdXJjZTogewogICAgICBwcm9kdWN0OiBbJ01hdGNoYSBMYXR0ZScsICdNaWxrIFRlYScsICdDaGVlc2UgQ29jb2EnLCAnV2FsbnV0IEJyb3duaWUnXSwKICAgICAgY291bnQ6IFs4MjMsIDIzNSwgMTA0MiwgOTg4XSwKICAgICAgc2NvcmU6IFs5NS44LCA4MS40LCA5MS4yLCA3Ni45XQogICAgfQogIH0KXTs\'" line-highlights="\'\'" />\n<h2 id="how-to-reference-several-datasets" tabindex="-1">How to Reference Several Datasets</h2>\n<p>ECharts support to define several datasets at the same moment. Series can assign the one to reference by <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a>. For example:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIDFzdCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDJuZCBEYXRhc2V0CiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIDNyZCBEYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyBVc2UgMm5kIGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAyCiAgICB9LAogICAgewogICAgICAvLyBVc2UgMXN0IGRhdGFzZXQKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="series.data-in-echarts-3" tabindex="-1">series.data in ECharts 3</h2>\n<p>ECharts 4 still support the data declaration way in ECharts 3. If the series has already declared the <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, then use <a href="https://echarts.apache.org/option.html##series.data">series.data</a> but not <code>dataset</code>.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>In fact, <a href="https://echarts.apache.org/option.html##series.data">series.data</a> is an important setting method which will always exist. Some special non-table format chart like <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>, <a href="https://echarts.apache.org/option.html##series-graph">graph</a> and <a href="https://echarts.apache.org/option.html##series-lines">lines</a> still cannot be edit in dataset, you still need to use <a href="https://echarts.apache.org/option.html##series.data">series.data</a>. In another way, for render huge amount of data (over a million), you need to use <a href="https://echarts.apache.org/api.html#echartsInstance.appendData">appendData</a> which is not supported by <code>dataset</code>.</p>\n<h2 id="others" tabindex="-1">Others</h2>\n<p>The following charts now support dataset:\n<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>.\nECharts will support more charts in the future.</p>\n<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>\n',postPath:"en/concepts/dataset"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:o},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:s},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:g,draft:e},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:c},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:I},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:C}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:b},{title:"数据集",dir:y},{title:"数据转换",dir:B},{title:"坐标系",dir:w,draft:e},{title:"坐标轴",dir:f},{title:"视觉映射",dir:i},{title:"图例",dir:G},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:X,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:D},{title:"南丁格尔图(玫瑰图)",dir:R}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:j}]}]},{title:k,dir:t,draft:e},{title:"跨平台方案",dir:E,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:K,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:o},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:s},{title:"Import ECharts",dir:n},{title:"Resources",dir:g,draft:e},{title:"Inspiration",dir:l},{title:"Get Help",dir:c},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:I},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:C}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:y},{title:"Data Transform",dir:B},{title:"Coordinate",dir:w,draft:e},{title:"Axis",dir:f},{title:"Visual Mapping",dir:i},{title:"Legend",dir:G},{title:"Event and Action",dir:Z}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:X,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:J}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:D},{title:"Rose Style",dir:R}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:E,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:K,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/event/index.html b/handbook/en/concepts/event/index.html
index 2c2ca38..1b1cbac 100644
--- a/handbook/en/concepts/event/index.html
+++ b/handbook/en/concepts/event/index.html
@@ -3,56 +3,318 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="event-and-action"><a href="#event-and-action" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Event and Action</h1>
-<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>
-<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'datazoom'</a> triggered while zooming the data area.</p>
-<h2 id="handling-the-mouse-events"><a href="#handling-the-mouse-events" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Handling the Mouse Events</h2>
-<p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>All mouse events included <code>params</code> which contained the data of the object.</p>
-<p>Format:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Identify where the mouse clicked.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Use <code>query</code> to trigger callback of the specified component:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>
-<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Such as:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>For example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="event-of-component-interaction"><a href="#event-of-component-interaction" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Event of Component Interaction</h2>
-<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> document.</p>
-<p>Here is an example of listening to legend event:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="writing-code-to-trigger-component-action-manually"><a href="#writing-code-to-trigger-component-action-manually" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Writing Code to Trigger Component Action Manually</h2>
-<p>You can trigger events such as <code>'legendselectchanged'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>
-<p>In ECharts <code>myChart.dispatchAction({ type: '' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>
-<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action" rel="nofollow noopener noreferrer" target="_blank">action</a>.</p>
-<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="listen-to-events-on-the-blank-area"><a href="#listen-to-events-on-the-blank-area" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Listen to Events on the Blank Area</h2>
-<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>
-<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>
-<p>Having zrender events, we can implement listen to events from the blank as follows:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/event#handling-the-mouse-events">Handling the Mouse Events</a></li><li class="toc2"><a href="/handbook/en/concepts/event#event-of-component-interaction">Event of Component Interaction</a></li><li class="toc2"><a href="/handbook/en/concepts/event#writing-code-to-trigger-component-action-manually">Writing Code to Trigger Component Action Manually</a></li><li class="toc2"><a href="/handbook/en/concepts/event#listen-to-events-on-the-blank-area">Listen to Events on the Blank Area</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/event.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,n,a,i,r,l,p,s,d,o,c,h,y,g,u,m,v,f,b,w,k,x,C,I,T,A,N,S,E,P,B,D,H,L,O,z,R,M,_,U,V,j,$,q,G,W,Z,F,X,Y,J,K,Q,ee,te,ne,ae,ie,re,le,pe,se,de,oe,ce,he,ye,ge,ue,me,ve,fe,be,we,ke,xe,Ce,Ie,Te,Ae,Ne,Se,Ee,Pe,Be){return{layout:"default",data:[{article:{slug:C,toc:[{id:N,depth:2,text:S},{id:E,depth:2,text:P},{id:B,depth:2,text:D},{id:H,depth:2,text:L}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"event-and-action"},children:[{type:t,tag:c,props:{href:"#event-and-action",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[u,m]},children:[]}]},{type:e,value:O}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to "},{type:t,tag:l,props:{},children:[{type:e,value:"click"}]},{type:e,value:" event."}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"myChart.on('click', function(params) {\n // Print name in console\n console.log(params.name);\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as "},{type:t,tag:c,props:{href:z,rel:[v,f,b],target:w},children:[{type:e,value:R}]},{type:e,value:" triggered while changing the legend selected (please notice that "},{type:t,tag:l,props:{},children:[{type:e,value:"legendselected"}]},{type:e,value:" won't be triggered in this situation), "},{type:t,tag:c,props:{href:z,rel:[v,f,b],target:w},children:[{type:e,value:"'datazoom'"}]},{type:e,value:" triggered while zooming the data area."}]},{type:e,value:n},{type:t,tag:k,props:{id:N},children:[{type:t,tag:c,props:{href:"#handling-the-mouse-events",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[u,m]},children:[]}]},{type:e,value:S}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"ECharts support general mouse events: "},{type:t,tag:l,props:{},children:[{type:e,value:"'click'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'dblclick'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mousedown'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mousemove'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseup'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseover'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseout'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'globalout'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'contextmenu'"}]},{type:e,value:". This is an example of opening the search result page after clicking the bar chart."}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"// Init the ECharts base on DOM\nvar myChart = echarts.init(document.getElementById('main'));\n\n// Config\nvar option = {\n xAxis: {\n data: [\n 'Shirt',\n 'Wool sweater',\n 'Chiffon shirt',\n 'Pants',\n 'High-heeled shoes',\n 'socks'\n ]\n },\n yAxis: {},\n series: [\n {\n name: 'Sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// Use the option and data to display the chart\nmyChart.setOption(option);\n// Click and jump to Baidu search website\nmyChart.on('click', function(params) {\n window.open(\n 'https://www.google.com/search?q=' + encodeURIComponent(params.name)\n );\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"All mouse events included "},{type:t,tag:l,props:{},children:[{type:e,value:"params"}]},{type:e,value:" which contained the data of the object."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Format:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"type EventParams = {\n // The component name clicked,\n // component type, could be 'series'、'markLine'、'markPoint'、'timeLine', etc..\n componentType: string,\n // series type, could be 'line'、'bar'、'pie', etc.. Works when componentType is 'series'.\n seriesType: string,\n // the index in option.series. Works when componentType is 'series'.\n seriesIndex: number,\n // series name, works when componentType is 'series'.\n seriesName: string,\n // name of data (categories).\n name: string,\n // the index in 'data' array.\n dataIndex: number,\n // incoming raw data item\n data: Object,\n // charts like 'sankey' and 'graph' included nodeData and edgeData as the same time.\n // dataType can be 'node' or 'edge', indicates whether the current click is on node or edge.\n // most of charts have one kind of data, the dataType is meaningless\n dataType: string,\n // incoming data value\n value: number | Array,\n // color of the shape, works when componentType is 'series'.\n color: string\n};\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Identify where the mouse clicked."}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"myChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // Clicked on the markPoint\n if (params.seriesIndex === 5) {\n // clicked on the markPoint of the series with index = 5\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // clicked at the edge of graph.\n } else {\n // clicked at the node of graph.\n }\n }\n }\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Use "},{type:t,tag:l,props:{},children:[{type:e,value:I}]},{type:e,value:" to trigger callback of the specified component:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.on(eventName, query, handler);\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:t,tag:l,props:{},children:[{type:e,value:I}]},{type:e,value:" can be "},{type:t,tag:l,props:{},children:[{type:e,value:M}]},{type:e,value:_},{type:t,tag:l,props:{},children:[{type:e,value:U}]},{type:e,value:"."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:V},{type:t,tag:l,props:{},children:[{type:e,value:M}]},{type:e,value:", the format can be "},{type:t,tag:l,props:{},children:[{type:e,value:"mainType"}]},{type:e,value:_},{type:t,tag:l,props:{},children:[{type:e,value:"mainType.subType"}]},{type:e,value:", such as:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.on('click', 'series', function () {...});\nchart.on('click', 'series.line', function () {...});\nchart.on('click', 'dataZoom', function () {...});\nchart.on('click', 'xAxis.category', function () {...});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:V},{type:t,tag:l,props:{},children:[{type:e,value:U}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:I}]},{type:e,value:" can include more than one attribute:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"{\n ${mainType}Index: number // component index\n ${mainType}Name: string // component name\n ${mainType}Id: string // component id\n dataIndex: number // data item index\n name: string // data item name\n dataType: string // date item type, such as 'node', 'edge'\n element: string // name of element in custom series.\n}\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Such as:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // when elements in series named 'uuu' triggered 'mouseover'\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:T}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // when data named 'xx' in series index 1 triggered 'mouseover'.\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:T}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // call this method while the node of graph was clicked.\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // call this method while the edge of graph was clicked.\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:T}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // when data named 'my_el' triggered 'mouseup'.\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"myChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // using pie chart to show the data distribution in one column.\n data: [detail.data]\n }\n ]\n });\n });\n});\n"}]}]},{type:e,value:n},{type:t,tag:k,props:{id:E},children:[{type:t,tag:c,props:{href:"#event-of-component-interaction",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[u,m]},children:[]}]},{type:e,value:P}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the "},{type:t,tag:c,props:{href:"https://echarts.apache.org//api.html#events",rel:[v,f,b],target:w},children:[{type:e,value:"events"}]},{type:e,value:" document."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Here is an example of listening to legend event:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"// Show/hide the legend only trigger legendselectchanged event\nmyChart.on('legendselectchanged', function(params) {\n // State if legend is selected.\n var isSelected = params.selected[params.name];\n // print in the console.\n console.log(\n (isSelected ? 'Selected' : 'Not Selected') + 'legend' + params.name\n );\n // print for all legends.\n console.log(params.selected);\n});\n"}]}]},{type:e,value:n},{type:t,tag:k,props:{id:B},children:[{type:t,tag:c,props:{href:"#writing-code-to-trigger-component-action-manually",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[u,m]},children:[]}]},{type:e,value:D}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"You can trigger events such as "},{type:t,tag:l,props:{},children:[{type:e,value:R}]},{type:e,value:" not only by the user but also with code manually. It can be used to display the tooltip, select the legend."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"In ECharts "},{type:t,tag:l,props:{},children:[{type:e,value:"myChart.dispatchAction({ type: '' })"}]},{type:e,value:" is used to trigger the behavior. This manages all actions and can record the behaviors conveniently."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Commonly used behavior and corresponding parameters are listed in "},{type:t,tag:c,props:{href:"https://echarts.apache.org//api.html#action",rel:[v,f,b],target:w},children:[{type:e,value:"action"}]},{type:e,value:"."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"The following example shows how to highlight each sector one by one in the pie chart using "},{type:t,tag:l,props:{},children:[{type:e,value:"dispatchAction"}]},{type:e,value:"."}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:"md-live",props:{lang:d,layout:"tb"},children:[{type:e,value:"option = {\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: [\n 'Direct Access',\n 'Email Marketing',\n 'Affiliate Ads',\n 'Video Ads',\n 'Search Engines'\n ]\n },\n series: [\n {\n name: 'Access Source',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: 'Direct Access' },\n { value: 310, name: 'Email Marketing' },\n { value: 234, name: 'Affiliate Ads' },\n { value: 135, name: 'Video Ads' },\n { value: 1548, name: 'Search Engines' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n"}]}]},{type:e,value:n},{type:t,tag:k,props:{id:H},children:[{type:t,tag:c,props:{href:"#listen-to-events-on-the-blank-area",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:g,props:{className:[u,m]},children:[]}]},{type:e,value:L}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events."}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:"myChart.getZr().on('click', function(event) {\n // This listener is listening to a `zrender event`.\n});\nmyChart.on('click', function(event) {\n // This listener is listening to a `echarts event`.\n});\n"}]}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event."}]},{type:e,value:n},{type:t,tag:i,props:{},children:[{type:e,value:"Having zrender events, we can implement listen to events from the blank as follows:"}]},{type:e,value:n},{type:t,tag:p,props:{className:[s]},children:[{type:t,tag:o,props:{lang:d,"line-highlights":a,"file-name":a},children:[{type:e,value:'myChart.getZr().on(\'click\', function(event) {\n // No "target" means that mouse/pointer is not on\n // any of the graphic elements, which is "blank".\n if (!event.target) {\n // Click on blank. Do something.\n }\n});\n'}]}]}]},dir:"/en/concepts",path:j,extension:".md",createdAt:"2021-06-04T12:26:37.919Z",updatedAt:"2021-07-21T11:13:55.330Z"},postPath:"en/concepts/event"}],fetch:{},error:$,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:q},{title:"入门篇",dir:G,children:[{title:"获取 ECharts",dir:W},{title:"在项目中引入 ECharts",dir:Z},{title:"资源列表",dir:F,draft:r},{title:"获取灵感",dir:X},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:Y,children:[{title:J,draft:r,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:K},{title:"ECharts 5 升级指南",dir:Q}]}]},{title:"概念篇",dir:ee,children:[{title:"图表容器及大小",dir:te},{title:"配置项",dir:ne,draft:r},{title:"系列",dir:"series",draft:r},{title:"样式",dir:"style"},{title:"数据集",dir:ae},{title:"数据转换",dir:ie},{title:"坐标系",dir:re,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:A},{title:"图例",dir:"legend"},{title:"事件与行为",dir:C}]},{title:"应用篇",dir:le,children:[{title:"常用图表类型",dir:pe,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:se},{title:"堆叠柱状图",dir:de},{title:"动态排序柱状图",dir:oe,draft:r},{title:"极坐标系柱状图",dir:ce,draft:r},{title:"瀑布图",dir:he,draft:r},{title:"视觉映射的柱状图",dir:A,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ye},{title:"堆叠折线图",dir:ge},{title:"区域面积图",dir:ue},{title:"平滑曲线图",dir:me},{title:"阶梯线图",dir:ve}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:fe},{title:"圆环图",dir:be},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:we,children:[{title:"基础散点图",dir:ke}]}]},{title:"移动端优化",dir:x,draft:r},{title:"跨平台方案",dir:xe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Ce},{title:"数据下钻",dir:Ie,draft:r}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Te}]},{title:"交互",dir:Ae,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ne,draft:r}]}]},{title:"最佳实践",dir:Se,children:[{title:"移动端优化",dir:x,draft:r},{title:Ee,dir:Pe},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Be}]}],en:[{title:"Get Started",dir:q},{title:"Basics",dir:G,children:[{title:"Download ECharts",dir:W},{title:"Import ECharts",dir:Z},{title:"Resources",dir:F,draft:r},{title:"Inspiration",dir:X},{title:"Get Help",dir:"help"},{title:"Release Note",dir:Y,children:[{title:J,draft:r,dir:"5-2-0"},{title:"ECharts 5 Features",dir:K},{title:"ECharts 5 Upgrade Guide",dir:Q}]}]},{title:"Concepts",dir:ee,children:[{title:"Chart Container",dir:te},{title:"Chart Option",dir:ne,draft:r},{title:"Series",dir:"series",draft:r},{title:"Style",dir:"style"},{title:"Dataset",dir:ae},{title:"Data Transform",dir:ie},{title:"Coordinate",dir:re,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:A},{title:"Legend",dir:"legend"},{title:O,dir:C}]},{title:"Application",dir:le,children:[{title:"Common Charts",dir:pe,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:se},{title:"Stacked Bar",dir:de},{title:"Bar Racing",dir:oe,draft:r},{title:"Bar Polar",dir:ce,draft:r},{title:"Waterfall",dir:he,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ye},{title:"Stacked Line",dir:ge},{title:"Area Chart",dir:ue},{title:"Smoothed Line",dir:me},{title:"Step Line",dir:ve}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:fe},{title:"Ring Style",dir:be},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:we,children:[{title:"Basic Scatter",dir:ke}]}]},{title:"Mobile",dir:x,draft:r},{title:"Cross Platform",dir:xe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Ce},{title:"Drilldown",dir:Ie,draft:r}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Te}]},{title:"Interaction",dir:Ae,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ne,draft:r}]}]},{title:"Best Practice",dir:Se,children:[{title:"Mobile Optimization",dir:x,draft:r},{title:Ee,dir:Pe},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Be}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:j,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:$},content:{dbHash:"570e7c13"}}}}("text","element","\n","","p",!0,"code","div","nuxt-content-highlight","js","md-code-block","a",", ","true","span","icon","icon-link","nofollow","noopener","noreferrer","_blank","h2","mobile","event","query","For example:","visual-map","handling-the-mouse-events","Handling the Mouse Events","event-of-component-interaction","Event of Component Interaction","writing-code-to-trigger-component-action-manually","Writing Code to Trigger Component Action Manually","listen-to-events-on-the-blank-area","Listen to Events on the Blank Area","Event and Action","https://echarts.apache.org/api.html#events.legendselectchanged","'legendselectchanged'","string"," or ","Object","If it is ","/en/concepts/event",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="event-and-action" tabindex="-1">Event and Action</h1> <p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p> <p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won't be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> triggered while zooming the data area.</p> <h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2> <p>ECharts support general mouse events: <code>'click'</code>, <code>'dblclick'</code>, <code>'mousedown'</code>, <code>'mousemove'</code>, <code>'mouseup'</code>, <code>'mouseover'</code>, <code>'mouseout'</code>, <code>'globalout'</code>, <code>'contextmenu'</code>. This is an example of opening the search result page after clicking the bar chart.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Init the ECharts base on DOM</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 punctuation">;</span>
+
+<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 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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>All mouse events included <code>params</code> which contained the data of the object.</p> <p>Format:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>type EventParams <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Identify where the mouse clicked.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Use <code>query</code> to trigger callback of the specified component:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> query<span class="token punctuation">,</span> handler<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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><code>query</code> can be <code>string</code> or <code>Object</code>.</p> <p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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'</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><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 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">...</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 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">...</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 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><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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token punctuation">{</span>
+ $<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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Such as:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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">}</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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>For example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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">parmas</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ $<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 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>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2> <p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p> <p>Here is an example of listening to legend event:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Show/hide the legend only trigger legendselectchanged event</span>
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2> <p>You can trigger events such as <code>'legendselectchanged'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p> <p>In ECharts <code>myChart.dispatchAction({ type: '' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p> <p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p> <p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p> <div class="md-live layout-tb"><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 = {
+ 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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2> <p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p> <p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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 `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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p> <p>Having zrender events, we can implement listen to events from the blank as follows:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">// 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/event.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,g,l,d,a,n,c,I,o,C,r,h,s,b,A,p,Z,m,G,B,y,u,W,X,w,Y,v,V,K,J,H,L,k,R,N,F,S,f,U,z,j,x,Q,T,M,E,O,D,P,_,q,$,ee,te,ie){return{layout:"default",data:[{html:'<h1 id="event-and-action" tabindex="-1">Event and Action</h1>\n<p>Users can trigger corresponding events by their operation. The developer can handle the callback function by listening to these events, such as jump to a new website, pop-up a dialog box, or drill down the data.</p>\n<p>The name of the event and the DOM event is both lowercase string. Here is an example of binding listening to <code>click</code> event.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyBQcmludCBuYW1lIGluIGNvbnNvbGUKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>There are two kinds of event in ECharts, one happened when the user clicks the mouse or hover the elements in charts, the other happened while the user triggered some interactive actions. Such as <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> triggered while changing the legend selected (please notice that <code>legendselected</code> won\'t be triggered in this situation), <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> triggered while zooming the data area.</p>\n<h2 id="handling-the-mouse-events" tabindex="-1">Handling the Mouse Events</h2>\n<p>ECharts support general mouse events: <code>\'click\'</code>, <code>\'dblclick\'</code>, <code>\'mousedown\'</code>, <code>\'mousemove\'</code>, <code>\'mouseup\'</code>, <code>\'mouseover\'</code>, <code>\'mouseout\'</code>, <code>\'globalout\'</code>, <code>\'contextmenu\'</code>. This is an example of opening the search result page after clicking the bar chart.</p>\n<md-code-block lang="js" code="\'Ly8gSW5pdCB0aGUgRUNoYXJ0cyBiYXNlIG9uIERPTQp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIENvbmZpZwp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbCiAgICAgICdTaGlydCcsCiAgICAgICdXb29sIHN3ZWF0ZXInLAogICAgICAnQ2hpZmZvbiBzaGlydCcsCiAgICAgICdQYW50cycsCiAgICAgICdIaWdoLWhlZWxlZCBzaG9lcycsCiAgICAgICdzb2NrcycKICAgIF0KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ1NhbGVzJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICB9CiAgXQp9OwovLyBVc2UgdGhlIG9wdGlvbiBhbmQgZGF0YSB0byBkaXNwbGF5IHRoZSBjaGFydApteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwovLyBDbGljayBhbmQganVtcCB0byBCYWlkdSBzZWFyY2ggd2Vic2l0ZQpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKAogICAgJ2h0dHBzOi8vd3d3Lmdvb2dsZS5jb20vc2VhcmNoP3E9JyArIGVuY29kZVVSSUNvbXBvbmVudChwYXJhbXMubmFtZSkKICApOwp9KTs\'" line-highlights="\'\'" />\n<p>All mouse events included <code>params</code> which contained the data of the object.</p>\n<p>Format:</p>\n<md-code-block lang="js" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyBUaGUgY29tcG9uZW50IG5hbWUgY2xpY2tlZCwKICAvLyBjb21wb25lbnQgdHlwZSwgY291bGQgYmUgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnLCBldGMuLgogIGNvbXBvbmVudFR5cGU6IHN0cmluZywKICAvLyBzZXJpZXMgdHlwZSwgY291bGQgYmUgJ2xpbmUn44CBJ2JhcifjgIEncGllJywgZXRjLi4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc1R5cGU6IHN0cmluZywKICAvLyB0aGUgaW5kZXggaW4gb3B0aW9uLnNlcmllcy4gV29ya3Mgd2hlbiBjb21wb25lbnRUeXBlIGlzICdzZXJpZXMnLgogIHNlcmllc0luZGV4OiBudW1iZXIsCiAgLy8gc2VyaWVzIG5hbWUsIHdvcmtzIHdoZW4gY29tcG9uZW50VHlwZSBpcyAnc2VyaWVzJy4KICBzZXJpZXNOYW1lOiBzdHJpbmcsCiAgLy8gbmFtZSBvZiBkYXRhIChjYXRlZ29yaWVzKS4KICBuYW1lOiBzdHJpbmcsCiAgLy8gdGhlIGluZGV4IGluICdkYXRhJyBhcnJheS4KICBkYXRhSW5kZXg6IG51bWJlciwKICAvLyBpbmNvbWluZyByYXcgZGF0YSBpdGVtCiAgZGF0YTogT2JqZWN0LAogIC8vIGNoYXJ0cyBsaWtlICdzYW5rZXknIGFuZCAnZ3JhcGgnIGluY2x1ZGVkIG5vZGVEYXRhIGFuZCBlZGdlRGF0YSBhcyB0aGUgc2FtZSB0aW1lLgogIC8vIGRhdGFUeXBlIGNhbiBiZSAnbm9kZScgb3IgJ2VkZ2UnLCBpbmRpY2F0ZXMgd2hldGhlciB0aGUgY3VycmVudCBjbGljayBpcyBvbiBub2RlIG9yIGVkZ2UuCiAgLy8gbW9zdCBvZiBjaGFydHMgaGF2ZSBvbmUga2luZCBvZiBkYXRhLCB0aGUgZGF0YVR5cGUgaXMgbWVhbmluZ2xlc3MKICBkYXRhVHlwZTogc3RyaW5nLAogIC8vIGluY29taW5nIGRhdGEgdmFsdWUKICB2YWx1ZTogbnVtYmVyIHwgQXJyYXksCiAgLy8gY29sb3Igb2YgdGhlIHNoYXBlLCB3b3JrcyB3aGVuIGNvbXBvbmVudFR5cGUgaXMgJ3NlcmllcycuCiAgY29sb3I6IHN0cmluZwp9Ow\'" line-highlights="\'\'" />\n<p>Identify where the mouse clicked.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyBDbGlja2VkIG9uIHRoZSBtYXJrUG9pbnQKICAgIGlmIChwYXJhbXMuc2VyaWVzSW5kZXggPT09IDUpIHsKICAgICAgLy8gY2xpY2tlZCBvbiB0aGUgbWFya1BvaW50IG9mIHRoZSBzZXJpZXMgd2l0aCBpbmRleCA9IDUKICAgIH0KICB9IGVsc2UgaWYgKHBhcmFtcy5jb21wb25lbnRUeXBlID09PSAnc2VyaWVzJykgewogICAgaWYgKHBhcmFtcy5zZXJpZXNUeXBlID09PSAnZ3JhcGgnKSB7CiAgICAgIGlmIChwYXJhbXMuZGF0YVR5cGUgPT09ICdlZGdlJykgewogICAgICAgIC8vIGNsaWNrZWQgYXQgdGhlIGVkZ2Ugb2YgZ3JhcGguCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8gY2xpY2tlZCBhdCB0aGUgbm9kZSBvZiBncmFwaC4KICAgICAgfQogICAgfQogIH0KfSk7\'" line-highlights="\'\'" />\n<p>Use <code>query</code> to trigger callback of the specified component:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> can be <code>string</code> or <code>Object</code>.</p>\n<p>If it is <code>string</code>, the format can be <code>mainType</code> or <code>mainType.subType</code>, such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uICgpIHsuLi59KTsKY2hhcnQub24oJ2NsaWNrJywgJ3Nlcmllcy5saW5lJywgZnVuY3Rpb24gKCkgey4uLn0pOwpjaGFydC5vbignY2xpY2snLCAnZGF0YVpvb20nLCBmdW5jdGlvbiAoKSB7Li4ufSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uICgpIHsuLi59KTs\'" line-highlights="\'\'" />\n<p>If it is <code>Object</code>, <code>query</code> can include more than one attribute:</p>\n<md-code-block lang="js" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyBjb21wb25lbnQgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyBjb21wb25lbnQgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyBjb21wb25lbnQgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyBkYXRhIGl0ZW0gaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8gZGF0YSBpdGVtIG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIGRhdGUgaXRlbSB0eXBlLCBzdWNoIGFzICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIG5hbWUgb2YgZWxlbWVudCBpbiBjdXN0b20gc2VyaWVzLgp9\'" line-highlights="\'\'" />\n<p>Such as:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gd2hlbiBlbGVtZW50cyBpbiBzZXJpZXMgbmFtZWQgJ3V1dScgdHJpZ2dlcmVkICdtb3VzZW92ZXInCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAneHgnIGluIHNlcmllcyBpbmRleCAxIHRyaWdnZXJlZCAnbW91c2VvdmVyJy4KfSk7\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyBjYWxsIHRoaXMgbWV0aG9kIHdoaWxlIHRoZSBub2RlIG9mIGdyYXBoIHdhcyBjbGlja2VkLgp9KTsKY2hhcnQub24oJ2NsaWNrJywgeyBkYXRhVHlwZTogJ2VkZ2UnIH0sIGZ1bmN0aW9uKCkgewogIC8vIGNhbGwgdGhpcyBtZXRob2Qgd2hpbGUgdGhlIGVkZ2Ugb2YgZ3JhcGggd2FzIGNsaWNrZWQuCn0pOw\'" line-highlights="\'\'" />\n<p>For example:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHdoZW4gZGF0YSBuYW1lZCAnbXlfZWwnIHRyaWdnZXJlZCAnbW91c2V1cCcuCn0pOw\'" line-highlights="\'\'" />\n<p>You can display a popup, update the charts using the query result from your database by the data name or series name in the callback function. Here is an example:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyB1c2luZyBwaWUgY2hhcnQgdG8gc2hvdyB0aGUgZGF0YSBkaXN0cmlidXRpb24gaW4gb25lIGNvbHVtbi4KICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="event-of-component-interaction" tabindex="-1">Event of Component Interaction</h2>\n<p>All Component Interaction in ECharts will trigger a corresponding event. Normal events and parameters are listed in the <a href="https://echarts.apache.org//api.html#events">events</a> document.</p>\n<p>Here is an example of listening to legend event:</p>\n<md-code-block lang="js" code="\'Ly8gU2hvdy9oaWRlIHRoZSBsZWdlbmQgb25seSB0cmlnZ2VyIGxlZ2VuZHNlbGVjdGNoYW5nZWQgZXZlbnQKbXlDaGFydC5vbignbGVnZW5kc2VsZWN0Y2hhbmdlZCcsIGZ1bmN0aW9uKHBhcmFtcykgewogIC8vIFN0YXRlIGlmIGxlZ2VuZCBpcyBzZWxlY3RlZC4KICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8gcHJpbnQgaW4gdGhlIGNvbnNvbGUuCiAgY29uc29sZS5sb2coCiAgICAoaXNTZWxlY3RlZCA_ICdTZWxlY3RlZCcgOiAnTm90IFNlbGVjdGVkJykgKyAnbGVnZW5kJyArIHBhcmFtcy5uYW1lCiAgKTsKICAvLyBwcmludCBmb3IgYWxsIGxlZ2VuZHMuCiAgY29uc29sZS5sb2cocGFyYW1zLnNlbGVjdGVkKTsKfSk7\'" line-highlights="\'\'" />\n<h2 id="writing-code-to-trigger-component-action-manually" tabindex="-1">Writing Code to Trigger Component Action Manually</h2>\n<p>You can trigger events such as <code>\'legendselectchanged\'</code> not only by the user but also with code manually. It can be used to display the tooltip, select the legend.</p>\n<p>In ECharts <code>myChart.dispatchAction({ type: \'\' })</code> is used to trigger the behavior. This manages all actions and can record the behaviors conveniently.</p>\n<p>Commonly used behavior and corresponding parameters are listed in <a href="https://echarts.apache.org//api.html#action">action</a>.</p>\n<p>The following example shows how to highlight each sector one by one in the pie chart using <code>dispatchAction</code>.</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdpdGVtJywKICAgIGZvcm1hdHRlcjogJ3thfSA8YnIvPntifSA6IHtjfSAoe2R9JSknCiAgfSwKICBsZWdlbmQ6IHsKICAgIG9yaWVudDogJ3ZlcnRpY2FsJywKICAgIGxlZnQ6ICdsZWZ0JywKICAgIGRhdGE6IFsKICAgICAgJ0RpcmVjdCBBY2Nlc3MnLAogICAgICAnRW1haWwgTWFya2V0aW5nJywKICAgICAgJ0FmZmlsaWF0ZSBBZHMnLAogICAgICAnVmlkZW8gQWRzJywKICAgICAgJ1NlYXJjaCBFbmdpbmVzJwogICAgXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdBY2Nlc3MgU291cmNlJywKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIHJhZGl1czogJzU1JScsCiAgICAgIGNlbnRlcjogWyc1MCUnLCAnNjAlJ10sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdEaXJlY3QgQWNjZXNzJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0VtYWlsIE1hcmtldGluZycgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICdBZmZpbGlhdGUgQWRzJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ1ZpZGVvIEFkcycgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAnU2VhcmNoIEVuZ2luZXMnIH0KICAgICAgXSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBpdGVtU3R5bGU6IHsKICAgICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgwLCAwLCAwLCAwLjUpJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0KfTsKCmxldCBjdXJyZW50SW5kZXggPSAtMTsKCnNldEludGVydmFsKGZ1bmN0aW9uKCkgewogIHZhciBkYXRhTGVuID0gb3B0aW9uLnNlcmllc1swXS5kYXRhLmxlbmd0aDsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdkb3ducGxheScsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogY3VycmVudEluZGV4CiAgfSk7CiAgY3VycmVudEluZGV4ID0gKGN1cnJlbnRJbmRleCArIDEpICUgZGF0YUxlbjsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWdobGlnaHQnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="listen-to-events-on-the-blank-area" tabindex="-1">Listen to Events on the Blank Area</h2>\n<p>Sometimes developers need to listen to the events that are triggered from the blank of the canvas. For example, need to reset the chart when users click on the blank area.</p>\n<p>Before we talk about this feature, we need to clarify two kinds of events: zrender events and echarts events.</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgenJlbmRlciBldmVudGAuCn0pOwpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gVGhpcyBsaXN0ZW5lciBpcyBsaXN0ZW5pbmcgdG8gYSBgZWNoYXJ0cyBldmVudGAuCn0pOw\'" line-highlights="\'\'" />\n<p>zrender events are different from echarts events. The former one are triggered when mouse/pointer is at everywhere, while the latter one can only be triggered when mouse/pointer is at the graphic elements. In fact, echarts events are implemented based on zrender events, that is, when a zrender events is triggered at a graphic element, echarts will trigger a echarts event.</p>\n<p>Having zrender events, we can implement listen to events from the blank as follows:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8gTm8gInRhcmdldCIgbWVhbnMgdGhhdCBtb3VzZS9wb2ludGVyIGlzIG5vdCBvbgogIC8vIGFueSBvZiB0aGUgZ3JhcGhpYyBlbGVtZW50cywgd2hpY2ggaXMgImJsYW5rIi4KICBpZiAoIWV2ZW50LnRhcmdldCkgewogICAgLy8gQ2xpY2sgb24gYmxhbmsuIERvIHNvbWV0aGluZy4KICB9Cn0pOw\'" line-highlights="\'\'" />\n',postPath:"en/concepts/event"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:e},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:o},{title:"版本特性",dir:C,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:s}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:e},{title:"系列",dir:Z,draft:e},{title:"样式",dir:m},{title:"数据集",dir:G},{title:"数据转换",dir:B},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:u},{title:"视觉映射",dir:i},{title:"图例",dir:W},{title:"事件与行为",dir:X}]},{title:"应用篇",dir:w,children:[{title:"常用图表类型",dir:Y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:V},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:J,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:i,draft:e}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:N},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:f},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:x}]}]},{title:Q,dir:t,draft:e},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:E,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:D,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:Q,dir:t,draft:e},{title:ee,dir:te},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ie}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:e},{title:"Inspiration",dir:I},{title:"Get Help",dir:o},{title:"What's New",dir:C,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:s}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:e},{title:"Series",dir:Z,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:G},{title:"Data Transform",dir:B},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:u},{title:"Visual Mapping",dir:i},{title:"Legend",dir:W},{title:"Event and Action",dir:X}]},{title:"Application",dir:w,children:[{title:"Common Charts",dir:Y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:V},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:J,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:N},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:f},{title:"Ring Style",dir:U},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:x}]}]},{title:"Mobile",dir:t,draft:e},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:E,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:D,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:e},{title:ee,dir:te},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ie}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/legend/index.html b/handbook/en/concepts/legend/index.html
index fd937b9..467b0e8 100644
--- a/handbook/en/concepts/legend/index.html
+++ b/handbook/en/concepts/legend/index.html
@@ -3,29 +3,121 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="legend"><a aria-hidden="true" href="#legend" tabindex="-1"><span class="icon icon-link"></span></a>Legend</h1>
-<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p>
-<h2 id="layout"><a aria-hidden="true" href="#layout" tabindex="-1"><span class="icon icon-link"></span></a>Layout</h2>
-<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>Use scrollable control if there are many legends.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="style"><a aria-hidden="true" href="#style" tabindex="-1"><span class="icon icon-link"></span></a>Style</h2>
-<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>
-<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png">
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="interactive"><a aria-hidden="true" href="#interactive" tabindex="-1"><span class="icon icon-link"></span></a>Interactive</h2>
-<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="tips"><a aria-hidden="true" href="#tips" tabindex="-1"><span class="icon icon-link"></span></a>Tips</h2>
-<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/legend#layout">Layout</a></li><li class="toc2"><a href="/handbook/en/concepts/legend#style">Style</a></li><li class="toc2"><a href="/handbook/en/concepts/legend#interactive">Interactive</a></li><li class="toc2"><a href="/handbook/en/concepts/legend#tips">Tips</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/legend.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,n,d,l,o,p,s,c,h,g,y,u,f,v,m,b,L,x,C,k,B,w,A,S,P,E,N,D,R,T,H,I,_,M,z,G,V,U,W,F,O,Z,$,j,X,q,J,K,Q,Y,ee,te,ie,re,ae,ne,de,le,oe,pe,se,ce,he,ge,ye,ue,fe,ve,me,be,Le,xe){return{layout:"default",data:[{article:{slug:u,toc:[{id:x,depth:2,text:C},{id:f,depth:2,text:b},{id:k,depth:2,text:B},{id:w,depth:2,text:A}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:u},children:[{type:t,tag:p,props:{ariaHidden:s,href:"#legend",tabIndex:-1},children:[{type:t,tag:c,props:{className:[h,g]},children:[]}]},{type:e,value:S}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart."}]},{type:e,value:r},{type:t,tag:v,props:{id:x},children:[{type:t,tag:p,props:{ariaHidden:s,href:"#layout",tabIndex:-1},children:[{type:t,tag:c,props:{className:[h,g]},children:[]}]},{type:e,value:C}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:"}]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:"md-live",props:{lang:o,layout:"tb"},children:[{type:e,value:"option = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"Use scrollable control if there are many legends."}]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:y,props:{lang:o,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['Legend A', 'Legend B', 'Legend C' /* ... */, , 'Legend x']\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:r},{type:t,tag:v,props:{id:f},children:[{type:t,tag:p,props:{ariaHidden:s,href:"#style",tabIndex:-1},children:[{type:t,tag:c,props:{className:[h,g]},children:[]}]},{type:e,value:b}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"For dark color background, use a light color for the background layer and text while changing the background to translucent."}]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:y,props:{lang:o,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"The color of legend has many ways to design. For different charts, the legend style can be different."}]},{type:e,value:r},{type:t,tag:"img",props:{"max-width":"830",width:"80%",height:"80%",src:"images/design/legend/charts_sign_img04.png"},children:[]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:y,props:{lang:o,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:r},{type:t,tag:v,props:{id:k},children:[{type:t,tag:p,props:{ariaHidden:s,href:"#interactive",tabIndex:-1},children:[{type:t,tag:c,props:{className:[h,g]},children:[]}]},{type:e,value:B}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:"}]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:y,props:{lang:o,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n legend: {\n data: ['Legend A', 'Legend B', 'Legend C'],\n selected: {\n 'Legend A': true,\n 'Legend B': true,\n 'Legend C': false\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:r},{type:t,tag:v,props:{id:w},children:[{type:t,tag:p,props:{ariaHidden:s,href:"#tips",tabIndex:-1},children:[{type:t,tag:c,props:{className:[h,g]},children:[]}]},{type:e,value:A}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished."}]},{type:e,value:r},{type:t,tag:d,props:{className:[l]},children:[{type:t,tag:y,props:{lang:o,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n legend: {\n data: [\n {\n name: 'Legend A',\n icon: 'rect'\n },\n {\n name: 'Legend B',\n icon: 'circle'\n },\n {\n name: 'Legend C',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: 'Legend A'\n // ...\n },\n {\n name: 'Legend B'\n // ...\n },\n {\n name: 'Legend C'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:r},{type:t,tag:n,props:{},children:[{type:e,value:"While there is only one kind of data in the chart, use the chart title rather than the legend to explain it."}]}]},dir:"/en/concepts",path:P,extension:".md",createdAt:"2021-06-04T12:26:37.919Z",updatedAt:"2021-07-29T06:23:03.268Z"},postPath:"en/concepts/legend"}],fetch:{},error:E,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:N},{title:"入门篇",dir:D,children:[{title:"获取 ECharts",dir:R},{title:"在项目中引入 ECharts",dir:T},{title:"资源列表",dir:H,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:_},{title:"版本介绍",dir:M,children:[{title:z,draft:i,dir:G},{title:"ECharts 5 新特性",dir:V},{title:"ECharts 5 升级指南",dir:U}]}]},{title:"概念篇",dir:W,children:[{title:"图表容器及大小",dir:F},{title:"配置项",dir:O,draft:i},{title:"系列",dir:Z,draft:i},{title:"样式",dir:f},{title:"数据集",dir:$},{title:"数据转换",dir:j},{title:"坐标系",dir:X,draft:i},{title:"坐标轴",dir:q},{title:"视觉映射",dir:L},{title:"图例",dir:u},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Q},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:ee,draft:i},{title:"极坐标系柱状图",dir:te,draft:i},{title:"瀑布图",dir:ie,draft:i},{title:"视觉映射的柱状图",dir:L,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:re},{title:"堆叠折线图",dir:ae},{title:"区域面积图",dir:ne},{title:"平滑曲线图",dir:de},{title:"阶梯线图",dir:le}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:oe},{title:"圆环图",dir:pe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:se,children:[{title:"基础散点图",dir:ce}]}]},{title:"移动端优化",dir:m,draft:i},{title:"跨平台方案",dir:he,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ge},{title:"数据下钻",dir:ye,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ue}]},{title:"交互",dir:fe,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ve,draft:i}]}]},{title:"最佳实践",dir:me,children:[{title:"移动端优化",dir:m,draft:i},{title:be,dir:Le},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:xe}]}],en:[{title:"Get Started",dir:N},{title:"Basics",dir:D,children:[{title:"Download ECharts",dir:R},{title:"Import ECharts",dir:T},{title:"Resources",dir:H,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:_},{title:"Release Note",dir:M,children:[{title:z,draft:i,dir:G},{title:"ECharts 5 Features",dir:V},{title:"ECharts 5 Upgrade Guide",dir:U}]}]},{title:"Concepts",dir:W,children:[{title:"Chart Container",dir:F},{title:"Chart Option",dir:O,draft:i},{title:"Series",dir:Z,draft:i},{title:b,dir:f},{title:"Dataset",dir:$},{title:"Data Transform",dir:j},{title:"Coordinate",dir:X,draft:i},{title:"Axis",dir:q},{title:"Visual Mapping",dir:L},{title:S,dir:u},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Q},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:ee,draft:i},{title:"Bar Polar",dir:te,draft:i},{title:"Waterfall",dir:ie,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:re},{title:"Stacked Line",dir:ae},{title:"Area Chart",dir:ne},{title:"Smoothed Line",dir:de},{title:"Step Line",dir:le}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:oe},{title:"Ring Style",dir:pe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:se,children:[{title:"Basic Scatter",dir:ce}]}]},{title:"Mobile",dir:m,draft:i},{title:"Cross Platform",dir:he,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ge},{title:"Drilldown",dir:ye,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ue}]},{title:"Interaction",dir:fe,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ve,draft:i}]}]},{title:"Best Practice",dir:me,children:[{title:"Mobile Optimization",dir:m,draft:i},{title:be,dir:Le},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:xe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:P,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:E},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","p","div","nuxt-content-highlight","js","a","true","span","icon","icon-link","md-code-block","legend","style","h2","mobile","Style","visual-map","layout","Layout","interactive","Interactive","tips","Tips","Legend","/en/concepts/legend",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","dataset","data-transform","coordinate","axis","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="legend" tabindex="-1">Legend</h1> <p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p> <h2 id="layout" tabindex="-1">Layout</h2> <p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p> <div class="md-live layout-tb"><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 = {
+ 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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>Use scrollable control if there are many legends.</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>
+ 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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="style" tabindex="-1">Style</h2> <p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The color of legend has many ways to design. For different charts, the legend style can be different.</p> <img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png"> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="interactive" tabindex="-1">Interactive</h2> <p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="tips" tabindex="-1">Tips</h2> <p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</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/legend.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,d,r,l,a,g,n,o,s,c,h,C,I,A,p,b,u,m,w,y,f,Z,L,B,W,v,G,J,V,Q,D,M,x,S,k,H,K,N,T,E,j,Y,F,O,X,z,P,U,R,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="legend" tabindex="-1">Legend</h1>\n<p>Legends are used to annotate the content in the chart using different colors, shapes and texts to indicate different categories. By clicking the legends, the user can show or hide the corresponding categories. Legend is one of the key to understand the chart.</p>\n<h2 id="layout" tabindex="-1">Layout</h2>\n<p>Legend is always placed at the upper right corner of the chart. All legends in the same page need to be consistent, align horizontally or vertically by considering the layout of the overall chart space. When the chart have little vertical space or the content area is crowded, it is also a good choice to put legent on the bottom of the chart. Here are some layouts of the legend:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>Use scrollable control if there are many legends.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsnTGVnZW5kIEEnLCAnTGVnZW5kIEInLCAnTGVnZW5kIEMnIC8qIC4uLiAqLywgLCAnTGVnZW5kIHgnXQogICAgLy8gLi4uCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<h2 id="style" tabindex="-1">Style</h2>\n<p>For dark color background, use a light color for the background layer and text while changing the background to translucent.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>The color of legend has many ways to design. For different charts, the legend style can be different.</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="interactive" tabindex="-1">Interactive</h2>\n<p>Depend on the environmental demand, the legend can support interactive operation. Click the legend to show or hide corresponding categories:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWydMZWdlbmQgQScsICdMZWdlbmQgQicsICdMZWdlbmQgQyddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAgJ0xlZ2VuZCBBJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBCJzogdHJ1ZSwKICAgICAgJ0xlZ2VuZCBDJzogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="tips" tabindex="-1">Tips</h2>\n<p>The legend should be used according to the situation. Some dual-axis charts include multiple chart types. Different kinds of legend stypes should be distinguished.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ0xlZ2VuZCBBJywKICAgICAgICBpY29uOiAncmVjdCcKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQicsCiAgICAgICAgaWNvbjogJ2NpcmNsZScKICAgICAgfSwKICAgICAgewogICAgICAgIG5hbWU6ICdMZWdlbmQgQycsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gIC4uLgogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdMZWdlbmQgQScKICAgICAgLy8gIC4uLgogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ0xlZ2VuZCBCJwogICAgICAvLyAgLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAnTGVnZW5kIEMnCiAgICAgIC8vICAuLi4KICAgIH0KICBdCiAgLy8gIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>While there is only one kind of data in the chart, use the chart title rather than the legend to explain it.</p>\n',postPath:"en/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:b,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:m},{title:"数据集",dir:w},{title:"数据转换",dir:y},{title:"坐标系",dir:f,draft:t},{title:"坐标轴",dir:Z},{title:"视觉映射",dir:i},{title:"图例",dir:L},{title:"事件与行为",dir:B}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:V},{title:"极坐标系柱状图",dir:Q,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:x},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:H},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:E}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:e,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:z,children:[{title:"动态的异步数据",dir:P},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:R}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:w},{title:"Data Transform",dir:y},{title:"Coordinate",dir:f,draft:t},{title:"Axis",dir:Z},{title:"Visual Mapping",dir:i},{title:"Legend",dir:L},{title:"Event and Action",dir:B}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:V},{title:"Bar Polar",dir:Q,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:x},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:H},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:T},{title:"Rose Style",dir:E}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:z,children:[{title:"Dynamic Data",dir:P},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:R}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/style/index.html b/handbook/en/concepts/style/index.html
index 392a9dd..16fe51f 100644
--- a/handbook/en/concepts/style/index.html
+++ b/handbook/en/concepts/style/index.html
@@ -3,46 +3,449 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="overview-of-style-customization"><a href="#overview-of-style-customization" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Overview of Style Customization</h1>
-<p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>
-<blockquote>
-<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>
-</blockquote>
-<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>
-<ul>
-<li>Theme</li>
-<li>Color Palette</li>
-<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>
-<li>Visual encoding (visualMap component)</li>
-</ul>
-<h2 id="theme"><a href="#theme" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Theme</h2>
-<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>
-<p>In our project, we can switch to dark theme like:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>
-<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>If a theme is downloaded as a JS file, it will auto register itself:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="color-palette"><a href="#color-palette" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Color Palette</h2>
-<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="customize-style-explicitly-itemstyle-linestyle-areastyle-label-"><a href="#customize-style-explicitly-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>
-<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank">lineStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.areaStyle" rel="nofollow noopener noreferrer" target="_blank">areaStyle</a>, <a href="https://echarts.apache.org/option.html#series.label" rel="nofollow noopener noreferrer" target="_blank">label</a>, etc.</p>
-<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>
-<p>In the following code we add shadow, gradient to bubble chart.</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="style-of-emphasis-state"><a href="#style-of-emphasis-state" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Style of Emphasis State</h2>
-<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> is the same as the ones for normal state, for example:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>
-<h2 id="visual-encoding-by-visualmap-component"><a href="#visual-encoding-by-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Encoding by visualMap Component</h2>
-<p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/style#theme">Theme</a></li><li class="toc2"><a href="/handbook/en/concepts/style#color-palette">Color Palette</a></li><li class="toc2"><a href="/handbook/en/concepts/style#customize-style-explicitly-itemstyle-linestyle-areastyle-label-">Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</a></li><li class="toc2"><a href="/handbook/en/concepts/style#style-of-emphasis-state">Style of Emphasis State</a></li><li class="toc2"><a href="/handbook/en/concepts/style#visual-encoding-by-visualmap-component">Visual Encoding by visualMap Component</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/style.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,i,n,r,l,o,s,p,d,h,c,y,u,m,g,f,v,b,w,S,x,C,k,E,T,N,B,A,I,P,z,M,D,F,L,R,H,O,G,V,J,U,_,K,j,q,Z,$,W,X,Y,Q,ee,te,ae,ie,ne,re,le,oe,se,pe,de,he,ce,ye,ue,me,ge,fe,ve,be,we,Se,xe,Ce,ke,Ee,Te,Ne,Be,Ae,Ie,Pe,ze,Me){return{layout:"default",data:[{article:{slug:T,toc:[{id:I,depth:2,text:N},{id:P,depth:2,text:B},{id:z,depth:2,text:M},{id:D,depth:2,text:F},{id:L,depth:2,text:R}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"overview-of-style-customization"},children:[{type:t,tag:n,props:{href:"#overview-of-style-customization",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:"Overview of Style Customization"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"This article provides an overview of the different approaches about Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" style customization. For example, how to config the color, size, shadow of the graphic elements and labels."}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:'The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.'}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios."}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:x,props:{},children:[{type:e,value:N}]},{type:e,value:a},{type:t,tag:x,props:{},children:[{type:e,value:B}]},{type:e,value:a},{type:t,tag:x,props:{},children:[{type:e,value:"Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)"}]},{type:e,value:a},{type:t,tag:x,props:{},children:[{type:e,value:"Visual encoding (visualMap component)"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:S,props:{id:I},children:[{type:t,tag:n,props:{href:"#theme",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:N}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"Setting a theme is the simplest way to change the color style. For example, in "},{type:t,tag:n,props:{href:"$%7BwebsitePath%7D/examples/en/index.html"},children:[{type:e,value:"Examples page"}]},{type:e,value:", we can switch to dark mode and see the result of a different theme."}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"In our project, we can switch to dark theme like:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"var chart = echarts.init(dom, 'dark');\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the "},{type:t,tag:n,props:{href:"https://echarts.apache.org/en/theme-builder.html",rel:[o,s,p],target:d},children:[{type:e,value:"theme builder"}]},{type:e,value:". Theme can also be created or edited in it. The downloaded theme can be used as follows:"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"If a theme is downloaded as a JSON file, we should register it by ourselves, for example:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"var xhr = new XMLHttpRequest();\n// Assume the theme name is \"vintage\".\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"If a theme is downloaded as a JS file, it will auto register itself:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"// Import the `vintage.js` file in HTML, then:\nvar chart = echarts.init(dom, 'vintage');\n// ...\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:P},children:[{type:t,tag:n,props:{href:"#color-palette",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:B}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series."}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n // Global palette:\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // A palette only work for the series:\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // A palette only work for the series:\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:z},children:[{type:t,tag:n,props:{href:"#customize-style-explicitly-itemstyle-linestyle-areastyle-label-",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:M}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"It is a common way to set style explicitly. Throughout ECharts "},{type:t,tag:n,props:{href:H,rel:[o,s,p],target:d},children:[{type:e,value:"option"}]},{type:e,value:", style related options can be set in various place, including "},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html#series.itemStyle",rel:[o,s,p],target:d},children:[{type:e,value:O}]},{type:e,value:w},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html#series-line.lineStyle",rel:[o,s,p],target:d},children:[{type:e,value:G}]},{type:e,value:w},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html#series-line.areaStyle",rel:[o,s,p],target:d},children:[{type:e,value:V}]},{type:e,value:w},{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html#series.label",rel:[o,s,p],target:d},children:[{type:e,value:C}]},{type:e,value:", etc."}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"Generally speaking, all of the built-in components and series follow the naming convention like "},{type:t,tag:k,props:{},children:[{type:e,value:O}]},{type:e,value:w},{type:t,tag:k,props:{},children:[{type:e,value:G}]},{type:e,value:w},{type:t,tag:k,props:{},children:[{type:e,value:V}]},{type:e,value:w},{type:t,tag:k,props:{},children:[{type:e,value:C}]},{type:e,value:" etc, although they may occur in different place according to different series or components."}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"In the following code we add shadow, gradient to bubble chart."}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:"md-live",props:{lang:y,layout:"tb"},children:[{type:e,value:"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:S,props:{id:D},children:[{type:t,tag:n,props:{href:"#style-of-emphasis-state",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:F}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by "},{type:t,tag:n,props:{href:J,rel:[o,s,p],target:d},children:[{type:e,value:U}]},{type:e,value:" property. The options in "},{type:t,tag:n,props:{href:J,rel:[o,s,p],target:d},children:[{type:e,value:U}]},{type:e,value:" is the same as the ones for normal state, for example:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n // Styles for normal state.\n itemStyle: {\n // Color of the point.\n color: 'red'\n },\n label: {\n show: true,\n // Text of labels.\n formatter: 'This is a normal label.'\n },\n\n // Styles for emphasis state.\n emphasis: {\n itemStyle: {\n // Color in emphasis state.\n color: 'blue'\n },\n label: {\n show: true,\n // Text in emphasis.\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"Notice: Before ECharts4, the emphasis style should be written like this:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // Styles for normal state.\n normal: {\n color: 'red'\n },\n // Styles for emphasis state.\n emphasis: {\n color: 'blue'\n }\n },\n\n label: {\n // Styles for normal state.\n normal: {\n show: true,\n formatter: 'This is a normal label.'\n },\n // Styles for emphasis state.\n emphasis: {\n show: true,\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"The option format is still "},{type:t,tag:"strong",props:{},children:[{type:e,value:"compatible"}]},{type:e,value:', but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.'}]},{type:e,value:a},{type:t,tag:S,props:{id:L},children:[{type:t,tag:n,props:{href:"#visual-encoding-by-visualmap-component",ariaHidden:u,tabIndex:m},children:[{type:t,tag:g,props:{className:[f,v]},children:[]}]},{type:e,value:R}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:t,tag:n,props:{href:"https://echarts.apache.org/option.html#visualMap",rel:[o,s,p],target:d},children:[{type:e,value:"visualMap component"}]},{type:e,value:" supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in "},{type:t,tag:n,props:{href:"~Visual%20Map%20of%20Data"},children:[{type:e,value:"Visual Map of Data"}]},{type:e,value:"."}]}]},dir:"/en/concepts",path:_,extension:".md",createdAt:"2021-07-21T15:14:22.805Z",updatedAt:"2021-07-21T15:32:05.243Z"},postPath:"en/concepts/style"}],fetch:{},error:K,state:{filled:!1,docVersion:l,ghVersion:l,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:j},{title:"入门篇",dir:q,children:[{title:"获取 ECharts",dir:Z},{title:"在项目中引入 ECharts",dir:$},{title:"资源列表",dir:W,draft:i},{title:"获取灵感",dir:X},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:Y,children:[{title:Q,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:ee},{title:"ECharts 5 升级指南",dir:te}]}]},{title:"概念篇",dir:ae,children:[{title:"图表容器及大小",dir:ie},{title:"配置项",dir:ne,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:T},{title:"数据集",dir:re},{title:"数据转换",dir:le},{title:"坐标系",dir:oe,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:A},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:se,children:[{title:"常用图表类型",dir:pe,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:de},{title:"堆叠柱状图",dir:he},{title:"动态排序柱状图",dir:ce,draft:i},{title:"极坐标系柱状图",dir:ye,draft:i},{title:"瀑布图",dir:ue,draft:i},{title:"视觉映射的柱状图",dir:A,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:me},{title:"堆叠折线图",dir:ge},{title:"区域面积图",dir:fe},{title:"平滑曲线图",dir:ve},{title:"阶梯线图",dir:be}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:we},{title:"圆环图",dir:Se},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:xe,children:[{title:"基础散点图",dir:Ce}]}]},{title:"移动端优化",dir:E,draft:i},{title:"跨平台方案",dir:ke,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Ee},{title:"数据下钻",dir:Te,draft:i}]},{title:"标签",dir:C,children:[{title:"富文本标签",dir:Ne}]},{title:"交互",dir:Be,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ae,draft:i}]}]},{title:"最佳实践",dir:Ie,children:[{title:"移动端优化",dir:E,draft:i},{title:Pe,dir:ze},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Me}]}],en:[{title:"Get Started",dir:j},{title:"Basics",dir:q,children:[{title:"Download ECharts",dir:Z},{title:"Import ECharts",dir:$},{title:"Resources",dir:W,draft:i},{title:"Inspiration",dir:X},{title:"Get Help",dir:"help"},{title:"Release Note",dir:Y,children:[{title:Q,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:ee},{title:"ECharts 5 Upgrade Guide",dir:te}]}]},{title:"Concepts",dir:ae,children:[{title:"Chart Container",dir:ie},{title:"Chart Option",dir:ne,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:T},{title:"Dataset",dir:re},{title:"Data Transform",dir:le},{title:"Coordinate",dir:oe,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:A},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:se,children:[{title:"Common Charts",dir:pe,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:de},{title:"Stacked Bar",dir:he},{title:"Bar Racing",dir:ce,draft:i},{title:"Bar Polar",dir:ye,draft:i},{title:"Waterfall",dir:ue,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:me},{title:"Stacked Line",dir:ge},{title:"Area Chart",dir:fe},{title:"Smoothed Line",dir:ve},{title:"Step Line",dir:be}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:we},{title:"Ring Style",dir:Se},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:xe,children:[{title:"Basic Scatter",dir:Ce}]}]},{title:"Mobile",dir:E,draft:i},{title:"Cross Platform",dir:ke,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Ee},{title:"Drilldown",dir:Te,draft:i}]},{title:"Label",dir:C,children:[{title:"Rich Text",dir:Ne}]},{title:"Interaction",dir:Be,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ae,draft:i}]}]},{title:"Best Practice",dir:Ie,children:[{title:"Mobile Optimization",dir:E,draft:i},{title:Pe,dir:ze},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Me}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:H,gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:_,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:K},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link","md-code-block",", ","h2","li","label","code","mobile","style","Theme","Color Palette","visual-map","theme","color-palette","customize-style-explicitly-itemstyle-linestyle-areastyle-label-","Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)","style-of-emphasis-state","Style of Emphasis State","visual-encoding-by-visualmap-component","Visual Encoding by visualMap Component","https://echarts.apache.org/option.html#","itemStyle","lineStyle","areaStyle","https://echarts.apache.org/option.html#series-bar.emphasis","emphasis","/en/concepts/style",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1> <p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p> <blockquote><p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p></blockquote> <p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p> <ul><li>Theme</li> <li>Color Palette</li> <li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li> <li>Visual encoding (visualMap component)</li></ul> <h2 id="theme" tabindex="-1">Theme</h2> <p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p> <p>In our project, we can switch to dark theme like:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">'dark'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p> <p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
+<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 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> <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If a theme is downloaded as a JS file, it will auto register itself:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Import the `vintage.js` file in HTML, then:</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> <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 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="color-palette" tabindex="-1">Color Palette</h2> <p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p> <div class="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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="customize-style-explicitly-(itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-...)" tabindex="-1">Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2> <p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>, <a href="https://echarts.apache.org/option.html#series.label">label</a>, etc.</p> <p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p> <p>In the following code we add shadow, gradient to bubble chart.</p> <div class="md-live layout-tb"><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">var data = [
+ [
+ [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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="style-of-emphasis-state" tabindex="-1">Style of Emphasis State</h2> <p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> is the same as the ones for normal state, for example:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Notice: Before ECharts4, the emphasis style should be written like this:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p> <h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p></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/style.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,e,i,I,t,C,A,l,a,s,o,d,r,n,c,h,w,y,p,b,m,M,N,B,z,u,L,Z,T,S,D,G,Y,O,J,W,x,f,X,K,v,j,k,H,E,F,R,V,U,Q,P,q,_,$,gg,eg,ig){return{layout:"default",data:[{html:'<h1 id="overview-of-style-customization" tabindex="-1">Overview of Style Customization</h1>\n<p>This article provides an overview of the different approaches about Apache ECharts<sup>TM</sup> style customization. For example, how to config the color, size, shadow of the graphic elements and labels.</p>\n<blockquote>\n<p>The term "style" may not follow the convention of data visualization, but we use it in this article because it is popular and easy to understand.</p>\n</blockquote>\n<p>These approaches below will be introduced. The functionalities of them might be overlapped, but they are suitable for different scenarios.</p>\n<ul>\n<li>Theme</li>\n<li>Color Palette</li>\n<li>Customize style explicitly (itemStyle, lineStyle, areaStyle, label, ...)</li>\n<li>Visual encoding (visualMap component)</li>\n</ul>\n<h2 id="theme" tabindex="-1">Theme</h2>\n<p>Setting a theme is the simplest way to change the color style. For example, in <a href="$%7BwebsitePath%7D/examples/en/index.html">Examples page</a>, we can switch to dark mode and see the result of a different theme.</p>\n<p>In our project, we can switch to dark theme like:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>Other themes are not included by default, and need to load them ourselves if we want to use them. Themes can be visited and downloaded in the <a href="https://echarts.apache.org/en/theme-builder.html">theme builder</a>. Theme can also be created or edited in it. The downloaded theme can be used as follows:</p>\n<p>If a theme is downloaded as a JSON file, we should register it by ourselves, for example:</p>\n<md-code-block lang="js" code="\'dmFyIHhociA9IG5ldyBYTUxIdHRwUmVxdWVzdCgpOwovLyBBc3N1bWUgdGhlIHRoZW1lIG5hbWUgaXMgInZpbnRhZ2UiLgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>If a theme is downloaded as a JS file, it will auto register itself:</p>\n<md-code-block lang="js" code="\'Ly8gSW1wb3J0IHRoZSBgdmludGFnZS5qc2AgZmlsZSBpbiBIVE1MLCB0aGVuOgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwovLyAuLi4\'" line-highlights="\'\'" />\n<h2 id="color-palette" tabindex="-1">Color Palette</h2>\n<p>Color palette can be given in option. They provide a group of colors, which will be auto picked by series and data. We can give a global palette, or exclusive pallette for certain series.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIEdsb2JhbCBwYWxldHRlOgogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyNkZDZiNjYnLAogICAgICAgICcjNzU5YWEwJywKICAgICAgICAnI2U2OWQ4NycsCiAgICAgICAgJyM4ZGMxYTknLAogICAgICAgICcjZWE3ZTUzJywKICAgICAgICAnI2VlZGQ3OCcsCiAgICAgICAgJyM3M2EzNzMnLAogICAgICAgICcjNzNiOWJjJywKICAgICAgICAnIzcyODlhYicsCiAgICAgICAgJyM5MWNhOGMnLAogICAgICAgICcjZjQ5ZjQyJwogICAgICBdCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIEEgcGFsZXR0ZSBvbmx5IHdvcmsgZm9yIHRoZSBzZXJpZXM6CiAgICAgIGNvbG9yOiBbCiAgICAgICAgJyMzN0EyREEnLAogICAgICAgICcjMzJDNUU5JywKICAgICAgICAnIzY3RTBFMycsCiAgICAgICAgJyM5RkU2QjgnLAogICAgICAgICcjRkZEQjVDJywKICAgICAgICAnI2ZmOWY3ZicsCiAgICAgICAgJyNmYjcyOTMnLAogICAgICAgICcjRTA2MkFFJywKICAgICAgICAnI0U2OTBEMScsCiAgICAgICAgJyNlN2JjZjMnLAogICAgICAgICcjOWQ5NmY1JywKICAgICAgICAnIzgzNzhFQScsCiAgICAgICAgJyM5NkJGRkYnCiAgICAgIF0KICAgICAgLy8gLi4uCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<h2 id="customize-style-explicitly-(itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-...)" tabindex="-1">Customize Style Explicitly (itemStyle, lineStyle, areaStyle, label, ...)</h2>\n<p>It is a common way to set style explicitly. Throughout ECharts <a href="https://echarts.apache.org/option.html#">option</a>, style related options can be set in various place, including <a href="https://echarts.apache.org/option.html#series.itemStyle">itemStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>, <a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>, <a href="https://echarts.apache.org/option.html#series.label">label</a>, etc.</p>\n<p>Generally speaking, all of the built-in components and series follow the naming convention like <code>itemStyle</code>, <code>lineStyle</code>, <code>areaStyle</code>, <code>label</code> etc, although they may occur in different place according to different series or components.</p>\n<p>In the following code we add shadow, gradient to bubble chart.</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="style-of-emphasis-state" tabindex="-1">Style of Emphasis State</h2>\n<p>When mouse hovering a graphic elements, usually the emphasis style will be displayed. By default, the emphasis style is auto generated by the normal style. However they can be specified by <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> property. The options in <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> is the same as the ones for normal state, for example:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIENvbG9yIG9mIHRoZSBwb2ludC4KICAgICAgY29sb3I6ICdyZWQnCiAgICB9LAogICAgbGFiZWw6IHsKICAgICAgc2hvdzogdHJ1ZSwKICAgICAgLy8gVGV4dCBvZiBsYWJlbHMuCiAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgfSwKCiAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8gQ29sb3IgaW4gZW1waGFzaXMgc3RhdGUuCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8gVGV4dCBpbiBlbXBoYXNpcy4KICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>Notice: Before ECharts4, the emphasis style should be written like this:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyBTdHlsZXMgZm9yIG5vcm1hbCBzdGF0ZS4KICAgICAgbm9ybWFsOiB7CiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIFN0eWxlcyBmb3IgZW1waGFzaXMgc3RhdGUuCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9CiAgICB9LAoKICAgIGxhYmVsOiB7CiAgICAgIC8vIFN0eWxlcyBmb3Igbm9ybWFsIHN0YXRlLgogICAgICBub3JtYWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIGZvcm1hdHRlcjogJ1RoaXMgaXMgYSBub3JtYWwgbGFiZWwuJwogICAgICB9LAogICAgICAvLyBTdHlsZXMgZm9yIGVtcGhhc2lzIHN0YXRlLgogICAgICBlbXBoYXNpczogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>The option format is still <strong>compatible</strong>, but not recommended. In fact, in most cases, users only set normal style, and use the default emphasis style. So since ECharts4, we support to write style without the "normal" term, which makes the option more simple and neat.</p>\n<h2 id="visual-encoding-by-visualmap-component" tabindex="-1">Visual Encoding by visualMap Component</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> supports config the rule that mapping value to visual channel (color, size, ...). More details can be check in <a href="~Visual%20Map%20of%20Data">Visual Map of Data</a>.</p>\n',postPath:"en/concepts/style"}],fetch:{},error:I,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:t},{title:"入门篇",dir:C,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:a,draft:g},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:d,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:n},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:M},{title:"坐标系",dir:N,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:i},{title:"图例",dir:z},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:Z,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:G,draft:g},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:i,draft:g}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:J},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:f},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:H}]}]},{title:E,dir:e,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:R}]},{title:"数据处理",dir:V,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:E,dir:e,draft:g},{title:gg,dir:eg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ig}]}],en:[{title:"Get Started",dir:t},{title:"Basics",dir:C,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:a,draft:g},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:d,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:n},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:M},{title:"Coordinate",dir:N,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:i},{title:"Legend",dir:z},{title:"Event and Action",dir:u}]},{title:"Application",dir:L,children:[{title:"Common Charts",dir:Z,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:G,draft:g},{title:"Waterfall",dir:Y}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:J},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:f},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:v},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:e,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:R}]},{title:"Data",dir:V,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:g},{title:gg,dir:eg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/en/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/concepts/visual-map/index.html b/handbook/en/concepts/visual-map/index.html
index 29707fe..6a3ee2c 100644
--- a/handbook/en/concepts/visual-map/index.html
+++ b/handbook/en/concepts/visual-map/index.html
@@ -3,46 +3,76 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="visual-map-of-data"><a href="#visual-map-of-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Visual Map of Data</h1>
-<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>
-<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>
-<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>
-<ul>
-<li><code>symbol</code>, <code>symbolSize</code></li>
-<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>
-<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>
-</ul>
-<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>
-<h2 id="data-and-dimension"><a href="#data-and-dimension" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Data and Dimension</h2>
-<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>
-<p>For example, <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter" rel="nofollow noopener noreferrer" target="_blank">scatter charts</a> use radius to represent the third dimension.</p>
-<h2 id="the-visualmap-component"><a href="#the-visualmap-component" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>The visualMap Component</h2>
-<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>
-<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type" rel="nofollow noopener noreferrer" target="_blank">visualMap.type</a>.</p>
-<p>Its structure is defined as:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="continuous-and-piecewise-visual-mapping-components"><a href="#continuous-and-piecewise-visual-mapping-components" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous and Piecewise Visual Mapping Components</h2>
-<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous" rel="nofollow noopener noreferrer" target="_blank">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise" rel="nofollow noopener noreferrer" target="_blank">visualMapPiecewise</a>).</p>
-<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>
-<h3 id="continuous-visual-mapping"><a href="#continuous-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Continuous Visual Mapping</h3>
-<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>
-<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>
-<h3 id="piecewise-visual-mapping"><a href="#piecewise-visual-mapping" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Piecewise Visual Mapping</h3>
-<p>The piecewise visual mapping component has three modes.</p>
-<ul>
-<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>
-<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.pieces</a>.</li>
-<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.categories</a>.</li>
-</ul>
-<p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</p></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/concepts/visual-map#data-and-dimension">Data and Dimension</a></li><li class="toc2"><a href="/handbook/en/concepts/visual-map#the-visualmap-component">The visualMap Component</a></li><li class="toc2"><a href="/handbook/en/concepts/visual-map#continuous-and-piecewise-visual-mapping-components">Continuous and Piecewise Visual Mapping Components</a></li><li class="toc3"><a href="/handbook/en/concepts/visual-map#continuous-visual-mapping">Continuous Visual Mapping</a></li><li class="toc3"><a href="/handbook/en/concepts/visual-map#piecewise-visual-mapping">Piecewise Visual Mapping</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/concepts/visual-map.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,i,r,p,l,n,s,d,o,h,c,u,y,v,m,g,f,b,w,x,M,C,S,E,T,k,P,I,R,D,N,B,A,V,H,z,L,_,G,O,F,U,Z,$,j,q,W,X,J,K,Q,Y,ee,te,ae,ie,re,pe,le,ne,se,de,oe,he,ce,ue,ye,ve,me,ge,fe,be,we,xe,Me,Ce,Se,Ee,Te,ke,Pe,Ie,Re,De){return{layout:"default",data:[{article:{slug:b,toc:[{id:I,depth:2,text:R},{id:D,depth:2,text:N},{id:B,depth:2,text:A},{id:V,depth:3,text:H},{id:z,depth:3,text:L}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"visual-map-of-data"},children:[{type:t,tag:r,props:{href:"#visual-map-of-data",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:"Visual Map of Data"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Every type of charts in Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" has this built-in mapping procedure. For example, line chart map data into "},{type:t,tag:w,props:{},children:[{type:e,value:"lines"}]},{type:e,value:", bar chart map data into "},{type:t,tag:w,props:{},children:[{type:e,value:"height"}]},{type:e,value:". Some more complicated charts, like "},{type:t,tag:l,props:{},children:[{type:e,value:"graph"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"themeRiver"}]},{type:e,value:", and "},{type:t,tag:l,props:{},children:[{type:e,value:"treemap"}]},{type:e,value:" have their own built-in mapping."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Besides, ECharts provides "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap component"}]},{type:e,value:" for general visual mapping. Visual elements allowed in "},{type:t,tag:l,props:{},children:[{type:e,value:k}]},{type:e,value:" component are:"}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:f,props:{},children:[{type:t,tag:l,props:{},children:[{type:e,value:"symbol"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"symbolSize"}]}]},{type:e,value:a},{type:t,tag:f,props:{},children:[{type:t,tag:l,props:{},children:[{type:e,value:"color"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"opacity"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"colorAlpha"}]},{type:e,value:","}]},{type:e,value:a},{type:t,tag:f,props:{},children:[{type:t,tag:l,props:{},children:[{type:e,value:"colorLightness"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"colorSaturation"}]},{type:e,value:g},{type:t,tag:l,props:{},children:[{type:e,value:"colorHue"}]}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Next, we are going to introduce how to use "},{type:t,tag:l,props:{},children:[{type:e,value:k}]},{type:e,value:" component."}]},{type:e,value:a},{type:t,tag:P,props:{id:I},children:[{type:t,tag:r,props:{href:"#data-and-dimension",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:R}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Data are usually stored in "},{type:t,tag:r,props:{href:_,rel:[n,s,d],target:o},children:[{type:e,value:G}]},{type:e,value:" in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions)."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"For example, "},{type:t,tag:r,props:{href:_,rel:[n,s,d],target:o},children:[{type:e,value:G}]},{type:e,value:" is the most common form, which is a "},{type:t,tag:l,props:{},children:[{type:e,value:"list"}]},{type:e,value:", a common array:"}]},{type:e,value:a},{type:t,tag:x,props:{className:[M]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":h,"file-name":h},children:[{type:e,value:"series: {\n data: [\n {\n // every item here is a dataItem\n value: 2323, // this is data value\n itemStyle: {}\n },\n 1212, // it can also be a value of dataItem, which is a more common case\n 2323, // every data value here is one dimension\n 4343,\n 3434\n ];\n}\n"}]}]},{type:e,value:a},{type:t,tag:x,props:{className:[M]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":h,"file-name":h},children:[{type:e,value:"series: {\n data: [\n {\n // every item here is a dataItem\n value: [3434, 129, 'San Marino'], // this is data value\n itemStyle: {}\n },\n [1212, 5454, 'Vatican'], // it can also be a value of dataItem, which is a more common case\n [2323, 3223, 'Nauru'], // every data value here is three dimension\n [4343, 23, 'Tuvalu'] // If is scatter chart, usually map the first dimension to x axis,\n // the second dimension to y axis,\n // and the third dimension to symbolSize\n ];\n}\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, "},{type:t,tag:l,props:{},children:[{type:e,value:k}]},{type:e,value:" is what you need. Most likely, "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#series-scatter",rel:[n,s,d],target:o},children:[{type:e,value:"scatter charts"}]},{type:e,value:" use radius to represent the third dimension."}]},{type:e,value:a},{type:t,tag:P,props:{id:D},children:[{type:t,tag:r,props:{href:"#the-visualmap-component",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:N}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"visualMap component defines the mapping from "},{type:t,tag:w,props:{},children:[{type:e,value:"which dimension of data"}]},{type:e,value:O},{type:t,tag:w,props:{},children:[{type:e,value:"what visual elements"}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The following two types of visualMap components are supported, identified with "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.type",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap.type"}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Its structure is defined as:"}]},{type:e,value:a},{type:t,tag:x,props:{className:[M]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":h,"file-name":h},children:[{type:e,value:"option = {\n visualMap: [\n // can define multiple visualMap components at the same time\n {\n // the first visualMap component\n type: 'continuous' // defined as continuous visualMap\n // ...\n },\n {\n // the second visualMap component\n type: 'piecewise' // defined as discrete visualMap\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:P,props:{id:B},children:[{type:t,tag:r,props:{href:"#continuous-and-piecewise-visual-mapping-components",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The visual mapping component of ECharts is divided into continuous ("},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-continuous",rel:[n,s,d],target:o},children:[{type:e,value:"visualMapContinuous"}]},{type:e,value:") and piecewise ("},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise",rel:[n,s,d],target:o},children:[{type:e,value:"visualMapPiecewise"}]},{type:e,value:")."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data."}]},{type:e,value:a},{type:t,tag:"h3",props:{id:V},children:[{type:t,tag:r,props:{href:"#continuous-visual-mapping",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:H}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values."}]},{type:e,value:a},{type:t,tag:x,props:{className:[M]},children:[{type:t,tag:C,props:{lang:S,"line-highlights":h,"file-name":h},children:[{type:e,value:"option = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // the fourth dimension of series.data (i.e. value[3]) is mapped\n seriesIndex: 4, // The fourth series is mapped.\n inRange: {\n // The visual configuration in the selected range\n color: ['blue', '#121122', 'red'], // A list of colors that defines the graph color mapping\n // the minimum value of the data is mapped to 'blue', and\n // the maximum value is mapped to 'red', // the maximum value is mapped to 'red', // the maximum value is mapped to 'red'.\n // The rest is automatically calculated linearly.\n symbolSize: [30, 100] // Defines the mapping range for the graphic size.\n // The minimum value of the data is mapped to 30, // and the maximum value is mapped to 100.\n // The maximum value is mapped to 100.\n // The rest is calculated linearly automatically.\n },\n outOfRange: {\n // Check the out of range visual configuration\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"where "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.inRange",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap.inRange"}]},{type:e,value:" indicates the style used for data within the data mapping range; while "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.outOfRange",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap.outOfRange"}]},{type:e,value:" specifies the style for data outside the mapping range."}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:r,props:{href:"~visualMap.dimension"},children:[{type:e,value:"visualMap.dimension"}]},{type:e,value:" specifies which dimension of the data will be visually mapped."}]},{type:e,value:a},{type:t,tag:"h3",props:{id:z},children:[{type:t,tag:r,props:{href:"#piecewise-visual-mapping",ariaHidden:c,tabIndex:u},children:[{type:t,tag:y,props:{className:[v,m]},children:[]}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"The piecewise visual mapping component has three modes."}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:f,props:{},children:[{type:e,value:"Continuous data average segmentation: based on "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap-piecewise.splitNumber"}]},{type:e,value:" to automatically split the data into pieces equally."}]},{type:e,value:a},{type:t,tag:f,props:{},children:[{type:e,value:"Continuous data custom segmentation: define the range of each piece based on "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.pieces",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap-piecewise.pieces"}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:f,props:{},children:[{type:e,value:"Discrete data (categorical data): categories are defined in "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.categories",rel:[n,s,d],target:o},children:[{type:e,value:"visualMap-piecewise.categories"}]},{type:e,value:E}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"To use segmented visual map, you need to set "},{type:t,tag:l,props:{},children:[{type:e,value:"type"}]},{type:e,value:O},{type:t,tag:l,props:{},children:[{type:e,value:"'piecewise'"}]},{type:e,value:" and choose one of the above three configuration items."}]}]},dir:"/en/concepts",path:F,extension:".md",createdAt:"2021-07-21T13:08:18.970Z",updatedAt:"2021-07-21T13:31:05.709Z"},postPath:"en/concepts/visual-map"}],fetch:{},error:U,state:{filled:!1,docVersion:h,ghVersion:h,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:Z},{title:"入门篇",dir:$,children:[{title:"获取 ECharts",dir:j},{title:"在项目中引入 ECharts",dir:q},{title:"资源列表",dir:W,draft:i},{title:"获取灵感",dir:X},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:J,children:[{title:K,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:Q},{title:"ECharts 5 升级指南",dir:Y}]}]},{title:"概念篇",dir:ee,children:[{title:"图表容器及大小",dir:te},{title:"配置项",dir:ae,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:ie},{title:"数据转换",dir:re},{title:"坐标系",dir:pe,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:b},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:le,children:[{title:"常用图表类型",dir:ne,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:se},{title:"堆叠柱状图",dir:de},{title:"动态排序柱状图",dir:oe,draft:i},{title:"极坐标系柱状图",dir:he,draft:i},{title:"瀑布图",dir:ce,draft:i},{title:"视觉映射的柱状图",dir:b,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ue},{title:"堆叠折线图",dir:ye},{title:"区域面积图",dir:ve},{title:"平滑曲线图",dir:me},{title:"阶梯线图",dir:ge}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:fe},{title:"圆环图",dir:be},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:we,children:[{title:"基础散点图",dir:xe}]}]},{title:"移动端优化",dir:T,draft:i},{title:"跨平台方案",dir:Me,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Ce},{title:"数据下钻",dir:Se,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Ee}]},{title:"交互",dir:Te,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ke,draft:i}]}]},{title:"最佳实践",dir:Pe,children:[{title:"移动端优化",dir:T,draft:i},{title:Ie,dir:Re},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:De}]}],en:[{title:"Get Started",dir:Z},{title:"Basics",dir:$,children:[{title:"Download ECharts",dir:j},{title:"Import ECharts",dir:q},{title:"Resources",dir:W,draft:i},{title:"Inspiration",dir:X},{title:"Get Help",dir:"help"},{title:"Release Note",dir:J,children:[{title:K,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:Q},{title:"ECharts 5 Upgrade Guide",dir:Y}]}]},{title:"Concepts",dir:ee,children:[{title:"Chart Container",dir:te},{title:"Chart Option",dir:ae,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:ie},{title:"Data Transform",dir:re},{title:"Coordinate",dir:pe,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:b},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:le,children:[{title:"Common Charts",dir:ne,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:se},{title:"Stacked Bar",dir:de},{title:"Bar Racing",dir:oe,draft:i},{title:"Bar Polar",dir:he,draft:i},{title:"Waterfall",dir:ce,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ue},{title:"Stacked Line",dir:ye},{title:"Area Chart",dir:ve},{title:"Smoothed Line",dir:me},{title:"Step Line",dir:ge}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:fe},{title:"Ring Style",dir:be},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:we,children:[{title:"Basic Scatter",dir:xe}]}]},{title:"Mobile",dir:T,draft:i},{title:"Cross Platform",dir:Me,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Ce},{title:"Drilldown",dir:Se,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Ee}]},{title:"Interaction",dir:Te,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ke,draft:i}]}]},{title:"Best Practice",dir:Pe,children:[{title:"Mobile Optimization",dir:T,draft:i},{title:Ie,dir:Re},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:De}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:F,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:U},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","code","nofollow","noopener","noreferrer","_blank","","true",-1,"span","icon","icon-link",", ","li","visual-map","em","div","nuxt-content-highlight","md-code-block","js",".","mobile","visualMap","h2","data-and-dimension","Data and Dimension","the-visualmap-component","The visualMap Component","continuous-and-piecewise-visual-mapping-components","Continuous and Piecewise Visual Mapping Components","continuous-visual-mapping","Continuous Visual Mapping","piecewise-visual-mapping","Piecewise Visual Mapping","https://echarts.apache.org/option.html#series.data","series.data"," to ","/en/concepts/visual-map",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="visual-map-of-data" tabindex="-1">Visual Map of Data</h1> <p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p> <p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p> <p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p> <ul><li><code>symbol</code>, <code>symbolSize</code></li> <li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li> <li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li></ul> <p>Next, we are going to introduce how to use <code>visualMap</code> component.</p> <h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2> <p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p> <p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter">scatter charts</a> use radius to represent the third dimension.</p> <h2 id="the-visualmap-component" tabindex="-1">The visualMap Component</h2> <p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p> <p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a>.</p> <p>Its structure is defined as:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="continuous-and-piecewise-visual-mapping-components" tabindex="-1">Continuous and Piecewise Visual Mapping Components</h2> <p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>).</p> <p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p> <h3 id="continuous-visual-mapping" tabindex="-1">Continuous Visual Mapping</h3> <p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p> <h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3> <p>The piecewise visual mapping component has three modes.</p> <ul><li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li> <li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li> <li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li></ul> <p>To use segmented visual map, you need to set <code>type</code> to <code>'piecewise'</code> and choose one of the above three configuration items.</p></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/visual-map.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,a,l,d,r,o,n,s,g,c,h,p,I,m,C,u,B,b,A,v,y,G,W,Z,f,w,M,Y,X,S,L,V,R,F,z,x,H,N,k,J,U,E,T,D,Q,P,j,K,O,_,$,q,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="visual-map-of-data" tabindex="-1">Visual Map of Data</h1>\n<p>Data visualization is a procedure of mapping data into visual elements. This procedure can also be called visual coding, and visual elements can also be called visual channels.</p>\n<p>Every type of charts in Apache ECharts<sup>TM</sup> has this built-in mapping procedure. For example, line chart map data into <em>lines</em>, bar chart map data into <em>height</em>. Some more complicated charts, like <code>graph</code>, <code>themeRiver</code>, and <code>treemap</code> have their own built-in mapping.</p>\n<p>Besides, ECharts provides <a href="https://echarts.apache.org/option.html#visualMap">visualMap component</a> for general visual mapping. Visual elements allowed in <code>visualMap</code> component are:</p>\n<ul>\n<li><code>symbol</code>, <code>symbolSize</code></li>\n<li><code>color</code>, <code>opacity</code>, <code>colorAlpha</code>,</li>\n<li><code>colorLightness</code>, <code>colorSaturation</code>, <code>colorHue</code></li>\n</ul>\n<p>Next, we are going to introduce how to use <code>visualMap</code> component.</p>\n<h2 id="data-and-dimension" tabindex="-1">Data and Dimension</h2>\n<p>Data are usually stored in <a href="https://echarts.apache.org/option.html#series.data">series.data</a> in ECharts. Depending on chart types, like list, tree, graph, and so on, the form of data may vary somehow. But they have one common feature, that they are a collection of data items. Every data item contains data value, and other information if needed. Every data value can be a single value (one dimension) or an array (multiple dimensions).</p>\n<p>For example, <a href="https://echarts.apache.org/option.html#series.data">series.data</a> is the most common form, which is a <code>list</code>, a common array:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogMjMyMywgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICAxMjEyLCAvLyBpdCBjYW4gYWxzbyBiZSBhIHZhbHVlIG9mIGRhdGFJdGVtLCB3aGljaCBpcyBhIG1vcmUgY29tbW9uIGNhc2UKICAgIDIzMjMsIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyBvbmUgZGltZW5zaW9uCiAgICA0MzQzLAogICAgMzQzNAogIF07Cn0\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyBldmVyeSBpdGVtIGhlcmUgaXMgYSBkYXRhSXRlbQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ1NhbiBNYXJpbm8nXSwgLy8gdGhpcyBpcyBkYXRhIHZhbHVlCiAgICAgIGl0ZW1TdHlsZToge30KICAgIH0sCiAgICBbMTIxMiwgNTQ1NCwgJ1ZhdGljYW4nXSwgLy8gaXQgY2FuIGFsc28gYmUgYSB2YWx1ZSBvZiBkYXRhSXRlbSwgd2hpY2ggaXMgYSBtb3JlIGNvbW1vbiBjYXNlCiAgICBbMjMyMywgMzIyMywgJ05hdXJ1J10sIC8vIGV2ZXJ5IGRhdGEgdmFsdWUgaGVyZSBpcyB0aHJlZSBkaW1lbnNpb24KICAgIFs0MzQzLCAyMywgJ1R1dmFsdSddIC8vIElmIGlzIHNjYXR0ZXIgY2hhcnQsIHVzdWFsbHkgbWFwIHRoZSBmaXJzdCBkaW1lbnNpb24gdG8geCBheGlzLAogICAgLy8gdGhlIHNlY29uZCBkaW1lbnNpb24gdG8geSBheGlzLAogICAgLy8gYW5kIHRoZSB0aGlyZCBkaW1lbnNpb24gdG8gc3ltYm9sU2l6ZQogIF07Cn0\'" line-highlights="\'\'" />\n<p>Usually the first one or two dimensions are used for mapping. For example, map the first dimension to x axis, and the second dimension to y axis. If you want to represent more dimensions, <code>visualMap</code> is what you need. Most likely, <a href="https://echarts.apache.org/option.html#series-scatter">scatter charts</a> use radius to represent the third dimension.</p>\n<h2 id="the-visualmap-component" tabindex="-1">The visualMap Component</h2>\n<p>visualMap component defines the mapping from <em>which dimension of data</em> to <em>what visual elements</em>.</p>\n<p>The following two types of visualMap components are supported, identified with <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a>.</p>\n<p>Its structure is defined as:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8gY2FuIGRlZmluZSBtdWx0aXBsZSB2aXN1YWxNYXAgY29tcG9uZW50cyBhdCB0aGUgc2FtZSB0aW1lCiAgICB7CiAgICAgIC8vIHRoZSBmaXJzdCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdjb250aW51b3VzJyAvLyBkZWZpbmVkIGFzIGNvbnRpbnVvdXMgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfSwKICAgIHsKICAgICAgLy8gdGhlIHNlY29uZCB2aXN1YWxNYXAgY29tcG9uZW50CiAgICAgIHR5cGU6ICdwaWVjZXdpc2UnIC8vIGRlZmluZWQgYXMgZGlzY3JldGUgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="continuous-and-piecewise-visual-mapping-components" tabindex="-1">Continuous and Piecewise Visual Mapping Components</h2>\n<p>The visual mapping component of ECharts is divided into continuous (<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>) and piecewise (<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>).</p>\n<p>Continuous means that the data dimension for visual mapping is a continuous value, while piecewise means that the data is divided into multiple segments or discrete data.</p>\n<h3 id="continuous-visual-mapping" tabindex="-1">Continuous Visual Mapping</h3>\n<p>Continuous type visual mapping can determine the range of visual mapping by specifying the maximum and minimum values.</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gdGhlIGZvdXJ0aCBkaW1lbnNpb24gb2Ygc2VyaWVzLmRhdGEgKGkuZS4gdmFsdWVbM10pIGlzIG1hcHBlZAogICAgICBzZXJpZXNJbmRleDogNCwgLy8gVGhlIGZvdXJ0aCBzZXJpZXMgaXMgbWFwcGVkLgogICAgICBpblJhbmdlOiB7CiAgICAgICAgLy8gVGhlIHZpc3VhbCBjb25maWd1cmF0aW9uIGluIHRoZSBzZWxlY3RlZCByYW5nZQogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8gQSBsaXN0IG9mIGNvbG9ycyB0aGF0IGRlZmluZXMgdGhlIGdyYXBoIGNvbG9yIG1hcHBpbmcKICAgICAgICAvLyB0aGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gJ2JsdWUnLCBhbmQKICAgICAgICAvLyB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gJ3JlZCcsIC8vIHRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAncmVkJywgLy8gdGhlIG1heGltdW0gdmFsdWUgaXMgbWFwcGVkIHRvICdyZWQnLgogICAgICAgIC8vIFRoZSByZXN0IGlzIGF1dG9tYXRpY2FsbHkgY2FsY3VsYXRlZCBsaW5lYXJseS4KICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8gRGVmaW5lcyB0aGUgbWFwcGluZyByYW5nZSBmb3IgdGhlIGdyYXBoaWMgc2l6ZS4KICAgICAgICAvLyBUaGUgbWluaW11bSB2YWx1ZSBvZiB0aGUgZGF0YSBpcyBtYXBwZWQgdG8gMzAsIC8vIGFuZCB0aGUgbWF4aW11bSB2YWx1ZSBpcyBtYXBwZWQgdG8gMTAwLgogICAgICAgIC8vIFRoZSBtYXhpbXVtIHZhbHVlIGlzIG1hcHBlZCB0byAxMDAuCiAgICAgICAgLy8gVGhlIHJlc3QgaXMgY2FsY3VsYXRlZCBsaW5lYXJseSBhdXRvbWF0aWNhbGx5LgogICAgICB9LAogICAgICBvdXRPZlJhbmdlOiB7CiAgICAgICAgLy8gQ2hlY2sgdGhlIG91dCBvZiByYW5nZSB2aXN1YWwgY29uZmlndXJhdGlvbgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>where <a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> indicates the style used for data within the data mapping range; while <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> specifies the style for data outside the mapping range.</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> specifies which dimension of the data will be visually mapped.</p>\n<h3 id="piecewise-visual-mapping" tabindex="-1">Piecewise Visual Mapping</h3>\n<p>The piecewise visual mapping component has three modes.</p>\n<ul>\n<li>Continuous data average segmentation: based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> to automatically split the data into pieces equally.</li>\n<li>Continuous data custom segmentation: define the range of each piece based on <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li>\n<li>Discrete data (categorical data): categories are defined in <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li>\n</ul>\n<p>To use segmented visual map, you need to set <code>type</code> to <code>\'piecewise\'</code> and choose one of the above three configuration items.</p>\n',postPath:"en/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:g},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:I}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:u,draft:e},{title:"系列",dir:B,draft:e},{title:"样式",dir:b},{title:"数据集",dir:A},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:W},{title:"事件与行为",dir:Z}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:S,draft:e},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:R},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:E}]}]},{title:T,dir:i,draft:e},{title:"跨平台方案",dir:D,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:e}]}]},{title:"最佳实践",dir:q,children:[{title:T,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:s},{title:"Get Help",dir:g},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:I}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:u,draft:e},{title:"Series",dir:B,draft:e},{title:"Style",dir:b},{title:"Dataset",dir:A},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:W},{title:"Event and Action",dir:Z}]},{title:"Application",dir:f,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:S,draft:e},{title:"Waterfall",dir:L}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:R},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:k},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:E}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:D,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:e}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/get-started/index.html b/handbook/en/get-started/index.html
index 9df49bf..ea3d381 100644
--- a/handbook/en/get-started/index.html
+++ b/handbook/en/get-started/index.html
@@ -3,27 +3,61 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="get-started"><a href="#get-started" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Get Started</h1>
-<h2 id="getting-apache-echarts"><a href="#getting-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Getting Apache ECharts</h2>
-<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN and explain how to install it quickly.</p>
-<p>At <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>
-<blockquote>
-<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>
-</blockquote>
-<h2 id="including-echarts"><a href="#including-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Including ECharts</h2>
-<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>When you open this <code>index.html</code>, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>
-<h2 id="plotting-a-simple-chart"><a href="#plotting-a-simple-chart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Plotting a Simple Chart</h2>
-<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> method and set the echarts instance with [setOption](<a href="https://echarts.apache.org//api.html#" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org//api.html#</a> echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>And this is your first chart with Apache ECharts!</p>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started&reset=1&edit=1"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/get-started#getting-apache-echarts">Getting Apache ECharts</a></li><li class="toc2"><a href="/handbook/en/get-started#including-echarts">Including ECharts</a></li><li class="toc2"><a href="/handbook/en/get-started#plotting-a-simple-chart">Plotting a Simple Chart</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/get-started.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,n,p,h,s,o,c,y,g,u,f,v,m,b,w,x,C,E,k,P,S,A,B,D,I,j,O,H,N,R,L,M,G,T,_,z,V,U,q,W,Y,$,F,X,Z,J,K,Q,tt,et,it,rt,at,lt,dt,nt,pt,ht,st,ot,ct,yt,gt,ut,ft,vt,mt,bt,wt,xt,Ct,Et,kt,Pt,St,At,Bt){return{layout:"default",data:[{article:{slug:p,toc:[{id:P,depth:2,text:S},{id:A,depth:2,text:B},{id:D,depth:2,text:I}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:p},children:[{type:e,tag:a,props:{href:"#get-started",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,c]},children:[]}]},{type:t,value:j}]},{type:t,value:r},{type:e,tag:m,props:{id:P},children:[{type:e,tag:a,props:{href:"#getting-apache-echarts",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,c]},children:[]}]},{type:t,value:S}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"Apache ECharts supports several download methods, which are further explained in the next tutorial "},{type:e,tag:a,props:{href:O},children:[{type:t,value:H}]},{type:t,value:". Here, we take the example of getting it from the "},{type:e,tag:a,props:{href:b,rel:[y,g,u],target:f},children:[{type:t,value:"jsDelivr"}]},{type:t,value:" CDN and explain how to install it quickly."}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"At "},{type:e,tag:a,props:{href:b,rel:[y,g,u],target:f},children:[{type:t,value:b}]},{type:t,value:" select "},{type:e,tag:n,props:{},children:[{type:t,value:"dist/echarts.js"}]},{type:t,value:", click and save it as "},{type:e,tag:n,props:{},children:[{type:t,value:N}]},{type:t,value:" file."}]},{type:t,value:r},{type:e,tag:"blockquote",props:{},children:[{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"More information about these files can be found in the next tutorial "},{type:e,tag:a,props:{href:O},children:[{type:t,value:H}]},{type:t,value:"."}]},{type:t,value:r}]},{type:t,value:r},{type:e,tag:m,props:{id:A},children:[{type:e,tag:a,props:{href:"#including-echarts",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,c]},children:[]}]},{type:t,value:B}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"Create a new "},{type:e,tag:n,props:{},children:[{type:t,value:R}]},{type:t,value:" file in the directory where you just saved "},{type:e,tag:n,props:{},children:[{type:t,value:N}]},{type:t,value:", with the following content:"}]},{type:t,value:r},{type:e,tag:w,props:{className:[x]},children:[{type:e,tag:C,props:{lang:E,"line-highlights":d,"file-name":d},children:[{type:t,value:'<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src="echarts.js"><\/script>\n </head>\n</html>\n'}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"When you open this "},{type:e,tag:n,props:{},children:[{type:t,value:R}]},{type:t,value:", you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step."}]},{type:t,value:r},{type:e,tag:m,props:{id:D},children:[{type:e,tag:a,props:{href:"#plotting-a-simple-chart",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,c]},children:[]}]},{type:t,value:I}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the "},{type:e,tag:n,props:{},children:[{type:t,value:"</head>"}]},{type:t,value:" tag introduced earlier."}]},{type:t,value:r},{type:e,tag:w,props:{className:[x]},children:[{type:e,tag:C,props:{lang:E,"line-highlights":d,"file-name":d},children:[{type:t,value:'<body>\n <! -- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n'}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"Then you can initialize an echarts instance with the "},{type:e,tag:a,props:{href:"https://echarts.apache.org//api.html#echarts.init",rel:[y,g,u],target:f},children:[{type:t,value:"echarts.init"}]},{type:t,value:" method and set the echarts instance with [setOption]("},{type:e,tag:a,props:{href:L,rel:[y,g,u],target:f},children:[{type:t,value:L}]},{type:t,value:" echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code."}]},{type:t,value:r},{type:e,tag:w,props:{className:[x]},children:[{type:e,tag:C,props:{lang:E,"line-highlights":d,"file-name":d},children:[{type:t,value:"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n \x3c!-- Include the ECharts file you just downloaded --\x3e\n <script src=\"echarts.min.js\"><\/script>\n </head>\n <body>\n \x3c!-- Prepare a DOM with a defined width and height for ECharts --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n // Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n <\/script>\n </body>\n</html>\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"And this is your first chart with Apache ECharts!"}]},{type:t,value:r},{type:e,tag:"md-example",props:{src:"doc-example/getting-started&reset=1&edit=1"},children:[{type:t,value:r}]}]},dir:"/en",path:M,extension:".md",createdAt:G,updatedAt:G},postPath:"en/get-started"}],fetch:{},error:T,state:{filled:!1,docVersion:d,ghVersion:d,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:p},{title:"入门篇",dir:_,children:[{title:"获取 ECharts",dir:z},{title:"在项目中引入 ECharts",dir:V},{title:"资源列表",dir:U,draft:i},{title:"获取灵感",dir:q},{title:"寻求帮助",dir:W},{title:"版本介绍",dir:Y,children:[{title:$,draft:i,dir:F},{title:"ECharts 5 新特性",dir:X},{title:"ECharts 5 升级指南",dir:Z}]}]},{title:"概念篇",dir:J,children:[{title:"图表容器及大小",dir:K},{title:"配置项",dir:Q,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:tt},{title:"数据转换",dir:et},{title:"坐标系",dir:it,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:k},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:rt,children:[{title:"常用图表类型",dir:at,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:lt},{title:"堆叠柱状图",dir:dt},{title:"动态排序柱状图",dir:nt,draft:i},{title:"极坐标系柱状图",dir:pt,draft:i},{title:"瀑布图",dir:ht,draft:i},{title:"视觉映射的柱状图",dir:k,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:st},{title:"堆叠折线图",dir:ot},{title:"区域面积图",dir:ct},{title:"平滑曲线图",dir:yt},{title:"阶梯线图",dir:gt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ut},{title:"圆环图",dir:ft},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:vt,children:[{title:"基础散点图",dir:mt}]}]},{title:"移动端优化",dir:v,draft:i},{title:"跨平台方案",dir:bt,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:wt},{title:"数据下钻",dir:xt,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Ct}]},{title:"交互",dir:Et,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:kt,draft:i}]}]},{title:"最佳实践",dir:Pt,children:[{title:"移动端优化",dir:v,draft:i},{title:St,dir:At},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Bt}]}],en:[{title:j,dir:p},{title:"Basics",dir:_,children:[{title:"Download ECharts",dir:z},{title:"Import ECharts",dir:V},{title:"Resources",dir:U,draft:i},{title:"Inspiration",dir:q},{title:"Get Help",dir:W},{title:"Release Note",dir:Y,children:[{title:$,draft:i,dir:F},{title:"ECharts 5 Features",dir:X},{title:"ECharts 5 Upgrade Guide",dir:Z}]}]},{title:"Concepts",dir:J,children:[{title:"Chart Container",dir:K},{title:"Chart Option",dir:Q,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:tt},{title:"Data Transform",dir:et},{title:"Coordinate",dir:it,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:k},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:rt,children:[{title:"Common Charts",dir:at,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:lt},{title:"Stacked Bar",dir:dt},{title:"Bar Racing",dir:nt,draft:i},{title:"Bar Polar",dir:pt,draft:i},{title:"Waterfall",dir:ht,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:st},{title:"Stacked Line",dir:ot},{title:"Area Chart",dir:ct},{title:"Smoothed Line",dir:yt},{title:"Step Line",dir:gt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ut},{title:"Ring Style",dir:ft},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:vt,children:[{title:"Basic Scatter",dir:mt}]}]},{title:"Mobile",dir:v,draft:i},{title:"Cross Platform",dir:bt,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:wt},{title:"Drilldown",dir:xt,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Ct}]},{title:"Interaction",dir:Et,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:kt,draft:i}]}]},{title:"Best Practice",dir:Pt,children:[{title:"Mobile Optimization",dir:v,draft:i},{title:St,dir:At},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Bt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:M,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:T},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","","code","get-started","true","span","icon","icon-link","nofollow","noopener","noreferrer","_blank","mobile","h2","https://www.jsdelivr.com/package/npm/echarts","div","nuxt-content-highlight","md-code-block","html","visual-map","getting-apache-echarts","Getting Apache ECharts","including-echarts","Including ECharts","plotting-a-simple-chart","Plotting a Simple Chart","Get Started","en/basics/download","Installation","echarts.js","index.html","https://echarts.apache.org//api.html#","/en/get-started","2021-07-24T07:49:57.150Z",null,"basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="get-started" tabindex="-1">Get Started</h1> <h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2> <p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p> <p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p> <blockquote><p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p></blockquote> <h2 id="including-echarts" tabindex="-1">Including ECharts</h2> <p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</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>
+ <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="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>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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>When you open this <code>index.html</code>, you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p> <h2 id="plotting-a-simple-chart" tabindex="-1">Plotting a Simple Chart</h2> <p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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>!</span> <span class="token attr-name">--</span> <span class="token attr-name">Prepare</span> <span class="token attr-name">a</span> <span class="token attr-name">DOM</span> <span class="token attr-name">with</span> <span class="token attr-name">a</span> <span class="token attr-name">defined</span> <span class="token attr-name">width</span> <span class="token attr-name">and</span> <span class="token attr-name">height</span> <span class="token attr-name">for</span> <span class="token attr-name">ECharts</span> <span class="token attr-name">--</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 special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> method and set the echarts instance with [setOption](<a href="https://echarts.apache.org//api.html#">https://echarts.apache.org//api.html#</a> echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</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>
+ <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 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>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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+ <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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>And this is your first chart with Apache ECharts!</p> <p><iframe width="100%" height="350" src=""></iframe></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/get-started.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,a,r,d,l,h,n,g,o,c,s,C,I,p,A,m,G,b,w,u,B,f,Z,y,W,k,x,P,R,v,X,H,E,S,Y,V,F,N,j,D,z,J,M,L,Q,U,T,K,O,_,q,$,tt,et,it){return{layout:"default",data:[{html:'<h1 id="get-started" tabindex="-1">Get Started</h1>\n<h2 id="getting-apache-echarts" tabindex="-1">Getting Apache ECharts</h2>\n<p>Apache ECharts supports several download methods, which are further explained in the next tutorial <a href="en/basics/download">Installation</a>. Here, we take the example of getting it from the <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN and explain how to install it quickly.</p>\n<p>At <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> select <code>dist/echarts.js</code>, click and save it as <code>echarts.js</code> file.</p>\n<blockquote>\n<p>More information about these files can be found in the next tutorial <a href="en/basics/download">Installation</a>.</p>\n</blockquote>\n<h2 id="including-echarts" tabindex="-1">Including ECharts</h2>\n<p>Create a new <code>index.html</code> file in the directory where you just saved <code>echarts.js</code>, with the following content:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMuanMiPjwvc2NyaXB0PgogIDwvaGVhZD4KPC9odG1sPg\'" line-highlights="\'\'" />\n<p>When you open this <code>index.html</code>, you will see an empty page. But don\'t worry. Open the console and make sure that no error message is reported, then you can proceed to the next step.</p>\n<h2 id="plotting-a-simple-chart" tabindex="-1">Plotting a Simple Chart</h2>\n<p>Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the <code></head></code> tag introduced earlier.</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEgLS0gUHJlcGFyZSBhIERPTSB3aXRoIGEgZGVmaW5lZCB3aWR0aCBhbmQgaGVpZ2h0IGZvciBFQ2hhcnRzIC0tPgogIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CjwvYm9keT4\'" line-highlights="\'\'" />\n<p>Then you can initialize an echarts instance with the <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> method and set the echarts instance with [setOption](<a href="https://echarts.apache.org//api.html#">https://echarts.apache.org//api.html#</a> echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code.</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIEluY2x1ZGUgdGhlIEVDaGFydHMgZmlsZSB5b3UganVzdCBkb3dubG9hZGVkIC0tPgogICAgPHNjcmlwdCBzcmM9ImVjaGFydHMubWluLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CiAgPGJvZHk-CiAgICA8IS0tIFByZXBhcmUgYSBET00gd2l0aCBhIGRlZmluZWQgd2lkdGggYW5kIGhlaWdodCBmb3IgRUNoYXJ0cyAtLT4KICAgIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CiAgICA8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgICAgIC8vIEluaXRpYWxpemUgdGhlIGVjaGFydHMgaW5zdGFuY2UgYmFzZWQgb24gdGhlIHByZXBhcmVkIGRvbQogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIFNwZWNpZnkgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEgZm9yIHRoZSBjaGFydAogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyBHZXR0aW5nIFN0YXJ0ZWQgRXhhbXBsZScKICAgICAgICB9LAogICAgICAgIHRvb2x0aXA6IHt9LAogICAgICAgIGxlZ2VuZDogewogICAgICAgICAgZGF0YTogWydzYWxlcyddCiAgICAgICAgfSwKICAgICAgICB4QXhpczogewogICAgICAgICAgZGF0YTogWydTaGlydHMnLCAnQ2FyZGlnYW5zJywgJ0NoaWZmb25zJywgJ1BhbnRzJywgJ0hlZWxzJywgJ1NvY2tzJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ3NhbGVzJywKICAgICAgICAgICAgdHlwZTogJ2JhcicsCiAgICAgICAgICAgIGRhdGE6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgICAgICAgICB9CiAgICAgICAgXQogICAgICB9OwoKICAgICAgLy8gRGlzcGxheSB0aGUgY2hhcnQgdXNpbmcgdGhlIGNvbmZpZ3VyYXRpb24gaXRlbXMgYW5kIGRhdGEganVzdCBzcGVjaWZpZWQuCiAgICAgIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7CiAgICA8L3NjcmlwdD4KICA8L2JvZHk-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>And this is your first chart with Apache ECharts!</p>\n<p><md-example src="doc-example/getting-started&reset=1&edit=1"></md-example></p>\n',postPath:"en/get-started"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:G,draft:t},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:f},{title:"视觉映射",dir:i},{title:"图例",dir:Z},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:x},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:v,draft:t},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:H,children:[{title:"基础折线图",dir:E},{title:"堆叠折线图",dir:S},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:j},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:J}]}]},{title:M,dir:e,draft:t},{title:"跨平台方案",dir:L,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:O}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:g},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:G,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:f},{title:"Visual Mapping",dir:i},{title:"Legend",dir:Z},{title:"Event and Action",dir:y}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:x},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:v,draft:t},{title:"Waterfall",dir:X}]},{title:"Line",dir:H,children:[{title:"Basic Line",dir:E},{title:"Stacked Line",dir:S},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:j},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:L,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:O}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/index.html b/handbook/en/index.html
index 07922a4..6dc1640 100644
--- a/handbook/en/index.html
+++ b/handbook/en/index.html
@@ -3,10 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,b,g,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,M,z,H,I,T,U,N,O,$,F,W,X,j,q,J,K,Q,Y,Z,tt,it,et,rt){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本介绍",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 新特性",dir:b},{title:"ECharts 5 升级指南",dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:C,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:S},{title:"数据集",dir:P},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:A,draft:t},{title:"极坐标系柱状图",dir:_,draft:t},{title:"瀑布图",dir:G,draft:t},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:$,children:[{title:"基础散点图",dir:F}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:tt,children:[{title:W,dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"Release Note",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:S},{title:"Dataset",dir:P},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:x}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:A,draft:t},{title:"Bar Polar",dir:_,draft:t},{title:"Waterfall",dir:G,draft:t}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:$,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practice",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:rt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r},content:{dbHash:"570e7c13"}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,g,b,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,M,z,I,T,U,H,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:w}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:H},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/en",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/en/meta/edit-guide/index.html b/handbook/en/meta/edit-guide/index.html
index b684031..2a66e38 100644
--- a/handbook/en/meta/edit-guide/index.html
+++ b/handbook/en/meta/edit-guide/index.html
@@ -3,105 +3,150 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="document-editing-guidelines"><a href="#document-editing-guidelines" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Document Editing Guidelines</h1>
-<h2 id="adding-a-markdown-file"><a href="#adding-a-markdown-file" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Adding a Markdown File</h2>
-<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>
-<p>Lowercase markdown file names.</p>
-<h2 id="using-prettier-to-automatically-format-code"><a href="#using-prettier-to-automatically-format-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Using Prettier to Automatically Format Code</h2>
-<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>
-<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>
-<h2 id="built-in-variables"><a href="#built-in-variables" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Built-in Variables</h2>
-<ul>
-<li><code>optionPath</code></li>
-<li><code>mainSitePath</code></li>
-<li><code>exampleViewPath</code></li>
-<li><code>exampleEditorPath</code></li>
-</ul>
-<p>Usage:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="embedding-code"><a href="#embedding-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Code</h2>
-<h3 id="basic-usage"><a href="#basic-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Basic Usage</h3>
+ <div 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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1> <h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2> <p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p> <p>Lowercase markdown file names.</p> <h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2> <p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p> <p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
+<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 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p> <h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2> <ul><li><code>optionPath</code></li> <li><code>mainSitePath</code></li> <li><code>exampleViewPath</code></li> <li><code>exampleEditorPath</code></li></ul> <p>Usage:</p> <pre><code>${xxxxx}
+</code></pre> <h2 id="embedding-code" tabindex="-1">Embedding Code</h2> <h3 id="basic-usage" tabindex="-1">Basic Usage</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>```js
+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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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 number">28</span><span class="token punctuation">,</span> <span class="token number">25</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3> <p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p> <p>For example, the comment <code>...</code></p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3> <blockquote><p>Currently only preview of Option code is supported</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live
+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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3> <h4 id="left-to-right" tabindex="-1">Left to Right</h4> <p></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-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 class="token punctuation">'</span>b3B0aW9uID0gewogIC4uLgp9OwpcYGBg<span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: <span class="token punctuation">'</span>lr<span class="token punctuation">'</span>}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
+<span class="token comment"><!-- prettier-ignore-end --></span>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="recommended-way-of-writing-code"><a href="#recommended-way-of-writing-code" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Recommended Way of Writing Code</h3>
-<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>
-<p>For example, the comment <code>...</code></p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="live-preview-and-editing"><a href="#live-preview-and-editing" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Live Preview and Editing</h3>
-<blockquote>
-<p>Currently only preview of Option code is supported</p>
-</blockquote>
+<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 class="token punctuation">'</span>b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow<span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: <span class="token punctuation">'</span>lr<span class="token punctuation">'</span>}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
+<span class="token title important"><span class="token punctuation">####</span> Right to left</span>
-<div class="nuxt-content-highlight"><!----></div>
-<h3 id="more-preview-layouts"><a href="#more-preview-layouts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Preview Layouts</h3>
-<h4 id="left-to-right"><a href="#left-to-right" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Left to Right</h4>
+<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 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div>markdown
+<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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div><p></p> <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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h4 id="down-to-up" tabindex="-1">Down to Up</h4> <p></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-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 class="token punctuation">'</span>b3B0aW9uID0gewogIC4uLgp9OwpcYGBg<span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: <span class="token punctuation">'</span>bt<span class="token punctuation">'</span>}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
+<span class="token comment"><!-- prettier-ignore-end --></span>
-<div class="nuxt-content-highlight"><!----></div>
-<h4 id="right-to-left"><a href="#right-to-left" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Right to left</h4>
+<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 class="token punctuation">'</span>b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow<span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token attr-name">v-bind</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{layout: <span class="token punctuation">'</span>bt<span class="token punctuation">'</span>}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
+<span class="token title important"><span class="token punctuation">###</span> Highlighting Lines of Code and Adding Filenames</span>
-<div class="nuxt-content-highlight"><!----></div>
-<h4 id="down-to-up"><a href="#down-to-up" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Down to Up</h4>
+Use.
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><!----></div>
-<h3 id="highlighting-lines-of-code-and-adding-filenames"><a href="#highlighting-lines-of-code-and-adding-filenames" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Highlighting Lines of Code and Adding Filenames</h3>
-<p>Use.</p>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<p>Effects.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <span class="filename">option.js</span> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="embedding-images"><a href="#embedding-images" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Embedding Images</h2>
-<p>Source images are stored under <code>static/images/</code>.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="set-the-image-height-and-width"><a href="#set-the-image-height-and-width" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Set the Image Height and Width</h3>
-<p>For the temporary style of the current page, you can just write html.</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="add-example-iframe"><a href="#add-example-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Example Iframe</h2>
-<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>
-<p>Use:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Result:
-<iframe width="100%" height="300" src="https://echarts.apache.org/examples/en/view.html?c=doc-example/getting-started"></iframe></p>
-<h2 id="add-link-to-option-item"><a href="#add-link-to-option-item" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Add Link to Option Item</h2>
-<p>Use:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>Result:
-<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p>
-<h2 id="more-component-usage"><a href="#more-component-usage" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>More Component Usage</h2>
-<p>The documentation supports the use of globally registered <code>markdown</code> components. In addition to the <code>md-example</code> component just described, the following components are also available</p>
-<h3 id="md-alert"><a href="#md-alert" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>md-alert</h3>
-<p>Prompt components</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+<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 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div>markdown<p></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> <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><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3> <p>For the temporary style of the current page, you can just write html.</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>img</span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/demo.png<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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 50px</span><span class="token punctuation">"</span></span></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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2> <p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p> <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-example</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>doc-example/getting-started<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<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>md-example</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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Result:
+<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><span class="token punctuation">"</span>series-bar.itemStyle.color<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>md-option</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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>Result:
+<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p> <h2 id="more-component-usage" 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="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>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
This is an info alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a success alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a warning alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a danger alert.
-</p></blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">In This Page</h4> <ul><li class="toc2"><a href="/handbook/en/meta/edit-guide#adding-a-markdown-file">Adding a Markdown File</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#using-prettier-to-automatically-format-code">Using Prettier to Automatically Format Code</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#built-in-variables">Built-in Variables</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#embedding-code">Embedding Code</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#basic-usage">Basic Usage</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#recommended-way-of-writing-code">Recommended Way of Writing Code</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#live-preview-and-editing">Live Preview and Editing</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#more-preview-layouts">More Preview Layouts</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#highlighting-lines-of-code-and-adding-filenames">Highlighting Lines of Code and Adding Filenames</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#embedding-images">Embedding Images</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#set-the-image-height-and-width">Set the Image Height and Width</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#add-example-iframe">Add Example Iframe</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#add-link-to-option-item">Add Link to Option Item</a></li><li class="toc2"><a href="/handbook/en/meta/edit-guide#more-component-usage">More Component Usage</a></li><li class="toc3"><a href="/handbook/en/meta/edit-guide#md-alert">md-alert</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,l,p,n,d,s,o,h,y,c,g,u,v,m,f,b,x,w,N,k,I,C,S,H,P,E,A,T,B,L,R,U,j,D,M,F,V,_,G,W,z,O,$,Z,q,X,J,K,Q,Y,ee,te,ie,ae,re,le,pe,ne,de,se,oe,he,ye,ce,ge,ue,ve,me,fe,be,xe,we,Ne,ke,Ie,Ce,Se,He,Pe,Ee,Ae,Te,Be,Le,Re,Ue,je,De,Me,Fe,Ve,_e,Ge,We,ze,Oe,$e,Ze,qe,Xe){return{layout:"default",data:[{article:{slug:C,toc:[{id:P,depth:2,text:E},{id:A,depth:2,text:T},{id:B,depth:2,text:L},{id:R,depth:2,text:U},{id:j,depth:3,text:D},{id:M,depth:3,text:F},{id:V,depth:3,text:_},{id:G,depth:3,text:W},{id:z,depth:3,text:O},{id:$,depth:2,text:Z},{id:q,depth:3,text:X},{id:J,depth:2,text:K},{id:Q,depth:2,text:Y},{id:ee,depth:2,text:te},{id:m,depth:3,text:m}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"document-editing-guidelines"},children:[{type:t,tag:n,props:{href:"#document-editing-guidelines",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:"Document Editing Guidelines"}]},{type:e,value:i},{type:t,tag:f,props:{id:P},children:[{type:t,tag:n,props:{href:"#adding-a-markdown-file",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:E}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Add a markdown file to the "},{type:t,tag:v,props:{},children:[{type:e,value:"contents/zh/"}]},{type:e,value:" (Chinese posts) or "},{type:t,tag:v,props:{},children:[{type:e,value:"contents/en/"}]},{type:e,value:" (English posts) directories, up to three levels. Update the path and title information in "},{type:t,tag:v,props:{},children:[{type:e,value:"contents/zh/posts.yml"}]},{type:e,value:" or "},{type:t,tag:v,props:{},children:[{type:e,value:"contents/en/posts.yml"}]},{type:e,value:"."}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Lowercase markdown file names."}]},{type:e,value:i},{type:t,tag:f,props:{id:A},children:[{type:t,tag:n,props:{href:"#using-prettier-to-automatically-format-code",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:T}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Before you start, we recommend installing the "},{type:t,tag:n,props:{href:"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode",rel:[ie,ae,re],target:"_blank"},children:[{type:e,value:"prettier VSCode plugin"}]},{type:e,value:", which will automatically format the code for you when you save it."}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent "},{type:t,tag:v,props:{},children:[{type:e,value:"prettier"}]},{type:e,value:" from formatting the code inside the block"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n"}]}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"If you find blocks of code that are not formatted, check first for syntax errors in the code."}]},{type:e,value:i},{type:t,tag:f,props:{id:B},children:[{type:t,tag:n,props:{href:"#built-in-variables",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:L}]},{type:e,value:i},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:w,props:{},children:[{type:t,tag:v,props:{},children:[{type:e,value:"optionPath"}]}]},{type:e,value:i},{type:t,tag:w,props:{},children:[{type:t,tag:v,props:{},children:[{type:e,value:"mainSitePath"}]}]},{type:e,value:i},{type:t,tag:w,props:{},children:[{type:t,tag:v,props:{},children:[{type:e,value:"exampleViewPath"}]}]},{type:e,value:i},{type:t,tag:w,props:{},children:[{type:t,tag:v,props:{},children:[{type:e,value:"exampleEditorPath"}]}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Usage:"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:"null","line-highlights":a,"file-name":a},children:[{type:e,value:"${xxxxx}\n"}]}]},{type:e,value:i},{type:t,tag:f,props:{id:R},children:[{type:t,tag:n,props:{href:"#embedding-code",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:U}]},{type:e,value:i},{type:t,tag:b,props:{id:j},children:[{type:t,tag:n,props:{href:"#basic-usage",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:D}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:x,"line-highlights":a,"file-name":a},children:[{type:e,value:le}]}]},{type:e,value:i},{type:t,tag:b,props:{id:M},children:[{type:t,tag:n,props:{href:"#recommended-way-of-writing-code",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:F}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles."}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"For example, the comment "},{type:t,tag:v,props:{},children:[{type:e,value:"..."}]}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:x,"line-highlights":a,"file-name":a},children:[{type:e,value:"option = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n"}]}]},{type:e,value:i},{type:t,tag:b,props:{id:V},children:[{type:t,tag:n,props:{href:"#live-preview-and-editing",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:_}]},{type:e,value:i},{type:t,tag:"blockquote",props:{},children:[{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Currently only preview of Option code is supported"}]},{type:e,value:i}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```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\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:N,props:{lang:x,layout:"tb"},children:[{type:e,value:k}]}]},{type:e,value:i},{type:t,tag:b,props:{id:G},children:[{type:t,tag:n,props:{href:"#more-preview-layouts",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:W}]},{type:e,value:i},{type:t,tag:S,props:{id:"left-to-right"},children:[{type:t,tag:n,props:{href:"#left-to-right",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:"Left to Right"}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```js [live-lr]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:N,props:{lang:x,layout:"lr"},children:[{type:e,value:k}]}]},{type:e,value:i},{type:t,tag:S,props:{id:"right-to-left"},children:[{type:t,tag:n,props:{href:"#right-to-left",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:"Right to left"}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```js [live-rl]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:N,props:{lang:x,layout:"rl"},children:[{type:e,value:k}]}]},{type:e,value:i},{type:t,tag:S,props:{id:"down-to-up"},children:[{type:t,tag:n,props:{href:"#down-to-up",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:"Down to Up"}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```js [live-bt]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:N,props:{lang:x,layout:"bt"},children:[{type:e,value:k}]}]},{type:e,value:i},{type:t,tag:b,props:{id:z},children:[{type:t,tag:n,props:{href:"#highlighting-lines-of-code-and-adding-filenames",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:O}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Use."}]},{type:e,value:i},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n"}]}]},{type:e,value:i},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Effects."}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:x,"line-highlights":"1,3-5","file-name":"option.js"},children:[{type:e,value:le}]}]},{type:e,value:i},{type:t,tag:f,props:{id:$},children:[{type:t,tag:n,props:{href:"#embedding-images",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:Z}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Source images are stored under "},{type:t,tag:v,props:{},children:[{type:e,value:"static/images/"}]},{type:e,value:"."}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:"![image description](images/demo.png)\n"}]}]},{type:e,value:i},{type:t,tag:b,props:{id:q},children:[{type:t,tag:n,props:{href:"#set-the-image-height-and-width",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:X}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"For the temporary style of the current page, you can just write html."}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<img src="images/demo.png" style="width: 50px" />\n'}]}]},{type:e,value:i},{type:t,tag:f,props:{id:J},children:[{type:t,tag:n,props:{href:"#add-example-iframe",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:K}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:t,tag:v,props:{},children:[{type:e,value:"src"}]},{type:e,value:" is the string after "},{type:t,tag:v,props:{},children:[{type:e,value:"?c="}]},{type:e,value:" in the "},{type:t,tag:n,props:{href:pe,rel:[ie,ae,re],target:"_blank"},children:[{type:e,value:pe}]},{type:e,value:" address"}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Use:"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>\n'}]}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:ne},{type:t,tag:de,props:{src:"doc-example/getting-started",width:"100%",height:300},children:[]}]},{type:e,value:i},{type:t,tag:f,props:{id:Q},children:[{type:t,tag:n,props:{href:"#add-link-to-option-item",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:Y}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Use:"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-option link="series-bar.itemStyle.color"></md-option>\n'}]}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:ne},{type:t,tag:"md-option",props:{link:"series-bar.itemStyle.color"},children:[]}]},{type:e,value:i},{type:t,tag:f,props:{id:ee},children:[{type:t,tag:n,props:{href:"#more-component-usage",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:te}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"The documentation supports the use of globally registered "},{type:t,tag:v,props:{},children:[{type:e,value:u}]},{type:e,value:" components. In addition to the "},{type:t,tag:v,props:{},children:[{type:e,value:de}]},{type:e,value:" component just described, the following components are also available"}]},{type:e,value:i},{type:t,tag:b,props:{id:m},children:[{type:t,tag:n,props:{href:"#md-alert",ariaHidden:s,tabIndex:o},children:[{type:t,tag:h,props:{className:[y,c]},children:[]}]},{type:e,value:m}]},{type:e,value:i},{type:t,tag:d,props:{},children:[{type:e,value:"Prompt components"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-alert type="info">\nThis is an info alert.\n</md-alert>\n'}]}]},{type:e,value:i},{type:t,tag:m,props:{type:"info"},children:[{type:e,value:"\nThis is an info alert.\n"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-alert type="success">\nThis is a success alert.\n</md-alert>\n'}]}]},{type:e,value:i},{type:t,tag:m,props:{type:"success"},children:[{type:e,value:"\nThis is a success alert.\n"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n'}]}]},{type:e,value:i},{type:t,tag:m,props:{type:"warning"},children:[{type:e,value:"\nThis is a warning alert.\n"}]},{type:e,value:i},{type:t,tag:l,props:{className:[p]},children:[{type:t,tag:g,props:{lang:u,"line-highlights":a,"file-name":a},children:[{type:e,value:'<md-alert type="warning">\nThis is a danger alert.\n</md-alert>\n'}]}]},{type:e,value:i},{type:t,tag:m,props:{type:"danger"},children:[{type:e,value:"\nThis is a danger alert.\n"}]}]},dir:"/en/meta",path:se,extension:".md",createdAt:"2021-07-21T08:44:02.349Z",updatedAt:"2021-07-21T09:51:51.604Z"},postPath:"en/meta/edit-guide"}],fetch:{},error:oe,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:he},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:ye},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:ce,draft:r},{title:"获取灵感",dir:ge},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:ue,children:[{title:ve,draft:r,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:me},{title:"ECharts 5 升级指南",dir:fe}]}]},{title:"概念篇",dir:be,children:[{title:"图表容器及大小",dir:xe},{title:"配置项",dir:we,draft:r},{title:"系列",dir:"series",draft:r},{title:"样式",dir:"style"},{title:"数据集",dir:Ne},{title:"数据转换",dir:ke},{title:"坐标系",dir:Ie,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:H},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:Ce,children:[{title:"常用图表类型",dir:Se,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:He},{title:"堆叠柱状图",dir:Pe},{title:"动态排序柱状图",dir:Ee,draft:r},{title:"极坐标系柱状图",dir:Ae,draft:r},{title:"瀑布图",dir:Te,draft:r},{title:"视觉映射的柱状图",dir:H,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:Be},{title:"堆叠折线图",dir:Le},{title:"区域面积图",dir:Re},{title:"平滑曲线图",dir:Ue},{title:"阶梯线图",dir:je}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:De},{title:"圆环图",dir:Me},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Fe,children:[{title:"基础散点图",dir:Ve}]}]},{title:"移动端优化",dir:I,draft:r},{title:"跨平台方案",dir:_e,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Ge},{title:"数据下钻",dir:We,draft:r}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ze}]},{title:"交互",dir:Oe,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$e,draft:r}]}]},{title:"最佳实践",dir:Ze,children:[{title:"移动端优化",dir:I,draft:r},{title:qe,dir:Xe},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:C}]}],en:[{title:"Get Started",dir:he},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:ye},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:ce,draft:r},{title:"Inspiration",dir:ge},{title:"Get Help",dir:"help"},{title:"Release Note",dir:ue,children:[{title:ve,draft:r,dir:"5-2-0"},{title:"ECharts 5 Features",dir:me},{title:"ECharts 5 Upgrade Guide",dir:fe}]}]},{title:"Concepts",dir:be,children:[{title:"Chart Container",dir:xe},{title:"Chart Option",dir:we,draft:r},{title:"Series",dir:"series",draft:r},{title:"Style",dir:"style"},{title:"Dataset",dir:Ne},{title:"Data Transform",dir:ke},{title:"Coordinate",dir:Ie,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:H},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:Ce,children:[{title:"Common Charts",dir:Se,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:He},{title:"Stacked Bar",dir:Pe},{title:"Bar Racing",dir:Ee,draft:r},{title:"Bar Polar",dir:Ae,draft:r},{title:"Waterfall",dir:Te,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:Be},{title:"Stacked Line",dir:Le},{title:"Area Chart",dir:Re},{title:"Smoothed Line",dir:Ue},{title:"Step Line",dir:je}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:De},{title:"Ring Style",dir:Me},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Fe,children:[{title:"Basic Scatter",dir:Ve}]}]},{title:"Mobile",dir:I,draft:r},{title:"Cross Platform",dir:_e,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Ge},{title:"Drilldown",dir:We,draft:r}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ze}]},{title:"Interaction",dir:Oe,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$e,draft:r}]}]},{title:"Best Practice",dir:Ze,children:[{title:"Mobile Optimization",dir:I,draft:r},{title:qe,dir:Xe},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:C}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:se,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:oe},content:{dbHash:"570e7c13"}}}}("text","element","\n","",!0,"div","nuxt-content-highlight","a","p","true",-1,"span","icon","icon-link","md-code-block","markdown","code","md-alert","h2","h3","js","li","md-live","option = {\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","mobile","edit-guide","h4","visual-map","adding-a-markdown-file","Adding a Markdown File","using-prettier-to-automatically-format-code","Using Prettier to Automatically Format Code","built-in-variables","Built-in Variables","embedding-code","Embedding Code","basic-usage","Basic Usage","recommended-way-of-writing-code","Recommended Way of Writing Code","live-preview-and-editing","Live Preview and Editing","more-preview-layouts","More Preview Layouts","highlighting-lines-of-code-and-adding-filenames","Highlighting Lines of Code and Adding Filenames","embedding-images","Embedding Images","set-the-image-height-and-width","Set the Image Height and Width","add-example-iframe","Add Example Iframe","add-link-to-option-item","Add Link to Option Item","more-component-usage","More Component Usage","nofollow","noopener","noreferrer","option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n","https://echarts.apache.org/examples/en/editor.html?c=line-simple","Result:\n","md-example","/en/meta/edit-guide",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,d,n,l,a,r,o,c,g,h,s,p,m,I,C,b,w,k,u,U,y,B,G,A,W,S,f,Z,x,L,V,J,N,Q,P,M,R,Y,F,v,D,j,z,X,E,H,O,T,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="document-editing-guidelines" tabindex="-1">Document Editing Guidelines</h1>\n<h2 id="adding-a-markdown-file" tabindex="-1">Adding a Markdown File</h2>\n<p>Add a markdown file to the <code>contents/zh/</code> (Chinese posts) or <code>contents/en/</code> (English posts) directories, up to three levels. Update the path and title information in <code>contents/zh/posts.yml</code> or <code>contents/en/posts.yml</code>.</p>\n<p>Lowercase markdown file names.</p>\n<h2 id="using-prettier-to-automatically-format-code" tabindex="-1">Using Prettier to Automatically Format Code</h2>\n<p>Before you start, we recommend installing the <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">prettier VSCode plugin</a>, which will automatically format the code for you when you save it.</p>\n<p>If you feel that the automatic formatting is breaking your code block, you can add the following comment to prevent <code>prettier</code> from formatting the code inside the block</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>If you find blocks of code that are not formatted, check first for syntax errors in the code.</p>\n<h2 id="built-in-variables" tabindex="-1">Built-in Variables</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n</ul>\n<p>Usage:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="embedding-code" tabindex="-1">Embedding Code</h2>\n<h3 id="basic-usage" tabindex="-1">Basic Usage</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="recommended-way-of-writing-code" tabindex="-1">Recommended Way of Writing Code</h3>\n<p>In order to allow the tool to help us format the code, we should try to avoid syntactically problematic writing styles.</p>\n<p>For example, the comment <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="live-preview-and-editing" tabindex="-1">Live Preview and Editing</h3>\n<blockquote>\n<p>Currently only preview of Option code is supported</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="more-preview-layouts" tabindex="-1">More Preview Layouts</h3>\n<h4 id="left-to-right" tabindex="-1">Left to Right</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2xyJ30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnbHInfSIgLz4KCiMjIyMgUmlnaHQgdG8gbGVmdAoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown\n<md-live lang="js" code="\'b3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" v-bind="{layout: \'rl\'}" /></p>\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="down-to-up" tabindex="-1">Down to Up</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<p><md-code-block lang="markdown" code="\'PG1kLWxpdmUgbGFuZz0ianMiIGNvZGU9IidiM0IwYVc5dUlEMGdld29nSUM0dUxncDlPd3BjWUdCZyciIHYtYmluZD0ie2xheW91dDogJ2J0J30iIC8-Cgo8IS0tIHByZXR0aWVyLWlnbm9yZS1lbmQgLS0-Cgo8bWQtbGl2ZSBsYW5nPSJqcyIgY29kZT0iJ2IzQjBhVzl1SUQwZ2V3b2dJSGhCZUdsek9pQjdDaUFnSUNCa1lYUmhPaUJiSjAxdmJpY3NJQ2RVZFdVbkxDQW5WMlZrSnl3Z0oxUm9kU2NzSUNkR2Nta25MQ0FuVTJGMEp5d2dKMU4xYmlkZENpQWdmU3dLSUNCNVFYaHBjem9nZTMwc0NpQWdjMlZ5YVdWek9pQmJDaUFnSUNCN0NpQWdJQ0FnSUhSNWNHVTZJQ2RpWVhJbkxBb2dJQ0FnSUNCa1lYUmhPaUJiTWpNc0lESTBMQ0F4T0N3Z01qVXNJREkzTENBeU9Dd2dNalZkQ2lBZ0lDQjlDaUFnWFFwOU93JyIgdi1iaW5kPSJ7bGF5b3V0OiAnYnQnfSIgLz4KCiMjIyBIaWdobGlnaHRpbmcgTGluZXMgb2YgQ29kZSBhbmQgQWRkaW5nIEZpbGVuYW1lcwoKVXNlLgoKPCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-\'" line-highlights="\'\'" />markdown</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n</code></pre>\n\x3c!-- prettier-ignore-end --\x3e\n<p>Effects.</p>\n<pre><code class="language-js{1,3-5}[option.js]">option = {\n series: [\n {\n type: \'bar\',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n</code></pre>\n<h2 id="embedding-images" tabindex="-1">Embedding Images</h2>\n<p>Source images are stored under <code>static/images/</code>.</p>\n<md-code-block lang="markdown" code="\'IVtpbWFnZSBkZXNjcmlwdGlvbl0oaW1hZ2VzL2RlbW8ucG5nKQ\'" line-highlights="\'\'" />\n<h3 id="set-the-image-height-and-width" tabindex="-1">Set the Image Height and Width</h3>\n<p>For the temporary style of the current page, you can just write html.</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="add-example-iframe" tabindex="-1">Add Example Iframe</h2>\n<p><code>src</code> is the string after <code>?c=</code> in the <a href="https://echarts.apache.org/examples/en/editor.html?c=line-simple">https://echarts.apache.org/examples/en/editor.html?c=line-simple</a> address</p>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCI-PC9tZC1leGFtcGxlPg\'" line-highlights="\'\'" />\n<p>Result:\n<md-example src="doc-example/getting-started" width="100%" height="300"></md-example></p>\n<h2 id="add-link-to-option-item" tabindex="-1">Add Link to Option Item</h2>\n<p>Use:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciI-PC9tZC1vcHRpb24-\'" line-highlights="\'\'" />\n<p>Result:\n<md-option link="series-bar.itemStyle.color"></md-option></p>\n<h2 id="more-component-usage" tabindex="-1">More Component Usage</h2>\n<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>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>Prompt components</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"en/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:n},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:o,draft:e},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:g},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:m}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:C},{title:"配置项",dir:b,draft:e},{title:"系列",dir:w,draft:e},{title:"样式",dir:k},{title:"数据集",dir:u},{title:"数据转换",dir:U},{title:"坐标系",dir:y,draft:e},{title:"坐标轴",dir:B},{title:"视觉映射",dir:t},{title:"图例",dir:G},{title:"事件与行为",dir:A}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:f},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:x},{title:"极坐标系柱状图",dir:L,draft:e},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:Q},{title:"区域面积图",dir:P},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:R}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:v}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:i,draft:e},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:E}]},{title:"数据处理",dir:H,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:T,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:n},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:r},{title:"Resources",dir:o,draft:e},{title:"Inspiration",dir:c},{title:"Get Help",dir:g},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:m}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:C},{title:"Chart Option",dir:b,draft:e},{title:"Series",dir:w,draft:e},{title:"Style",dir:k},{title:"Dataset",dir:u},{title:"Data Transform",dir:U},{title:"Coordinate",dir:y,draft:e},{title:"Axis",dir:B},{title:"Visual Mapping",dir:t},{title:"Legend",dir:G},{title:"Event and Action",dir:A}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:f},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:x},{title:"Bar Polar",dir:L,draft:e},{title:"Waterfall",dir:V}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:Q},{title:"Area Chart",dir:P},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:R}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:F},{title:"Rose Style",dir:v}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:E}]},{title:"Data",dir:H,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:T,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/en/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/favicon.ico b/handbook/favicon.ico
new file mode 100644
index 0000000..3632d0c
--- /dev/null
+++ b/handbook/favicon.ico
Binary files differ
diff --git a/handbook/images/5-2-0/group-transition-2.gif b/handbook/images/5-2-0/group-transition-2.gif
new file mode 100644
index 0000000..caf3dd7
--- /dev/null
+++ b/handbook/images/5-2-0/group-transition-2.gif
Binary files differ
diff --git a/handbook/images/5-2-0/group-transition.gif b/handbook/images/5-2-0/group-transition.gif
new file mode 100644
index 0000000..8d13ee9
--- /dev/null
+++ b/handbook/images/5-2-0/group-transition.gif
Binary files differ
diff --git a/handbook/images/5-2-0/polar-bar-label.jpg b/handbook/images/5-2-0/polar-bar-label.jpg
new file mode 100644
index 0000000..ee6853d
--- /dev/null
+++ b/handbook/images/5-2-0/polar-bar-label.jpg
Binary files differ
diff --git a/handbook/images/5-2-0/universal-transition-2.gif b/handbook/images/5-2-0/universal-transition-2.gif
new file mode 100644
index 0000000..9b7db83
--- /dev/null
+++ b/handbook/images/5-2-0/universal-transition-2.gif
Binary files differ
diff --git a/handbook/images/5-2-0/universal-transition-3.gif b/handbook/images/5-2-0/universal-transition-3.gif
new file mode 100644
index 0000000..8a7e212
--- /dev/null
+++ b/handbook/images/5-2-0/universal-transition-3.gif
Binary files differ
diff --git a/handbook/images/5-2-0/universal-transition.gif b/handbook/images/5-2-0/universal-transition.gif
new file mode 100644
index 0000000..bbb46a3
--- /dev/null
+++ b/handbook/images/5-2-0/universal-transition.gif
Binary files differ
diff --git a/handbook/index.html b/handbook/index.html
index d1d7973..a211490 100644
--- a/handbook/index.html
+++ b/handbook/index.html
@@ -3,10 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css">
</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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Release Note</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,b,g,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,M,z,H,I,T,U,N,O,$,F,W,X,j,q,J,K,Q,Y,Z,tt,it,et,rt){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本介绍",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 新特性",dir:b},{title:"ECharts 5 升级指南",dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:C,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:S},{title:"数据集",dir:P},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:A,draft:t},{title:"极坐标系柱状图",dir:_,draft:t},{title:"瀑布图",dir:G,draft:t},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:$,children:[{title:"基础散点图",dir:F}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:tt,children:[{title:W,dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"Release Note",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:S},{title:"Dataset",dir:P},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:x}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:A,draft:t},{title:"Bar Polar",dir:_,draft:t},{title:"Waterfall",dir:G,draft:t}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:$,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practice",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:rt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r},content:{dbHash:"570e7c13"}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/en/tutorial.html">Tutorials</a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/en/tutorial.html#ECharts%205%20Upgrade%20Guide">V5 Upgrade Guide<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues (GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">Events<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">Sponsorship<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">Thanks<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("zh")'>中文</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/inspiration" class="nav-link"><span class="title">Inspiration</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 Upgrade Guide</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Application</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">Bar</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/application/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Line</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Pie</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/application/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Scatter</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/en/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">Cross Platform</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Data</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Label</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/label/rich-text" class="nav-link"><span class="title">Rich Text</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">Interaction</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/en/application/interaction/drag" class="nav-link"><span class="title">Drag</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Best Practice</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/best-practice/aria" class="nav-link"><span class="title">Aria</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,g,b,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,M,z,I,T,U,H,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:w}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:H},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/application/chart-types/bar/bar-race/index.html b/handbook/zh/application/chart-types/bar/bar-race/index.html
new file mode 100644
index 0000000..91f1b2c
--- /dev/null
+++ b/handbook/zh/application/chart-types/bar/bar-race/index.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1> <h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2> <p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p> <blockquote><p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p></blockquote> <ol><li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li> <li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li> <li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li> <li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li> <li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li> <li><code>xAxis.max</code> 建议设为 <code>'dataMax'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li> <li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li> <li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li> <li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li> <li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li></ol> <h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2> <p>完整的例子如下:</p> <div class="md-live layout-tb"><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">var data = [];
+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: 3000,
+ animationDurationUpdate: 3000,
+ animationEasing: 'linear',
+ animationEasingUpdate: 'linear'
+};
+
+function update() {
+ 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);
+}
+
+setInterval(function() {
+ update();
+}, 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><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>
+ 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="token punctuation">,</span>
+ 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">3000</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">update</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><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>
+ 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><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>option<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 keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token function">update</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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/bar-race.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,o,n,c,h,s,g,p,C,A,I,b,m,B,u,y,G,W,E,R,f,w,S,v,Y,D,F,K,X,x,H,k,Z,L,V,P,M,U,J,O,z,T,N,Q,_,j,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">动态排序柱状图</h1>\n<h2 id="%E5%9F%BA%E6%9C%AC%E8%AE%BE%E7%BD%AE" tabindex="-1">基本设置</h2>\n<p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表,从 ECharts 5 开始内置支持。</p>\n<blockquote>\n<p>动态排序柱状图通常是横向的柱条,如果想要采用纵向的柱条,只要把本教程中的 X 轴和 Y 轴相反设置即可。</p>\n</blockquote>\n<ol>\n<li><code>yAxis.realtimeSort</code> 设为 <code>true</code>,表示开启 Y 轴的动态排序效果</li>\n<li><code>yAxis.inverse</code> 设为 <code>true</code>,表示 Y 轴从下往上是从小到大的排列</li>\n<li><code>yAxis.animationDuration</code> 建议设为 <code>300</code>,表示第一次柱条排序动画的时长</li>\n<li><code>yAxis.animationDurationUpdate</code> 建议设为 <code>300</code>,表示第一次后柱条排序动画的时长</li>\n<li>如果想只显示前 <em>n</em> 名,将 <code>yAxis.max</code> 设为 <em>n - 1</em>,否则显示所有柱条</li>\n<li><code>xAxis.max</code> 建议设为 <code>\'dataMax\'</code> 表示用数据的最大值作为 X 轴最大值,视觉效果更好</li>\n<li>如果想要实时改变标签,需要将 <code>series.label.valueAnimation</code> 设为 <code>true</code></li>\n<li><code>animationDuration</code> 设为 <code>0</code>,表示第一份数据不需要从 <code>0</code> 开始动画(如果希望从 <code>0</code> 开始则设为和 <code>animationDurationUpdate</code> 相同的值)</li>\n<li><code>animationDurationUpdate</code> 建议设为 <code>3000</code> 表示每次更新动画时长,这一数值应与调用 <code>setOption</code> 改变数据的频率相同</li>\n<li>以 <code>animationDurationUpdate</code> 的频率调用 <code>setInterval</code>,更新数据值,显示下一个时间点对应的柱条排序</li>\n</ol>\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>完整的例子如下:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbXTsKZm9yIChsZXQgaSA9IDA7IGkgPCA1OyArK2kpIHsKICBkYXRhLnB1c2goTWF0aC5yb3VuZChNYXRoLnJhbmRvbSgpICogMjAwKSk7Cn0KCm9wdGlvbiA9IHsKICB4QXhpczogewogICAgbWF4OiAnZGF0YU1heCcKICB9LAogIHlBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXSwKICAgIGludmVyc2U6IHRydWUsCiAgICBhbmltYXRpb25EdXJhdGlvbjogMzAwLAogICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMCwKICAgIG1heDogMiAvLyBvbmx5IHRoZSBsYXJnZXN0IDMgYmFycyB3aWxsIGJlIGRpc3BsYXllZAogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHJlYWx0aW1lU29ydDogdHJ1ZSwKICAgICAgbmFtZTogJ1gnLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogZGF0YSwKICAgICAgbGFiZWw6IHsKICAgICAgICBzaG93OiB0cnVlLAogICAgICAgIHBvc2l0aW9uOiAncmlnaHQnLAogICAgICAgIHZhbHVlQW5pbWF0aW9uOiB0cnVlCiAgICAgIH0KICAgIH0KICBdLAogIGxlZ2VuZDogewogICAgc2hvdzogdHJ1ZQogIH0sCiAgYW5pbWF0aW9uRHVyYXRpb246IDMwMDAsCiAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDMwMDAsCiAgYW5pbWF0aW9uRWFzaW5nOiAnbGluZWFyJywKICBhbmltYXRpb25FYXNpbmdVcGRhdGU6ICdsaW5lYXInCn07CgpmdW5jdGlvbiB1cGRhdGUoKSB7CiAgdmFyIGRhdGEgPSBvcHRpb24uc2VyaWVzWzBdLmRhdGE7CiAgZm9yICh2YXIgaSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgICBpZiAoTWF0aC5yYW5kb20oKSA-IDAuOSkgewogICAgICBkYXRhW2ldICs9IE1hdGgucm91bmQoTWF0aC5yYW5kb20oKSAqIDIwMDApOwogICAgfSBlbHNlIHsKICAgICAgZGF0YVtpXSArPSBNYXRoLnJvdW5kKE1hdGgucmFuZG9tKCkgKiAyMDApOwogICAgfQogIH0KICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwp9CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB1cGRhdGUoKTsKfSwgMzAwMCk7\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/bar/bar-race"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:C}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:b,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:B},{title:"数据集",dir:u},{title:"数据转换",dir:y},{title:"坐标系",dir:G,draft:i},{title:"坐标轴",dir:W},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:R}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:K,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:x},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:M,children:[{title:"基础散点图",dir:U}]}]},{title:J,dir:t,draft:i},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:z}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:J,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:C}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:u},{title:"Data Transform",dir:y},{title:"Coordinate",dir:G,draft:i},{title:"Axis",dir:W},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:R}]},{title:"Application",dir:f,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:F}]},{title:"Line",dir:K,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:x},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:V},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:M,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:z}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/bar/bar-race",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/bar/basic-bar/index.html b/handbook/zh/application/chart-types/bar/basic-bar/index.html
new file mode 100644
index 0000000..4602595
--- /dev/null
+++ b/handbook/zh/application/chart-types/bar/basic-bar/index.html
@@ -0,0 +1,203 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>'bar'</code>。</p> <p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2> <p>最简单的柱状图可以这样设置:</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,横坐标是类目型的,因此需要在 <code>xAxis</code> 中指定对应的值;而纵坐标是数值型的,可以根据 <code>series</code> 中的 <code>data</code>,自动生成对应的坐标范围。</p> <h2 id="%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">多系列的柱状图</h2> <p>我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 <code>series</code> 多添加一项就可以了——</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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>
+ 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 number">20</span><span class="token punctuation">,</span> <span class="token number">27</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">柱状图样式设置</h2> <h3 id="%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F" tabindex="-1">柱条样式</h3> <p>柱条的样式可以通过 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a> 设置,包括:</p> <ul><li>柱条的颜色(<code>color</code>);</li> <li>柱条的描边颜色(<code>borderColor</code>)、宽度(<code>borderWidth</code>)、样式(<code>borderType</code>);</li> <li>柱条圆角的半径(<code>barBorderRadius</code>);</li> <li>柱条透明度(<code>opacity</code>);</li> <li>阴影(<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>)。</li></ul> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,我们通过设置柱状图对应 <code>series</code> 的<code>itemStyle</code>,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p> <h3 id="%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6" tabindex="-1">柱条宽度和高度</h3> <p>柱条宽度可以通过 <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> 设置。比如在下面的例子中,将 <code>barWidth</code> 设为 <code>'20%'</code>,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。</p> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>另外,还可以设置 <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。</p> <h3 id="%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D" tabindex="-1">柱条间距</h3> <p>柱条间距分为两种,一种是不同系列在同一类目下的距离 <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>,另一种是类目与类目的距离 <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,<code>barGap</code> 被设为 <code>'20%'</code>,这意味着每个类目(比如 <code>A</code>)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 <code>barCategoryGap</code> 是 <code>'40%'</code>,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。</p> <p>通常而言,设置 <code>barGap</code> 及 <code>barCategoryGap</code> 后,就不需要设置 <code>barWidth</code> 了,这时候的宽度会自动调整。如果有需要的话,可以设置 <code>barMaxWidth</code> 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。</p> <blockquote><p>在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。</p></blockquote> <h3 id="%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2" tabindex="-1">为柱条添加背景色</h3> <p>有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 <a href="https://echarts.apache.org/option.html#series-bar.showBackground"><code>showBackground</code></a> 开启,并且可以通过 <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle"><code>backgroundStyle</code></a> 配置。</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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 number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/basic-bar.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,a,l,o,c,n,C,g,s,h,I,A,p,B,b,E,w,y,m,f,D,O,u,L,M,S,F,W,J,R,G,X,Y,x,k,H,v,z,K,U,V,j,Q,T,N,P,Z,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E6%9C%AC%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">基本柱状图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<p>设置柱状图的方式,是将 <code>series</code> 的 <code>type</code> 设为 <code>\'bar\'</code>。</p>\n<p><a href="https://echarts.apache.org/option.html#series-bar">[配置项手册]</a></p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">最简单的柱状图</h2>\n<p>最简单的柱状图可以这样设置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,横坐标是类目型的,因此需要在 <code>xAxis</code> 中指定对应的值;而纵坐标是数值型的,可以根据 <code>series</code> 中的 <code>data</code>,自动生成对应的坐标范围。</p>\n<h2 id="%E5%A4%9A%E7%B3%BB%E5%88%97%E7%9A%84%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">多系列的柱状图</h2>\n<p>我们可以用一个系列表示一组相关的数据,如果需要实现多系列的柱状图,只需要在 <code>series</code> 多添加一项就可以了——</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzI2LCAyNCwgMTgsIDIyLCAyMywgMjAsIDI3XQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%9F%B1%E7%8A%B6%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">柱状图样式设置</h2>\n<h3 id="%E6%9F%B1%E6%9D%A1%E6%A0%B7%E5%BC%8F" tabindex="-1">柱条样式</h3>\n<p>柱条的样式可以通过 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a> 设置,包括:</p>\n<ul>\n<li>柱条的颜色(<code>color</code>);</li>\n<li>柱条的描边颜色(<code>borderColor</code>)、宽度(<code>borderWidth</code>)、样式(<code>borderType</code>);</li>\n<li>柱条圆角的半径(<code>barBorderRadius</code>);</li>\n<li>柱条透明度(<code>opacity</code>);</li>\n<li>阴影(<code>shadowBlur</code>、<code>shadowColor</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>)。</li>\n</ul>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>在这个例子中,我们通过设置柱状图对应 <code>series</code> 的<code>itemStyle</code>,设置了柱条的样式。完整的配置项及其用法请参见配置项手册 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle"><code>series.itemStyle</code></a>。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6" tabindex="-1">柱条宽度和高度</h3>\n<p>柱条宽度可以通过 <a href="https://echarts.apache.org/option.html##series-bar.barWidth"><code>barWidth</code></a> 设置。比如在下面的例子中,将 <code>barWidth</code> 设为 <code>\'20%\'</code>,表示每个柱条的宽度就是类目宽度的 20%。由于这个例子中,每个系列有 5 个数据,20% 的类目宽度也就是整个 x 轴宽度的 4%。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>另外,还可以设置 <a href="https://echarts.apache.org/option.html#series-bar.barMaxWidth"><code>barMaxWidth</code></a> 限制柱条的最大宽度。对于一些特别小的数据,我们也可以为柱条指定最小高度 <a href="https://echarts.apache.org/option.html#series-bar.barMinHeight"><code>barMinHeight</code></a>,当数据对应的柱条高度小于该值时,柱条高度将采用这个最小高度。</p>\n<h3 id="%E6%9F%B1%E6%9D%A1%E9%97%B4%E8%B7%9D" tabindex="-1">柱条间距</h3>\n<p>柱条间距分为两种,一种是不同系列在同一类目下的距离 <a href="https://echarts.apache.org/option.html#series-bar.barWidth"><code>barWidth</code></a>,另一种是类目与类目的距离 <a href="https://echarts.apache.org/option.html#series-bar.barCategoryGap"><code>barCategoryGap</code></a>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDE4XSwKICAgICAgYmFyR2FwOiAnMjAlJywKICAgICAgYmFyQ2F0ZWdvcnlHYXA6ICc0MCUnCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzEyLCAxNCwgOSwgOSwgMTFdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,<code>barGap</code> 被设为 <code>\'20%\'</code>,这意味着每个类目(比如 <code>A</code>)下的两个柱子之间的距离,相对于柱条宽度的百分比。而 <code>barCategoryGap</code> 是 <code>\'40%\'</code>,意味着柱条每侧空余的距离,相对于柱条宽度的百分比。</p>\n<p>通常而言,设置 <code>barGap</code> 及 <code>barCategoryGap</code> 后,就不需要设置 <code>barWidth</code> 了,这时候的宽度会自动调整。如果有需要的话,可以设置 <code>barMaxWidth</code> 作为柱条宽度的上限,当图表宽度很大的时候,柱条宽度也不会太宽。</p>\n<blockquote>\n<p>在同一坐标系上,此属性会被多个柱状图系列共享。此属性应设置于此坐标系中最后一个柱状图系列上才会生效,并且是对此坐标系中所有柱状图系列生效。</p>\n</blockquote>\n<h3 id="%E4%B8%BA%E6%9F%B1%E6%9D%A1%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E8%89%B2" tabindex="-1">为柱条添加背景色</h3>\n<p>有时,我们希望能够为柱条添加背景色。从 ECharts 4.7.0 版本开始,这一功能可以简单地用 <a href="https://echarts.apache.org/option.html#series-bar.showBackground"><code>showBackground</code></a> 开启,并且可以通过 <a href="https://echarts.apache.org/option.html#series-bar.backgroundStyle"><code>backgroundStyle</code></a> 配置。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzaG93QmFja2dyb3VuZDogdHJ1ZSwKICAgICAgYmFja2dyb3VuZFN0eWxlOiB7CiAgICAgICAgY29sb3I6ICdyZ2JhKDIyMCwgMjIwLCAyMjAsIDAuOCknCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/bar/basic-bar"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:C},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:E},{title:"数据集",dir:w},{title:"数据转换",dir:y},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:t},{title:"图例",dir:D},{title:"事件与行为",dir:O}]},{title:"应用篇",dir:u,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:S},{title:"动态排序柱状图",dir:F},{title:"极坐标系柱状图",dir:W,draft:i},{title:"阶梯瀑布图",dir:J},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:U}]}]},{title:V,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:C},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:E},{title:"Dataset",dir:w},{title:"Data Transform",dir:y},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:t},{title:"Legend",dir:D},{title:"Event and Action",dir:O}]},{title:"Application",dir:u,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:S},{title:"Bar Racing",dir:F},{title:"Bar Polar",dir:W,draft:i},{title:"Waterfall",dir:J}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:v},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/bar/basic-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/bar/stacked-bar/index.html b/handbook/zh/application/chart-types/bar/stacked-bar/index.html
new file mode 100644
index 0000000..a88edcc
--- /dev/null
+++ b/handbook/zh/application/chart-types/bar/stacked-bar/index.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE" tabindex="-1">堆叠柱状图</h1> <p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p> <p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p> <div class="md-live layout-tb"><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 = {
+ 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 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">'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 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">'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p> <blockquote><p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p> <p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</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/zh/application/chart-types/bar/stacked-bar.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,c,n,o,s,h,p,g,C,b,f,I,A,m,B,u,w,E,k,S,v,D,y,P,R,x,L,z,G,M,H,J,K,O,V,F,W,_,N,T,U,X,Y,Q,j,q,Z,$,tt,it,et){return{layout:"default",data:[{html:"<h1 id=\"%E5%A0%86%E5%8F%A0%E6%9F%B1%E7%8A%B6%E5%9B%BE\" tabindex=\"-1\">堆叠柱状图</h1>\n<p>有时候,我们不仅希望知道不同系列各自的数值,还希望知道它们之和的变化,这时候通常使用堆积柱状图图来表现。顾名思义,堆积柱状图就是一个系列的数值“堆积”在另一个系列上,因而从他们的高度总和就能表达总量的变化。</p>\n<p>使用 EChart 实现堆积折线图的方法非常简单,只需要给一个系列的 <code>stack</code> 值设置一个字符串类型的值,这一个值表示该系列堆积的类别。也就是说,拥有同样 <code>stack</code> 值的系列将堆积在一组。</p>\n<md-live lang=\"js\" code=\"'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnYmFyJywKICAgICAgc3RhY2s6ICd4JwogICAgfSwKICAgIHsKICAgICAgZGF0YTogWzUsIDQsIDMsIDUsIDEwXSwKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAneCcKICAgIH0KICBdCn07'\" v-bind=\"{}\" />\n<p>在这个例子中,第二个系列所在的位置是在第一个系列的位置的基础上,上升了第二个系列数值对应的高度。因此,从第二个系列的位置,就能看出这两者总和的变化趋势。</p>\n<blockquote>\n<p><code>stack</code> 的取值用来表明哪些系列将被堆积在一起,理论上只要取值相同即可,具体的取值并没有什么区别。但在实际的应用中,我们建议使用一些有意义的字符串方便阅读。</p>\n<p>比如,在一个统计男女人数的图中,有四个系列,“成年男性”和“男孩”系列需要进行堆积,“成年女性”和“女孩”系列需要堆积。这时,这两组的的 <code>stack</code> 值就建议分别设为 <code>'男'</code> 和 <code>'女'</code>。虽然使用 <code>'a'</code> 和 <code>'b'</code> 这样没有意义的字符串也能实现同样的效果,但是代码的可阅读性就差了。</p>\n</blockquote>\n",postPath:"zh/application/chart-types/bar/stacked-bar"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:I,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:m},{title:"数据集",dir:B},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:B},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:S}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/bar/stacked-bar",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/bar/waterfall/index.html b/handbook/zh/application/chart-types/bar/waterfall/index.html
new file mode 100644
index 0000000..d64d8da
--- /dev/null
+++ b/handbook/zh/application/chart-types/bar/waterfall/index.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1> <p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p> <p>假设数据数组中的值是表示对前一个值的增减:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p> <div class="md-live layout-tb"><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">var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
+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><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">154</span><span class="token punctuation">,</span> <span class="token number">135</span><span class="token punctuation">,</span> <span class="token number">178</span><span class="token punctuation">,</span> <span class="token number">286</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">119</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">361</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">203</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
+<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 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>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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/bar/waterfall.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,a,g,C,I,c,o,n,s,A,h,p,w,b,B,G,m,S,f,Z,H,K,L,y,R,X,u,D,E,M,T,V,z,k,N,Y,v,x,J,O,F,P,W,U,j,Q,_,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%80%91%E5%B8%83%E5%9B%BE" tabindex="-1">阶梯瀑布图</h1>\n<p>Apache ECharts 中并没有单独的瀑布图类型,但是我们可以使用堆叠的柱状图模拟该效果。</p>\n<p>假设数据数组中的值是表示对前一个值的增减:</p>\n<md-code-block lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107\'" line-highlights="\'\'" />\n<p>也就是第一个数据是 <code>900</code>,第二个数据 <code>345</code> 表示的是在 <code>900</code> 的基础上增加了 <code>345</code>……将这个数据展示为阶梯瀑布图时,我们可以使用三个系列:第一个是不可交互的透明系列,用来实现“悬空”的柱状图效果;第二个系列用来表示正数;第二个系列用来表示负数。</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbOTAwLCAzNDUsIDM5MywgLTEwOCwgLTE1NCwgMTM1LCAxNzgsIDI4NiwgLTExOSwgLTM2MSwgLTIwM107CnZhciBoZWxwID0gW107CnZhciBwb3NpdGl2ZSA9IFtdOwp2YXIgbmVnYXRpdmUgPSBbXTsKZm9yICh2YXIgaSA9IDAsIHN1bSA9IDA7IGkgPCBkYXRhLmxlbmd0aDsgKytpKSB7CiAgaWYgKGRhdGFbaV0gPj0gMCkgewogICAgcG9zaXRpdmUucHVzaChkYXRhW2ldKTsKICAgIG5lZ2F0aXZlLnB1c2goJy0nKTsKICB9IGVsc2UgewogICAgcG9zaXRpdmUucHVzaCgnLScpOwogICAgbmVnYXRpdmUucHVzaCgtZGF0YVtpXSk7CiAgfQoKICBpZiAoaSA9PT0gMCkgewogICAgaGVscC5wdXNoKDApOwogIH0gZWxzZSB7CiAgICBzdW0gKz0gZGF0YVtpIC0gMV07CiAgICBpZiAoZGF0YVtpXSA8IDApIHsKICAgICAgaGVscC5wdXNoKHN1bSArIGRhdGFbaV0pOwogICAgfSBlbHNlIHsKICAgICAgaGVscC5wdXNoKHN1bSk7CiAgICB9CiAgfQp9CgpvcHRpb24gPSB7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdXYXRlcmZhbGwnCiAgfSwKICBncmlkOiB7CiAgICBsZWZ0OiAnMyUnLAogICAgcmlnaHQ6ICc0JScsCiAgICBib3R0b206ICczJScsCiAgICBjb250YWluTGFiZWw6IHRydWUKICB9LAogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgc3BsaXRMaW5lOiB7IHNob3c6IGZhbHNlIH0sCiAgICBkYXRhOiAoZnVuY3Rpb24oKSB7CiAgICAgIHZhciBsaXN0ID0gW107CiAgICAgIGZvciAodmFyIGkgPSAxOyBpIDw9IDExOyBpKyspIHsKICAgICAgICBsaXN0LnB1c2goJ09jdC8nICsgaSk7CiAgICAgIH0KICAgICAgcmV0dXJuIGxpc3Q7CiAgICB9KSgpCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgYmFyQm9yZGVyQ29sb3I6ICdyZ2JhKDAsMCwwLDApJywKICAgICAgICAgIGNvbG9yOiAncmdiYSgwLDAsMCwwKScKICAgICAgICB9LAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBiYXJCb3JkZXJDb2xvcjogJ3JnYmEoMCwwLDAsMCknLAogICAgICAgICAgY29sb3I6ICdyZ2JhKDAsMCwwLDApJwogICAgICAgIH0KICAgICAgfSwKICAgICAgZGF0YTogaGVscAogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ3Bvc2l0aXZlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIHN0YWNrOiAnYWxsJywKICAgICAgZGF0YTogcG9zaXRpdmUKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICduZWdhdGl2ZScsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBzdGFjazogJ2FsbCcsCiAgICAgIGRhdGE6IG5lZ2F0aXZlLAogICAgICBpdGVtU3R5bGU6IHsKICAgICAgICBjb2xvcjogJyNmMzMnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/bar/waterfall"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:A}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:w,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:B},{title:"数据集",dir:G},{title:"数据转换",dir:m},{title:"坐标系",dir:S,draft:i},{title:"坐标轴",dir:f},{title:"视觉映射",dir:e},{title:"图例",dir:Z},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:u,draft:i},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:Y},{title:"南丁格尔图(玫瑰图)",dir:v}]},{title:"散点图",dir:x,children:[{title:"基础散点图",dir:J}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:W,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:A}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:w,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:G},{title:"Data Transform",dir:m},{title:"Coordinate",dir:S,draft:i},{title:"Axis",dir:f},{title:"Visual Mapping",dir:e},{title:"Legend",dir:Z},{title:"Event and Action",dir:H}]},{title:"Application",dir:K,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:u,draft:i},{title:"Waterfall",dir:D}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:Y},{title:"Rose Style",dir:v}]},{title:"Scatter",dir:x,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:W,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/bar/waterfall",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/line/area-line/index.html b/handbook/zh/application/chart-types/line/area-line/index.html
new file mode 100644
index 0000000..c42b6f7
--- /dev/null
+++ b/handbook/zh/application/chart-types/line/area-line/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1> <p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</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/zh/application/chart-types/line/area-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,g,C,A,I,f,b,B,m,u,S,y,E,w,v,G,P,L,D,R,k,x,M,T,z,F,H,O,V,Z,W,_,N,X,K,Q,J,U,j,Y,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8C%BA%E5%9F%9F%E9%9D%A2%E7%A7%AF%E5%9B%BE" tabindex="-1">区域面积图</h1>\n<p>区域面积图将折线到坐标轴的空间设置背景色,用区域面积表达数据。相比普通的折线图,区域面积图的视觉效果更加饱满丰富,在系列不多的场景下尤其适用。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFsyNSwgMTQsIDIzLCAzNSwgMTBdLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGFyZWFTdHlsZTogewogICAgICAgIGNvbG9yOiAnI2ZmMCcsCiAgICAgICAgb3BhY2l0eTogMC41CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>通过 <a href="https://echarts.apache.org/option.html#series-line.areaStyle"><code>areaStyle</code></a> 设置折线图的填充区域样式,将其设为为 <code>{}</code> 表示使用默认样式,即使用系列的颜色以半透明的方式填充区域。如果想指定特定的样式,可以通过设置 <code>areaStyle</code> 下的配置项覆盖,如第二个系列将填充区域的颜色设为不透明度为 0.5 的黄色。</p>\n',postPath:"zh/application/chart-types/line/area-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:S,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:E},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:P},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:T},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:Z}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:_}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:S,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:E},{title:"Event and Action",dir:w}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:P},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:T},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:Z}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:_}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/line/area-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/line/basic-line/index.html b/handbook/zh/application/chart-types/line/basic-line/index.html
new file mode 100644
index 0000000..e365e83
--- /dev/null
+++ b/handbook/zh/application/chart-types/line/basic-line/index.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1> <p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2> <p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>在这个例子中,我们通过 <code>xAxis</code> 将横坐标设为类目型,并指定了对应的值;通过 <code>type</code> 将 <code>yAxis</code> 的类型设定为数值型。在 <code>series</code> 中,我们将系列类型设为 <code>line</code>,并且通过 <code>data</code> 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。</p> <blockquote><p>这里 <code>xAxis</code> 和 <code>yAxis</code> 的 <code>type</code> 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 <code>xAxis</code> 指定了类目型的 <code>data</code>,所以 <code>ECharts</code> 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 <code>type</code>。在实际的应用中,如果是 <code>'value'</code> 类型,也可以省略不写。</p></blockquote> <h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">笛卡尔坐标系中的折线图</h2> <p>如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 <code>series</code> 的 <code>data</code> 每个数据用一个包含两个元素的数组表示就行了。</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">折线图样式设置</h2> <h3 id="%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">折线的样式</h3> <p>折线图中折线的样式可以通过 <code>lineStyle</code> 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。</p> <h3 id="%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">数据点的样式</h3> <p>数据点的样式可以通过 <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a> 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。</p> <h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC" tabindex="-1">在数据点处显示数值</h2> <p>在系列中,这数据点的标签通过 <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a> 属性指定。如果将 <code>label</code> 下的 <code>show</code> 指定为<code>true</code>,则表示该数值默认时就显示;如果为 <code>false</code>,而 <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> 为 <code>true</code>,则表示只有在鼠标移动到该数据时,才显示数值。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE" tabindex="-1">空数据</h2> <p>在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。</p> <p>在 ECharts 中,我们使用字符串 <code>'-'</code> 表示空数据,这对其他系列的数据也是适用的。</p> <div class="md-live layout-tb"><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 = {
+ 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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>注意区别这个例子中,“空”数据与取值为 0 的数据。</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/zh/application/chart-types/line/basic-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,l,a,o,c,n,s,g,C,h,A,I,p,B,E,b,w,f,m,y,u,S,v,x,D,G,L,R,M,O,z,F,k,V,W,H,J,Q,X,T,K,P,Z,j,U,Y,N,_,q,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">基础折线图</h1>\n<p>柱状图(或称条形图)是一种通过柱形的长度来表现数据大小的一种常用图表类型。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">最简单的折线图</h2>\n<p>如果我们想建立一个横坐标是类目型(category)、纵坐标是数值型(value)的折线图,我们可以使用这样的方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydBJywgJ0InLCAnQyddCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMjAsIDIwMCwgMTUwXSwKICAgICAgdHlwZTogJ2xpbmUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>在这个例子中,我们通过 <code>xAxis</code> 将横坐标设为类目型,并指定了对应的值;通过 <code>type</code> 将 <code>yAxis</code> 的类型设定为数值型。在 <code>series</code> 中,我们将系列类型设为 <code>line</code>,并且通过 <code>data</code> 指定了折线图三个点的取值。这样,就能得到一个最简单的折线图了。</p>\n<blockquote>\n<p>这里 <code>xAxis</code> 和 <code>yAxis</code> 的 <code>type</code> 属性都可以隐去不写。因为坐标轴的默认类型是数值型,而 <code>xAxis</code> 指定了类目型的 <code>data</code>,所以 <code>ECharts</code> 也能识别出这是类目型的坐标轴。为了让大家更容易理解,我们特意写了 <code>type</code>。在实际的应用中,如果是 <code>\'value\'</code> 类型,也可以省略不写。</p>\n</blockquote>\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%AD%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">笛卡尔坐标系中的折线图</h2>\n<p>如果我们希望折线图在横坐标和纵坐标上都是连续的,即在笛卡尔坐标系中,应该如何实现呢?答案也很简单,只要把 <code>series</code> 的 <code>data</code> 每个数据用一个包含两个元素的数组表示就行了。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsKICAgICAgICBbMjAsIDEyMF0sCiAgICAgICAgWzUwLCAyMDBdLAogICAgICAgIFs0MCwgNTBdCiAgICAgIF0sCiAgICAgIHR5cGU6ICdsaW5lJwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">折线图样式设置</h2>\n<h3 id="%E6%8A%98%E7%BA%BF%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">折线的样式</h3>\n<p>折线图中折线的样式可以通过 <code>lineStyle</code> 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等,具体的可以参考配置项手册 <a href="https://echarts.apache.org/option.html#series-line.lineStyle"><code>series.lineStyle</code></a> 了解。这里,我们以设置颜色(color)、线宽(width)和折线类型(type)为例说明。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIG5vcm1hbDogewogICAgICAgICAgY29sb3I6ICdncmVlbicsCiAgICAgICAgICB3aWR0aDogNCwKICAgICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里设置折线宽度时,数据点描边的宽度是不会跟着改变的,而应该在数据点的配置项中另外设置。</p>\n<h3 id="%E6%95%B0%E6%8D%AE%E7%82%B9%E7%9A%84%E6%A0%B7%E5%BC%8F" tabindex="-1">数据点的样式</h3>\n<p>数据点的样式可以通过 <a href="https://echarts.apache.org/option.html#series-line.itemStyle"><code>series.itemStyle</code></a> 指定填充颜色(color)、描边颜色(borderColor)、描边宽度(borderWidth)、描边类型(borderType)、阴影(shadowColor)、不透明度(opacity)等。与折线样式的设置十分相似,这里不再展开说明。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E7%82%B9%E5%A4%84%E6%98%BE%E7%A4%BA%E6%95%B0%E5%80%BC" tabindex="-1">在数据点处显示数值</h2>\n<p>在系列中,这数据点的标签通过 <a href="https://echarts.apache.org/option.html#series-line.label"><code>series.label</code></a> 属性指定。如果将 <code>label</code> 下的 <code>show</code> 指定为<code>true</code>,则表示该数值默认时就显示;如果为 <code>false</code>,而 <a href="https://echarts.apache.org/option.html#series-line.emphasis.label.show"><code>series.emphasis.label.show</code></a> 为 <code>true</code>,则表示只有在鼠标移动到该数据时,才显示数值。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICBwb3NpdGlvbjogJ2JvdHRvbScsCiAgICAgICAgdGV4dFN0eWxlOiB7CiAgICAgICAgICBmb250U2l6ZTogMjAKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE" tabindex="-1">空数据</h2>\n<p>在一个系列中,可能一个横坐标对应的取值是“空”的,将其设为 0 有时并不能满足我们的期望--空数据不应被其左右的数据连接。</p>\n<p>在 ECharts 中,我们使用字符串 <code>\'-\'</code> 表示空数据,这对其他系列的数据也是适用的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFswLCAyMiwgJy0nLCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScKICAgIH0KICBdCn07\'" v-bind="{}" />\n<blockquote>\n<p>注意区别这个例子中,“空”数据与取值为 0 的数据。</p>\n</blockquote>\n',postPath:"zh/application/chart-types/line/basic-line"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:c,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:s},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:b},{title:"数据集",dir:w},{title:"数据转换",dir:f},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:t},{title:"图例",dir:u},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:i},{title:"阶梯瀑布图",dir:M},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:k},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:T}]}]},{title:K,dir:e,draft:i},{title:"跨平台方案",dir:P,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Y,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:o},{title:"Resources",dir:c,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:s},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:w},{title:"Data Transform",dir:f},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:t},{title:"Legend",dir:u},{title:"Event and Action",dir:S}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:i},{title:"Waterfall",dir:M}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:k},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:J},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:P,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Y,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/line/basic-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/line/smooth-line/index.html b/handbook/zh/application/chart-types/line/smooth-line/index.html
new file mode 100644
index 0000000..6c20021
--- /dev/null
+++ b/handbook/zh/application/chart-types/line/smooth-line/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1> <p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p> <div class="md-live layout-tb"><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 = {
+ 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 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 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/line/smooth-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,o,c,s,h,p,g,f,C,b,B,m,u,A,I,E,S,v,w,P,y,k,x,D,L,R,G,z,M,V,O,_,H,Q,T,F,J,W,X,N,U,j,K,Z,$,Y,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%B9%B3%E6%BB%91%E6%9B%B2%E7%BA%BF%E5%9B%BE" tabindex="-1">平滑曲线图</h1>\n<p>平滑曲线图也是折线图的一种变形,这种更柔和的样式也是一种不错的视觉选择。使用时,只需要将折线图系列的 <code>smooth</code> 属性设置为 <code>true</code> 即可。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCAyMywgMTldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/line/smooth-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:f}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:B,draft:t},{title:"系列",dir:m,draft:t},{title:"样式",dir:u},{title:"数据集",dir:A},{title:"数据转换",dir:I},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:v},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:k},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:D},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:_}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:Q},{title:"南丁格尔图(玫瑰图)",dir:T}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:J}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:U,children:[{title:"动态的异步数据",dir:j},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:f}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:m,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:A},{title:"Data Transform",dir:I},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:v},{title:"Event and Action",dir:w}]},{title:"Application",dir:P,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:k},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:D},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:R}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:_}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:Q},{title:"Rose Style",dir:T}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:J}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:U,children:[{title:"Dynamic Data",dir:j},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/line/smooth-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/line/stacked-line/index.html b/handbook/zh/application/chart-types/line/stacked-line/index.html
new file mode 100644
index 0000000..97640d9
--- /dev/null
+++ b/handbook/zh/application/chart-types/line/stacked-line/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">
+ <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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1> <p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。</p> <div class="md-live layout-tb"><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 = {
+ 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 punctuation">,</span>
+ 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 punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/line/stacked-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,c,o,h,C,g,p,A,I,f,b,B,m,u,w,E,L,y,R,S,G,v,k,x,D,P,z,F,O,M,W,H,J,V,K,N,Q,X,Y,T,_,U,j,Z,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%A0%86%E5%8F%A0%E6%8A%98%E7%BA%BF%E5%9B%BE" tabindex="-1">堆叠折线图</h1>\n<p>与<a href="./zh/application/chart-types/bar/stacked-bar">堆叠柱状图</a>类似,堆叠折线图也是用系列的 <code>stack</code> 设置哪些系列堆叠在一起。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcKICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>但是不同的是,如果不加说明的话,我们很难判断出这是一个堆叠折线图,还是一个普通的折线图。所以,对于堆叠折线图而言,一般建议使用区域填充色以表明堆叠的情况。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0EnLCAnQicsICdDJywgJ0QnLCAnRSddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIGRhdGE6IFsxMCwgMjIsIDI4LCA0MywgNDldLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHN0YWNrOiAneCcsCiAgICAgIGFyZWFTdHlsZToge30KICAgIH0sCiAgICB7CiAgICAgIGRhdGE6IFs1LCA0LCAzLCA1LCAxMF0sCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RhY2s6ICd4JywKICAgICAgYXJlYVN0eWxlOiB7fQogICAgfQogIF0KfTs\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/line/stacked-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:p}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:I},{title:"配置项",dir:f,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:B},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:L},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:k},{title:"极坐标系柱状图",dir:x,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:P,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:J},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:N}]}]},{title:Q,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Y}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:_},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:Z,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:Q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:p}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:I},{title:"Chart Option",dir:f,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:L},{title:"Event and Action",dir:y}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:k},{title:"Bar Polar",dir:x,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:P,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:J},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:Y}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:_},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:Z,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/line/stacked-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/line/step-line/index.html b/handbook/zh/application/chart-types/line/step-line/index.html
new file mode 100644
index 0000000..bac6be6
--- /dev/null
+++ b/handbook/zh/application/chart-types/line/step-line/index.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1> <p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p> <p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>'start'</code>、<code>'middle'</code> 和 <code>'end'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p> <div class="md-live layout-tb"><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 = {
+ 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>
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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>
+ 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="token number">230</span><span class="token punctuation">,</span> <span class="token number">210</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">'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="token number">430</span><span class="token punctuation">,</span> <span class="token number">410</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">'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="token number">530</span><span class="token punctuation">,</span> <span class="token number">510</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</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/zh/application/chart-types/line/step-line.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,g,C,p,I,A,b,f,w,m,u,B,E,y,M,D,G,v,x,L,T,k,R,S,W,z,J,P,H,N,U,Z,F,V,K,O,X,Y,Q,_,j,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E9%98%B6%E6%A2%AF%E7%BA%BF%E5%9B%BE" tabindex="-1">阶梯线图</h1>\n<p>阶梯线图又称方波图,它使用水平和垂直的线来连接两个数据点,而普通折线图则直接将两个点连接起来。阶梯线图能够很好地表达数据的突变。</p>\n<p>在 ECharts 中,系列的 <code>step</code> 属性用来表征阶梯线图的连接类型,它共有三种取值:<code>\'start\'</code>、<code>\'middle\'</code> 和 <code>\'end\'</code>,分别表示在当前点,当前点与下个点的中间点,下个点拐弯。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnU3RlcCBTdGFydCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ3N0YXJ0JywKICAgICAgZGF0YTogWzEyMCwgMTMyLCAxMDEsIDEzNCwgOTAsIDIzMCwgMjEwXQogICAgfSwKICAgIHsKICAgICAgbmFtZTogJ1N0ZXAgTWlkZGxlJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzdGVwOiAnbWlkZGxlJywKICAgICAgZGF0YTogWzIyMCwgMjgyLCAyMDEsIDIzNCwgMjkwLCA0MzAsIDQxMF0KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdTdGVwIEVuZCcsCiAgICAgIHR5cGU6ICdsaW5lJywKICAgICAgc3RlcDogJ2VuZCcsCiAgICAgIGRhdGE6IFs0NTAsIDQzMiwgNDAxLCA0NTQsIDU5MCwgNTMwLCA1MTBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<blockquote>\n<p>请注意这个例子中不同的 <code>step</code> 取值对应的数据点和连线的区别。</p>\n</blockquote>\n',postPath:"zh/application/chart-types/line/step-line"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:b,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:w},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:M}]},{title:"应用篇",dir:D,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:x},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:T,draft:t},{title:"阶梯瀑布图",dir:k},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:P}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:F}]}]},{title:V,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:Q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:V,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:b,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:w},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:M}]},{title:"Application",dir:D,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:x},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:T,draft:t},{title:"Waterfall",dir:k}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:P}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:N},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:Q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/line/step-line",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/pie/basic-pie/index.html b/handbook/zh/application/chart-types/pie/basic-pie/index.html
new file mode 100644
index 0000000..376dca5
--- /dev/null
+++ b/handbook/zh/application/chart-types/pie/basic-pie/index.html
@@ -0,0 +1,185 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1> <p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2> <p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p> <div class="md-live layout-tb"><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 = {
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: '直接访问'
+ },
+ {
+ value: 234,
+ name: '联盟广告'
+ },
+ {
+ value: 1548,
+ name: '搜索引擎'
+ }
+ ]
+ }
+ ]
+};</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">'直接访问'</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">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><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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>需要注意的是,这里是 <code>value</code> 不需要是百分比数据,ECharts 会根据所有数据的 <code>value</code> ,按比例分配它们在饼图中对应的弧度。</p> <h2 id="%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">饼图样式设置</h2> <h3 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84" tabindex="-1">饼图的半径</h3> <p>饼图的半径可以通过 <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a> 设置,可以是诸如 <code>'60%'</code> 这样相对的百分比字符串,或是 <code>200</code> 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。</p> <div class="md-live layout-tb"><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 = {
+ series: [
+ {
+ type: 'pie',
+ data: [
+ {
+ value: 335,
+ name: '直接访问'
+ },
+ {
+ value: 234,
+ name: '联盟广告'
+ },
+ {
+ value: 1548,
+ name: '搜索引擎'
+ }
+ ],
+ 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">'直接访问'</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">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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE" tabindex="-1">如果数据和为 0,不显示饼图</h2> <p>在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> 设为 <code>false</code>。</p> <div class="md-live layout-tb"><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 = {
+ series: [
+ {
+ type: 'pie',
+ stillShowZeroSum: false,
+ data: [
+ {
+ value: 0,
+ name: '直接访问'
+ },
+ {
+ value: 0,
+ name: '联盟广告'
+ },
+ {
+ value: 0,
+ name: '搜索引擎'
+ }
+ ]
+ }
+ ]
+};</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">'直接访问'</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">'联盟广告'</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">'搜索引擎'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>如果希望扇形对应的标签也不显示,可以将 <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> 设为 <code>false</code>。</p> <div class="md-live layout-tb"><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 = {
+ series: [
+ {
+ type: 'pie',
+ stillShowZeroSum: false,
+ label: {
+ show: false
+ },
+ data: [
+ {
+ value: 0,
+ name: '直接访问'
+ },
+ {
+ value: 0,
+ name: '联盟广告'
+ },
+ {
+ value: 0,
+ name: '搜索引擎'
+ }
+ ]
+ }
+ ]
+};</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><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">'直接访问'</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">'联盟广告'</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">'搜索引擎'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/pie/basic-pie.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Hansz00" target="_blank" class="post-contributor"><img alt="Hansz00" src="https://avatars.githubusercontent.com/Hansz00?size=60"> <span>Hansz00</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,r,d,l,g,a,C,I,A,o,n,c,s,h,p,B,b,m,E,w,f,u,W,K,v,G,Z,T,H,S,x,O,k,U,z,D,y,F,L,J,P,Y,_,R,X,M,V,N,Q,j,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E9%A5%BC%E5%9B%BE" tabindex="-1">基础饼图</h1>\n<p>饼图主要用于表现不同类目的数据在总和中的占比。每个的弧度表示数据数量的比例。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E9%A5%BC%E5%9B%BE" tabindex="-1">最简单的饼图</h2>\n<p>饼图的配置和折线图、柱状图略有不同,不再需要配置坐标轴,而是把数据名称和值都写在系列中。以下是一个最简单的饼图的例子。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>需要注意的是,这里是 <code>value</code> 不需要是百分比数据,ECharts 会根据所有数据的 <code>value</code> ,按比例分配它们在饼图中对应的弧度。</p>\n<h2 id="%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">饼图样式设置</h2>\n<h3 id="%E9%A5%BC%E5%9B%BE%E7%9A%84%E5%8D%8A%E5%BE%84" tabindex="-1">饼图的半径</h3>\n<p>饼图的半径可以通过 <a href="https://echarts.apache.org/option.html#series-pie.radius"><code>series.radius</code></a> 设置,可以是诸如 <code>\'60%\'</code> 这样相对的百分比字符串,或是 <code>200</code> 这样的绝对像素数值。当它是百分比字符串时,它是相对于容器宽高中较小的一条边的。也就是说,如果宽度大于高度,则百分比是相对于高度的,反之则反;当它是数值型时,它表示绝对的像素大小。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgICBuYW1lOiAn55u05o6l6K6_6ZeuJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMTU0OCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdLAogICAgICByYWRpdXM6ICc1MCUnCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E5%A6%82%E6%9E%9C%E6%95%B0%E6%8D%AE%E5%92%8C%E4%B8%BA-0%EF%BC%8C%E4%B8%8D%E6%98%BE%E7%A4%BA%E9%A5%BC%E5%9B%BE" tabindex="-1">如果数据和为 0,不显示饼图</h2>\n<p>在默认情况下,如果数据值和为 0,会显示平均分割的扇形。比如,如果有 4 个数据项,并且每个数据项都是 0,则每个扇形都是 90°。如果我们希望在这种情况下不显示任何扇形,可以将 <a href="https://echarts.apache.org/option.html#series-pie.stillShowZeroSum"><code>series.stillShowZeroSum</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfnm7TmjqXorr_pl64nCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfogZTnm5_lub_lkYonCiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogMCwKICAgICAgICAgIG5hbWU6ICfmkJzntKLlvJXmk44nCiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>如果希望扇形对应的标签也不显示,可以将 <a href="https://echarts.apache.org/option.html#series-pie.label.show"><code>series.label.show</code></a> 设为 <code>false</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgc3RpbGxTaG93WmVyb1N1bTogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UKICAgICAgfSwKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-ebtOaOpeiuv-mXricKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-iBlOebn-W5v-WRiicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAwLAogICAgICAgICAgbmFtZTogJ-aQnOe0ouW8leaTjicKICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/pie/basic-pie"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:A},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:E},{title:"数据转换",dir:w},{title:"坐标系",dir:f,draft:i},{title:"坐标轴",dir:u},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:G,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:T},{title:"动态排序柱状图",dir:H},{title:"极坐标系柱状图",dir:S,draft:i},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:U},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:D},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:L},{title:"南丁格尔图(玫瑰图)",dir:J}]},{title:"散点图",dir:P,children:[{title:"基础散点图",dir:Y}]}]},{title:_,dir:t,draft:i},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:a},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:A},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:E},{title:"Data Transform",dir:w},{title:"Coordinate",dir:f,draft:i},{title:"Axis",dir:u},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:G,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:T},{title:"Bar Racing",dir:H},{title:"Bar Polar",dir:S,draft:i},{title:"Waterfall",dir:x}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:U},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:D},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:L},{title:"Rose Style",dir:J}]},{title:"Scatter",dir:P,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/pie/basic-pie",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/pie/doughnut/index.html b/handbook/zh/application/chart-types/pie/doughnut/index.html
new file mode 100644
index 0000000..a601201
--- /dev/null
+++ b/handbook/zh/application/chart-types/pie/doughnut/index.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1> <p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p> <h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2> <p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p> <p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p> <div class="md-live layout-tb"><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 = {
+ title: {
+ text: '圆环图的例子',
+ 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">'圆环图的例子'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。</p> <h2 id="%E5%9C%A8%E5%9C%86%E7%8E%AF%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97" tabindex="-1">在圆环图中间显示高亮扇形对应的文字</h2> <p>上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 <code>label</code>(默认用扇形颜色显示数据的 <code>name</code>),显示在圆环图中间。在默认情况下不显示系列的 <code>label</code>,在高亮时显示。具体的代码如下:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p> <p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</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/zh/application/chart-types/pie/doughnut.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,g,C,n,I,A,o,c,s,h,p,B,E,b,m,f,u,w,G,W,y,x,L,Z,U,z,v,D,V,F,H,O,J,S,R,P,Y,M,k,K,N,X,Q,T,j,_,$,q,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">圆环图</h1>\n<p>圆环图同样可以用来表示数据占总体的比例,相比于饼图,它中间空余的部分可以用来显示一些额外的文字等信息,因而也是一种常用的图表类型。</p>\n<h2 id="%E5%9F%BA%E7%A1%80%E5%9C%86%E7%8E%AF%E5%9B%BE" tabindex="-1">基础圆环图</h2>\n<p>在 ECharts 中,饼图的半径除了上一小节提到的,可以是一个数值或者字符串之外,还可以是一个包含两个元素的数组,每个元素可以为数值或字符串。当它是一个数组时,它的前一项表示内半径,后一项表示外半径,这样就形成了一个圆环图。</p>\n<p>从这个角度上来说,可以认为饼图是一个内半径为 0 的圆环图,也就是说,饼图是圆环图的特例。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5ZyG546v5Zu-55qE5L6L5a2QJywKICAgIGxlZnQ6ICdjZW50ZXInLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDMzNSwKICAgICAgICAgIG5hbWU6ICdBJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDIzNCwKICAgICAgICAgIG5hbWU6ICdCJwogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJhZGl1czogWyc0MCUnLCAnNzAlJ10KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>如果半径是数组,其中的两项也可以一项是数值,另一项是百分比形式的字符串。但是这样可能导致在某些分辨率下,内半径小于外半径。ECharts 会自动使用小的一项作为内半径,但是仍应小心这样可能会导致的非预期效果。</p>\n<h2 id="%E5%9C%A8%E5%9C%86%E7%8E%AF%E5%9B%BE%E4%B8%AD%E9%97%B4%E6%98%BE%E7%A4%BA%E9%AB%98%E4%BA%AE%E6%89%87%E5%BD%A2%E5%AF%B9%E5%BA%94%E7%9A%84%E6%96%87%E5%AD%97" tabindex="-1">在圆环图中间显示高亮扇形对应的文字</h2>\n<p>上面的例子展现了在圆环图中间显示固定文字的例子,下面我们要介绍,如何在圆环图中间显示鼠标高亮的扇形对应的文字。实现这一效果的思路是,利用系列的 <code>label</code>(默认用扇形颜色显示数据的 <code>name</code>),显示在圆环图中间。在默认情况下不显示系列的 <code>label</code>,在高亮时显示。具体的代码如下:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgeDogJ2xlZnQnLAogICAgZGF0YTogWydBJywgJ0InLCAnQycsICdEJywgJ0UnXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IFsnNTAlJywgJzcwJSddLAogICAgICBhdm9pZExhYmVsT3ZlcmxhcDogZmFsc2UsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogZmFsc2UsCiAgICAgICAgcG9zaXRpb246ICdjZW50ZXInLAogICAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgICBzaG93OiB0cnVlCiAgICAgICAgfQogICAgICB9LAogICAgICBsYWJlbExpbmU6IHsKICAgICAgICBzaG93OiBmYWxzZQogICAgICB9LAogICAgICBlbXBoYXNpczogewogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9udFNpemU6ICczMCcsCiAgICAgICAgICBmb250V2VpZ2h0OiAnYm9sZCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICB7IHZhbHVlOiAzMzUsIG5hbWU6ICdBJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ0InIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAnQycgfSwKICAgICAgICB7IHZhbHVlOiAxMzUsIG5hbWU6ICdEJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICdFJyB9CiAgICAgIF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>其中,<code>avoidLabelOverlap</code> 是用来控制是否由 ECharts 调整标签位置以实现防止标签重叠。它的默认值是 <code>true</code>,而在这里,我们不希望标签位置调整到不是中间的位置,因此我们需要将其设为 <code>false</code>。</p>\n<p>这样,圆环图中间会显示高亮数据的 <code>name</code> 值。</p>\n',postPath:"zh/application/chart-types/pie/doughnut"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:g},{title:"资源列表",dir:C,draft:i},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:I},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:f},{title:"坐标系",dir:u,draft:i},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:y,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:L},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:U},{title:"极坐标系柱状图",dir:z,draft:i},{title:"阶梯瀑布图",dir:v},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:D,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:F},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:O},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:R},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:M}]}]},{title:k,dir:t,draft:i},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:N}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:T,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:j}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:k,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:g},{title:"Resources",dir:C,draft:i},{title:"Inspiration",dir:n},{title:"Get Help",dir:I},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:o},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:f},{title:"Coordinate",dir:u,draft:i},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:W}]},{title:"Application",dir:y,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:L},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:U},{title:"Bar Polar",dir:z,draft:i},{title:"Waterfall",dir:v}]},{title:"Line",dir:D,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:F},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:O},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:R},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:M}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:N}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:T,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:j}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/pie/doughnut",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/pie/rose/index.html b/handbook/zh/application/chart-types/pie/rose/index.html
new file mode 100644
index 0000000..bb8ded2
--- /dev/null
+++ b/handbook/zh/application/chart-types/pie/rose/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1> <p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p> <p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>'area'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/pie/rose.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,s,o,h,g,C,A,I,p,B,f,b,m,u,E,H,v,S,w,y,D,P,O,K,x,L,k,R,V,W,M,Y,z,G,T,Z,_,F,U,X,J,N,Q,$,j,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%8D%97%E4%B8%81%E6%A0%BC%E5%B0%94%E5%9B%BE%EF%BC%88%E7%8E%AB%E7%91%B0%E5%9B%BE%EF%BC%89" tabindex="-1">南丁格尔图(玫瑰图)</h1>\n<p>南丁格尔图又称玫瑰图,通常用弧度相同但半径不同的扇形表示各个类目。</p>\n<p>ECharts 可以通过将饼图的 <a href="https://echarts.apache.org/option.html#series-pie.roseType"><code>series.roseType</code></a> 值设为 <code>\'area\'</code> 实现南丁格尔图,其他配置项和饼图是相同的。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogWwogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAxMDAsCiAgICAgICAgICBuYW1lOiAnQScKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAyMDAsCiAgICAgICAgICBuYW1lOiAnQicKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiAzMDAsCiAgICAgICAgICBuYW1lOiAnQycKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA0MDAsCiAgICAgICAgICBuYW1lOiAnRCcKICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiA1MDAsCiAgICAgICAgICBuYW1lOiAnRScKICAgICAgICB9CiAgICAgIF0sCiAgICAgIHJvc2VUeXBlOiAnYXJlYScKICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/pie/rose"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:o},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:A}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:m},{title:"数据转换",dir:u},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:H},{title:"视觉映射",dir:e},{title:"图例",dir:v},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:w,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:P},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:k},{title:"堆叠折线图",dir:R},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Y},{title:"圆环图",dir:z},{title:"南丁格尔图(玫瑰图)",dir:G}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:Z}]}]},{title:_,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:X,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:N,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:j,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:_,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:o},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:A}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:m},{title:"Data Transform",dir:u},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:H},{title:"Visual Mapping",dir:e},{title:"Legend",dir:v},{title:"Event and Action",dir:S}]},{title:"Application",dir:w,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:P},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:k},{title:"Stacked Line",dir:R},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Y},{title:"Ring Style",dir:z},{title:"Rose Style",dir:G}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:Z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:X,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:N,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:j,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/chart-types/pie/rose",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/chart-types/scatter/basic-scatter/index.html b/handbook/zh/application/chart-types/scatter/basic-scatter/index.html
new file mode 100644
index 0000000..7dcf9f4
--- /dev/null
+++ b/handbook/zh/application/chart-types/scatter/basic-scatter/index.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1> <p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p> <h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2> <p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">笛卡尔坐标系下的散点图</h2> <p>在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 <code>data</code> 中,而非坐标轴中。</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">散点图样式设置</h2> <h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6" tabindex="-1">图形的形状</h3> <p>图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。</p> <p>ECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应<code>'circle'</code>、<code>'rect'</code>、<code>'roundRect'</code>、<code>'triangle'</code>、<code>'diamond'</code>、<code>'pin'</code>、<code>'arrow'</code>。使用内置形状时,只要将 <code>symbol</code> 属性指定为形状名称对应的字符串即可。</p> <p>如果想要将图形指定为任意的图片,以 <code>'image://'</code> 开头,后面跟图片的绝对或相对地址。形如:<code>'image://http://example.com/xxx.png'</code> 或 <code>'image://./xxx.png'</code>。</p> <p>除此之外,还支持 SVG 的路径作为矢量图形,将 <code>symbol</code> 设置为以 <code>'path://'</code> 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 <code>SVG</code> 文件,找到形如 <code><path d="M… L…"></path></code> 的路径,将 <code>d</code> 的值添加在 <code>'path://'</code> 后即可。</p> <p>下面,我们展示一个将图形设置为矢量爱心形状的方式。</p> <p>首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-xml line-numbers"><code><span class="token prolog"><?xml version="1.0" encoding="iso-8859-1"?></span>
+<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://www.w3.org/2000/svg<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xmlns:</span>xlink</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xlink<span class="token punctuation">"</span></span> <span class="token attr-name">x</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0px<span class="token punctuation">"</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0 0 51.997 51.997<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>enable-background:new 0 0 51.997 51.997;<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>space</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preserve<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>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.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 class="token punctuation">"</span></span><span class="token punctuation">/></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在 ECharts 的 <code>symbol</code> 配置项中,我们使用 <code>d</code> 的值作为路径。</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这样,就能得到爱心形状的图形作为点的形状了。</p> <h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">图形的大小</h3> <p>图形大小可以使用 <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a> 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。</p> <p>除此之外,它还可以是一个回调函数,其参数格式为:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">(</span>value<span class="token operator">:</span> <span class="token builtin">Array</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">,</span> params<span class="token operator">:</span> Object<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">Array</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>第一个参数为数据值,第二个参数是数据项的其他参数。</p> <p>在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。</p> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Fri'</span><span class="token punctuation">,</span> <span class="token string">'Sat'</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 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 number">330</span><span class="token punctuation">,</span> <span class="token number">310</span><span class="token punctuation">]</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">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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div></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/application/chart-types/scatter/basic-scatter.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/Wdingding" target="_blank" class="post-contributor"><img alt="Wdingding" src="https://avatars.githubusercontent.com/Wdingding?size=60"> <span>Wdingding</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,a,c,n,o,g,s,C,h,I,A,M,p,E,L,w,N,B,b,y,T,j,x,z,u,m,D,S,O,f,k,G,J,V,H,v,Q,W,Y,F,U,Z,P,R,K,X,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9F%BA%E7%A1%80%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">基础散点图</h1>\n<p>散点图,也是一种常见的图表类型。散点图由许多“点”组成,有时,这些点用来表示数据在坐标系中的位置(比如在笛卡尔坐标系下,表示数据在 x 轴和 y 轴上的坐标;在地图坐标系下,表示数据在地图上的某个位置等);有时,这些点的大小、颜色等属性也可以映射到数据值,用以表现高维数据。</p>\n<h2 id="%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">最简单的散点图</h2>\n<p>下面是一个横坐标为类目轴、纵坐标为数值轴的最简单的散点图配置:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<h2 id="%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE" tabindex="-1">笛卡尔坐标系下的散点图</h2>\n<p>在上文的例子中,散点图的横坐标都是离散的类目轴,而纵坐标都是连续的数值轴。而对于散点图而言,另一种常见的场景是,两个坐标轴均为连续的数值轴,也就是笛卡尔坐标系。这时的系列形式略有不同,数据的横坐标和纵坐标一同写在 <code>data</code> 中,而非坐标轴中。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWwogICAgICAgIFsxMCwgNV0sCiAgICAgICAgWzAsIDhdLAogICAgICAgIFs2LCAxMF0sCiAgICAgICAgWzIsIDEyXSwKICAgICAgICBbOCwgOV0KICAgICAgXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E6%95%A3%E7%82%B9%E5%9B%BE%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">散点图样式设置</h2>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%BD%A2%E7%8A%B6" tabindex="-1">图形的形状</h3>\n<p>图形(symbol)指的是散点图中数据“点”的形状。有三类图形可选,一种是 ECharts 内置形状,第二种是图片,第三种是 SVG 的路径。</p>\n<p>ECharts 内置形状包括:圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形,分别对应<code>\'circle\'</code>、<code>\'rect\'</code>、<code>\'roundRect\'</code>、<code>\'triangle\'</code>、<code>\'diamond\'</code>、<code>\'pin\'</code>、<code>\'arrow\'</code>。使用内置形状时,只要将 <code>symbol</code> 属性指定为形状名称对应的字符串即可。</p>\n<p>如果想要将图形指定为任意的图片,以 <code>\'image://\'</code> 开头,后面跟图片的绝对或相对地址。形如:<code>\'image://http://example.com/xxx.png\'</code> 或 <code>\'image://./xxx.png\'</code>。</p>\n<p>除此之外,还支持 SVG 的路径作为矢量图形,将 <code>symbol</code> 设置为以 <code>\'path://\'</code> 开头的 SVG 路径即可。使用矢量图形的好处是,图片不会因为缩放而产生锯齿或模糊,并且通常而言比图片形式的文件大小更小。路径的查看方法为,打开一个 <code>SVG</code> 文件,找到形如 <code><path d="M… L…"></path></code> 的路径,将 <code>d</code> 的值添加在 <code>\'path://\'</code> 后即可。</p>\n<p>下面,我们展示一个将图形设置为矢量爱心形状的方式。</p>\n<p>首先,我们需要一个爱心的 SVG 文件,可以使用矢量编辑软件绘制,或者从网上下载到相关资源。其内容如下:</p>\n<md-code-block lang="xml" code="\'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI_Pgo8c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MS45OTcgNTEuOTk3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MS45OTcgNTEuOTk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI-CiAgICA8cGF0aCBkPSJNNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6Ii8-Cjwvc3ZnPg\'" line-highlights="\'\'" />\n<p>在 ECharts 的 <code>symbol</code> 配置项中,我们使用 <code>d</code> 的值作为路径。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IDIwLAogICAgICBzeW1ib2w6CiAgICAgICAgJ3BhdGg6Ly9NNTEuOTExLDE2LjI0MkM1MS4xNTIsNy44ODgsNDUuMjM5LDEuODI3LDM3LjgzOSwxLjgyN2MtNC45MywwLTkuNDQ0LDIuNjUzLTExLjk4NCw2LjkwNSBjLTIuNTE3LTQuMzA3LTYuODQ2LTYuOTA2LTExLjY5Ny02LjkwNmMtNy4zOTksMC0xMy4zMTMsNi4wNjEtMTQuMDcxLDE0LjQxNWMtMC4wNiwwLjM2OS0wLjMwNiwyLjMxMSwwLjQ0Miw1LjQ3OCBjMS4wNzgsNC41NjgsMy41NjgsOC43MjMsNy4xOTksMTIuMDEzbDE4LjExNSwxNi40MzlsMTguNDI2LTE2LjQzOGMzLjYzMS0zLjI5MSw2LjEyMS03LjQ0NSw3LjE5OS0xMi4wMTQgQzUyLjIxNiwxOC41NTMsNTEuOTcsMTYuNjExLDUxLjkxMSwxNi4yNDJ6JwogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这样,就能得到爱心形状的图形作为点的形状了。</p>\n<h3 id="%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">图形的大小</h3>\n<p>图形大小可以使用 <a href="https://echarts.apache.org/option.html#series-scatter.symbolSize"><code>series.symbolSize</code></a> 控制。它既可以是一个表示图形大小的像素值,也可以是一个包含两个 number 元素的数组,分别表示图形的宽和高。</p>\n<p>除此之外,它还可以是一个回调函数,其参数格式为:</p>\n<md-code-block lang="ts" code="\'KHZhbHVlOiBBcnJheSB8IG51bWJlciwgcGFyYW1zOiBPYmplY3QpID0-IG51bWJlciB8IEFycmF5Ow\'" line-highlights="\'\'" />\n<p>第一个参数为数据值,第二个参数是数据项的其他参数。</p>\n<p>在下面的例子中,我们将散点图点的大小设置为与其数据值成正比。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ1N1bicsICdNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwLCAzMzAsIDMxMF0sCiAgICAgIHN5bWJvbFNpemU6IGZ1bmN0aW9uKHZhbHVlKSB7CiAgICAgICAgcmV0dXJuIHZhbHVlIC8gMTA7CiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n',postPath:"zh/application/chart-types/scatter/basic-scatter"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:g},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:I}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:M},{title:"配置项",dir:p,draft:i},{title:"系列",dir:E,draft:i},{title:"样式",dir:L},{title:"数据集",dir:w},{title:"数据转换",dir:N},{title:"坐标系",dir:B,draft:i},{title:"坐标轴",dir:b},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:T}]},{title:"应用篇",dir:j,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:z},{title:"堆叠柱状图",dir:u},{title:"动态排序柱状图",dir:m},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:f},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:G},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:Q}]},{title:"散点图",dir:W,children:[{title:"基础散点图",dir:Y}]}]},{title:F,dir:t,draft:i},{title:"跨平台方案",dir:U,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Z}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:R},{title:"数据下钻",dir:K,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:X}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:c},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:g},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:I}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:M},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:E,draft:i},{title:"Style",dir:L},{title:"Dataset",dir:w},{title:"Data Transform",dir:N},{title:"Coordinate",dir:B,draft:i},{title:"Axis",dir:b},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:T}]},{title:"Application",dir:j,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:z},{title:"Stacked Bar",dir:u},{title:"Bar Racing",dir:m},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:f},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:G},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:v},{title:"Rose Style",dir:Q}]},{title:"Scatter",dir:W,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:Z}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:R},{title:"Drilldown",dir:K,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:X}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/chart-types/scatter/basic-scatter",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/cross-platform/baidu-app/index.html b/handbook/zh/application/cross-platform/baidu-app/index.html
new file mode 100644
index 0000000..89eae2e
--- /dev/null
+++ b/handbook/zh/application/cross-platform/baidu-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1> <p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p> <p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">aidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p> <p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a>。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p> <p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「兼容性说明」以了解各功能的实现方式。</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/zh/application/cross-platform/baidu-app.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,o,h,n,c,p,m,f,b,u,E,g,B,C,v,A,w,k,P,S,x,D,R,y,L,F,z,_,G,V,M,I,T,U,H,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E7%99%BE%E5%BA%A6%E6%99%BA%E8%83%BD%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在百度智能小程序中使用 ECharts</h1>\n<p><a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a> 以小程序动态库的形式提供了在百度智能小程序中使用 ECharts 的方式。</p>\n<p><a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo">aidu-smart-app-echarts-demo</a> 项目是使用该动态库的一个示例工程,可以作为参考,一般情况下不需要引入自己的项目。</p>\n<p>如有使用上的问题,可以在 <a href="https://github.com/baidu-smart-app/baidu-smart-app-echarts-demo/issues">baidu-smart-app-echarts-demo/issues</a> 中咨询。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<p>参见百度智能小程序文档 <a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">ECharts 图表-beta</a>。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>百度智能小程序上的 ECharts 以动态库的形式开放,因此开发者的使用方式与<a href="./zh/application/cross-platform/wechat-app">在微信小程序中使用 ECharts</a> 不太相同。尤其需要注意的是,前者需要在指定动态库名称的时候确定 ECharts 的版本号,而不能自行更换或使用自定义构建。这一点是由底层框架的技术实现决定的。具体来说,在指定百度智能小程序动态库名称的时候,需要通过 <code>provider</code> 指定动态库名称,具体参见<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「在项目中引用动态库」章节。</p>\n<p>请务必查看<a href="http://smartprogram.baidu.com/docs/develop/framework/echarts/">文档</a>的「兼容性说明」以了解各功能的实现方式。</p>\n',postPath:"zh/application/cross-platform/baidu-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:o,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:n},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:E,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:v},{title:"坐标系",dir:A,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:L,draft:t},{title:"阶梯瀑布图",dir:F},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:_},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:I}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:H}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:o,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:n},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:E,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:v},{title:"Coordinate",dir:A,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:P}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:L,draft:t},{title:"Waterfall",dir:F}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:_},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:I}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:U},{title:"Rose Style",dir:H}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/cross-platform/baidu-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/cross-platform/server/index.html b/handbook/zh/application/cross-platform/server/index.html
new file mode 100644
index 0000000..66a40da
--- /dev/null
+++ b/handbook/zh/application/cross-platform/server/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1> <p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p> <p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p> <p>这是一些社区贡献的 ECharts 服务端渲染方案:</p> <ul><li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li> <li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li> <li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li> <li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></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/application/cross-platform/server.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,s,h,n,o,c,p,m,f,g,b,u,C,E,v,B,P,S,w,k,x,y,A,D,R,j,L,_,G,z,M,V,F,I,T,U,H,N,O,W,$,J,X,q,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="echarts-%E6%9C%8D%E5%8A%A1%E7%AB%AF%E6%B8%B2%E6%9F%93" tabindex="-1">ECharts 服务端渲染</h1>\n<p>ECharts 可以在服务端进行渲染。例如<a href="https://echarts.apache.org//examples">官方示例</a>里的一个个小截图,就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境,例如 <a href="https://github.com/GoogleChrome/puppeteer">puppeteer</a>、<a href="https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md">headless chrome</a>、<a href="https://github.com/Automattic/node-canvas">node-canvas</a>、<a href="https://github.com/jsdom/jsdom">jsdom</a>、<a href="http://phantomjs.org/">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 ECharts 服务端渲染方案:</p>\n<ul>\n<li><a href="https://github.com/hellosean1025/node-echarts">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href="https://github.com/chfw/echarts-scrappeteer">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href="https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href="https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n',postPath:"zh/application/cross-platform/server"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:s},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:f}]}]},{title:"概念篇",dir:g,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:v},{title:"数据转换",dir:B},{title:"坐标系",dir:P,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:A},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:j,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:T},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:H,children:[{title:"基础散点图",dir:N}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:W,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:$}]},{title:"数据处理",dir:J,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:s},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:f}]}]},{title:"Concepts",dir:g,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:v},{title:"Data Transform",dir:B},{title:"Coordinate",dir:P,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:k}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:A},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:j,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:T},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:H,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:W,children:[{title:"Server Side Rendering",dir:$}]},{title:"Data",dir:J,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/cross-platform/server",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/cross-platform/wechat-app/index.html b/handbook/zh/application/cross-platform/wechat-app/index.html
new file mode 100644
index 0000000..7a4d335
--- /dev/null
+++ b/handbook/zh/application/cross-platform/wechat-app/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1> <p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p> <h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2> <ol><li>下载该项目</li> <li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li> <li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li></ol> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p> <h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2> <p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p> <p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p> <p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</a>。</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/zh/application/cross-platform/wechat-app.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,c,o,h,s,p,f,E,m,b,g,u,C,B,v,A,w,x,P,S,k,D,R,y,F,L,_,z,G,V,M,I,T,U,j,q,H,N,O,W,$,X,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8-echarts" tabindex="-1">在微信小程序中使用 ECharts</h1>\n<p><a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目提供了一个小程序组件,用这种方式可以方便地使用 ECharts。</p>\n<h2 id="%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F" tabindex="-1">使用方式</h2>\n<ol>\n<li>下载该项目</li>\n<li>如有必要,将 <code>ec-canvas</code> 目录下的 <code>echarts.js</code> 替换为最新版的 ECharts。如果希望减小包体积大小,可以使用<a href="https://echarts.apache.org//build.html">自定义构建</a>生成并替换 <code>echarts.js</code></li>\n<li><code>pages</code> 目录下是使用的示例文件,可以作为参考,或者删除不需要的页面。</li>\n</ol>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin">echarts-for-weixin</a> 项目。</p>\n<h2 id="%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">注意事项</h2>\n<p>最新版的 ECharts 微信小程序支持微信 Canvas 2d,当用户的基础库版本 >= 2.9.0 且没有设置 <code>force-use-old-canvas="true"</code> 的情况下,使用新的 Canvas 2d(默认)。</p>\n<p>使用新的 Canvas 2d 可以提升渲染性能,解决非同层渲染问题,强烈建议开启。</p>\n<p>更详细的说明请参见 <a href="https://github.com/ecomfe/echarts-for-weixin#canvas-2d-%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82">Canvas 2d 版本要求</a>。</p>\n',postPath:"zh/application/cross-platform/wechat-app"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:h},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:E}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:C},{title:"数据集",dir:B},{title:"数据转换",dir:v},{title:"坐标系",dir:A,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:S,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:_,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:G},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:M},{title:"阶梯线图",dir:I}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:j}]},{title:"散点图",dir:q,children:[{title:"基础散点图",dir:H}]}]},{title:N,dir:i,draft:t},{title:"跨平台方案",dir:O,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:W}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:X},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:N,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:h},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:E}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:B},{title:"Data Transform",dir:v},{title:"Coordinate",dir:A,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:P}]},{title:"Application",dir:S,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:_,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:G},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:M},{title:"Step Line",dir:I}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:U},{title:"Rose Style",dir:j}]},{title:"Scatter",dir:q,children:[{title:"Basic Scatter",dir:H}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:O,children:[{title:"Server Side Rendering",dir:W}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:X},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/application/cross-platform/wechat-app",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/data/dynamic-data/index.html b/handbook/zh/application/data/dynamic-data/index.html
new file mode 100644
index 0000000..9dd51ca
--- /dev/null
+++ b/handbook/zh/application/data/dynamic-data/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1> <h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2> <p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 punctuation">;</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> <span class="token punctuation">{</span>
+ <span class="token comment">// data 的结构:</span>
+ <span class="token comment">// {</span>
+ <span class="token comment">// categories: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],</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">'异步数据加载示例'</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">'销量'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 punctuation">;</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">'异步数据加载示例'</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">'销量'</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">'销量'</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">// 异步加载数据</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> <span class="token punctuation">{</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>
+ 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">// 根据名字对应到相应的系列</span>
+ name<span class="token operator">:</span> <span class="token string">'销量'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如下:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列,上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p> <h2 id="loading-%E5%8A%A8%E7%94%BB" tabindex="-1">loading 动画</h2> <p>如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。</p> <p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href="api.html#echartsInstance.showLoading">showLoading</a> 方法显示。数据加载完成后再调用 <a href="api.html#echartsInstance.hideLoading">hideLoading</a> 方法隐藏加载动画。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">showLoading</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">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> <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>效果如下:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2> <p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p> <p>所有数据的更新都通过 <a href="~api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p> <p>具体可以看下面示例:</p> <p><iframe width="100%" height="350" src=""></iframe></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/zh/application/data/dynamic-data.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,a,l,n,o,h,c,s,g,C,p,I,A,m,u,B,b,E,f,G,y,S,L,k,O,W,Z,v,w,R,Y,X,D,x,K,H,F,P,Q,j,z,V,J,T,M,q,U,N,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%BC%82%E6%AD%A5%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%8E%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">异步数据的加载与动态更新</h1>\n<h2 id="%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD" tabindex="-1">异步加载</h2>\n<p><a href="zh/get-started">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的,但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>setOption</code> 填入数据和配置项就行。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8gZGF0YSDnmoTnu5PmnoQ6CiAgLy8gewogIC8vICAgICBjYXRlZ29yaWVzOiBbIuihrOihqyIsIue-iuavm-ihqyIsIumbque6uuihqyIsIuijpOWtkCIsIumrmOi3n-meiyIsIuiinOWtkCJdLAogIC8vICAgICB2YWx1ZXM6IFs1LCAyMCwgMzYsIDEwLCAxMCwgMjBdCiAgLy8gfQogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHRpdGxlOiB7CiAgICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgICB9LAogICAgdG9vbHRpcDoge30sCiAgICBsZWdlbmQ6IHt9LAogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgeUF4aXM6IHt9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICB0eXBlOiAnYmFyJywKICAgICAgICBkYXRhOiBkYXRhLnZhbHVlcwogICAgICB9CiAgICBdCiAgfSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>或者先设置完其它的样式,显示一个空的直角坐标轴,然后获取数据后填入数据。</p>\n<md-code-block lang="js" code="\'dmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOaYvuekuuagh-mimO-8jOWbvuS-i-WSjOepuueahOWdkOagh-i9tApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICflvILmraXmlbDmja7liqDovb3npLrkvosnCiAgfSwKICB0b29sdGlwOiB7fSwKICBsZWdlbmQ6IHsKICAgIGRhdGE6IFsn6ZSA6YePJ10KICB9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbXQogIH0sCiAgeUF4aXM6IHt9LAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGRhdGE6IFtdCiAgICB9CiAgXQp9KTsKCi8vIOW8guatpeWKoOi9veaVsOaNrgokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbihkYXRhKSB7CiAgLy8g5aGr5YWl5pWw5o2uCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgeEF4aXM6IHsKICAgICAgZGF0YTogZGF0YS5jYXRlZ29yaWVzCiAgICB9LAogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICAvLyDmoLnmja7lkI3lrZflr7nlupTliLDnm7jlupTnmoTns7vliJcKICAgICAgICBuYW1lOiAn6ZSA6YePJywKICAgICAgICBkYXRhOiBkYXRhLmRhdGEKICAgICAgfQogICAgXQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<p>如下:</p>\n<p><md-example src="doc-example/tutorial-async"></md-example></p>\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列,上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新,但是更多时候推荐更新数据的时候加上系列的<code>name</code>数据。</p>\n<h2 id="loading-%E5%8A%A8%E7%94%BB" tabindex="-1">loading 动画</h2>\n<p>如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href="api.html#echartsInstance.showLoading">showLoading</a> 方法显示。数据加载完成后再调用 <a href="api.html#echartsInstance.hideLoading">hideLoading</a> 方法隐藏加载动画。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zaG93TG9hZGluZygpOwokLmdldCgnZGF0YS5qc29uJykuZG9uZShmdW5jdGlvbiAoZGF0YSkgewogICAgbXlDaGFydC5oaWRlTG9hZGluZygpOwogICAgbXlDaGFydC5zZXRPcHRpb24oLi4uKTsKfSk7\'" line-highlights="\'\'" />\n<p>效果如下:</p>\n<p><md-example src="doc-example/tutorial-loading"></md-example></p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8A%A8%E6%80%81%E6%9B%B4%E6%96%B0" tabindex="-1">数据的动态更新</h2>\n<p>ECharts 由数据驱动,数据的改变驱动图表展现的改变,因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href="~api.html#echartsInstance.setOption">setOption</a>实现,你只需要定时获取数据,<a href="~api.html#echartsInstance.setOption">setOption</a> 填入数据,而不用考虑数据到底产生了那些变化,ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p>具体可以看下面示例:</p>\n<p><md-example src="doc-example/tutorial-dynamic-data"></md-example></p>\n',postPath:"zh/application/data/dynamic-data"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:g},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:p}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:i},{title:"系列",dir:u,draft:i},{title:"样式",dir:B},{title:"数据集",dir:b},{title:"数据转换",dir:E},{title:"坐标系",dir:f,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:O},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:Z},{title:"极坐标系柱状图",dir:v,draft:i},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:X},{title:"区域面积图",dir:D},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:K}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:j}]}]},{title:z,dir:t,draft:i},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:N,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:z,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:h},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:g},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:p}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:u,draft:i},{title:"Style",dir:B},{title:"Dataset",dir:b},{title:"Data Transform",dir:E},{title:"Coordinate",dir:f,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:S}]},{title:"Application",dir:L,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:O},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:Z},{title:"Bar Polar",dir:v,draft:i},{title:"Waterfall",dir:w}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:X},{title:"Area Chart",dir:D},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:K}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:F},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:N,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/data/dynamic-data",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/interaction/drag/index.html b/handbook/zh/application/interaction/drag/index.html
new file mode 100644
index 0000000..2c74edd
--- /dev/null
+++ b/handbook/zh/application/interaction/drag/index.html
@@ -0,0 +1,208 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1> <p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p> <p><iframe width="100%" height="400" src=""></iframe></p> <p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p> <p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p> <h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2> <p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 comment">// 这个 data 变量在这里单独声明,在后面也会用到。</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>
+
+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>
+ symbolSize<span class="token operator">:</span> symbolSize<span class="token punctuation">,</span> <span class="token comment">// 为了方便拖拽,把 symbolSize 尺寸设大了。</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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">// 声明一个 graphic component,里面有若干个 type 为 'circle' 的 graphic elements。</span>
+ <span class="token comment">// 这里使用了 echarts.util.map 这个帮助方法,其行为和 Array.prototype.map 一样,但是兼容 es5 以下的环境。</span>
+ <span class="token comment">// 用 map 方法遍历 data 的每项,为每项生成一个圆点。</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="token punctuation">{</span>
+ <span class="token keyword">return</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 'circle' 表示这个 graphic element 的类型是圆点。</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">// 圆点的半径。</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 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。</span>
+ <span class="token comment">// 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置,下面介绍。</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">// 这个属性让圆点不可见(但是不影响他响应鼠标事件)。</span>
+ invisible<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// 这个属性让圆点可以被拖拽。</span>
+ draggable<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ <span class="token comment">// 把 z 值设得比较大,表示这个圆点在最上方,能覆盖住已有的折线图的圆点。</span>
+ z<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
+ <span class="token comment">// 此圆点的拖拽的响应事件,在拖拽过程中会不断被触发。下面介绍详情。</span>
+ <span class="token comment">// 这里使用了 echarts.util.curry 这个帮助方法,意思是生成一个与 onPointDragging</span>
+ <span class="token comment">// 功能一样的新的函数,只不过第一个参数永远为此时传入的 dataIndex 的值。</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>上面的代码中,使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。<code>myChart.convertToPixel('grid', dataItem)</code> 这句话中,第一个参数 <code>'grid'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p> <p>注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系(<a href="https://echarts.apache.org/option.html#grid">grid</a>)初始化后才能调用 <code>myChart.convertToPixel('grid', dataItem)</code>。</p> <p>有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 拖拽某个圆点的过程中会不断调用此函数。</span>
+<span class="token comment">// 此函数中会根据拖拽后的新位置,改变 data 中的值,并用新的 data 值,重绘折线图,从而使折线图同步于被拖拽的隐藏圆点。</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">// 这里的 data 就是本文最初的代码块中声明的 data,在这里会被更新。</span>
+ <span class="token comment">// 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。</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="token punctuation">;</span>
+ <span class="token comment">// 用更新后的 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>上面的代码中,使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel('grid', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p> <p>最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <span class="token comment">// 对每个拖拽圆点重新计算位置,并用 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="token punctuation">{</span>
+ <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2> <p>到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p> <p>在上述代码中分别添加如下定义:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ tooltip<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 表示不使用默认的“显示”“隐藏”触发规则。</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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> 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">// 在 mouseover 的时候显示,在 mouseout 的时候隐藏。</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p> <h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2> <p>总结一下,全部的代码如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+
+<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 punctuation">;</span>
+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<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> 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>
+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="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>
+ 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="token punctuation">{</span>
+ <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="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>
+ <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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</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/zh/application/interaction/drag.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,l,a,d,g,r,o,I,C,h,n,c,p,A,s,b,G,m,Z,u,L,B,W,K,X,v,y,w,R,O,Y,S,F,H,j,J,k,V,E,D,U,N,f,z,T,q,M,P,x,Q,_,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%8B%96%E6%8B%BD%E7%9A%84%E5%AE%9E%E7%8E%B0" tabindex="-1">拖拽的实现</h1>\n<p>本篇通过介绍一个实现拖拽的小例子来介绍如何在 Apache ECharts<sup>TM</sup> 中实现复杂的交互。</p>\n<p><md-example src="line-draggable" height="400"></md-example></p>\n<p>这个例子主要做到了这样一件事,用鼠标可以拖拽曲线的点,从而改变曲线的形状。例子很简单,但是有了这个基础我们还可以做更多的事情,比如在图中进行可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的“拖拽改变图表”这样比较业务定制的功能。但是这个功能开发者可以通过 API 扩展实现。</p>\n<h2 id="%E5%AE%9E%E7%8E%B0%E5%9F%BA%E6%9C%AC%E7%9A%84%E6%8B%96%E6%8B%BD%E5%8A%9F%E8%83%BD" tabindex="-1">实现基本的拖拽功能</h2>\n<p>在这个例子中,基础的图表是一个 <a href="https://echarts.apache.org/option.html#series-line">折线图 (series-line)</a>。参见如下配置:</p>\n<md-code-block lang="js" code="\'dmFyIHN5bWJvbFNpemUgPSAyMDsKCi8vIOi_meS4qiBkYXRhIOWPmOmHj-WcqOi_memHjOWNleeLrOWjsOaYju-8jOWcqOWQjumdouS5n-S8mueUqOWIsOOAggp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwoKbXlDaGFydC5zZXRPcHRpb24oewogIHhBeGlzOiB7CiAgICBtaW46IC0xMDAsCiAgICBtYXg6IDgwLAogICAgdHlwZTogJ3ZhbHVlJywKICAgIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfQogIH0sCiAgeUF4aXM6IHsKICAgIG1pbjogLTMwLAogICAgbWF4OiA2MCwKICAgIHR5cGU6ICd2YWx1ZScsCiAgICBheGlzTGluZTogeyBvblplcm86IGZhbHNlIH0KICB9LAogIHNlcmllczogWwogICAgewogICAgICBpZDogJ2EnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgLy8g5Li65LqG5pa55L6_5ouW5ou977yM5oqKIHN5bWJvbFNpemUg5bC65a-46K6-5aSn5LqG44CCCiAgICAgIGRhdGE6IGRhdGEKICAgIH0KICBdCn0pOw\'" line-highlights="\'\'" />\n<p>既然折线中原生的点没有拖拽功能,我们就为它加上拖拽功能:用 <a href="https://echarts.apache.org/option.html#graphic">graphic</a> 组件,在每个点上面,覆盖一个隐藏的可拖拽的圆点。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIOWjsOaYjuS4gOS4qiBncmFwaGljIGNvbXBvbmVudO-8jOmHjOmdouacieiLpeW5suS4qiB0eXBlIOS4uiAnY2lyY2xlJyDnmoQgZ3JhcGhpYyBlbGVtZW50c-OAggogIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwubWFwIOi_meS4quW4ruWKqeaWueazle-8jOWFtuihjOS4uuWSjCBBcnJheS5wcm90b3R5cGUubWFwIOS4gOagt--8jOS9huaYr-WFvOWuuSBlczUg5Lul5LiL55qE546v5aKD44CCCiAgLy8g55SoIG1hcCDmlrnms5XpgY3ljoYgZGF0YSDnmoTmr4_pobnvvIzkuLrmr4_pobnnlJ_miJDkuIDkuKrlnIbngrnjgIIKICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGRhdGFJdGVtLCBkYXRhSW5kZXgpIHsKICAgIHJldHVybiB7CiAgICAgIC8vICdjaXJjbGUnIOihqOekuui_meS4qiBncmFwaGljIGVsZW1lbnQg55qE57G75Z6L5piv5ZyG54K544CCCiAgICAgIHR5cGU6ICdjaXJjbGUnLAoKICAgICAgc2hhcGU6IHsKICAgICAgICAvLyDlnIbngrnnmoTljYrlvoTjgIIKICAgICAgICByOiBzeW1ib2xTaXplIC8gMgogICAgICB9LAogICAgICAvLyDnlKggdHJhbnNmb3JtIOeahOaWueW8j-WvueWchueCuei_m-ihjOWumuS9jeOAgnBvc2l0aW9uOiBbeCwgeV0g6KGo56S65bCG5ZyG54K55bmz56e75YiwIFt4LCB5XSDkvY3nva7jgIIKICAgICAgLy8g6L-Z6YeM5L2_55So5LqGIGNvbnZlcnRUb1BpeGVsIOi_meS4qiBBUEkg5p2l5b6X5Yiw5q-P5Liq5ZyG54K555qE5L2N572u77yM5LiL6Z2i5LuL57uN44CCCiAgICAgIHBvc2l0aW9uOiBteUNoYXJ0LmNvbnZlcnRUb1BpeGVsKCdncmlkJywgZGF0YUl0ZW0pLAoKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55LiN5Y-v6KeB77yI5L2G5piv5LiN5b2x5ZON5LuW5ZON5bqU6byg5qCH5LqL5Lu277yJ44CCCiAgICAgIGludmlzaWJsZTogdHJ1ZSwKICAgICAgLy8g6L-Z5Liq5bGe5oCn6K6p5ZyG54K55Y-v5Lul6KKr5ouW5ou944CCCiAgICAgIGRyYWdnYWJsZTogdHJ1ZSwKICAgICAgLy8g5oqKIHog5YC86K6-5b6X5q-U6L6D5aSn77yM6KGo56S66L-Z5Liq5ZyG54K55Zyo5pyA5LiK5pa577yM6IO96KaG55uW5L2P5bey5pyJ55qE5oqY57q_5Zu-55qE5ZyG54K544CCCiAgICAgIHo6IDEwMCwKICAgICAgLy8g5q2k5ZyG54K555qE5ouW5ou955qE5ZON5bqU5LqL5Lu277yM5Zyo5ouW5ou96L-H56iL5Lit5Lya5LiN5pat6KKr6Kem5Y-R44CC5LiL6Z2i5LuL57uN6K-m5oOF44CCCiAgICAgIC8vIOi_memHjOS9v-eUqOS6hiBlY2hhcnRzLnV0aWwuY3Vycnkg6L-Z5Liq5biu5Yqp5pa55rOV77yM5oSP5oCd5piv55Sf5oiQ5LiA5Liq5LiOIG9uUG9pbnREcmFnZ2luZwogICAgICAvLyDlip_og73kuIDmoLfnmoTmlrDnmoTlh73mlbDvvIzlj6rkuI3ov4fnrKzkuIDkuKrlj4LmlbDmsLjov5zkuLrmraTml7bkvKDlhaXnmoQgZGF0YUluZGV4IOeahOWAvOOAggogICAgICBvbmRyYWc6IGVjaGFydHMudXRpbC5jdXJyeShvblBvaW50RHJhZ2dpbmcsIGRhdGFJbmRleCkKICAgIH07CiAgfSkKfSk7\'" line-highlights="\'\'" />\n<p>上面的代码中,使用 <a href="api.html#echartsInstance.convertToPixel">convertToPixel</a> 这个 API,进行了从 data 到“像素坐标”的转换,从而得到了每个圆点应该在的位置,从而能绘制这些圆点。<code>myChart.convertToPixel(\'grid\', dataItem)</code> 这句话中,第一个参数 <code>\'grid\'</code> 表示 <code>dataItem</code> 在 <a href="https://echarts.apache.org/option.html#grid">grid</a> 这个组件中(即直角坐标系)中进行转换。所谓“像素坐标”,就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行,也就是说,须在坐标系(<a href="https://echarts.apache.org/option.html#grid">grid</a>)初始化后才能调用 <code>myChart.convertToPixel(\'grid\', dataItem)</code>。</p>\n<p>有了这段代码后,就有了诸个能拖拽的点。接下来要为每个点,加上拖拽响应的事件:</p>\n<md-code-block lang="js" code="\'Ly8g5ouW5ou95p-Q5Liq5ZyG54K555qE6L-H56iL5Lit5Lya5LiN5pat6LCD55So5q2k5Ye95pWw44CCCi8vIOatpOWHveaVsOS4reS8muagueaNruaLluaLveWQjueahOaWsOS9jee9ru-8jOaUueWPmCBkYXRhIOS4reeahOWAvO-8jOW5tueUqOaWsOeahCBkYXRhIOWAvO-8jOmHjee7mOaKmOe6v-Wbvu-8jOS7juiAjOS9v-aKmOe6v-WbvuWQjOatpeS6juiiq-aLluaLveeahOmakOiXj-WchueCueOAggpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4KSB7CiAgLy8g6L-Z6YeM55qEIGRhdGEg5bCx5piv5pys5paH5pyA5Yid55qE5Luj56CB5Z2X5Lit5aOw5piO55qEIGRhdGHvvIzlnKjov5nph4zkvJrooqvmm7TmlrDjgIIKICAvLyDov5nph4znmoQgdGhpcyDlsLHmmK_ooqvmi5bmi73nmoTlnIbngrnjgIJ0aGlzLnBvc2l0aW9uIOWwseaYr-WchueCueW9k-WJjeeahOS9jee9ruOAggogIGRhdGFbZGF0YUluZGV4XSA9IG15Q2hhcnQuY29udmVydEZyb21QaXhlbCgnZ3JpZCcsIHRoaXMucG9zaXRpb24pOwogIC8vIOeUqOabtOaWsOWQjueahCBkYXRh77yM6YeN57uY5oqY57q_5Zu-44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgc2VyaWVzOiBbCiAgICAgIHsKICAgICAgICBpZDogJ2EnLAogICAgICAgIGRhdGE6IGRhdGEKICAgICAgfQogICAgXQogIH0pOwp9\'" line-highlights="\'\'" />\n<p>上面的代码中,使用了 <a href="https://echarts.apache.org//api.html#echartsInstance.convertFromPixel">convertFromPixel</a> 这个 API。它是 <a href="https://echarts.apache.org//api.html#echartsInstance.convertToPixel">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel(\'grid\', this.position)</code> 表示把当前像素坐标转换成 <a href="https://echarts.apache.org/option.html#grid">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后,为了使 dom 尺寸改变时,图中的元素能自适应得变化,加上这些代码:</p>\n<md-code-block lang="js" code="\'d2luZG93LmFkZEV2ZW50TGlzdGVuZXIoJ3Jlc2l6ZScsIGZ1bmN0aW9uKCkgewogIC8vIOWvueavj-S4quaLluaLveWchueCuemHjeaWsOiuoeeul-S9jee9ru-8jOW5tueUqCBzZXRPcHRpb24g5pu05paw44CCCiAgbXlDaGFydC5zZXRPcHRpb24oewogICAgZ3JhcGhpYzogZWNoYXJ0cy51dGlsLm1hcChkYXRhLCBmdW5jdGlvbihpdGVtLCBkYXRhSW5kZXgpIHsKICAgICAgcmV0dXJuIHsKICAgICAgICBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pCiAgICAgIH07CiAgICB9KQogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0-tooltip-%E7%BB%84%E4%BB%B6" tabindex="-1">添加 tooltip 组件</h2>\n<p>到此,拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中,被拖拽的点的 data 值的变化状况,我们可以使用 <a href="https://echarts.apache.org/option.html#tooltip">tooltip</a> 组件来实时显示这个值。但是,tooltip 有其默认的“显示”“隐藏”触发规则,在我们拖拽的场景中并不适用,所以我们还要手动定制 tooltip 的“显示”“隐藏”行为。</p>\n<p>在上述代码中分别添加如下定义:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIC8vIC4uLiwKICB0b29sdGlwOiB7CiAgICAvLyDooajnpLrkuI3kvb_nlKjpu5jorqTnmoTigJzmmL7npLrigJ3igJzpmpDol4_igJ3op6blj5Hop4TliJnjgIIKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxicj5ZOiAnICsKICAgICAgICBwYXJhbXMuZGF0YVsxXS50b0ZpeGVkKDIpCiAgICAgICk7CiAgICB9CiAgfQp9KTs\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'bXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGRhdGEubWFwKGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgcmV0dXJuIHsKICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgIC8vIC4uLiwKICAgICAgLy8g5ZyoIG1vdXNlb3ZlciDnmoTml7blgJnmmL7npLrvvIzlnKggbW91c2VvdXQg55qE5pe25YCZ6ZqQ6JeP44CCCiAgICAgIG9ubW91c2Vtb3ZlOiBlY2hhcnRzLnV0aWwuY3Vycnkoc2hvd1Rvb2x0aXAsIGRhdGFJbmRleCksCiAgICAgIG9ubW91c2VvdXQ6IGVjaGFydHMudXRpbC5jdXJyeShoaWRlVG9vbHRpcCwgZGF0YUluZGV4KQogICAgfTsKICB9KQp9KTsKCmZ1bmN0aW9uIHNob3dUb29sdGlwKGRhdGFJbmRleCkgewogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGRhdGFJbmRleAogIH0pOwp9CgpmdW5jdGlvbiBoaWRlVG9vbHRpcChkYXRhSW5kZXgpIHsKICBteUNoYXJ0LmRpc3BhdGNoQWN0aW9uKHsKICAgIHR5cGU6ICdoaWRlVGlwJwogIH0pOwp9\'" line-highlights="\'\'" />\n<p>这里使用了 <a href="api.html#echartsInstance.dispatchAction">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href="api.html#action.tooltip.showTip">showTip</a>、<a href="api.html#action.tooltip.hideTip">hideTip</a>。</p>\n<h2 id="%E5%85%A8%E9%83%A8%E4%BB%A3%E7%A0%81" tabindex="-1">全部代码</h2>\n<p>总结一下,全部的代码如下:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Cgp2YXIgc3ltYm9sU2l6ZSA9IDIwOwp2YXIgZGF0YSA9IFsKICBbMTUsIDBdLAogIFstNTAsIDEwXSwKICBbLTU2LjUsIDIwXSwKICBbLTQ2LjUsIDMwXSwKICBbLTIyLjEsIDQwXQpdOwp2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKbXlDaGFydC5zZXRPcHRpb24oewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXJPbjogJ25vbmUnLAogICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbXMpIHsKICAgICAgcmV0dXJuICgKICAgICAgICAnWDogJyArCiAgICAgICAgcGFyYW1zLmRhdGFbMF0udG9GaXhlZCgyKSArCiAgICAgICAgJzxiciAvPlk6ICcgKwogICAgICAgIHBhcmFtcy5kYXRhWzFdLnRvRml4ZWQoMikKICAgICAgKTsKICAgIH0KICB9LAogIHhBeGlzOiB7IG1pbjogLTEwMCwgbWF4OiA4MCwgdHlwZTogJ3ZhbHVlJywgYXhpc0xpbmU6IHsgb25aZXJvOiBmYWxzZSB9IH0sCiAgeUF4aXM6IHsgbWluOiAtMzAsIG1heDogNjAsIHR5cGU6ICd2YWx1ZScsIGF4aXNMaW5lOiB7IG9uWmVybzogZmFsc2UgfSB9LAogIHNlcmllczogWwogICAgeyBpZDogJ2EnLCB0eXBlOiAnbGluZScsIHNtb290aDogdHJ1ZSwgc3ltYm9sU2l6ZTogc3ltYm9sU2l6ZSwgZGF0YTogZGF0YSB9CiAgXQp9KTsKbXlDaGFydC5zZXRPcHRpb24oewogIGdyYXBoaWM6IGVjaGFydHMudXRpbC5tYXAoZGF0YSwgZnVuY3Rpb24oaXRlbSwgZGF0YUluZGV4KSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnY2lyY2xlJywKICAgICAgcG9zaXRpb246IG15Q2hhcnQuY29udmVydFRvUGl4ZWwoJ2dyaWQnLCBpdGVtKSwKICAgICAgc2hhcGU6IHsgcjogc3ltYm9sU2l6ZSAvIDIgfSwKICAgICAgaW52aXNpYmxlOiB0cnVlLAogICAgICBkcmFnZ2FibGU6IHRydWUsCiAgICAgIG9uZHJhZzogZWNoYXJ0cy51dGlsLmN1cnJ5KG9uUG9pbnREcmFnZ2luZywgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW1vdmU6IGVjaGFydHMudXRpbC5jdXJyeShzaG93VG9vbHRpcCwgZGF0YUluZGV4KSwKICAgICAgb25tb3VzZW91dDogZWNoYXJ0cy51dGlsLmN1cnJ5KGhpZGVUb29sdGlwLCBkYXRhSW5kZXgpLAogICAgICB6OiAxMDAKICAgIH07CiAgfSkKfSk7CndpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdyZXNpemUnLCBmdW5jdGlvbigpIHsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBncmFwaGljOiBlY2hhcnRzLnV0aWwubWFwKGRhdGEsIGZ1bmN0aW9uKGl0ZW0sIGRhdGFJbmRleCkgewogICAgICByZXR1cm4geyBwb3NpdGlvbjogbXlDaGFydC5jb252ZXJ0VG9QaXhlbCgnZ3JpZCcsIGl0ZW0pIH07CiAgICB9KQogIH0pOwp9KTsKZnVuY3Rpb24gc2hvd1Rvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnc2hvd1RpcCcsCiAgICBzZXJpZXNJbmRleDogMCwKICAgIGRhdGFJbmRleDogZGF0YUluZGV4CiAgfSk7Cn0KZnVuY3Rpb24gaGlkZVRvb2x0aXAoZGF0YUluZGV4KSB7CiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7IHR5cGU6ICdoaWRlVGlwJyB9KTsKfQpmdW5jdGlvbiBvblBvaW50RHJhZ2dpbmcoZGF0YUluZGV4LCBkeCwgZHkpIHsKICBkYXRhW2RhdGFJbmRleF0gPSBteUNoYXJ0LmNvbnZlcnRGcm9tUGl4ZWwoJ2dyaWQnLCB0aGlzLnBvc2l0aW9uKTsKICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICBzZXJpZXM6IFsKICAgICAgewogICAgICAgIGlkOiAnYScsCiAgICAgICAgZGF0YTogZGF0YQogICAgICB9CiAgICBdCiAgfSk7Cn0\'" line-highlights="\'\'" />\n<p>有了这些基础,就可以定制更多的功能了。可以加 <a href="https://echarts.apache.org/option.html#dataZoom">dataZoom</a> 组件,可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n',postPath:"zh/application/interaction/drag"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:r},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:C},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:p}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:s},{title:"配置项",dir:b,draft:i},{title:"系列",dir:G,draft:i},{title:"样式",dir:m},{title:"数据集",dir:Z},{title:"数据转换",dir:u},{title:"坐标系",dir:L,draft:i},{title:"坐标轴",dir:B},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:K}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:w},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:O,draft:i},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:S,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:J},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:V},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:U,children:[{title:"基础散点图",dir:N}]}]},{title:f,dir:t,draft:i},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:T}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:r},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:C},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:p}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:s},{title:"Chart Option",dir:b,draft:i},{title:"Series",dir:G,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:Z},{title:"Data Transform",dir:u},{title:"Coordinate",dir:L,draft:i},{title:"Axis",dir:B},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:K}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:w},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:O,draft:i},{title:"Waterfall",dir:Y}]},{title:"Line",dir:S,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:J},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:V},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:U,children:[{title:"Basic Scatter",dir:N}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/application/interaction/drag",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/application/label/rich-text/index.html b/handbook/zh/application/label/rich-text/index.html
new file mode 100644
index 0000000..6930f5b
--- /dev/null
+++ b/handbook/zh/application/label/rich-text/index.html
@@ -0,0 +1,686 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1> <p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p> <ul><li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li> <li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li> <li>在文本中使用图片做小图标或者背景。</li> <li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li></ul> <p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p> <ul><li>文本块(Text Block):文本标签块整体。</li> <li>文本片段(Text fragment):文本标签块中的部分文本。</li></ul> <p>如下图示例:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2> <p>echarts 提供了丰富的文本标签配置项,包括:</p> <ul><li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li> <li>文字颜色:<code>color</code>。</li> <li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li> <li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li> <li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li> <li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li> <li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li> <li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li> <li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li></ul> <p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 在文本中,可以对部分文本采用 rich 中定义样式。</span>
+ <span class="token comment">// 这里需要在文本中使用标记符号:</span>
+ <span class="token comment">// `{styleName|text content text content}` 标记样式名。</span>
+ <span class="token comment">// 注意,换行仍是使用 '\n'。</span>
+ formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token string">'{a|这段文本采用样式a}'</span><span class="token punctuation">,</span>
+ <span class="token string">'{b|这段文本采用样式b}这段用默认样式{x|这段用样式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">// 这里是文本块的样式设置:</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">// rich 里是文本片段的样式设置:</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 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>注意:如果不定义 <code>rich</code>,不能指定文字块的 <code>width</code> 和 <code>height</code>。</p></blockquote> <h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2> <p>每个文本可以设置基本的字体样式:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p> <p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p> <p>文本框可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p> <p>文本片段也可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p> <p>例如:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2> <p>对于折线图、柱状图、散点图等,均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置,一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p> <p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性:</p> <div class="md-live layout-tb"><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 = {
+ series: [
+ {
+ type: 'scatter',
+ symbolSize: 160,
+ symbol: 'roundRect',
+ data: [[1, 1]],
+ label: {
+ normal: {
+ // 修改 position 和 distance 的值试试
+ // 支持:'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">// 修改 position 和 distance 的值试试</span>
+ <span class="token comment">// 支持:'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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <blockquote><p>注意:<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p></blockquote> <h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2> <p>某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:</p> <div class="md-live layout-lr"><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">const labelOption = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这种场景下,可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p> <p>注意,逻辑是,先使用 <code>align</code> 和 <code>verticalAlign</code> 定位,再旋转。</p> <h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2> <p>关于排版方式,每个文本片段,可以想象成 CSS 中的 <code>inline-block</code>,在文档流中按行放置。</p> <p>每个文本片段的内容盒尺寸(<code>content box size</code>),默认是根据文字大小决定的。但是,也可以设置 <code>width</code>、<code>height</code> 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(<code>border box size</code>),由上述本身尺寸,加上文本片段的 <code>padding</code> 来得到。</p> <p>只有 <code>'\n'</code> 是换行符,能导致换行。</p> <p>一行内,会有多个文本片段。每行的实际高度,由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定,也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(<code>border box size</code>)。</p> <p>在一行的 <code>lineHeight</code> 被决定后,一行内,文本片段的竖直位置,由文本片段的 <code>verticalAlign</code> 来指定(这里和 CSS 中的规则稍有不同):</p> <ul><li><code>'bottom'</code>:文本片段的盒的底边贴住行底。</li> <li><code>'top'</code>:文本片段的盒的顶边贴住行顶。</li> <li><code>'middle'</code>:居行中。</li></ul> <p>文本块的宽度,可以直接由文本块的 <code>width</code> 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置:</p> <ul><li>首先,从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li> <li>然后,从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li> <li>最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。</li></ul> <p>关于文字在文本片段盒中的位置:</p> <ul><li>如果 <code>align</code> 为 <code>'center'</code>,则文字在文本片段盒中是居中的。</li> <li>如果 <code>align</code> 为 <code>'left'</code>,则文字在文本片段盒中是居左的。</li> <li>如果 <code>align</code> 为 <code>'right'</code>,则文字在文本片段盒中是居右的。</li></ul> <h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果:图标、分割线、标题块、简单表格</h2> <p>看下面的例子:</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>文本片段的 <code>backgroundColor</code> 可以指定为图片后,就可以在文本中使用图标了:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ rich<span class="token operator">:</span> <span class="token punctuation">{</span>
+ Sunny<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 这样设定 backgroundColor 就可以是图片了。</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">// 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。</span>
+ height<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 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>分割线实际是用 border 实现的:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ rich<span class="token operator">:</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>
+ <span class="token comment">// 这里把 width 设置为 '100%',表示分割线的长度充满文本块。</span>
+ <span class="token comment">// 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。</span>
+ <span class="token comment">// 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。</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>
+<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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>标题块是使用 <code>backgroundColor</code> 实现的:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 标题文字居左</span>
+ 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 punctuation">}</span><span class="token punctuation">;</span>
+
+<span class="token comment">// 标题文字居中。</span>
+<span class="token comment">// 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。</span>
+labelOption <span class="token operator">=</span> <span class="token punctuation">{</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>
+<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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></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/zh/application/label/rich-text.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,C,I,A,i,e,d,o,l,t,c,a,n,r,h,s,b,p,B,Z,m,G,H,y,W,w,v,J,Y,E,K,R,L,u,M,D,z,x,O,X,f,S,N,V,k,F,j,Q,T,U,q,P,_,$,gg,Cg,Ig){return{layout:"default",data:[{html:'<h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1>\n<p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式,能够:</p>\n<ul>\n<li>定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则,可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:</p>\n<ul>\n<li>文本块(Text Block):文本标签块整体。</li>\n<li>文本片段(Text fragment):文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2>\n<p>echarts 提供了丰富的文本标签配置项,包括:</p>\n<ul>\n<li>字体基本样式设置:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色:<code>color</code>。</li>\n<li>文字描边:<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影:<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小:<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐:<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景(颜色或图片):<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影:<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转:<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>例如:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5Zyo5paH5pys5Lit77yM5Y-v5Lul5a-56YOo5YiG5paH5pys6YeH55SoIHJpY2gg5Lit5a6a5LmJ5qC35byP44CCCiAgLy8g6L-Z6YeM6ZyA6KaB5Zyo5paH5pys5Lit5L2_55So5qCH6K6w56ym5Y-377yaCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gIOagh-iusOagt-W8j-WQjeOAggogIC8vIOazqOaEj--8jOaNouihjOS7jeaYr-S9v-eUqCAnXG4n44CCCiAgZm9ybWF0dGVyOiBbCiAgICAne2F86L-Z5q615paH5pys6YeH55So5qC35byPYX0nLAogICAgJ3tifOi_meauteaWh-acrOmHh-eUqOagt-W8j2J96L-Z5q6155So6buY6K6k5qC35byPe3h86L-Z5q6155So5qC35byPeH0nCiAgXS5qb2luKCdcbicpLAoKICAvLyDov5nph4zmmK_mlofmnKzlnZfnmoTmoLflvI_orr7nva7vvJoKICBjb2xvcjogJyMzMzMnLAogIGZvbnRTaXplOiA1LAogIGZvbnRGYW1pbHk6ICdBcmlhbCcsCiAgYm9yZGVyV2lkdGg6IDMsCiAgYmFja2dyb3VuZENvbG9yOiAnIzk4NDQ1NScsCiAgcGFkZGluZzogWzMsIDEwLCAxMCwgNV0sCiAgbGluZUhlaWdodDogMjAsCgogIC8vIHJpY2gg6YeM5piv5paH5pys54mH5q6155qE5qC35byP6K6-572u77yaCiAgcmljaDogewogICAgYTogewogICAgICBjb2xvcjogJ3JlZCcsCiAgICAgIGxpbmVIZWlnaHQ6IDEwCiAgICB9LAogICAgYjogewogICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICBpbWFnZTogJ3h4eC94eHguanBnJwogICAgICB9LAogICAgICBoZWlnaHQ6IDQwCiAgICB9LAogICAgeDogewogICAgICBmb250U2l6ZTogMTgsCiAgICAgIGZvbnRGYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLAogICAgICBib3JkZXJDb2xvcjogJyM0NDk5MzMnLAogICAgICBib3JkZXJSYWRpdXM6IDQKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:如果不定义 <code>rich</code>,不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2>\n<p>每个文本可以设置基本的字体样式:<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式:<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2>\n<p>对于折线图、柱状图、散点图等,均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置,一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p>\n<p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyDkv67mlLkgcG9zaXRpb24g5ZKMIGRpc3RhbmNlIOeahOWAvOivleivlQogICAgICAgICAgLy8g5pSv5oyB77yaJ2xlZnQnLCAncmlnaHQnLCAndG9wJywgJ2JvdHRvbScsICdpbnNpZGUnLCAnaW5zaWRlVG9wJywgJ2luc2lkZUxlZnQnLCAnaW5zaWRlUmlnaHQnLCAnaW5zaWRlQm90dG9tJywgJ2luc2lkZVRvcExlZnQnLCAnaW5zaWRlVG9wUmlnaHQnLCAnaW5zaWRlQm90dG9tTGVmdCcsICdpbnNpZGVCb3R0b21SaWdodCcKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJywKICAgICAgICAgIGRpc3RhbmNlOiAxMCwKCiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBbJ0xhYmVsIFRleHQnXS5qb2luKCdcbicpLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDIsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBwYWRkaW5nOiAxMCwKICAgICAgICAgIGZvbnRTaXplOiAxOCwKICAgICAgICAgIHNoYWRvd0JsdXI6IDMsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICAgIHNoYWRvd09mZnNldFk6IDMsCiAgICAgICAgICB0ZXh0Qm9yZGVyQ29sb3I6ICcjMDAwJywKICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgIGNvbG9yOiAnI2ZmZicKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBtYXg6IDIKICB9LAogIHlBeGlzOiB7CiAgICBtYXg6IDIKICB9Cn07\'" v-bind="{}" />\n<blockquote>\n<p>注意:<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p>\n</blockquote>\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2>\n<p>某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>这种场景下,可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p>\n<p>注意,逻辑是,先使用 <code>align</code> 和 <code>verticalAlign</code> 定位,再旋转。</p>\n<h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2>\n<p>关于排版方式,每个文本片段,可以想象成 CSS 中的 <code>inline-block</code>,在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸(<code>content box size</code>),默认是根据文字大小决定的。但是,也可以设置 <code>width</code>、<code>height</code> 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(<code>border box size</code>),由上述本身尺寸,加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>\'\\n\'</code> 是换行符,能导致换行。</p>\n<p>一行内,会有多个文本片段。每行的实际高度,由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定,也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(<code>border box size</code>)。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后,一行内,文本片段的竖直位置,由文本片段的 <code>verticalAlign</code> 来指定(这里和 CSS 中的规则稍有不同):</p>\n<ul>\n<li><code>\'bottom\'</code>:文本片段的盒的底边贴住行底。</li>\n<li><code>\'top\'</code>:文本片段的盒的顶边贴住行顶。</li>\n<li><code>\'middle\'</code>:居行中。</li>\n</ul>\n<p>文本块的宽度,可以直接由文本块的 <code>width</code> 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置:</p>\n<ul>\n<li>首先,从左向右连续紧靠放置 <code>align</code> 为 <code>\'left\'</code> 的文本片段盒。</li>\n<li>然后,从右向左连续紧靠放置 <code>align</code> 为 <code>\'right\'</code> 的文本片段盒。</li>\n<li>最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置:</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>\'center\'</code>,则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>\'left\'</code>,则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>\'right\'</code>,则文字在文本片段盒中是居右的。</li>\n</ul>\n<h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果:图标、分割线、标题块、简单表格</h2>\n<p>看下面的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后,就可以在文本中使用图标了:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgU3Vubnk6IHsKICAgICAgLy8g6L-Z5qC36K6-5a6aIGJhY2tncm91bmRDb2xvciDlsLHlj6_ku6XmmK_lm77niYfkuobjgIIKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgfSwKICAgICAgLy8g5Y-v5Lul5Y-q5oyH5a6a5Zu-54mH55qE6auY5bqm77yM5LuO6ICM5Zu-54mH55qE5a695bqm5qC55o2u5Zu-54mH55qE6ZW_5a695q-U6Ieq5Yqo5b6X5Yiw44CCCiAgICAgIGhlaWdodDogMzAKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<p>分割线实际是用 border 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgaHI6IHsKICAgICAgYm9yZGVyQ29sb3I6ICcjNzc3JywKICAgICAgLy8g6L-Z6YeM5oqKIHdpZHRoIOiuvue9ruS4uiAnMTAwJSfvvIzooajnpLrliIblibLnur_nmoTplb_luqblhYXmu6HmlofmnKzlnZfjgIIKICAgICAgLy8g5rOo5oSP77yM6L-Z6YeM5piv5paH5pys5Z2X5YaF5a6555uS77yIY29udGVudCBib3jvvInnmoQgMTAwJe-8jOiAjOS4jeWMheWQqyBwYWRkaW5n44CCCiAgICAgIC8vIOiZveeEtui_meWSjCBDU1Mg55u45YWz55qE5a6a5LmJ5pyJ5omA5LiN5ZCM77yM5L2G5piv5Zyo6L-Z57G75Zy65pmv5Lit5pu05Yqg5pa55L6_44CCCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgIGhlaWdodDogMAogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>标题块是使用 <code>backgroundColor</code> 实现的:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5qCH6aKY5paH5a2X5bGF5bemCiAgZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLAogIHJpY2g6IHsKICAgIHRpdGxlQmc6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTsKCi8vIOagh-mimOaWh-Wtl-WxheS4reOAggovLyDov5nkuKrlrp7njrDmnInkupsgdHJpY2t577yM5L2G5piv77yM6IO95aSf5LiN5byV5YWl5pu05aSN5p2C55qE5o6S54mI6KeE5YiZ6ICM5a6e546w6L-Z5Liq5pWI5p6c44CCCmxhYmVsT3B0aW9uID0gewogIGZvcm1hdHRlcjogJ3t0Y3xDZW50ZXIgVGl0bGV9e3RpdGxlQmd8fScsCiAgcmljaDogewogICAgdGl0bGVCZzogewogICAgICBhbGlnbjogJ3JpZ2h0JywKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>简单表格的设定,其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></p>\n',postPath:"zh/application/label/rich-text"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:l,draft:g},{title:"获取灵感",dir:t},{title:"寻求帮助",dir:c},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:p,draft:g},{title:"系列",dir:B,draft:g},{title:"样式",dir:Z},{title:"数据集",dir:m},{title:"数据转换",dir:G},{title:"坐标系",dir:H,draft:g},{title:"坐标轴",dir:y},{title:"视觉映射",dir:I},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:v,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:R,draft:g},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:I,draft:g}]},{title:"折线图",dir:u,children:[{title:"基础折线图",dir:M},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:O}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:f},{title:"南丁格尔图(玫瑰图)",dir:S}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:V}]}]},{title:k,dir:C,draft:g},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:k,dir:C,draft:g},{title:gg,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ig}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:l,draft:g},{title:"Inspiration",dir:t},{title:"Get Help",dir:c},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:p,draft:g},{title:"Series",dir:B,draft:g},{title:"Style",dir:Z},{title:"Dataset",dir:m},{title:"Data Transform",dir:G},{title:"Coordinate",dir:H,draft:g},{title:"Axis",dir:y},{title:"Visual Mapping",dir:I},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"Application",dir:v,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:R,draft:g},{title:"Waterfall",dir:L}]},{title:"Line",dir:u,children:[{title:"Basic Line",dir:M},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:O}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:f},{title:"Rose Style",dir:S}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:V}]}]},{title:"Mobile",dir:C,draft:g},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:C,draft:g},{title:gg,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ig}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/application/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/basics/download/index.html b/handbook/zh/basics/download/index.html
index cf06ada..ee49c0f 100644
--- a/handbook/zh/basics/download/index.html
+++ b/handbook/zh/basics/download/index.html
@@ -3,28 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="获取-apache-echarts"><a href="#%E8%8E%B7%E5%8F%96-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>获取 Apache ECharts</h1>
-<p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p>
-<ul>
-<li>从 GitHub 获取</li>
-<li>从 npm 获取</li>
-<li>从 CDN 获取</li>
-<li>在线定制</li>
-</ul>
-<p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p>
-<h2 id="安装方式"><a href="#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>安装方式</h2>
-<h3 id="从-github-获取"><a href="#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 GitHub 获取</h3>
-<p><a href="https://github.com/apache/echarts" rel="nofollow noopener noreferrer" target="_blank">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>
-<h3 id="从-npm-获取"><a href="#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 npm 获取</h3>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>
-<h3 id="从-cdn-获取"><a href="#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>从 CDN 获取</h3>
-<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">echarts</a>。</p>
-<h3 id="在线定制"><a href="#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在线定制</h3>
-<p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html" rel="nofollow noopener noreferrer" target="_blank">ECharts 在线定制</a>功能。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/basics/download#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F">安装方式</a></li><li class="toc3"><a href="/handbook/zh/basics/download#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96">从 GitHub 获取</a></li><li class="toc3"><a href="/handbook/zh/basics/download#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96">从 npm 获取</a></li><li class="toc3"><a href="/handbook/zh/basics/download#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96">从 CDN 获取</a></li><li class="toc3"><a href="/handbook/zh/basics/download#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6">在线定制</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/download.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,p,n,s,h,c,o,y,u,g,v,f,m,b,E,B,C,x,A,w,S,k,P,D,H,N,R,I,L,z,F,_,G,T,V,M,j,U,O,Z,$,W,X,q,J,K,Q,Y,tt,et,it,rt,at,lt,dt,pt,nt,st,ht,ct,ot,yt,ut,gt,vt,ft,mt,bt,Et,Bt){return{layout:"default",data:[{article:{slug:E,toc:[{id:o,depth:2,text:o},{id:w,depth:3,text:B},{id:S,depth:3,text:C},{id:k,depth:3,text:x},{id:c,depth:3,text:c}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:"获取-apache-echarts"},children:[{type:e,tag:a,props:{href:"#%E8%8E%B7%E5%8F%96-apache-echarts",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:"获取 Apache ECharts"}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:t,value:"Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。"}]},{type:t,value:r},{type:e,tag:"ul",props:{},children:[{type:t,value:r},{type:e,tag:y,props:{},children:[{type:t,value:B}]},{type:t,value:r},{type:e,tag:y,props:{},children:[{type:t,value:C}]},{type:t,value:r},{type:e,tag:y,props:{},children:[{type:t,value:x}]},{type:t,value:r},{type:e,tag:y,props:{},children:[{type:t,value:c}]},{type:t,value:r}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:t,value:"接下来我们将分别介绍这些安装方式,以及下载后的目录结构。"}]},{type:t,value:r},{type:e,tag:"h2",props:{id:o},children:[{type:e,tag:a,props:{href:"#%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:o}]},{type:t,value:r},{type:e,tag:u,props:{id:w},children:[{type:e,tag:a,props:{href:"#%E4%BB%8E-github-%E8%8E%B7%E5%8F%96",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:B}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:e,tag:a,props:{href:"https://github.com/apache/echarts",rel:[g,v,f],target:m},children:[{type:t,value:"apache/echarts"}]},{type:t,value:" 项目的 "},{type:e,tag:a,props:{href:"https://github.com/apache/echarts/releases",rel:[g,v,f],target:m},children:[{type:t,value:"release"}]},{type:t,value:" 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 "},{type:e,tag:P,props:{},children:[{type:t,value:"dist"}]},{type:t,value:" 目录下的 "},{type:e,tag:P,props:{},children:[{type:t,value:"echarts.js"}]},{type:t,value:" 即为包含完整 ECharts 功能的文件。"}]},{type:t,value:r},{type:e,tag:u,props:{id:S},children:[{type:e,tag:a,props:{href:"#%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:C}]},{type:t,value:r},{type:e,tag:"div",props:{className:["nuxt-content-highlight"]},children:[{type:e,tag:"md-code-block",props:{lang:"sh","line-highlights":"","file-name":""},children:[{type:t,value:"npm install echarts --save\n"}]}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:t,value:"详见"},{type:e,tag:a,props:{href:"zh/basics/import"},children:[{type:t,value:"在项目中引入 Apache ECharts"}]},{type:t,value:"。"}]},{type:t,value:r},{type:e,tag:u,props:{id:k},children:[{type:e,tag:a,props:{href:"#%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:x}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:t,value:"推荐从 jsDelivr 引用 "},{type:e,tag:a,props:{href:"https://www.jsdelivr.com/package/npm/echarts",rel:[g,v,f],target:m},children:[{type:t,value:"echarts"}]},{type:t,value:"。"}]},{type:t,value:r},{type:e,tag:u,props:{id:c},children:[{type:e,tag:a,props:{href:"#%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6",ariaHidden:l,tabIndex:d},children:[{type:e,tag:p,props:{className:[n,s]},children:[]}]},{type:t,value:c}]},{type:t,value:r},{type:e,tag:h,props:{},children:[{type:t,value:"如果只想引入部分模块以减少包体积,可以使用 "},{type:e,tag:a,props:{href:"https://echarts.apache.org//builder.html",rel:[g,v,f],target:m},children:[{type:t,value:"ECharts 在线定制"}]},{type:t,value:"功能。"}]}]},dir:"/zh/basics",path:D,extension:".md",createdAt:"2021-06-04T12:26:37.923Z",updatedAt:"2021-07-21T05:35:15.214Z"},postPath:"zh/basics/download"}],fetch:{},error:H,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:N},{title:"入门篇",dir:R,children:[{title:"获取 ECharts",dir:E},{title:"在项目中引入 ECharts",dir:I},{title:"资源列表",dir:L,draft:i},{title:"获取灵感",dir:z},{title:"寻求帮助",dir:F},{title:"版本介绍",dir:_,children:[{title:G,draft:i,dir:T},{title:"ECharts 5 新特性",dir:V},{title:"ECharts 5 升级指南",dir:M}]}]},{title:"概念篇",dir:j,children:[{title:"图表容器及大小",dir:U},{title:"配置项",dir:O,draft:i},{title:"系列",dir:Z,draft:i},{title:"样式",dir:$},{title:"数据集",dir:W},{title:"数据转换",dir:X},{title:"坐标系",dir:q,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:A},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Q},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:tt,draft:i},{title:"极坐标系柱状图",dir:et,draft:i},{title:"瀑布图",dir:it,draft:i},{title:"视觉映射的柱状图",dir:A,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:rt},{title:"堆叠折线图",dir:at},{title:"区域面积图",dir:lt},{title:"平滑曲线图",dir:dt},{title:"阶梯线图",dir:pt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:nt},{title:"圆环图",dir:st},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ht,children:[{title:"基础散点图",dir:ct}]}]},{title:"移动端优化",dir:b,draft:i},{title:"跨平台方案",dir:ot,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:yt},{title:"数据下钻",dir:ut,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:gt}]},{title:"交互",dir:vt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ft,draft:i}]}]},{title:"最佳实践",dir:mt,children:[{title:"移动端优化",dir:b,draft:i},{title:bt,dir:Et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Bt}]}],en:[{title:"Get Started",dir:N},{title:"Basics",dir:R,children:[{title:"Download ECharts",dir:E},{title:"Import ECharts",dir:I},{title:"Resources",dir:L,draft:i},{title:"Inspiration",dir:z},{title:"Get Help",dir:F},{title:"Release Note",dir:_,children:[{title:G,draft:i,dir:T},{title:"ECharts 5 Features",dir:V},{title:"ECharts 5 Upgrade Guide",dir:M}]}]},{title:"Concepts",dir:j,children:[{title:"Chart Container",dir:U},{title:"Chart Option",dir:O,draft:i},{title:"Series",dir:Z,draft:i},{title:"Style",dir:$},{title:"Dataset",dir:W},{title:"Data Transform",dir:X},{title:"Coordinate",dir:q,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:A},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Q},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:tt,draft:i},{title:"Bar Polar",dir:et,draft:i},{title:"Waterfall",dir:it,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:rt},{title:"Stacked Line",dir:at},{title:"Area Chart",dir:lt},{title:"Smoothed Line",dir:dt},{title:"Step Line",dir:pt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:nt},{title:"Ring Style",dir:st},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ht,children:[{title:"Basic Scatter",dir:ct}]}]},{title:"Mobile",dir:b,draft:i},{title:"Cross Platform",dir:ot,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:yt},{title:"Drilldown",dir:ut,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:gt}]},{title:"Interaction",dir:vt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ft,draft:i}]}]},{title:"Best Practice",dir:mt,children:[{title:"Mobile Optimization",dir:b,draft:i},{title:bt,dir:Et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Bt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:D,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:H},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","true",-1,"span","icon","icon-link","p","在线定制","安装方式","li","h3","nofollow","noopener","noreferrer","_blank","mobile","download","从 GitHub 获取","从 npm 获取","从 CDN 获取","visual-map","从-github-获取","从-npm-获取","从-cdn-获取","code","/zh/basics/download",null,"get-started","basics","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1> <p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p> <ul><li>从 GitHub 获取</li> <li>从 npm 获取</li> <li>从 CDN 获取</li> <li>在线定制</li></ul> <p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p> <h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2> <h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3> <p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p> <h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p> <h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3> <p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p> <h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3> <p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</a>功能。</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/zh/basics/download.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,h,c,s,o,p,b,E,f,m,g,u,B,C,v,w,A,x,S,P,k,D,R,y,G,L,F,z,N,_,V,H,I,M,U,j,T,W,X,O,$,J,Y,Z,q,K,Q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h1>\n<p>Apache ECharts 提供了多种安装方式,你可以根据项目的实际情况选择以下任意一种方式安装。</p>\n<ul>\n<li>从 GitHub 获取</li>\n<li>从 npm 获取</li>\n<li>从 CDN 获取</li>\n<li>在线定制</li>\n</ul>\n<p>接下来我们将分别介绍这些安装方式,以及下载后的目录结构。</p>\n<h2 id="%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F" tabindex="-1">安装方式</h2>\n<h3 id="%E4%BB%8E-github-%E8%8E%B7%E5%8F%96" tabindex="-1">从 GitHub 获取</h3>\n<p><a href="https://github.com/apache/echarts">apache/echarts</a> 项目的 <a href="https://github.com/apache/echarts/releases">release</a> 页面可以找到各个版本的链接。点击下载页面下方 Assets 中的 Source code,解压后 <code>dist</code> 目录下的 <code>echarts.js</code> 即为包含完整 ECharts 功能的文件。</p>\n<h3 id="%E4%BB%8E-npm-%E8%8E%B7%E5%8F%96" tabindex="-1">从 npm 获取</h3>\n<md-code-block lang="sh" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<p>详见<a href="zh/basics/import">在项目中引入 Apache ECharts</a>。</p>\n<h3 id="%E4%BB%8E-cdn-%E8%8E%B7%E5%8F%96" tabindex="-1">从 CDN 获取</h3>\n<p>推荐从 jsDelivr 引用 <a href="https://www.jsdelivr.com/package/npm/echarts">echarts</a>。</p>\n<h3 id="%E5%9C%A8%E7%BA%BF%E5%AE%9A%E5%88%B6" tabindex="-1">在线定制</h3>\n<p>如果只想引入部分模块以减少包体积,可以使用 <a href="https://echarts.apache.org//builder.html">ECharts 在线定制</a>功能。</p>\n',postPath:"zh/basics/download"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:s},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:b},{title:5.2,dir:E}]}]},{title:"概念篇",dir:f,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:g,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:B},{title:"数据集",dir:C},{title:"数据转换",dir:v},{title:"坐标系",dir:w,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:G,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:N},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:M},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:O}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Z}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:K,draft:t}]}]},{title:"最佳实践",dir:Q,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:s},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:b},{title:5.2,dir:E}]}]},{title:"Concepts",dir:f,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:g,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:B},{title:"Dataset",dir:C},{title:"Data Transform",dir:v},{title:"Coordinate",dir:w,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:S}]},{title:"Application",dir:P,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:G,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:N},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:M},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:O}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Z}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:K,draft:t}]}]},{title:"Best Practice",dir:Q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/download",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/basics/help/index.html b/handbook/zh/basics/help/index.html
index 6cd93e7..2eed2b8 100644
--- a/handbook/zh/basics/help/index.html
+++ b/handbook/zh/basics/help/index.html
@@ -3,33 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="寻求帮助"><a href="#%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>寻求帮助</h1>
-<h2 id="技术问题"><a href="#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>技术问题</h2>
-<h3 id="确保现有文档等资料无法解决你的问题"><a href="#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>确保现有文档等资料无法解决你的问题</h3>
-<p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p>
-<p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p>
-<ul>
-<li><a href="https://echarts.apache.org//api.html" rel="nofollow noopener noreferrer" target="_blank">API</a></li>
-<li><a href="https://echarts.apache.org//option.html" rel="nofollow noopener noreferrer" target="_blank">配置项手册</a>:可以尝试使用搜索功能</li>
-<li>本手册的文章</li>
-<li><a href="https://echarts.apache.org//faq.html" rel="nofollow noopener noreferrer" target="_blank">常见问题</a></li>
-<li>在 <a href="https://github.com/apache/echarts/issues" rel="nofollow noopener noreferrer" target="_blank">GitHub issue</a> 中搜索关键字</li>
-<li>使用搜索引擎搜索关键字</li>
-</ul>
-<h3 id="创建一个最简单可复现的例子"><a href="#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>创建一个最简单可复现的例子</h3>
-<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM" rel="nofollow noopener noreferrer" target="_blank">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz" rel="nofollow noopener noreferrer" target="_blank">Codesandbox</a> 或者 <a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p>
-<p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example" rel="nofollow noopener noreferrer" target="_blank">How to create a Minimal, Reproducible Example</a>。</p>
-<h3 id="判断是否是-bug"><a href="#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>判断是否是 bug</h3>
-<h4 id="报告-bug-或请求新功能"><a href="#%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>报告 bug 或请求新功能</h4>
-<p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/" rel="nofollow noopener noreferrer" target="_blank">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>
-<h4 id="咨询类问题"><a href="#%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>咨询类问题</h4>
-<p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>
-<p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p>
-<h2 id="非技术类问题"><a href="#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>非技术类问题</h2>
-<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/basics/help#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98">技术问题</a></li><li class="toc3"><a href="/handbook/zh/basics/help#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98">确保现有文档等资料无法解决你的问题</a></li><li class="toc3"><a href="/handbook/zh/basics/help#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90">创建一个最简单可复现的例子</a></li><li class="toc3"><a href="/handbook/zh/basics/help#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug">判断是否是 bug</a></li><li class="toc2"><a href="/handbook/zh/basics/help#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98">非技术类问题</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/help.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,l,d,p,s,h,n,c,o,y,u,g,v,E,f,m,b,A,B,x,C,w,k,D,P,S,H,F,I,R,N,L,z,_,G,M,V,T,O,U,W,q,X,$,Y,Z,j,J,K,Q,ee,te,ie,re,ae,le,de,pe,se,he,ne,ce,oe,ye,ue,ge,ve,Ee,fe,me,be,Ae){return{layout:"default",data:[{article:{slug:A,toc:[{id:v,depth:2,text:v},{id:E,depth:3,text:E},{id:f,depth:3,text:f},{id:w,depth:3,text:k},{id:m,depth:2,text:m}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:B},children:[{type:t,tag:a,props:{href:"#%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:B}]},{type:e,value:r},{type:t,tag:"h2",props:{id:v},children:[{type:t,tag:a,props:{href:"#%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:v}]},{type:e,value:r},{type:t,tag:x,props:{id:E},children:[{type:t,tag:a,props:{href:"#%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:E}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。"}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:"}]},{type:e,value:r},{type:t,tag:"ul",props:{},children:[{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//api.html",rel:[l,d,p],target:s},children:[{type:e,value:"API"}]}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//option.html",rel:[l,d,p],target:s},children:[{type:e,value:"配置项手册"}]},{type:e,value:":可以尝试使用搜索功能"}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"本手册的文章"}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:t,tag:a,props:{href:"https://echarts.apache.org//faq.html",rel:[l,d,p],target:s},children:[{type:e,value:"常见问题"}]}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"在 "},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/issues",rel:[l,d,p],target:s},children:[{type:e,value:"GitHub issue"}]},{type:e,value:" 中搜索关键字"}]},{type:e,value:r},{type:t,tag:g,props:{},children:[{type:e,value:"使用搜索引擎搜索关键字"}]},{type:e,value:r}]},{type:e,value:r},{type:t,tag:x,props:{id:f},children:[{type:t,tag:a,props:{href:"#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:f}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"使用 "},{type:t,tag:a,props:{href:"https://codepen.io/Ovilia/pen/dyYWXWM",rel:[l,d,p],target:s},children:[{type:e,value:"Codepen"}]},{type:e,value:"、"},{type:t,tag:a,props:{href:"https://codesandbox.io/s/mystifying-bash-2uthz",rel:[l,d,p],target:s},children:[{type:e,value:"Codesandbox"}]},{type:e,value:" 或者 "},{type:t,tag:a,props:{href:"https://www.makeapie.com/",rel:[l,d,p],target:s},children:[{type:e,value:"makeapie.com"}]},{type:e,value:" 创建一个例子,这将使得他人更方便地复现你的问题。"}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 "},{type:t,tag:a,props:{href:"https://stackoverflow.com/help/minimal-reproducible-example",rel:[l,d,p],target:s},children:[{type:e,value:"How to create a Minimal, Reproducible Example"}]},{type:e,value:"。"}]},{type:e,value:r},{type:t,tag:x,props:{id:w},children:[{type:t,tag:a,props:{href:"#%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:k}]},{type:e,value:r},{type:t,tag:"h4",props:{id:"报告-bug-或请求新功能"},children:[{type:t,tag:a,props:{href:"#%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:"报告 bug 或请求新功能"}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 "},{type:t,tag:a,props:{href:"https://ecomfe.github.io/echarts-issue-helper/",rel:[l,d,p],target:s},children:[{type:e,value:"issue 模板"}]},{type:e,value:" 中新建一个 issue 并按照提示详细描述。"}]},{type:e,value:r},{type:t,tag:"h4",props:{id:D},children:[{type:t,tag:a,props:{href:"#%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:D}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"如果不是 bug,而是不知道如何实现某种效果,可以尝试在 "},{type:t,tag:a,props:{href:"https://stackoverflow.com"},children:[{type:e,value:"stackoverflow.com"}]},{type:e,value:"、"},{type:t,tag:a,props:{href:"https://www.oschina.net/question/tag/echarts"},children:[{type:e,value:"开源中国"}]},{type:e,value:" 或 "},{type:t,tag:a,props:{href:"https://segmentfault.com/t/echarts"},children:[{type:e,value:"segmentfault.com"}]},{type:e,value:" 等问答平台上提问。"}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"如果没能得到答复,也可以发送邮件至邮件组 "},{type:t,tag:a,props:{href:P},children:[{type:e,value:S}]},{type:e,value:"。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。"}]},{type:e,value:r},{type:t,tag:"h2",props:{id:m},children:[{type:t,tag:a,props:{href:"#%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98",ariaHidden:h,tabIndex:n},children:[{type:t,tag:c,props:{className:[o,y]},children:[]}]},{type:e,value:m}]},{type:e,value:r},{type:t,tag:u,props:{},children:[{type:e,value:"其他问题可以发送英文邮件至邮件组 "},{type:t,tag:a,props:{href:P},children:[{type:e,value:S}]},{type:e,value:"。"}]}]},dir:"/zh/basics",path:H,extension:".md",createdAt:F,updatedAt:F},postPath:"zh/basics/help"}],fetch:{},error:I,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:R},{title:"入门篇",dir:N,children:[{title:"获取 ECharts",dir:L},{title:"在项目中引入 ECharts",dir:z},{title:"资源列表",dir:_,draft:i},{title:"获取灵感",dir:G},{title:B,dir:A},{title:"版本介绍",dir:M,children:[{title:V,draft:i,dir:T},{title:"ECharts 5 新特性",dir:O},{title:"ECharts 5 升级指南",dir:U}]}]},{title:"概念篇",dir:W,children:[{title:"图表容器及大小",dir:q},{title:"配置项",dir:X,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:$},{title:"数据转换",dir:Y},{title:"坐标系",dir:Z,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:C},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:j,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:Q},{title:"动态排序柱状图",dir:ee,draft:i},{title:"极坐标系柱状图",dir:te,draft:i},{title:"瀑布图",dir:ie,draft:i},{title:"视觉映射的柱状图",dir:C,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:re},{title:"堆叠折线图",dir:ae},{title:"区域面积图",dir:le},{title:"平滑曲线图",dir:de},{title:"阶梯线图",dir:pe}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:se},{title:"圆环图",dir:he},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ne,children:[{title:"基础散点图",dir:ce}]}]},{title:"移动端优化",dir:b,draft:i},{title:"跨平台方案",dir:oe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ye},{title:"数据下钻",dir:ue,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ge}]},{title:"交互",dir:ve,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ee,draft:i}]}]},{title:"最佳实践",dir:fe,children:[{title:"移动端优化",dir:b,draft:i},{title:me,dir:be},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ae}]}],en:[{title:"Get Started",dir:R},{title:"Basics",dir:N,children:[{title:"Download ECharts",dir:L},{title:"Import ECharts",dir:z},{title:"Resources",dir:_,draft:i},{title:"Inspiration",dir:G},{title:"Get Help",dir:A},{title:"Release Note",dir:M,children:[{title:V,draft:i,dir:T},{title:"ECharts 5 Features",dir:O},{title:"ECharts 5 Upgrade Guide",dir:U}]}]},{title:"Concepts",dir:W,children:[{title:"Chart Container",dir:q},{title:"Chart Option",dir:X,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:$},{title:"Data Transform",dir:Y},{title:"Coordinate",dir:Z,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:C},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:j,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:Q},{title:"Bar Racing",dir:ee,draft:i},{title:"Bar Polar",dir:te,draft:i},{title:"Waterfall",dir:ie,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:re},{title:"Stacked Line",dir:ae},{title:"Area Chart",dir:le},{title:"Smoothed Line",dir:de},{title:"Step Line",dir:pe}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:se},{title:"Ring Style",dir:he},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ne,children:[{title:"Basic Scatter",dir:ce}]}]},{title:"Mobile",dir:b,draft:i},{title:"Cross Platform",dir:oe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ye},{title:"Drilldown",dir:ue,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ge}]},{title:"Interaction",dir:ve,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ee,draft:i}]}]},{title:"Best Practice",dir:fe,children:[{title:"Mobile Optimization",dir:b,draft:i},{title:me,dir:be},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ae}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:H,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","nofollow","noopener","noreferrer","_blank","true",-1,"span","icon","icon-link","p","li","技术问题","确保现有文档等资料无法解决你的问题","创建一个最简单可复现的例子","非技术类问题","mobile","help","寻求帮助","h3","visual-map","判断是否是-bug","判断是否是 bug","咨询类问题","mailto:dev@echarts.apache.org","dev@echarts.apache.org","/zh/basics/help","2021-06-04T12:26:37.923Z",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1> <h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2> <h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3> <p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p> <p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p> <ul><li><a href="https://echarts.apache.org//api.html">API</a></li> <li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li> <li>本手册的文章</li> <li><a href="https://echarts.apache.org//faq.html">常见问题</a></li> <li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li> <li>使用搜索引擎搜索关键字</li></ul> <h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3> <p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p> <p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p> <h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3> <h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4> <p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p> <h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4> <p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p> <p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p> <h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2> <p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</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/zh/basics/help.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,h,n,s,c,o,p,E,f,A,b,m,g,u,B,C,v,x,w,D,k,P,S,F,y,R,L,z,G,M,_,V,H,I,W,O,T,U,q,N,X,$,Y,j,J,K,Q,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%AF%BB%E6%B1%82%E5%B8%AE%E5%8A%A9" tabindex="-1">寻求帮助</h1>\n<h2 id="%E6%8A%80%E6%9C%AF%E9%97%AE%E9%A2%98" tabindex="-1">技术问题</h2>\n<h3 id="%E7%A1%AE%E4%BF%9D%E7%8E%B0%E6%9C%89%E6%96%87%E6%A1%A3%E7%AD%89%E8%B5%84%E6%96%99%E6%97%A0%E6%B3%95%E8%A7%A3%E5%86%B3%E4%BD%A0%E7%9A%84%E9%97%AE%E9%A2%98" tabindex="-1">确保现有文档等资料无法解决你的问题</h3>\n<p>ECharts 有非常大量的用户,所以你遇到过的问题,很可能别人在此之前也遇到并解决了。通过查看文档以及使用搜索引擎搜索关键字,可以帮助你自助地在第一时间解决问题,而不需要依赖社区的帮助。</p>\n<p>因此,在做其他操作前,请确保现有文档等资料无法解决你的问题。可以尝试查看或搜索的资料包括:</p>\n<ul>\n<li><a href="https://echarts.apache.org//api.html">API</a></li>\n<li><a href="https://echarts.apache.org//option.html">配置项手册</a>:可以尝试使用搜索功能</li>\n<li>本手册的文章</li>\n<li><a href="https://echarts.apache.org//faq.html">常见问题</a></li>\n<li>在 <a href="https://github.com/apache/echarts/issues">GitHub issue</a> 中搜索关键字</li>\n<li>使用搜索引擎搜索关键字</li>\n</ul>\n<h3 id="%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%9C%80%E7%AE%80%E5%8D%95%E5%8F%AF%E5%A4%8D%E7%8E%B0%E7%9A%84%E4%BE%8B%E5%AD%90" tabindex="-1">创建一个最简单可复现的例子</h3>\n<p>使用 <a href="https://codepen.io/Ovilia/pen/dyYWXWM">Codepen</a>、<a href="https://codesandbox.io/s/mystifying-bash-2uthz">Codesandbox</a> 或者 <a href="https://www.makeapie.com/">makeapie.com</a> 创建一个例子,这将使得他人更方便地复现你的问题。</p>\n<p>例子应尽可能以最简单的方式复现你的问题,去除不必要的配置项和数据,可以让帮助你的人更快速地定位问题,从而让你的问题更快得到解决。更详细的介绍请参见 <a href="https://stackoverflow.com/help/minimal-reproducible-example">How to create a Minimal, Reproducible Example</a>。</p>\n<h3 id="%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E6%98%AF-bug" tabindex="-1">判断是否是 bug</h3>\n<h4 id="%E6%8A%A5%E5%91%8A-bug-%E6%88%96%E8%AF%B7%E6%B1%82%E6%96%B0%E5%8A%9F%E8%83%BD" tabindex="-1">报告 bug 或请求新功能</h4>\n<p>如果不符合文档描述或你的预期效果,这很有可能是 bug。如果是 bug,或者你有一个想请求实现的功能,请使用 <a href="https://ecomfe.github.io/echarts-issue-helper/">issue 模板</a> 中新建一个 issue 并按照提示详细描述。</p>\n<h4 id="%E5%92%A8%E8%AF%A2%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">咨询类问题</h4>\n<p>如果不是 bug,而是不知道如何实现某种效果,可以尝试在 <a href="https://stackoverflow.com">stackoverflow.com</a>、<a href="https://www.oschina.net/question/tag/echarts">开源中国</a> 或 <a href="https://segmentfault.com/t/echarts">segmentfault.com</a> 等问答平台上提问。</p>\n<p>如果没能得到答复,也可以发送邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。为了让更多人理解你的问题,并且在将来搜索的时候得到帮助,强烈建议使用英文发送邮件。</p>\n<h2 id="%E9%9D%9E%E6%8A%80%E6%9C%AF%E7%B1%BB%E9%97%AE%E9%A2%98" tabindex="-1">非技术类问题</h2>\n<p>其他问题可以发送英文邮件至邮件组 <a href="mailto:dev@echarts.apache.org">dev@echarts.apache.org</a>。</p>\n',postPath:"zh/basics/help"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:n,draft:t},{title:"获取灵感",dir:s},{title:"寻求帮助",dir:c},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:f}]}]},{title:"概念篇",dir:A,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:t},{title:"系列",dir:g,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:C},{title:"坐标系",dir:v,draft:t},{title:"坐标轴",dir:x},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:P,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:y},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:L},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:_},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:I},{title:"圆环图",dir:W},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:T,children:[{title:"基础散点图",dir:U}]}]},{title:q,dir:i,draft:t},{title:"跨平台方案",dir:N,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:Y},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:J}]},{title:"交互",dir:K,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:q,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:n,draft:t},{title:"Inspiration",dir:s},{title:"Get Help",dir:c},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:f}]}]},{title:"Concepts",dir:A,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:g,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:C},{title:"Coordinate",dir:v,draft:t},{title:"Axis",dir:x},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:D}]},{title:"Application",dir:k,children:[{title:"Common Charts",dir:P,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:y},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:L}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:_},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:I},{title:"Ring Style",dir:W},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:T,children:[{title:"Basic Scatter",dir:U}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:N,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:Y},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:J}]},{title:"Interaction",dir:K,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/help",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/basics/import/index.html b/handbook/zh/basics/import/index.html
index 57bd3e4..a93ba9c 100644
--- a/handbook/zh/basics/import/index.html
+++ b/handbook/zh/basics/import/index.html
@@ -3,26 +3,93 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="在项目中引入-apache-echarts"><a aria-hidden="true" href="#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1"><span class="icon icon-link"></span></a>在项目中引入 Apache ECharts</h1>
-<p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>
-<h2 id="npm-安装-echarts"><a aria-hidden="true" href="#npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1"><span class="icon icon-link"></span></a>NPM 安装 ECharts</h2>
-<p>你可以使用如下命令通过 npm 安装 ECharts</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-shell line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="引入-echarts"><a aria-hidden="true" href="#%E5%BC%95%E5%85%A5-echarts" tabindex="-1"><span class="icon icon-link"></span></a>引入 ECharts</h2>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="按需引入-echarts-图表和组件"><a aria-hidden="true" href="#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1"><span class="icon icon-link"></span></a>按需引入 ECharts 图表和组件</h2>
-<p>上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p>需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>
-</blockquote>
-<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>
-<h2 id="在-typescript-中按需引入"><a aria-hidden="true" href="#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1"><span class="icon icon-link"></span></a>在 TypeScript 中按需引入</h2>
-<p>对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/basics/import#npm-%E5%AE%89%E8%A3%85-echarts">NPM 安装 ECharts</a></li><li class="toc2"><a href="/handbook/zh/basics/import#%E5%BC%95%E5%85%A5-echarts">引入 ECharts</a></li><li class="toc2"><a href="/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6">按需引入 ECharts 图表和组件</a></li><li class="toc2"><a href="/handbook/zh/basics/import#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5">在 TypeScript 中按需引入</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/import.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,n,l,d,p,s,o,h,c,y,m,g,C,u,v,f,E,b,B,x,A,S,O,R,T,k,P,G,N,L,w,D,I,H,V,z,M,_,U,j,W,Z,$,q,F,X,J,K,Q,Y,tt,et,it,rt,at,nt,lt,dt,pt,st,ot,ht,ct,yt,mt,gt,Ct,ut,vt,ft,Et){return{layout:"default",data:[{article:{slug:u,toc:[{id:f,depth:2,text:E},{id:b,depth:2,text:B},{id:x,depth:2,text:A},{id:S,depth:2,text:O}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:"在项目中引入-apache-echarts"},children:[{type:e,tag:d,props:{ariaHidden:p,href:"#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts",tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,h]},children:[]}]},{type:t,value:"在项目中引入 Apache ECharts"}]},{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"假如你的开发环境使用了"},{type:e,tag:l,props:{},children:[{type:t,value:"npm"}]},{type:t,value:"或者"},{type:e,tag:l,props:{},children:[{type:t,value:"yarn"}]},{type:t,value:"等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts"},{type:e,tag:"sup",props:{},children:[{type:t,value:"TM"}]},{type:t,value:" 并通过 treeshaking 特性只打包需要的模块。"}]},{type:t,value:r},{type:e,tag:c,props:{id:f},children:[{type:e,tag:d,props:{ariaHidden:p,href:"#npm-%E5%AE%89%E8%A3%85-echarts",tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,h]},children:[]}]},{type:t,value:E}]},{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"你可以使用如下命令通过 npm 安装 ECharts"}]},{type:t,value:r},{type:e,tag:y,props:{className:[m]},children:[{type:e,tag:g,props:{lang:"shell","line-highlights":a,"file-name":a},children:[{type:t,value:"npm install echarts --save\n"}]}]},{type:t,value:r},{type:e,tag:c,props:{id:b},children:[{type:e,tag:d,props:{ariaHidden:p,href:"#%E5%BC%95%E5%85%A5-echarts",tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,h]},children:[]}]},{type:t,value:B}]},{type:t,value:r},{type:e,tag:y,props:{className:[m]},children:[{type:e,tag:g,props:{lang:"js","line-highlights":a,"file-name":a},children:[{type:t,value:"import * as echarts from 'echarts';\n\n// 基于准备好的dom,初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n});\n"}]}]},{type:t,value:r},{type:e,tag:c,props:{id:x},children:[{type:e,tag:d,props:{ariaHidden:p,href:"#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6",tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,h]},children:[]}]},{type:t,value:A}]},{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。"}]},{type:t,value:r},{type:e,tag:y,props:{className:[m]},children:[{type:e,tag:g,props:{lang:"js","line-highlights":a,"file-name":a},children:[{type:t,value:"// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts/core';\n// 引入柱状图图表,图表后缀都为 Chart\nimport { BarChart } from 'echarts/charts';\n// 引入提示框,标题,直角坐标系组件,组件后缀都为 Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts/components';\n// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n// 接下来的使用就跟之前一样,初始化图表,设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n // ...\n});\n"}]}]},{type:t,value:r},{type:e,tag:"blockquote",props:{},children:[{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入"},{type:e,tag:l,props:{},children:[{type:t,value:R}]},{type:t,value:"或者"},{type:e,tag:l,props:{},children:[{type:t,value:"SVGRenderer"}]},{type:t,value:"作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的"},{type:e,tag:l,props:{},children:[{type:t,value:R}]},{type:t,value:"模块。"}]},{type:t,value:r}]},{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。"}]},{type:t,value:r},{type:e,tag:c,props:{id:S},children:[{type:e,tag:d,props:{ariaHidden:p,href:"#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5",tabIndex:-1},children:[{type:e,tag:s,props:{className:[o,h]},children:[]}]},{type:t,value:O}]},{type:t,value:r},{type:e,tag:n,props:{},children:[{type:t,value:"对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的"},{type:e,tag:l,props:{},children:[{type:t,value:"EChartsOption"}]},{type:t,value:"类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。"}]},{type:t,value:r},{type:e,tag:y,props:{className:[m]},children:[{type:e,tag:g,props:{lang:"ts","line-highlights":a,"file-name":a},children:[{type:t,value:"import * as echarts from 'echarts/core';\nimport {\n BarChart,\n // 系列类型的定义后缀都为 SeriesOption\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts/charts';\nimport {\n TitleComponent,\n // 组件类型的定义后缀都为 ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption<\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n>;\n\n// 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n // ...\n};\n"}]}]}]},dir:"/zh/basics",path:T,extension:".md",createdAt:"2021-07-19T10:55:20.136Z",updatedAt:"2021-07-24T08:52:17.344Z"},postPath:"zh/basics/import"}],fetch:{},error:k,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:P},{title:"入门篇",dir:G,children:[{title:"获取 ECharts",dir:N},{title:"在项目中引入 ECharts",dir:u},{title:"资源列表",dir:L,draft:i},{title:"获取灵感",dir:w},{title:"寻求帮助",dir:D},{title:"版本介绍",dir:I,children:[{title:H,draft:i,dir:V},{title:"ECharts 5 新特性",dir:z},{title:"ECharts 5 升级指南",dir:M}]}]},{title:"概念篇",dir:_,children:[{title:"图表容器及大小",dir:U},{title:"配置项",dir:j,draft:i},{title:"系列",dir:W,draft:i},{title:"样式",dir:Z},{title:"数据集",dir:$},{title:"数据转换",dir:q},{title:"坐标系",dir:F,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:v},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:Q},{title:"动态排序柱状图",dir:Y,draft:i},{title:"极坐标系柱状图",dir:tt,draft:i},{title:"瀑布图",dir:et,draft:i},{title:"视觉映射的柱状图",dir:v,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:it},{title:"堆叠折线图",dir:rt},{title:"区域面积图",dir:at},{title:"平滑曲线图",dir:nt},{title:"阶梯线图",dir:lt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:dt},{title:"圆环图",dir:pt},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:st,children:[{title:"基础散点图",dir:ot}]}]},{title:"移动端优化",dir:C,draft:i},{title:"跨平台方案",dir:ht,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ct},{title:"数据下钻",dir:yt,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:mt}]},{title:"交互",dir:gt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ct,draft:i}]}]},{title:"最佳实践",dir:ut,children:[{title:"移动端优化",dir:C,draft:i},{title:vt,dir:ft},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Et}]}],en:[{title:"Get Started",dir:P},{title:"Basics",dir:G,children:[{title:"Download ECharts",dir:N},{title:"Import ECharts",dir:u},{title:"Resources",dir:L,draft:i},{title:"Inspiration",dir:w},{title:"Get Help",dir:D},{title:"Release Note",dir:I,children:[{title:H,draft:i,dir:V},{title:"ECharts 5 Features",dir:z},{title:"ECharts 5 Upgrade Guide",dir:M}]}]},{title:"Concepts",dir:_,children:[{title:"Chart Container",dir:U},{title:"Chart Option",dir:j,draft:i},{title:"Series",dir:W,draft:i},{title:"Style",dir:Z},{title:"Dataset",dir:$},{title:"Data Transform",dir:q},{title:"Coordinate",dir:F,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:v},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:Q},{title:"Bar Racing",dir:Y,draft:i},{title:"Bar Polar",dir:tt,draft:i},{title:"Waterfall",dir:et,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:it},{title:"Stacked Line",dir:rt},{title:"Area Chart",dir:at},{title:"Smoothed Line",dir:nt},{title:"Step Line",dir:lt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:dt},{title:"Ring Style",dir:pt},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:st,children:[{title:"Basic Scatter",dir:ot}]}]},{title:"Mobile",dir:C,draft:i},{title:"Cross Platform",dir:ht,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ct},{title:"Drilldown",dir:yt,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:mt}]},{title:"Interaction",dir:gt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ct,draft:i}]}]},{title:"Best Practice",dir:ut,children:[{title:"Mobile Optimization",dir:C,draft:i},{title:vt,dir:ft},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:T,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:k},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","p","code","a","true","span","icon","icon-link","h2","div","nuxt-content-highlight","md-code-block","mobile","import","visual-map","npm-安装-echarts","NPM 安装 ECharts","引入-echarts","引入 ECharts","按需引入-echarts-图表和组件","按需引入 ECharts 图表和组件","在-typescript-中按需引入","在 TypeScript 中按需引入","CanvasRenderer","/zh/basics/import",null,"get-started","basics","download","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1> <p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p> <h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2> <p>你可以使用如下命令通过 npm 安装 ECharts</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</span><span class="token punctuation">;</span>
+
+<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 punctuation">;</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">'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 class="token string">'袜子'</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">'销量'</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 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></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1">按需引入 ECharts 图表和组件</h2> <p>上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。</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/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> <span class="token keyword">from</span> <span class="token string">'echarts/components'</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>
+ BarChart<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 punctuation">;</span>
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p></blockquote> <p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p> <h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2> <p>对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><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 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 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> 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><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>
+ BarChart<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">var</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/import.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,l,r,d,a,n,c,h,o,s,b,p,g,C,m,I,u,G,E,v,y,A,B,L,Z,J,W,X,w,R,V,Y,N,f,O,S,k,H,K,z,j,D,P,Q,M,F,q,x,T,U,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1>\n<p>假如你的开发环境使用了<code>npm</code>或者<code>yarn</code>等包管理工具,并且使用 Webpack 等打包工具进行构建,本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 特性只打包需要的模块。</p>\n<h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIOWfuuS6juWHhuWkh-WlveeahGRvbe-8jOWIneWni-WMlmVjaGFydHPlrp7kvosKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOe7mOWItuWbvuihqApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdFQ2hhcnRzIOWFpemXqOekuuS-iycKICB9LAogIHRvb2x0aXA6IHt9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<h2 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6" tabindex="-1">按需引入 ECharts 图表和组件</h2>\n<p>上面的代码会引入所有 ECharts 中所有的图表和组件,但是假如你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>\n<md-code-block lang="js" code="\'Ly8g5byV5YWlIGVjaGFydHMg5qC45b-D5qih5Z2X77yM5qC45b-D5qih5Z2X5o-Q5L6b5LqGIGVjaGFydHMg5L2_55So5b-F6aG76KaB55qE5o6l5Y-j44CCCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8g5byV5YWl5p-x54q25Zu-5Zu-6KGo77yM5Zu-6KGo5ZCO57yA6YO95Li6IENoYXJ0CmltcG9ydCB7IEJhckNoYXJ0IH0gZnJvbSAnZWNoYXJ0cy9jaGFydHMnOwovLyDlvJXlhaXmj5DnpLrmoYbvvIzmoIfpopjvvIznm7Top5LlnZDmoIfns7vnu4Tku7bvvIznu4Tku7blkI7nvIDpg73kuLogQ29tcG9uZW50CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50Cn0gZnJvbSAnZWNoYXJ0cy9jb21wb25lbnRzJzsKLy8g5byV5YWlIENhbnZhcyDmuLLmn5PlmajvvIzms6jmhI_lvJXlhaUgQ2FudmFzUmVuZGVyZXIg5oiW6ICFIFNWR1JlbmRlcmVyIOaYr-W_hemhu-eahOS4gOatpQppbXBvcnQgeyBDYW52YXNSZW5kZXJlciB9IGZyb20gJ2VjaGFydHMvcmVuZGVyZXJzJzsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKLy8g5o6l5LiL5p2l55qE5L2_55So5bCx6Lef5LmL5YmN5LiA5qC377yM5Yid5aeL5YyW5Zu-6KGo77yM6K6-572u6YWN572u6aG5CnZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwpteUNoYXJ0LnNldE9wdGlvbih7CiAgLy8gLi4uCn0pOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>需要注意的是注意为了保证打包的体积是最小的,ECharts 按需引入的时候不再提供任何渲染器,所以需要选择引入<code>CanvasRenderer</code>或者<code>SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式,打包的结果中就不会再包含无需使用的<code>CanvasRenderer</code>模块。</p>\n</blockquote>\n<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>\n<h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2>\n<p>对于使用了 TypeScript 来开发 ECharts 的开发者,我们提供了类型接口来组合出最小的<code>EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIOezu-WIl-exu-Wei-eahOWumuS5ieWQjue8gOmDveS4uiBTZXJpZXNPcHRpb24KICBCYXJTZXJpZXNPcHRpb24sCiAgTGluZUNoYXJ0LAogIExpbmVTZXJpZXNPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NoYXJ0cyc7CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgLy8g57uE5Lu257G75Z6L55qE5a6a5LmJ5ZCO57yA6YO95Li6IENvbXBvbmVudE9wdGlvbgogIFRpdGxlQ29tcG9uZW50T3B0aW9uLAogIEdyaWRDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudE9wdGlvbgp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmltcG9ydCB7IENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKLy8g6YCa6L-HIENvbXBvc2VPcHRpb24g5p2l57uE5ZCI5Ye65LiA5Liq5Y-q5pyJ5b-F6aG757uE5Lu25ZKM5Zu-6KGo55qEIE9wdGlvbiDnsbvlnosKdHlwZSBFQ09wdGlvbiA9IGVjaGFydHMuQ29tcG9zZU9wdGlvbjwKICB8IEJhclNlcmllc09wdGlvbgogIHwgTGluZVNlcmllc09wdGlvbgogIHwgVGl0bGVDb21wb25lbnRPcHRpb24KICB8IEdyaWRDb21wb25lbnRPcHRpb24KPjsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIENhbnZhc1JlbmRlcmVyCl0pOwoKdmFyIG9wdGlvbjogRUNPcHRpb24gPSB7CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n',postPath:"zh/basics/import"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:b},{title:"ECharts 5 升级指南",dir:p},{title:5.2,dir:g}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:I,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:G},{title:"数据集",dir:E},{title:"数据转换",dir:v},{title:"坐标系",dir:y,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:W},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:w},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:V},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:f},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:k}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:z}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:D}]}]},{title:P,dir:i,draft:t},{title:"跨平台方案",dir:Q,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:F,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:x,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:U,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:p},{title:5.2,dir:g}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:G},{title:"Dataset",dir:E},{title:"Data Transform",dir:v},{title:"Coordinate",dir:y,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:L}]},{title:"Application",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:W},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:w},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:V}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:f},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:k}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:K},{title:"Rose Style",dir:z}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:D}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:F,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:x,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:U,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/basics/inspiration/index.html b/handbook/zh/basics/inspiration/index.html
index 3255061..ff8e41a 100644
--- a/handbook/zh/basics/inspiration/index.html
+++ b/handbook/zh/basics/inspiration/index.html
@@ -3,16 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="获取灵感"><a href="#%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>获取灵感</h1>
-<p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p>
-<ul>
-<li><a href="https://echarts.apache.org//examples" rel="nofollow noopener noreferrer" target="_blank">ECharts 官方实例</a></li>
-<li>本手册的“应用篇 - 常用图表类型”</li>
-<li><a href="https://www.makeapie.com/" rel="nofollow noopener noreferrer" target="_blank">makeapie.com</a> 社区用户的作品集</li>
-</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,n,s,o,c,h,p,f,g,u,m,b,y,v,C,E,k,B,P,S,w,x,R,A,D,L,_,z,G,T,V,H,I,M,F,N,U,O,Z,$,W,X,j,q,J,K,Q,Y,tt,it,et,rt,at,dt,lt,nt,st,ot){return{layout:"default",data:[{article:{slug:d,toc:[],body:{type:"root",children:[{type:e,tag:"h1",props:{id:l},children:[{type:e,tag:"a",props:{href:"#%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F",ariaHidden:"true",tabIndex:-1},children:[{type:e,tag:"span",props:{className:["icon","icon-link"]},children:[]}]},{type:i,value:l}]},{type:i,value:r},{type:e,tag:"p",props:{},children:[{type:i,value:"当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。"}]},{type:i,value:r},{type:e,tag:"ul",props:{},children:[{type:i,value:r},{type:e,tag:n,props:{},children:[{type:e,tag:"a",props:{href:"https://echarts.apache.org//examples",rel:[o,c,h],target:p},children:[{type:i,value:"ECharts 官方实例"}]}]},{type:i,value:r},{type:e,tag:n,props:{},children:[{type:i,value:"本手册的“应用篇 - 常用图表类型”"}]},{type:i,value:r},{type:e,tag:n,props:{},children:[{type:e,tag:"a",props:{href:"https://www.makeapie.com/",rel:[o,c,h],target:p},children:[{type:i,value:"makeapie.com"}]},{type:i,value:" 社区用户的作品集"}]},{type:i,value:r}]}]},dir:"/zh/basics",path:f,extension:".md",createdAt:"2021-06-04T12:26:37.923Z",updatedAt:"2021-07-21T06:20:18.869Z"},postPath:"zh/basics/inspiration"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:u},{title:"入门篇",dir:m,children:[{title:"获取 ECharts",dir:b},{title:"在项目中引入 ECharts",dir:y},{title:"资源列表",dir:v,draft:t},{title:l,dir:d},{title:"寻求帮助",dir:C},{title:"版本介绍",dir:E,children:[{title:k,draft:t,dir:B},{title:"ECharts 5 新特性",dir:P},{title:"ECharts 5 升级指南",dir:S}]}]},{title:"概念篇",dir:w,children:[{title:"图表容器及大小",dir:x},{title:"配置项",dir:R,draft:t},{title:"系列",dir:A,draft:t},{title:"样式",dir:D},{title:"数据集",dir:L},{title:"数据转换",dir:_},{title:"坐标系",dir:z,draft:t},{title:"坐标轴",dir:G},{title:"视觉映射",dir:s},{title:"图例",dir:T},{title:"事件与行为",dir:V}]},{title:"应用篇",dir:H,children:[{title:"常用图表类型",dir:I,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:M},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:N,draft:t},{title:"极坐标系柱状图",dir:U,draft:t},{title:"瀑布图",dir:O,draft:t},{title:"视觉映射的柱状图",dir:s,draft:t}]},{title:"折线图",dir:Z,children:[{title:"基础折线图",dir:$},{title:"堆叠折线图",dir:W},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:q}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Q,children:[{title:"基础散点图",dir:Y}]}]},{title:"移动端优化",dir:a,draft:t},{title:"跨平台方案",dir:tt,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:it},{title:"数据下钻",dir:et,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:rt}]},{title:"交互",dir:at,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:dt,draft:t}]}]},{title:"最佳实践",dir:lt,children:[{title:"移动端优化",dir:a,draft:t},{title:nt,dir:st},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ot}]}],en:[{title:"Get Started",dir:u},{title:"Basics",dir:m,children:[{title:"Download ECharts",dir:b},{title:"Import ECharts",dir:y},{title:"Resources",dir:v,draft:t},{title:"Inspiration",dir:d},{title:"Get Help",dir:C},{title:"Release Note",dir:E,children:[{title:k,draft:t,dir:B},{title:"ECharts 5 Features",dir:P},{title:"ECharts 5 Upgrade Guide",dir:S}]}]},{title:"Concepts",dir:w,children:[{title:"Chart Container",dir:x},{title:"Chart Option",dir:R,draft:t},{title:"Series",dir:A,draft:t},{title:"Style",dir:D},{title:"Dataset",dir:L},{title:"Data Transform",dir:_},{title:"Coordinate",dir:z,draft:t},{title:"Axis",dir:G},{title:"Visual Mapping",dir:s},{title:"Legend",dir:T},{title:"Event and Action",dir:V}]},{title:"Application",dir:H,children:[{title:"Common Charts",dir:I,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:M},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:N,draft:t},{title:"Bar Polar",dir:U,draft:t},{title:"Waterfall",dir:O,draft:t}]},{title:"Line",dir:Z,children:[{title:"Basic Line",dir:$},{title:"Stacked Line",dir:W},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:q}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:K},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Q,children:[{title:"Basic Scatter",dir:Y}]}]},{title:"Mobile",dir:a,draft:t},{title:"Cross Platform",dir:tt,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:it},{title:"Drilldown",dir:et,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:rt}]},{title:"Interaction",dir:at,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:dt,draft:t}]}]},{title:"Best Practice",dir:lt,children:[{title:"Mobile Optimization",dir:a,draft:t},{title:nt,dir:st},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ot}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:f,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g},content:{dbHash:"570e7c13"}}}}(!0,"text","element","\n","mobile","inspiration","获取灵感","li","visual-map","nofollow","noopener","noreferrer","_blank","/zh/basics/inspiration",null,"get-started","basics","download","import","resource","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1> <p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p> <ul><li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li> <li>本手册的“应用篇 - 常用图表类型”</li> <li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</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/inspiration.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,s,c,h,o,p,f,m,b,g,u,C,E,v,B,P,S,w,k,x,R,y,D,L,A,_,z,G,V,M,F,I,T,U,H,N,O,W,$,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E8%8E%B7%E5%8F%96%E7%81%B5%E6%84%9F" tabindex="-1">获取灵感</h1>\n<p>当你有“不知道图表应该设计成什么样”或者“不知道如何使用 ECharts 实现某种效果”的疑问的时候,以下列表可以提供一些思路。</p>\n<ul>\n<li><a href="https://echarts.apache.org//examples">ECharts 官方实例</a></li>\n<li>本手册的“应用篇 - 常用图表类型”</li>\n<li><a href="https://www.makeapie.com/">makeapie.com</a> 社区用户的作品集</li>\n</ul>\n',postPath:"zh/basics/inspiration"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:s,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:h},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:m}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:E},{title:"数据集",dir:v},{title:"数据转换",dir:B},{title:"坐标系",dir:P,draft:t},{title:"坐标轴",dir:S},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:V},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:I}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:T},{title:"圆环图",dir:U},{title:"南丁格尔图(玫瑰图)",dir:H}]},{title:"散点图",dir:N,children:[{title:"基础散点图",dir:O}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:$,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:W,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:s,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:h},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:m}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:E},{title:"Dataset",dir:v},{title:"Data Transform",dir:B},{title:"Coordinate",dir:P,draft:t},{title:"Axis",dir:S},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:k}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:V},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:I}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:T},{title:"Ring Style",dir:U},{title:"Rose Style",dir:H}]},{title:"Scatter",dir:N,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:$,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/inspiration",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/basics/release-note/5-2-0/index.html b/handbook/zh/basics/release-note/5-2-0/index.html
new file mode 100644
index 0000000..c049930
--- /dev/null
+++ b/handbook/zh/basics/release-note/5-2-0/index.html
@@ -0,0 +1,589 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1> <h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2> <p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p> <p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p> <div class="md-live layout-lr"><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">function makeRandomData() {
+ 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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。</p> <p>这会有多酷呢?我们一起来感受一下!</p> <h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3> <p>在设置<code>universalTransition: true</code>开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。</p> <p>如下,饼图和柱状图之间的切换:</p> <div class="md-live layout-bt"><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">const dataset = {
+ 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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>更多的常见基础图表之间的过渡:</p> <p><img src alt data-src="images/5-2-0/universal-transition.gif"></p> <p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:</p> <p><img src alt data-src="images/5-2-0/universal-transition-2.gif"></p> <p>或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p> <p><img src alt data-src="images/5-2-0/universal-transition-3.gif"></p> <blockquote><p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p></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/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了,可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p> <p>比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>,然后跟下钻前的数据对应起来:</p> <div class="md-live layout-lr"><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 = {
+ 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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>通过<code>groupId</code>,我们还可以实现更丰富的聚合,下钻动画。</p> <p>数据的聚合:</p> <p><img src alt data-src="images/5-2-0/group-transition.gif"></p> <p>单系列下钻成两个系列:</p> <p><img src alt data-src="images/5-2-0/group-transition-2.gif"></p> <p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。</p> <p>看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。</p> <h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2> <p>在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:</p> <ul><li><code>'series'</code> 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。</li> <li><code>'data'</code> 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。</li></ul> <p>在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定<code>'series'</code>的策略,而饼图则是固定<code>'data'</code>的策略。</p> <p>而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:</p> <div class="md-live layout-lr"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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 number">80</span><span class="token punctuation">,</span> <span class="token number">70</span><span class="token punctuation">,</span> <span class="token number">110</span><span class="token punctuation">,</span> <span class="token number">130</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>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>或者在饼图中统一使用一个颜色:</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p> <h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2> <p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>更多标签位置的配置:</p> <p><img src alt data-src="images/5-2-0/polar-bar-label.jpg"></p> <p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。</p> <h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2> <p>在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p> <p>为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</p> <div class="md-live layout-lr"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>如果不想要显示这个灰色的圆,也可以设置<code>showEmptyCircle: false</code>关闭。</p> <h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2> <p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据,通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景(<a href="https://github.com/apache/echarts/issues/11907">#11907</a>),甚至可能会卡住。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> indices <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">1000</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 punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
+ <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 punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。</p> <p>在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p> <p>这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。</p> <h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2> <p>自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型,对于<code>renderItem</code>的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code>series <span class="token operator">=</span> <span class="token punctuation">{</span>
+ 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> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p> <p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p> <h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3> <h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4> <ul><li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li></ul> <h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4> <ul><li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li> <li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/apache/echarts/pull/15182">#15182</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>'inherit'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li> <li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li> <li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li> <li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][bar] 标签位置设置为<code>'middle'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][marker] 修复可能会在极坐标柱状图报<code>'clampData' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li> <li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li> <li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>'none'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li> <li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][pie] 将默认的<code>borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][radar] 将默认的<code>borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li> <li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li> <li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li> <li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li> <li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li> <li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li> <li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li> <li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li> <li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li> <li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li> <li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li> <li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</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/5-2-0.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,a,g,s,h,c,o,I,l,d,C,r,A,n,p,u,b,m,B,f,w,G,F,E,Z,y,H,J,W,K,X,R,Y,v,S,x,V,L,O,D,k,z,N,T,U,M,Q,j,P,q,_,$,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5.2.0-%E4%BB%8B%E7%BB%8D" tabindex="-1">Apache ECharts 5.2.0 介绍</h1>\n<h2 id="%E5%85%A8%E5%B1%80%E8%BF%87%E6%B8%A1%E5%8A%A8%E7%94%BB" tabindex="-1">全局过渡动画</h2>\n<p>在 Apache ECharts 中我们一直把自然流畅的过渡动画作为一个重要特性。通过避免数据带来的突变,不仅仅可以改善视觉效果,更为表达数据的关联和演变提供了可能。因此,在 5.2.0 中,我们进一步将过渡动画从表现系列内部数据的变化,泛化到全局能力。接下来,我们会看到这种<strong>全局过渡动画 Universal Transition</strong>是如何为图表增加表现力和叙事能力的。</p>\n<p>在之前的版本中,过渡动画有一定的局限性:只能用于相同类型的图形的位置、尺寸、形状,而且只能作用在相同类型的系列上。比如,下面例子就是通过饼图中扇区形状的变化反映了数据分布的变化:</p>\n<md-live lang="js" code="\'ZnVuY3Rpb24gbWFrZVJhbmRvbURhdGEoKSB7CiAgcmV0dXJuIFsKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdBJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdCJwogICAgfSwKICAgIHsKICAgICAgdmFsdWU6IE1hdGgucmFuZG9tKCksCiAgICAgIG5hbWU6ICdDJwogICAgfQogIF07Cn0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiBbMCwgJzUwJSddLAogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgXQp9OwoKc2V0SW50ZXJ2YWwoKCkgPT4gewogIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgIHNlcmllczogewogICAgICBkYXRhOiBtYWtlUmFuZG9tRGF0YSgpCiAgICB9CiAgfSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'lr\'}" />\n<p>而从 5.2.0 开始,我们引入了更强大的全局过渡动画能力,让过渡动画不再局限于相同类型的系列之间。现在,我们可以使用这种跨系列的形变,为任意类型的系列和任意类型的图形做形变动画。</p>\n<p>这会有多酷呢?我们一起来感受一下!</p>\n<h3 id="%E8%B7%A8%E7%B3%BB%E5%88%97%E7%9A%84%E5%BD%A2%E5%8F%98%E5%8A%A8%E7%94%BB" tabindex="-1">跨系列的形变动画</h3>\n<p>在设置<code>universalTransition: true</code>开启全局过渡动画后,从饼图切换成柱状图,或者从柱状图切换成散点图,甚至旭日图和矩形树图这类复杂的图表之间,都可以通过形变的方式自然的进行动画过渡。</p>\n<p>如下,饼图和柱状图之间的切换:</p>\n<md-live lang="js" code="\'Y29uc3QgZGF0YXNldCA9IHsKICBkaW1lbnNpb25zOiBbJ25hbWUnLCAnc2NvcmUnXSwKICBzb3VyY2U6IFsKICAgIFsnSGFubmFoIEtyYXVzZScsIDMxNF0sCiAgICBbJ1poYW8gUWlhbicsIDM1MV0sCiAgICBbJ0phc21pbiBLcmF1c2UgJywgMjg3XSwKICAgIFsnTGkgTGVpJywgMjE5XSwKICAgIFsnS2FybGUgTmV1bWFubicsIDI1M10sCiAgICBbJ01pYSBOZXVtYW5uJywgMTY1XSwKICAgIFsnQsO2aG0gRnVjaHMnLCAzMThdLAogICAgWydIYW4gTWVpbWVpJywgMzY2XQogIF0KfTsKY29uc3QgcGllT3B0aW9uID0gewogIGRhdGFzZXQ6IFtkYXRhc2V0XSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ3BpZScsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CmNvbnN0IGJhck9wdGlvbiA9IHsKICBkYXRhc2V0OiBbZGF0YXNldF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOmAmui_hyBpZCDlhbPogZTpnIDopoHov4fmuKHliqjnlLvnmoTns7vliJcKICAgICAgaWQ6ICdTY29yZScsCiAgICAgIC8vIOavj-S4quaVsOaNrumDveaYr-eUqOS4jeWQjOeahOminOiJsgogICAgICBjb2xvckJ5OiAnZGF0YScsCiAgICAgIGVuY29kZTogeyB4OiAnbmFtZScsIHk6ICdzY29yZScgfSwKICAgICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogdHJ1ZSwKICAgICAgYW5pbWF0aW9uRHVyYXRpb25VcGRhdGU6IDEwMDAKICAgIH0KICBdCn07CgpvcHRpb24gPSBiYXJPcHRpb247CgpzZXRJbnRlcnZhbCgoKSA9PiB7CiAgb3B0aW9uID0gb3B0aW9uID09PSBwaWVPcHRpb24gPyBiYXJPcHRpb24gOiBwaWVPcHRpb247CiAgLy8g5L2_55SoIG5vdE1lcmdlIOeahOW9ouW8j-WPr-S7peenu-mZpOWdkOagh-i9tAogIG15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbiwgdHJ1ZSk7Cn0sIDIwMDApOw\'" v-bind="{layout: \'bt\'}" />\n<p>更多的常见基础图表之间的过渡:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition.gif"></p>\n<p>这样的动画过渡不再仅仅局限于基础的折、柱、饼中,在柱状图和地图之间:</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-2.gif"></p>\n<p>或者旭日图和矩形树图之间,甚至非常灵活的自定义系列之间都可以进行动画的过渡。</p>\n<p><img src="" alt="" data-src="images/5-2-0/universal-transition-3.gif"></p>\n<blockquote>\n<p>注意需要配置系列的 id 来保证需要动画过渡的系列之间能够一一对应。</p>\n</blockquote>\n<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>\n<p>除了常见的数据值的更新,有时候我们还会碰到数据的聚合、下钻等交互后的更新,这个时候我们就不能直接应用一对一的动画过渡,而需要使用更多像分裂、合并这样的动画效果,来通过正确的图形动画表达出数据的变换。</p>\n<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/option.html#series-bar.dataGroupId">series.data.groupId</a> 设置每个数据所属的组。如果你使用了<code>dataset</code>管理数据则更方便了,可以使用<code>encode.itemGroupId</code>来指定一个维度编码成<code>groupId</code>。</p>\n<p>比如我们要实现一个柱状图下钻的动画,可以将下钻后的整个系列的数据都设置同一个<code>groupId</code>,然后跟下钻前的数据对应起来:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ0FuaW1hbHMnLCAnRnJ1aXRzJywgJ0NhcnMnXQogIH0sCiAgeUF4aXM6IHt9LAogIGRhdGFHcm91cElkOiAnJywKICBhbmltYXRpb25EdXJhdGlvblVwZGF0ZTogNTAwLAogIHNlcmllczogewogICAgdHlwZTogJ2JhcicsCiAgICBpZDogJ3NhbGVzJywKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiA1LAogICAgICAgIGdyb3VwSWQ6ICdhbmltYWxzJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDIsCiAgICAgICAgZ3JvdXBJZDogJ2ZydWl0cycKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiA0LAogICAgICAgIGdyb3VwSWQ6ICdjYXJzJwogICAgICB9CiAgICBdLAogICAgdW5pdmVyc2FsVHJhbnNpdGlvbjogewogICAgICBlbmFibGVkOiB0cnVlLAogICAgICBkaXZpZGVTaGFwZTogJ2Nsb25lJwogICAgfQogIH0KfTsKCmNvbnN0IGRyaWxsZG93bkRhdGEgPSBbCiAgewogICAgZGF0YUdyb3VwSWQ6ICdhbmltYWxzJywKICAgIGRhdGE6IFsKICAgICAgWydDYXRzJywgNF0sCiAgICAgIFsnRG9ncycsIDJdLAogICAgICBbJ0Nvd3MnLCAxXSwKICAgICAgWydTaGVlcCcsIDJdLAogICAgICBbJ1BpZ3MnLCAxXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdmcnVpdHMnLAogICAgZGF0YTogWwogICAgICBbJ0FwcGxlcycsIDRdLAogICAgICBbJ09yYW5nZXMnLCAyXQogICAgXQogIH0sCiAgewogICAgZGF0YUdyb3VwSWQ6ICdjYXJzJywKICAgIGRhdGE6IFsKICAgICAgWydUb3lvdGEnLCA0XSwKICAgICAgWydPcGVsJywgMl0sCiAgICAgIFsnVm9sa3N3YWdlbicsIDJdCiAgICBdCiAgfQpdOwoKbXlDaGFydC5vbignY2xpY2snLCBldmVudCA9PiB7CiAgaWYgKGV2ZW50LmRhdGEpIHsKICAgIGNvbnN0IHN1YkRhdGEgPSBkcmlsbGRvd25EYXRhLmZpbmQoZGF0YSA9PiB7CiAgICAgIHJldHVybiBkYXRhLmRhdGFHcm91cElkID09PSBldmVudC5kYXRhLmdyb3VwSWQ7CiAgICB9KTsKICAgIGlmICghc3ViRGF0YSkgewogICAgICByZXR1cm47CiAgICB9CiAgICBteUNoYXJ0LnNldE9wdGlvbih7CiAgICAgIHhBeGlzOiB7CiAgICAgICAgZGF0YTogc3ViRGF0YS5kYXRhLm1hcChpdGVtID0-IHsKICAgICAgICAgIHJldHVybiBpdGVtWzBdOwogICAgICAgIH0pCiAgICAgIH0sCiAgICAgIHNlcmllczogewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGlkOiAnc2FsZXMnLAogICAgICAgIGRhdGFHcm91cElkOiBzdWJEYXRhLmRhdGFHcm91cElkLAogICAgICAgIGRhdGE6IHN1YkRhdGEuZGF0YS5tYXAoaXRlbSA9PiB7CiAgICAgICAgICByZXR1cm4gaXRlbVsxXTsKICAgICAgICB9KSwKICAgICAgICB1bml2ZXJzYWxUcmFuc2l0aW9uOiB7CiAgICAgICAgICBlbmFibGVkOiB0cnVlLAogICAgICAgICAgZGl2aWRlU2hhcGU6ICdjbG9uZScKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGdyYXBoaWM6IFsKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAndGV4dCcsCiAgICAgICAgICBsZWZ0OiA1MCwKICAgICAgICAgIHRvcDogMjAsCiAgICAgICAgICBzdHlsZTogewogICAgICAgICAgICB0ZXh0OiAnQmFjaycsCiAgICAgICAgICAgIGZvbnRTaXplOiAxOAogICAgICAgICAgfSwKICAgICAgICAgIG9uY2xpY2s6IGZ1bmN0aW9uKCkgewogICAgICAgICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24sIHRydWUpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfSk7CiAgfQp9KTs\'" v-bind="{layout: \'lr\'}" />\n<p>通过<code>groupId</code>,我们还可以实现更丰富的聚合,下钻动画。</p>\n<p>数据的聚合:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition.gif"></p>\n<p>单系列下钻成两个系列:</p>\n<p><img src="" alt="" data-src="images/5-2-0/group-transition-2.gif"></p>\n<p>全局过渡动画使得数据的关系和演变的表达能力走上新的台阶,为你的可视化创作灵感插上翅膀。</p>\n<p>看到这里,我们知道你已经跃跃欲试了。但是别急,5.2.0 还有更多值得一看的新功能。</p>\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98%E7%9A%84%E5%8F%96%E8%89%B2%E7%AD%96%E7%95%A5" tabindex="-1">调色盘的取色策略</h2>\n<p>在上面全局过渡动画的示例中,大家可能有注意到我们使用了一个之前版本没有的<code>colorBy</code>配置项,这个配置项也是我们这个版本新增加的一个特性,用来给系列配置不同粒度的调色盘取色。这个配置目前支持两种策略:</p>\n<ul>\n<li><code>\'series\'</code> 按照系列分配调色盘中的颜色,同一系列中的所有数据都是用相同的颜色。</li>\n<li><code>\'data\'</code> 按照数据项分配调色盘中的颜色,每个数据项都使用不同的颜色。</li>\n</ul>\n<p>在之前我们是按照系列的类型固定了这个策略,比如柱状图就是固定<code>\'series\'</code>的策略,而饼图则是固定<code>\'data\'</code>的策略。</p>\n<p>而现在新增这个配置项后,我们可以在柱状图中给每个数据项都分配不同的颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNb24nLCAnVHVlJywgJ1dlZCcsICdUaHUnLCAnRnJpJywgJ1NhdCcsICdTdW4nXQogIH0sCiAgeUF4aXM6IHsKICAgIHR5cGU6ICd2YWx1ZScKICB9LAogIHNlcmllczogWwogICAgewogICAgICBkYXRhOiBbMTIwLCAyMDAsIDE1MCwgODAsIDcwLCAxMTAsIDEzMF0sCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBjb2xvckJ5OiAnZGF0YScKICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>或者在饼图中统一使用一个颜色:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBjb2xvckJ5OiAnc2VyaWVzJywKICAgIHJhZGl1czogWzAsICc1MCUnXSwKICAgIGl0ZW1TdHlsZTogewogICAgICBib3JkZXJDb2xvcjogJyNmZmYnLAogICAgICBib3JkZXJXaWR0aDogMQogICAgfSwKICAgIGRhdGE6IFsKICAgICAgewogICAgICAgIHZhbHVlOiAzMzUsCiAgICAgICAgbmFtZTogJ0RpcmVjdCBWaXNpdCcKICAgICAgfSwKICAgICAgewogICAgICAgIHZhbHVlOiAyMzQsCiAgICAgICAgbmFtZTogJ1VuaW9uIEFkJwogICAgICB9LAogICAgICB7CiAgICAgICAgdmFsdWU6IDE1NDgsCiAgICAgICAgbmFtZTogJ1NlYXJjaCBFbmdpbmUnCiAgICAgIH0KICAgIF0KICB9Cn07\'" v-bind="{layout: \'lr\'}" />\n<p>这一配置项可以让我们避免了去找调色盘颜色然去一一设置的麻烦,可能在特定的场景需求中提供便捷。后续我们会对这个配置项做进一步的增强,提供更多的调色盘取色的策略。</p>\n<h2 id="%E6%9E%81%E5%9D%90%E6%A0%87%E6%9F%B1%E7%8A%B6%E5%9B%BE%E7%9A%84%E6%A0%87%E7%AD%BE" tabindex="-1">极坐标柱状图的标签</h2>\n<p>这个版本中我们实现了极坐标上的柱状图的标签,并且支持丰富的标签定位配置。下面是一个最常见的标签显示在端点的进度图:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGFuZ2xlQXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtYXg6IDEwCiAgfSwKICByYWRpdXNBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICBkYXRhOiBbJ0FBQScsICdCQkInLCAnQ0NDJywgJ0RERCddCiAgfSwKICBwb2xhcjoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMywgNCwgNSwgNl0sCiAgICAgIGNvbG9yQnk6ICdkYXRhJywKICAgICAgcm91bmRDYXA6IHRydWUsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDor5Xor5XmlLnmiJAgJ2luc2lkZVN0YXJ0JwogICAgICAgIHBvc2l0aW9uOiAnc3RhcnQnLAogICAgICAgIGZvcm1hdHRlcjogJ3tifScKICAgICAgfSwKICAgICAgY29vcmRpbmF0ZVN5c3RlbTogJ3BvbGFyJwogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>更多标签位置的配置:</p>\n<p><img src="" alt="" data-src="images/5-2-0/polar-bar-label.jpg"></p>\n<p>这一灵活的标签位置配置项大大丰富了极坐标柱状图的表达能力,让文字清晰地匹配对应的数据。</p>\n<h2 id="%E7%A9%BA%E6%95%B0%E6%8D%AE%E7%9A%84%E9%A5%BC%E5%9B%BE%E6%A0%B7%E5%BC%8F" tabindex="-1">空数据的饼图样式</h2>\n<p>在之前的版本中,如果饼图没有数据,画面中可能就是完全空白的。因为没有任何的视觉元素,所以用户会疑惑是不是出现了 bug 导致图中没有内容。</p>\n<p>为了解决这个问题,这个版本我们会默认在无可显示数据的时候显示一个灰色的占位圆以防止画面中完全空白。我们可以通过<code>emptyCircleStyle</code>配置这个占位圆的样式。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAncGllJywKICAgICAgZGF0YTogW10sCiAgICAgIC8vIHNob3dFbXB0eUNpcmNsZTogZmFsc2UsCiAgICAgIGVtcHR5Q2lyY2xlU3R5bGU6IHsKICAgICAgICAvLyDlsIbmoLflvI_mlLnkuLrnqbrlv4PlnIYKICAgICAgICBjb2xvcjogJ3RyYW5zcGFyZW50JywKICAgICAgICBib3JkZXJDb2xvcjogJyNkZGQnLAogICAgICAgIGJvcmRlcldpZHRoOiAxCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{layout: \'lr\'}" />\n<p>如果不想要显示这个灰色的圆,也可以设置<code>showEmptyCircle: false</code>关闭。</p>\n<h2 id="%E9%AB%98%E7%BB%B4%E6%95%B0%E6%8D%AE%E7%9A%84%E6%80%A7%E8%83%BD%E5%A2%9E%E5%BC%BA" tabindex="-1">高维数据的性能增强</h2>\n<p>我们从 4.0 开始引入了 <a href="https://echarts.apache.org/option.html#dataset">dataset</a> 用来管理图表的数据,通常情况下<code>dataset</code>提供了更方便的数据管理方式而且跟传统的方式不会有什么性能上的差别。但是在一些极端的特别高维(>100)数据的场景下,我们还是会碰到一些性能急剧下降的问题,比如下面这种通过一千个系列去可视化千维数据的场景(<a href="https://github.com/apache/echarts/issues/11907">#11907</a>),甚至可能会卡住。</p>\n<md-code-block lang="js" code="\'Y29uc3QgaW5kaWNlcyA9IEFycmF5LmZyb20oQXJyYXkoMTAwMCksIChfLCBpKSA9PiB7CiAgcmV0dXJuIGBpbmRleCR7aX1gOwp9KTsKY29uc3Qgb3B0aW9uID0gewogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgZGF0YXNldDogewogICAgLy8gZGltZW5zaW9uOiBbJ2RhdGUnLCAuLi5pbmRpY2VzXSwKICAgIHNvdXJjZTogQXJyYXkuZnJvbShBcnJheSgxMCksIChfLCBpKSA9PiB7CiAgICAgIHJldHVybiB7CiAgICAgICAgZGF0ZTogaSwKICAgICAgICAuLi5pbmRpY2VzLnJlZHVjZSgoaXRlbSwgbmV4dCkgPT4gewogICAgICAgICAgaXRlbVtuZXh0XSA9IE1hdGgucmFuZG9tKCkgKiAxMDA7CiAgICAgICAgICByZXR1cm4gaXRlbTsKICAgICAgICB9LCB7fSkKICAgICAgfTsKICAgIH0pCiAgfSwKICBzZXJpZXM6IGluZGljZXMubWFwKGluZGV4ID0-IHsKICAgIHJldHVybiB7IHR5cGU6ICdsaW5lJywgbmFtZTogaW5kZXggfTsKICB9KQp9Ow\'" line-highlights="\'\'" />\n<p>产生这个性能问题是因为我们在底层每个系列都会按照其需要处理一遍这个 dataset,然后保存一份处理过后的数据以及维度等元信息。这意味着刚才那个例子中需要处理并保存<code>1000 x 1000</code>个维度的信息,这带来了巨大的内存和垃圾回收的压力,从而导致了高维度的性能的急剧下降。</p>\n<p>在新版本中我们对这个问题做了优化,所有系列都尽可能共享 dataset 的数据(能否共享取决于系列怎么使用这份数据)存储而非每个系列都处理并存储一次,并且只处理和存储了使用到的维度。这些优化保证了内存不会随着 dataset 维度和系列的增长而爆炸,大幅度的提升了极端场景下的初始化性能。刚才例子的渲染耗时也从卡住降低到了可接受的 300 毫秒以下。</p>\n<p>这次优化带来收益的还不只是这种高维的场景,在使用维度不高但是数据量很大的 dataset 的时候,因为数据的共享所以多个系列只处理了一遍数据,因此也可以带来显著的性能提升。</p>\n<h2 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E7%9A%84%E7%B1%BB%E5%9E%8B%E4%BC%98%E5%8C%96" tabindex="-1">自定义系列的类型优化</h2>\n<p>自定义系列提供了非常灵活的创建系列图形的方式,相对于其它系列,自定义系列的学习曲线可能有些陡峭,而且容易出错。因此在这个版本中,我们进一步的优化了自定义系列中的核心方法<code>renderItem</code>的类型,对于<code>renderItem</code>的参数和返回值类型做了更精确的推断,从而可以根据返回的图形类型推断出可以设置该图形的哪些属性:</p>\n<md-code-block lang="ts" code="\'c2VyaWVzID0gewogIHR5cGU6ICdjdXN0b20nLAogIHJlbmRlckl0ZW0ocGFyYW1zKSB7CiAgICByZXR1cm4gewogICAgICB0eXBlOiAnZ3JvdXAnLAogICAgICAvLyBncm91cCDnsbvlnovkvb_nlKggY2hpbGRyZW4g5a2Y5YKo5YW25a6D57G75Z6L55qE5a2Q5YWD57SgCiAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgewogICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAvLyBjaXJjbGUg5oul5pyJ5LiL6Z2i6L-Z5Lqb5Y-v5Lul6YWN572u55qEIHNoYXBlIOWxnuaApwogICAgICAgICAgc2hhcGU6IHsgcjogMTAsIGN4OiAwLCBjeTogMCB9LAogICAgICAgICAgLy8g5Y-v5Lul6YWN572u55qE5qC35byPCiAgICAgICAgICBzdHlsZTogeyBmaWxsOiAncmVkJyB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB0eXBlOiAncmVjdCcsCiAgICAgICAgICAvLyByZWN0IOaLpeacieS4i-mdoui_meS6m-WPr-S7pemFjee9rueahCBzaGFwZSDlsZ7mgKcKICAgICAgICAgIHNoYXBlOiB7IHg6IDAsIHk6IDAsIHdpZHRoOiAxMDAsIGhlaWdodDogMTAwIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdwYXRoJywKICAgICAgICAgIC8vIOiHquWumuS5iei3r-W-hOWbvuW9ogogICAgICAgICAgc2hhcGU6IHsgZDogJy4uLicgfQogICAgICAgIH0KICAgICAgXQogICAgfTsKICB9Cn07\'" line-highlights="\'\'" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>以上我们介绍了 5.2.0 中的新特性以及优化,如果你对其中的一些特性感兴趣,不妨更新到最新版本的 Apache ECharts 亲自体验一下。</p>\n<p>如果你对 Apache ECharts 接下来的计划感兴趣,也可以在 <a href="https://github.com/apache/echarts/milestones">GitHub Milestone</a> 关注我们的开发计划。也非常欢迎加入我们的贡献者行列(在 <a href="https://github.com/apache/echarts/wiki">Wiki</a> 中了解更多)。</p>\n<h3 id="%E7%89%88%E6%9C%AC%E6%9B%B4%E6%96%B0%E8%AE%B0%E5%BD%95" tabindex="-1">版本更新记录</h3>\n<h4 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%94%B9%E5%8A%A8" tabindex="-1">非兼容改动</h4>\n<ul>\n<li>[Fix][pie] 负值会被作为非法值过滤。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n</ul>\n<h4 id="%E6%89%80%E6%9C%89%E6%94%B9%E5%8A%A8" tabindex="-1">所有改动</h4>\n<ul>\n<li><strong>[Feature] 新增全局过渡动画。<a href="https://github.com/apache/echarts/issues/15208">#15208</a> (<a href="https://github.com/pissang">pissang</a>)</strong></li>\n<li>[Feature][color] 新增<code>series.colorBy</code>配置不同粒度的取色。<a href="https://github.com/apache/echarts/issues/13788">#13788</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][label] 极坐标系柱状图支持标签显示。<a href="https://github.com/apache/echarts/pull/15182">#15182</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Feature][effectscatter] 新增<code>rippleEffect.number</code>配置涟漪数目。<a href="https://github.com/apache/echarts/issues/15335">#15335</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Feature][gauge] 新增<code>pointer.showAbove</code>配置指针和标签的显示层级。<a href="https://github.com/apache/echarts/issues/15337">#15337</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>) <a href="https://github.com/apache/echarts/issues/15326">#15326</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Feature][emphasis] <code>emphasis.color</code>支持设置为<code>\'inherit\'</code>关闭高亮。<a href="https://github.com/apache/echarts/issues/15172">#15172</a> (<a href="https://github.com/Foreverwzh">Foreverwzh</a>)</li>\n<li>[Feature][pie] 无数据的时候默认显示灰色的占位圆。<a href="https://github.com/apache/echarts/issues/15095">#15095</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][dataset] 优化高维数据<code>dataset</code>的性能。<a href="https://github.com/apache/echarts/issues/15355">#15355</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][axis] 优化时间轴刻度标签的格式化显示。<a href="https://github.com/apache/echarts/issues/15465">#15465</a> (<a href="https://github.com/leavest">leavest</a>) <a href="https://github.com/apache/echarts/issues/15434">#15434</a> (<a href="https://github.com/zhiyuc123">zhiyuc123</a>)</li>\n<li>[Fix][custom] 优化旧代码对于<code>font</code>的兼容性。<a href="https://github.com/apache/echarts/issues/15454">#15454</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][memory] 优化实例销毁后依旧持有实例时的内存占用。<a href="https://github.com/apache/echarts/issues/15417">#15417</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][line] 优化有无穷大数据时的渐变色显示。 <a href="https://github.com/apache/echarts/issues/15416">#15416</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][date] 优化<code>date</code>数据的解析。<a href="https://github.com/apache/echarts/issues/15410">#15410</a> (<a href="https://github.com/quillblue">quillblue</a>)</li>\n<li>[Fix][line] 修复渲染出错。<a href="https://github.com/ecomfe/zrender/issues/788">#788</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][candlestick] 修复样式可能在<code>setOption</code>后丢失的问题。<a href="https://github.com/apache/echarts/issues/15368">#15368</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][sankey] 修复垂直布局时的渐变色边。<a href="https://github.com/apache/echarts/issues/15363">#15363</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][tooltip] 修复在设置<code>tooltip.position</code>后<code>formatter</code>返回 DOM 对象会被解析成字符串的问题。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][tooltip] <code>formatter</code>返回<code>null</code>时清空内容。<a href="https://github.com/apache/echarts/issues/15313">#15313</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][bar] 标签位置设置为<code>\'middle\'</code>时应该显示在图形中间。<a href="https://github.com/apache/echarts/issues/15309">#15309</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][marker] 修复可能会在极坐标柱状图报<code>\'clampData\' is undefined</code>的错误。<a href="https://github.com/apache/echarts/issues/15297">#15297</a> (<a href="https://github.com/AmosChenYQ">AmosChenYQ</a>)</li>\n<li>[Fix][treemap] 修复关闭动画后更新可能旧节点不会被移除的问题。<a href="https://github.com/apache/echarts/issues/15283">#15283</a> (<a href="https://github.com/villebro">villebro</a>)</li>\n<li>[Fix][tree] 修复更新数据时边可能会不被移除的问题。<a href="https://github.com/apache/echarts/issues/15251">#15251</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie/sunburst] 修复<code>borderRadius</code>被设置为<code>null</code>或者<code>undefined</code>时无法重置的问题。<a href="https://github.com/apache/echarts/issues/15243">#15243</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][canvas] 修复<code>fillStyle</code>被设置为<code>\'none\'</code>或者<code>null</code>时 FireFox 浏览器下会报警告的问题。 <a href="https://github.com/ecomfe/zrender/issues/784">#784</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][highlight] 修复<code>chart.dispatchAction</code>高亮多个系列可能会不正确的问题。<a href="https://github.com/apache/echarts/issues/15207">#15207</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][sankey] 修复使用<code>series.nodes</code>作为数据时拖拽功能失效的问题。<a href="https://github.com/apache/echarts/issues/15199">#15199</a> (<a href="https://github.com/DuLinRain">DuLinRain</a>)</li>\n<li>[Fix][svg] 优化导出的 SVG 文件在 Powerpoint 中的兼容性。<a href="https://github.com/ecomfe/zrender/pull/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][legend] 修复<code>text.lineHeight</code>不生效。<a href="https://github.com/ecomfe/zrender/issues/773">#773</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][pie] 将默认的<code>borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15145">#15145</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][radar] 将默认的<code>borderJoin</code>设置为<code>round</code>。<a href="https://github.com/apache/echarts/issues/15381">#15381</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][treemap] 修复设置<code>label.show</code>为<code>false</code>会报错。<a href="https://github.com/apache/echarts/issues/15141">#15141</a> (<a href="https://github.com/susiwen8">susiwen8</a>)</li>\n<li>[Fix][pictorialbar] 修复零数据标签的显示问题。<a href="https://github.com/apache/echarts/issues/15132">#15132</a> (<a href="https://github.com/ssthouse">ssthouse</a>)</li>\n<li>[Fix][lines] 修复调用<code>chart.clear()</code>可能会无法清除线条的问题。<a href="https://github.com/apache/echarts/issues/15088">#15088</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][endlabel] 修复端点标签只设置<code>emphasis.show</code>为<code>true</code>时可能无法显示的问题。<a href="https://github.com/apache/echarts/issues/15072">#15072</a> (<a href="https://github.com/Ovilia">Ovilia</a>)</li>\n<li>[Fix][svg] 修复矩形路径没有合并的问题。<a href="https://github.com/ecomfe/zrender/issues/767">#767</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][treemap] 在回调函数参数中添加<code>treeAncestors</code>属性。<a href="https://github.com/apache/echarts/issues/14976">#14976</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][tree] 修复调用<code>setOption</code>两次更新数据时可能报错的问题。<a href="https://github.com/apache/echarts/issues/14930">#14930</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][radar] 修复图形边框被缩放的问题。<a href="https://github.com/apache/echarts/issues/15396">#15396</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][marker] 修复<code>symbolOffset</code>和<code>symbolKeepAspect</code>配置项不生效的问题。<a href="https://github.com/apache/echarts/issues/14737">#14737</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n<li>[Fix][gauge] 支持进度条和指针的点击事件。<a href="https://github.com/apache/echarts/issues/14688">#14688</a> (<a href="https://github.com/yufeng04">yufeng04</a>)</li>\n<li>[Fix][tooltip] 优化箭头的边框宽度,跟配置同步。<a href="https://github.com/apache/echarts/issues/14393">#14393</a> (<a href="https://github.com/g7i">g7i</a>)</li>\n<li>[Fix][geo] 修复地理坐标组件从<code>show: false</code>配置为<code>show: true</code>后依旧不显示的问题。<a href="https://github.com/apache/echarts/issues/15361">#15361</a> (<a href="https://github.com/pissang">pissang</a>)</li>\n<li>[Fix][type] 优化自定义系列<code>renderItem</code>的类型推断。</li>\n<li>[Fix][type] 优化<code>echarts.init</code>的配置项类型。<a href="https://github.com/apache/echarts/issues/15487">#15487</a> (<a href="https://github.com/John60676">John60676</a>)</li>\n<li>[Fix][type] 修复类型中<code>polarIndex</code>配置项丢失的问题。<a href="https://github.com/apache/echarts/issues/15281">#15281</a> (<a href="https://github.com/Map1en">Map1en</a>)</li>\n<li>[Fix][type] 优化 SVG 数据源的类型。<a href="https://github.com/apache/echarts/issues/15263">#15263</a> (<a href="https://github.com/leosxie">leosxie</a>)</li>\n<li>[Fix][type] 优化饼图和地图系列中的数据类型。<a href="https://github.com/apache/echarts/issues/15144">#15144</a> (<a href="https://github.com/plainheart">plainheart</a>)</li>\n</ul>\n',postPath:"zh/basics/release-note/5-2-0"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:g},{title:"入门篇",dir:s,children:[{title:"获取 ECharts",dir:h},{title:"在项目中引入 ECharts",dir:c},{title:"资源列表",dir:o,draft:i},{title:"获取灵感",dir:I},{title:"寻求帮助",dir:l},{title:"版本特性",dir:d,children:[{title:"ECharts 5 特性介绍",dir:C},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:A}]}]},{title:"概念篇",dir:n,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:u,draft:i},{title:"系列",dir:b,draft:i},{title:"样式",dir:m},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:w,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:F},{title:"事件与行为",dir:E}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:J},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:R,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:V}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:L},{title:"圆环图",dir:O},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:z}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:Q},{title:"数据下钻",dir:j,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:g},{title:"Basics",dir:s,children:[{title:"Download ECharts",dir:h},{title:"Import ECharts",dir:c},{title:"Resources",dir:o,draft:i},{title:"Inspiration",dir:I},{title:"Get Help",dir:l},{title:"What's New",dir:d,children:[{title:"ECharts 5 Features",dir:C},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:A}]}]},{title:"Concepts",dir:n,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:b,draft:i},{title:"Style",dir:m},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:w,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:F},{title:"Event and Action",dir:E}]},{title:"Application",dir:Z,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:J},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:X}]},{title:"Line",dir:R,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:V}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:L},{title:"Ring Style",dir:O},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:Q},{title:"Drilldown",dir:j,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/basics/release-note/5-2-0",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/basics/release-note/v5-feature/index.html b/handbook/zh/basics/release-note/v5-feature/index.html
new file mode 100644
index 0000000..793f26b
--- /dev/null
+++ b/handbook/zh/basics/release-note/v5-feature/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 5 新特性</h1> <p>数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。</p> <p>Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。</p> <img data-src="images/feature-v5/echarts-5.png" width="800px"> <p>“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。</p> <h2 id="%E5%8A%A8%E6%80%81%E5%8F%99%E4%BA%8B" tabindex="-1">动态叙事</h2> <p>动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。</p> <h4 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E5%9B%BE" tabindex="-1">动态排序图</h4> <p>Apache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。</p> <iframe width="700" height="400" src=""></iframe> <iframe width="700" height="400" src=""></iframe> <p>动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。</p> <h4 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E5%8A%A8%E7%94%BB" tabindex="-1">自定义系列动画</h4> <p>除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。</p> <p>想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!</p> <h2 id="%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1" tabindex="-1">视觉设计</h2> <p>视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。</p> <h4 id="%E9%BB%98%E8%AE%A4%E8%AE%BE%E8%AE%A1" tabindex="-1">默认设计</h4> <p>我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。</p> <img data-src="images/feature-v5/theme-color.png" width="400px"> <p>我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:</p> <img data-src="images/feature-v5/new-theme-light.png" width="500px"> <img data-src="images/feature-v5/new-theme-dark.png" width="500px"> <p>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</p> <img data-src="images/feature-v5/dataZoom.png" width="500px"> <img data-src="images/feature-v5/timeline.png" width="500px"> <h4 id="%E6%A0%87%E7%AD%BE" tabindex="-1">标签</h4> <p>标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。</p> <p>Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。</p> <p>这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。</p> <p>我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。</p> <p>新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:</p> <img data-src="images/feature-v5/pie-label.png" width="400px"> <h4 id="%E6%97%B6%E9%97%B4%E8%BD%B4" tabindex="-1">时间轴</h4> <p>Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。</p> <p>首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 <code>formatter</code> 支持了时间模版(例如 <code>{yyyy}-{MM}-{dd}</code>),并且可以为不同时间粒度的标签指定不同的 <code>formatter</code>,结合已有的富文本标签,可以定制出醒目而多样的时间效果。</p> <p>不同的 dataZoom 粒度下时间刻度的显示:</p> <img data-src="images/feature-v5/time-axis.png" width="600px"> <img data-src="images/feature-v5/time-axis-2.png" width="600px"> <h4 id="%E6%8F%90%E7%A4%BA%E6%A1%86" tabindex="-1">提示框</h4> <p>提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。</p> <img data-src="images/feature-v5/new-tooltip.png" width="400px"> <img data-src="images/feature-v5/new-tooltip-2.png" width="400px"> <p>除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。</p> <h4 id="%E4%BB%AA%E8%A1%A8%E7%9B%98" tabindex="-1">仪表盘</h4> <p>我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。</p> <p>不同样式的仪表盘指针:</p> <img data-src="images/feature-v5/gauge-pointer.png" width="600px"> <p>这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。</p> <iframe width="600" height="600" src=""></iframe> <h4 id="%E6%89%87%E5%BD%A2%E5%9C%86%E8%A7%92" tabindex="-1">扇形圆角</h4> <p>圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。</p> <iframe width="400" height="400" src=""></iframe> <h2 id="%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B" tabindex="-1">交互能力</h2> <p>可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。</p> <h4 id="%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" tabindex="-1">状态管理</h4> <p>在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。</p> <p>这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了<strong>淡出</strong>其它非相关元素的效果,从而可以达到聚焦目标数据的目的。</p> <p>比如在这个<a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack">柱状图</a>的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。</p> <p>除此之外,我们为所有系列还添加了<strong>点击选中</strong>这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 <code>selectchanged</code> 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 <code>select</code> 中配置。</p> <h4 id="%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87" tabindex="-1">性能提升</h4> <h5 id="%E8%84%8F%E7%9F%A9%E5%BD%A2%E6%B8%B2%E6%9F%93" tabindex="-1">脏矩形渲染</h5> <p>Apache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。</p> <p>脏矩形的可视化演示,红色框选部分为该帧重绘区域:</p> <img data-src="images/feature-v5/dirty-rect.gif" width="500px"> <p>大家在新的示例页面选择开启脏矩形优化就可以看到该效果。</p> <h5 id="%E5%AE%9E%E6%97%B6%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">实时时序数据的折线图性能优化</h5> <p>除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。</p> <p>Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。</p> <h2 id="%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C" tabindex="-1">开发体验</h2> <p>我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。</p> <h4 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h4> <p>ECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。</p> <h4 id="%E5%9B%BD%E9%99%85%E5%8C%96" tabindex="-1">国际化</h4> <p>ECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。 这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。</p> <p>因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包 ,通过类似挂载主题的方式,使用 <code>registerLocale</code> 函数挂载语言包对象 ,重新初始化后就完成了语言的切换 。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// import the lang object and set when init</span>
+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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="typescript-%E9%87%8D%E6%9E%84" tabindex="-1">TypeScript 重构</h4> <p>在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。</p> <p>对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的<code>DTS</code>类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到<a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>,这个有着不小的工作量,非常感谢大家的贡献。</p> <p>除此之外,如果开发者的组件是按需引入的,我们还提供了一个 <code>ComposeOption</code> 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。</p> <h2 id="%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7" tabindex="-1">可访问性</h2> <p>Apache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。</p> <p>在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。</p> <h4 id="%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2" tabindex="-1">主题配色</h4> <p>我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。</p> <p>并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。</p> <h4 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h4> <p>ECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。</p> <iframe width="600" height="350" src=""></iframe> <p>此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。</p> <iframe width="600" height="350" src=""></iframe> <h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2> <p>除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。</p> <p>感谢所有使用过 ECharts,甚至参与过社区贡献的开发者,正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中,Apache ECharts 也会以更大的诚意和大家在 6 相见!</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/zh/basics/release-note/v5-feature.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,d,n,h,l,p,s,c,E,o,g,m,A,B,b,C,f,x,u,w,v,y,D,S,R,k,P,F,T,L,G,I,V,z,W,M,O,_,H,K,U,Z,Y,j,N,J,Q,X,$,q,tt,et,it){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E6%96%B0%E7%89%B9%E6%80%A7" tabindex="-1">Apache ECharts 5 新特性</h1>\n<p>数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具,而在交互、性能、数据处理等方面有了更高级的需求。</p>\n<p>Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5,我们着力加强了图表的叙事能力,让开发者可以以更简单的方式,讲述数据背后的故事。</p>\n<img data-src="images/feature-v5/echarts-5.png" width="800px" />\n<p>“表·达”是 Apache ECharts 5 的核心,通过五大模块、十五项特性的全面升级,围绕可视化作品的叙事表达能力,让图“表”更能传“达”数据背后的故事,帮助开发者更轻松地创造满足各种场景需求的可视化作品。</p>\n<h2 id="%E5%8A%A8%E6%80%81%E5%8F%99%E4%BA%8B" tabindex="-1">动态叙事</h2>\n<p>动画对于人类认知的重要性不言而喻。在之前的作品中,我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系,让图表的出现和变换显得不那么生硬。这次,我们更是大幅度增强了我们的动画叙事能力,。希望能够进一步发挥动画对于用户认知的帮助作用,借助图表的动态叙事功能,帮助用户更容易理解图表背后表达的故事。</p>\n<h4 id="%E5%8A%A8%E6%80%81%E6%8E%92%E5%BA%8F%E5%9B%BE" tabindex="-1">动态排序图</h4>\n<p>Apache ECharts 5 新增支持动态排序柱状图(bar-racing)以及动态排序折线图(line-racing),帮助开发者方便地创建带有时序性的图表,展现数据随着时间维度上的变化,讲述数据的演变过程。</p>\n<md-example src="bar-race-country" width="700" height="400" />\n<md-example src="line-race" width="700" height="400" />\n<p>动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。</p>\n<h4 id="%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B3%BB%E5%88%97%E5%8A%A8%E7%94%BB" tabindex="-1">自定义系列动画</h4>\n<p>除了动态排序图,Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果,支持标签数值文本的插值动画,图形的形变(morph)、分裂(separate)、合并(combine)等效果的过渡动画。</p>\n<p>想象一下,用这些动态效果,你可以创造出多么令人称奇的可视化作品!</p>\n<h2 id="%E8%A7%86%E8%A7%89%E8%AE%BE%E8%AE%A1" tabindex="-1">视觉设计</h2>\n<p>视觉设计的作用并不仅仅是为了让图表更好看,更重要的是,符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容,并且尽可能消除不良设计带来的误解。</p>\n<h4 id="%E9%BB%98%E8%AE%A4%E8%AE%BE%E8%AE%A1" tabindex="-1">默认设计</h4>\n<p>我们发现,有很大一部分开发者使用了 ECharts 默认的主题样式,因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中,我们重新设计了默认的主题样式,针对不同的系列和组件分别做了优化调整。以主题色为例,我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素,并且确保色觉辨识障碍人士也能清楚地区分数据。</p>\n<img data-src="images/feature-v5/theme-color.png" width="400px" />\n<p>我们以最常用的柱状图为例,来看看新版本浅色主题和深色主题的样式:</p>\n<img data-src="images/feature-v5/new-theme-light.png" width="500px" />\n<img data-src="images/feature-v5/new-theme-dark.png" width="500px" />\n<p>对于数据区域缩放,时间轴等交互组件,我们也设计了全新的样式并且提供了更好的交互体验:</p>\n<img data-src="images/feature-v5/dataZoom.png" width="500px" />\n<img data-src="images/feature-v5/timeline.png" width="500px" />\n<h4 id="%E6%A0%87%E7%AD%BE" tabindex="-1">标签</h4>\n<p>标签是图表中的核心元素之一,清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能,让密集的标签能清晰显示、准确表意。</p>\n<p>Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签,可以选择自动截断或者换行。密集的饼图标签,现在有了更美观的自动排布。</p>\n<p>这些功能可以帮助避免文字过于密集影响可读性。并且,无需开发者编写额外的代码就能默认生效,大大简化了开发者的开发成本。</p>\n<p>我们也提供了多个配置项来让开发者主动控制标签的布局策略,例如标签拖动、整体显示在画布边缘,用引导线和图形元素连接,并且仍可联动高亮表达关联关系。</p>\n<p>新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示:</p>\n<img data-src="images/feature-v5/pie-label.png" width="400px" />\n<h4 id="%E6%97%B6%E9%97%B4%E8%BD%B4" tabindex="-1">时间轴</h4>\n<p>Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息,并且提供了更灵活的定制化能力,让开发者根据不同的需求定制时间轴的标签内容。</p>\n<p>首先,时间轴不再如之前般绝对平均分割,而是选取年、月、日、整点这类更有意义的点来展示,并且能同时显示不同层级的刻度。标签的 <code>formatter</code> 支持了时间模版(例如 <code>{yyyy}-{MM}-{dd}</code>),并且可以为不同时间粒度的标签指定不同的 <code>formatter</code>,结合已有的富文本标签,可以定制出醒目而多样的时间效果。</p>\n<p>不同的 dataZoom 粒度下时间刻度的显示:</p>\n<img data-src="images/feature-v5/time-axis.png" width="600px" />\n<img data-src="images/feature-v5/time-axis-2.png" width="600px" />\n<h4 id="%E6%8F%90%E7%A4%BA%E6%A1%86" tabindex="-1">提示框</h4>\n<p>提示框(Tooltip)是一种最常用的可视化组件,可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中,我们对提示框的样式进行了优化,通过对字体样式,颜色的调整,指向图形的箭头,跟随图形颜色的边框色等功能,让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑,确保显示效果与 HTML 方式一致,让用户在不同场景下可以选择不同的技术方案实现同样的效果。</p>\n<img data-src="images/feature-v5/new-tooltip.png" width="400px" />\n<img data-src="images/feature-v5/new-tooltip-2.png" width="400px" />\n<p>除此之外,我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。</p>\n<h4 id="%E4%BB%AA%E8%A1%A8%E7%9B%98" tabindex="-1">仪表盘</h4>\n<p>我们看到社区用户创建了很多酷炫的仪表盘图表,但是他们的配置方式往往比较复杂而取巧。因此,我们对仪表盘的功能作了全面升级,支持了图片或者矢量路径绘制指针、也支持了锚点(anchor)配置项、进度条(progress)、圆角效果等等配置项。</p>\n<p>不同样式的仪表盘指针:</p>\n<img data-src="images/feature-v5/gauge-pointer.png" width="600px" />\n<p>这些升级,不仅可以让开发者用更简单的配置项实现酷炫的效果,而且带来了更丰富的定制能力。</p>\n<md-example src="gauge-clock" width="600" height="600" />\n<h4 id="%E6%89%87%E5%BD%A2%E5%9C%86%E8%A7%92" tabindex="-1">扇形圆角</h4>\n<p>圆角可以带来更美观而柔和的视觉,也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项,合理地搭配其他的效果,就可以形成更具个性的的可视化作品。</p>\n<md-example src="sunburst-borderRadius" width="400" height="400" />\n<h2 id="%E4%BA%A4%E4%BA%92%E8%83%BD%E5%8A%9B" tabindex="-1">交互能力</h2>\n<p>可视化作品的交互能力帮助用户探索了解作品,加深对于图表主旨的理解。</p>\n<h4 id="%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86" tabindex="-1">状态管理</h4>\n<p>在 ECharts 4 中有高亮(emphasis)和普通(normal)两个交互的状态,在鼠标移到图形上的时候会进入高亮状态以区分该数据,开发者可以分别设置这两个状态的颜色,阴影等样式。</p>\n<p>这次在 Apache ECharts 5 中,我们在原先的鼠标 hover 高亮的基础上,新增加了<strong>淡出</strong>其它非相关元素的效果,从而可以达到聚焦目标数据的目的。</p>\n<p>比如在这个<a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack">柱状图</a>的例子中,鼠标移到一个系列上的时候,其它非相关的系列就会淡出,从而可以更清晰的突出聚焦系列中数据的对比。在关系图,树图,旭日图,桑基等更复杂数据结构的图上,也可以通过淡出非相关元素来观察数据之间的联系。而且颜色,阴影等在高亮(emphasis)中可以设置的样式,现在也可以在淡出(blur)状态中设置了。</p>\n<p>除此之外,我们为所有系列还添加了<strong>点击选中</strong>这个之前只有在饼图、地图等少数系列中才能开启的交互,开发者可以设置为单选或多选模式,并且通过监听 <code>selectchanged</code> 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样,选中的样式也可以在 <code>select</code> 中配置。</p>\n<h4 id="%E6%80%A7%E8%83%BD%E6%8F%90%E5%8D%87" tabindex="-1">性能提升</h4>\n<h5 id="%E8%84%8F%E7%9F%A9%E5%BD%A2%E6%B8%B2%E6%9F%93" tabindex="-1">脏矩形渲染</h5>\n<p>Apache ECharts 5 新支持了脏矩形渲染,解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时,脏矩形渲染技术探测并只更新视图变化的部分,而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率,例如在图形很多时候,鼠标频繁触发一些图形高亮的场景。以往这类场景,会使用额外的 Canvas 层以优化性能,但是这种方式不是所有场景都通用,而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。</p>\n<p>脏矩形的可视化演示,红色框选部分为该帧重绘区域:</p>\n<img data-src="images/feature-v5/dirty-rect.gif" width="500px" />\n<p>大家在新的示例页面选择开启脏矩形优化就可以看到该效果。</p>\n<h5 id="%E5%AE%9E%E6%97%B6%E6%97%B6%E5%BA%8F%E6%95%B0%E6%8D%AE%E7%9A%84%E6%8A%98%E7%BA%BF%E5%9B%BE%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96" tabindex="-1">实时时序数据的折线图性能优化</h5>\n<p>除此之外,海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求,这些数据可能需要几百或者几十毫秒更新一次。</p>\n<p>Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化,使得百万量级的数据也能做到实时的更新(每次更新耗时少于 30ms),甚至对于千万级的数据,也可以在 1s 内渲染完,并且保持很小的内存占用以及流畅的提示框(tooltip)等交互。</p>\n<h2 id="%E5%BC%80%E5%8F%91%E4%BD%93%E9%AA%8C" tabindex="-1">开发体验</h2>\n<p>我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用,因而开发者的开发体验也是我们非常关注的方面。</p>\n<h4 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h4>\n<p>ECharts 5 加强了数据集的数据转换能力,让开发者可以使用简单的方式实现常用的数据处理,如:数据过滤(filter)、排序(sort)、聚合(aggregate)、直方图(histogram)、简单聚类(clustering)、回归线计算(regression)等。开发者可以用统一的声明式方式来使用这些功能,可以方便地实现常用的数据操作。</p>\n<h4 id="%E5%9B%BD%E9%99%85%E5%8C%96" tabindex="-1">国际化</h4>\n<p>ECharts 原有的国际化方案,采用的是根据不同的语言参数打包出不同的部署文件的形式。 这种方式,使动态的语言和静态的代码包绑定在一起,使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。</p>\n<p>因此,从 Apache ECharts 5 开始,动态的语言包和静态的代码包分离开。切换语言的时候,只需要加载相应语言包 ,通过类似挂载主题的方式,使用 <code>registerLocale</code> 函数挂载语言包对象 ,重新初始化后就完成了语言的切换 。</p>\n<md-code-block lang="js" code="\'Ly8gaW1wb3J0IHRoZSBsYW5nIG9iamVjdCBhbmQgc2V0IHdoZW4gaW5pdOKAiwplY2hhcnRzLnJlZ2lzdGVyTG9jYWxlKCdERScsIGxhbmcpO-KAiwplY2hhcnRzLmluaXQoRG9tRWxlbWVudCwgbnVsbCwge-KAiwogICBsb2NhbGU6ICdERSfigIsKfSk7\'" line-highlights="\'\'" />\n<h4 id="typescript-%E9%87%8D%E6%9E%84" tabindex="-1">TypeScript 重构</h4>\n<p>在近 8 年的时间里,Apache ECharts 已经发展成一个非常复杂的可视化库了,为了续可以更安全高效的进行重构和新功能的开发,我们在 Apache ECharts 5 的开发之初,使用 TypeScript 对代码进行了重写,TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。</p>\n<p>对于开发者,我们也可以从 TypeScript 代码直接生成更好更符合代码的<code>DTS</code>类型描述文件。在此之前,ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到<a href="https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts">DefinityTyped</a>,这个有着不小的工作量,非常感谢大家的贡献。</p>\n<p>除此之外,如果开发者的组件是按需引入的,我们还提供了一个 <code>ComposeOption</code> 类型方法,可以组合出一个只包含了引入组件的配置项类型,可以带来更严格的类型检查,帮助你提前检测到未引入的组件类型。</p>\n<h2 id="%E5%8F%AF%E8%AE%BF%E9%97%AE%E6%80%A7" tabindex="-1">可访问性</h2>\n<p>Apache ECharts 一直非常重视无障碍设计,我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点,因而有利于让开发者更愿意为视觉障碍人士提供支持。</p>\n<p>在上一个大版本中,我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能,帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中,我们也做了更多提高可访问性的设计,帮助视觉障碍人士更好地理解图表内容。</p>\n<h4 id="%E4%B8%BB%E9%A2%98%E9%85%8D%E8%89%B2" tabindex="-1">主题配色</h4>\n<p>我们在设计新版默认主题样式的时候,将无障碍设计作为一个重要的考量依据,对颜色的明度和色值都进行反复测试,帮助视觉辨识障碍用户清楚地识别图表数据。</p>\n<p>并且,针对有更进一步无障碍需求的开发者,我们还提供了特殊的高对比度主题,以更高对比度颜色的主题将数据作进一步区分。</p>\n<h4 id="%E8%B4%B4%E8%8A%B1%E5%9B%BE%E6%A1%88" tabindex="-1">贴花图案</h4>\n<p>ECharts 5 还新增提供了贴花的功能,用图案辅助颜色表达,进一步帮助用户区分数据。</p>\n<md-example src="doc-example/aria-decal-simple" width="600" height="350" />\n<p>此外,贴花图案还能在一些其他的场景下提供帮助,比如:在报纸、书籍之类只有单色或者非常少的颜色的印刷品中,帮助更好地区分数据;用图形元素方便用户对数据产生更直观的理解等。</p>\n<md-example src="doc-example/aria-decal-newspaper" width="600" height="350" />\n<h2 id="%E5%B0%8F%E7%BB%93" tabindex="-1">小结</h2>\n<p>除了以上介绍的功能,Apache ECharts 还在非常多的细节中做了改进,帮助开发者更轻松地创建默认好用、配置灵活的图表,用图表讲述数据背后的故事。</p>\n<p>感谢所有使用过 ECharts,甚至参与过社区贡献的开发者,正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中,Apache ECharts 也会以更大的诚意和大家在 6 相见!</p>\n',postPath:"zh/basics/release-note/v5-feature"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:l,draft:t},{title:"获取灵感",dir:p},{title:"寻求帮助",dir:s},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:E},{title:"ECharts 5 升级指南",dir:o},{title:5.2,dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:B,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:C},{title:"数据集",dir:f},{title:"数据转换",dir:x},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:i},{title:"图例",dir:v},{title:"事件与行为",dir:y}]},{title:"应用篇",dir:D,children:[{title:"常用图表类型",dir:S,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:k},{title:"动态排序柱状图",dir:P},{title:"极坐标系柱状图",dir:F,draft:t},{title:"阶梯瀑布图",dir:T},{title:"视觉映射的柱状图",dir:i,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:I},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:O},{title:"南丁格尔图(玫瑰图)",dir:_}]},{title:"散点图",dir:H,children:[{title:"基础散点图",dir:K}]}]},{title:U,dir:e,draft:t},{title:"跨平台方案",dir:Z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Y}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:N},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:X,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:U,dir:e,draft:t},{title:tt,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:it}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:h},{title:"Resources",dir:l,draft:t},{title:"Inspiration",dir:p},{title:"Get Help",dir:s},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:E},{title:"ECharts 5 Upgrade Guide",dir:o},{title:5.2,dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:B,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:f},{title:"Data Transform",dir:x},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:i},{title:"Legend",dir:v},{title:"Event and Action",dir:y}]},{title:"Application",dir:D,children:[{title:"Common Charts",dir:S,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:k},{title:"Bar Racing",dir:P},{title:"Bar Polar",dir:F,draft:t},{title:"Waterfall",dir:T}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:I},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:O},{title:"Rose Style",dir:_}]},{title:"Scatter",dir:H,children:[{title:"Basic Scatter",dir:K}]}]},{title:"Mobile",dir:e,draft:t},{title:"Cross Platform",dir:Z,children:[{title:"Server Side Rendering",dir:Y}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:N},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:X,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:t},{title:tt,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:it}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/release-note/v5-feature",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/basics/release-note/v5-upgrade-guide/index.html b/handbook/zh/basics/release-note/v5-upgrade-guide/index.html
new file mode 100644
index 0000000..94fbd15
--- /dev/null
+++ b/handbook/zh/basics/release-note/v5-upgrade-guide/index.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<html data-n-head-ssr>
+ <head>
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
+ <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
+ </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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1> <p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p> <h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2> <h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4> <p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>或者,做一个简单的 <code>v4</code> 主题:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> themeEC4 <span class="token operator">=</span> <span class="token punctuation">{</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><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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h4> <h5 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h5> <p>如果使用者在 <code>v4</code> 中这样引用了 echarts:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这两种方式,<code>v5</code> 中不再支持了。</p> <p>使用者需要如下更改代码解决这个问题:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</span><span class="token punctuation">;</span>
+<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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h5 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h5> <p>在 5.0.1 中,我们引入了新的<a href="zh/basics/import">按需引入接口</a></p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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 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.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果之前是使用<code>import 'echarts/lib/chart/bar'</code>引入,新的接口对应的是<code>import {BarChart} from 'echarts/charts'</code>;</p> <p>为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p> <p>在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</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/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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其次,因为我们的源代码已使用 TypeScript 重写,<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件,需要改为从<code>echarts/lib</code>引入。</p> <h5 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h5> <blockquote><p>注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注</p></blockquote> <p>为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,<code>CanvasRenderer</code>将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:</p> <ul><li>在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">const</span> echarts <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/echarts'</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/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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>需要再单独引入<code>grid</code>组件</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>参考 issue:<a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p> <ul><li>默认不再引入<code>aria</code>组件,如果需要的话可以手动引入。</li></ul> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> AriaComponent <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>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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>或者:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'echarts/lib/component/aria'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h4> <p><code>v5</code> 移除了内置的 geoJSON(原先在 <code>echarts/map</code> 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p> <h4 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h4> <p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p> <h4 id="echarts-%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">ECharts 配置项调整</h4> <h5 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h5> <p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的视觉样式优先级。</p> <p>具体来说,<code>v4</code> 中,<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时,又想针对某个数据项对应的图形,设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式,则做不到。<code>v5</code> 中于是提高了 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的优先级,使他们能生效。</p> <p>在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 <code>v4</code> 到 <code>v5</code> 时,还是可以检查下,是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的情况。</p> <h5 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h5> <p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里,例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置,<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p> <p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>,需要注意调整下这个顺序。</p> <h2 id="echarts-%E7%9A%84%E7%9B%B8%E5%85%B3%E6%89%A9%E5%B1%95" tabindex="-1">ECharts 的相关扩展</h2> <p>如果想要升级到 <code>v5</code> ,下面这些扩展需要升级到最新的版本实现兼容。</p> <ul><li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li> <li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li> <li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li></ul> <h2 id="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2> <p>一些 API(包括接口调用,事件监听和配置项)在 <code>v5</code> 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。</p> <p>下面是不再推荐使用的 API 以及推荐的新 API:</p> <ul><li>图形元素 transform 相关的属性被改变了:
+<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>textBoxShadowColor => shadowColor</li> <li>textBoxShadowBlur => shadowBlur</li> <li>textBoxShadowOffsetX => shadowOffsetX</li> <li>textBoxShadowOffsetY => shadowOffsetY</li></ul></li> <li>注:这些属性并没有变化:
+<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> <li>地图(<code>map series</code>):
+<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-upgrade-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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,t,l,d,c,o,a,n,r,s,h,p,g,m,u,b,y,C,E,A,f,I,v,B,S,x,W,J,M,Y,N,Z,k,G,w,V,j,L,z,F,X,D,O,P,R,H,T,U,Q,K,q,_,$,ee,ie,te){return{layout:"default",data:[{html:'<h1 id="apache-echarts-5-%E5%8D%87%E7%BA%A7%E6%8C%87%E5%8D%97" tabindex="-1">Apache ECharts 5 升级指南</h1>\n<p>本指南面向那些希望将 echarts 4.x(以下简称 <code>v4</code>)升级到 echarts 5.x(以下简称 <code>v5</code>)的用户。大家可以在 <a href="zh/basics/release-note/v5-feature">ECharts 5 新特性</a> 中了解这次<code>v5</code>带来了哪些值得升级的新特性。在绝大多数情况下,开发者用不着为这个升级做什么额外的事,因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是,<code>v5</code> 仍然带来了一些非兼容改动,需要特别关注。此外,在一些情况下,<code>v5</code> 提供了更好的 API 用来取代之前的 API,这些被取代的 API 将不再被推荐使用(当然,我们尽量兼容了这些改动)。我们会在这篇文档里尽量详尽得解释这些改动。</p>\n<h2 id="%E9%9D%9E%E5%85%BC%E5%AE%B9%E6%80%A7%E6%94%B9%E5%8F%98" tabindex="-1">非兼容性改变</h2>\n<h4 id="%E9%BB%98%E8%AE%A4%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">默认主题(theme)</h4>\n<p>首先是默认主题的改动,<code>v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色,可以手动声明颜色,如下:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICBjb2xvcjogWwogICAgJyNjMjM1MzEnLAogICAgJyMyZjQ1NTQnLAogICAgJyM2MWEwYTgnLAogICAgJyNkNDgyNjUnLAogICAgJyM5MWM3YWUnLAogICAgJyM3NDlmODMnLAogICAgJyNjYTg2MjInLAogICAgJyNiZGEyOWEnLAogICAgJyM2ZTcwNzQnLAogICAgJyM1NDY1NzAnLAogICAgJyNjNGNjZDMnCiAgXQogIC8vIC4uLgp9KTs\'" line-highlights="\'\'" />\n<p>或者,做一个简单的 <code>v4</code> 主题:</p>\n<md-code-block lang="js" code="\'dmFyIHRoZW1lRUM0ID0gewogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdCn07CnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sIHRoZW1lRUM0KTsKY2hhcnQuc2V0T3B0aW9uKC8qIC4uLiAqLyk7\'" line-highlights="\'\'" />\n<h4 id="%E5%BC%95%E7%94%A8-echarts" tabindex="-1">引用 ECharts</h4>\n<h5 id="%E5%8E%BB%E9%99%A4-default-exports-%E7%9A%84%E6%94%AF%E6%8C%81" tabindex="-1">去除 default exports 的支持</h5>\n<p>如果使用者在 <code>v4</code> 中这样引用了 echarts:</p>\n<md-code-block lang="js" code="\'aW1wb3J0IGVjaGFydHMgZnJvbSAnZWNoYXJ0cyc7Ci8vIOaIluiAheaMiemcgOW8leWFpQppbXBvcnQgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2xpYi9lY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>这两种方式,<code>v5</code> 中不再支持了。</p>\n<p>使用者需要如下更改代码解决这个问题:</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKLy8g5oyJ6ZyA5byV5YWlCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9saWIvZWNoYXJ0cyc7\'" line-highlights="\'\'" />\n<h5 id="%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">按需引入</h5>\n<p>在 5.0.1 中,我们引入了新的<a href="zh/basics/import">按需引入接口</a></p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgeyBCYXJDaGFydCB9IGZyb20gJ2VjaGFydHMvY2hhcnRzJzsKaW1wb3J0IHsgR3JpZENvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7Ci8vIOazqOaEj--8jOaWsOeahOaOpeWPo-S4rem7mOiupOS4jeWGjeWMheWQqyBDYW52YXMg5riy5p-T5Zmo77yM6ZyA6KaB5pi-56S65byV5YWl77yM5aaC5p6c6ZyA6KaB5L2_55SoIFNWRyDmuLLmn5PmqKHlvI_liJnkvb_nlKggU1ZHUmVuZGVyZXIKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgplY2hhcnRzLnVzZShbQmFyQ2hhcnQsIEdyaWRDb21wb25lbnQsIENhbnZhc1JlbmRlcmVyXSk7\'" line-highlights="\'\'" />\n<p>如果之前是使用<code>import \'echarts/lib/chart/bar\'</code>引入,新的接口对应的是<code>import {BarChart} from \'echarts/charts\'</code>;</p>\n<p>为了方便大家了解自己的配置项需要引入哪些模块,我们新的示例编辑页面添加了生成按需引入代码的功能,大家可以在示例编辑页的<code>完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p>\n<p>在大部分情况下,我们都推荐大家尽可能用这套新的按需引入接口,它可以最大程度的利用打包工具 tree-shaking 的能力,并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法,之前的方式我们也依旧是支持的:</p>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NvbXBvbmVudC9ncmlkJyk7\'" line-highlights="\'\'" />\n<p>其次,因为我们的源代码已使用 TypeScript 重写,<code>v5</code> 将不再支持从 <code>echarts/src</code> 引用文件,需要改为从<code>echarts/lib</code>引入。</p>\n<h5 id="%E4%BE%9D%E8%B5%96%E8%B0%83%E6%95%B4" tabindex="-1">依赖调整</h5>\n<blockquote>\n<p>注意:该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者,如果是全量引入的不需要关注</p>\n</blockquote>\n<p>为了保证 tree-shaking 后的体积足够小,我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候,<code>CanvasRenderer</code>将不再被默认引入,这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来,除此之外,还有下面这些依赖的改动:</p>\n<ul>\n<li>在使用折线图,柱状图中不再默认引入直角坐标系组件,因此之前使用下面的引入方式</li>\n</ul>\n<md-code-block lang="js" code="\'Y29uc3QgZWNoYXJ0cyA9IHJlcXVpcmUoJ2VjaGFydHMvbGliL2VjaGFydHMnKTsKcmVxdWlyZSgnZWNoYXJ0cy9saWIvY2hhcnQvYmFyJyk7CnJlcXVpcmUoJ2VjaGFydHMvbGliL2NoYXJ0L2xpbmUnKTs\'" line-highlights="\'\'" />\n<p>需要再单独引入<code>grid</code>组件</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2dyaWQnKTs\'" line-highlights="\'\'" />\n<p>参考 issue:<a href="https://github.com/apache/echarts/issues/14080">#14080</a>, <a href="https://github.com/apache/echarts/issues/13764">#13764</a></p>\n<ul>\n<li>默认不再引入<code>aria</code>组件,如果需要的话可以手动引入。</li>\n</ul>\n<md-code-block lang="js" code="\'aW1wb3J0IHsgQXJpYUNvbXBvbmVudCB9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmVjaGFydHMudXNlKEFyaWFDb21wb25lbnQpOw\'" line-highlights="\'\'" />\n<p>或者:</p>\n<md-code-block lang="js" code="\'cmVxdWlyZSgnZWNoYXJ0cy9saWIvY29tcG9uZW50L2FyaWEnKTs\'" line-highlights="\'\'" />\n<h4 id="%E5%8E%BB%E9%99%A4%E5%86%85%E7%BD%AE%E7%9A%84-geojson" tabindex="-1">去除内置的 geoJSON</h4>\n<p><code>v5</code> 移除了内置的 geoJSON(原先在 <code>echarts/map</code> 文件夹下)。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们,可以去从老版本中得到,或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p>\n<h4 id="%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7" tabindex="-1">浏览器兼容性</h4>\n<p><code>v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href="https://github.com/ecomfe/zrender/tree/4.3.2/src/vml">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求,那么欢迎提 pull request 来升级 VML 渲染器,或者单独维护一个第三方 VML 渲染器,我们从 <code>v5.0.1</code> 开始支持注册独立的渲染器了。</p>\n<h4 id="echarts-%E9%85%8D%E7%BD%AE%E9%A1%B9%E8%B0%83%E6%95%B4" tabindex="-1">ECharts 配置项调整</h4>\n<h5 id="%E8%A7%86%E8%A7%89%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7%E6%94%B9%E5%8F%98" tabindex="-1">视觉样式设置的优先级改变</h5>\n<p><code>v5</code> 对调了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的视觉样式优先级。</p>\n<p>具体来说,<code>v4</code> 中,<a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 中生成的视觉样式(如,颜色、图形类型、图形尺寸等)的优先级,比开发者在 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 中设置的样式的优先级高,也就是说如果他们同时设置的话,前者会生效而后者不会生效。这带来了些麻烦:假如使用者在使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 时,又想针对某个数据项对应的图形,设置 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> 样式,则做不到。<code>v5</code> 中于是提高了 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的优先级,使他们能生效。</p>\n<p>在绝大多处情况下,这个变化并不会带来什么影响。但是为保险起见,使用者在升级 <code>v4</code> 到 <code>v5</code> 时,还是可以检查下,是否有同时使用 <a href="https://echarts.apache.org/option.html#visualMap">visualMap</a> 和 <a href="https://echarts.apache.org/option.html#series-scatter.itemStyle">itemStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.lineStyle">lineStyle</a> | <a href="https://echarts.apache.org/option.html#series-scatter.areaStyle">areaStyle</a> 的情况。</p>\n<h5 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E7%9A%84-padding" tabindex="-1">富文本的 <code>padding</code></h5>\n<p><code>v5</code> 调整了 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code>v4</code> 里,例如 <code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>33</code> 且 <code>padding-bottom</code> 是 <code>11</code>。在 <code>v5</code> 中调整了上下的位置,<code>rich.?.padding: [11, 22, 33, 44]</code> 表示 <code>padding-top</code> 是 <code>11</code> 且 <code>padding-bottom</code> 是 <code>33</code>。</p>\n<p>如果使用者有在使用 <a href="https://echarts.apache.org/option.html#series-scatter.label.rich.%3Cstyle_name%3E.padding">rich.?.padding</a>,需要注意调整下这个顺序。</p>\n<h2 id="echarts-%E7%9A%84%E7%9B%B8%E5%85%B3%E6%89%A9%E5%B1%95" tabindex="-1">ECharts 的相关扩展</h2>\n<p>如果想要升级到 <code>v5</code> ,下面这些扩展需要升级到最新的版本实现兼容。</p>\n<ul>\n<li><a href="https://github.com/ecomfe/echarts-gl">echarts-gl</a></li>\n<li><a href="https://github.com/ecomfe/echarts-wordcloud">echarts-wordcloud</a></li>\n<li><a href="https://github.com/ecomfe/echarts-liquidfill">echarts-liquidfill</a></li>\n</ul>\n<h2 id="%E4%B8%8D%E5%86%8D%E6%8E%A8%E8%8D%90%E4%BD%BF%E7%94%A8%E7%9A%84-api" tabindex="-1">不再推荐使用的 API</h2>\n<p>一些 API(包括接口调用,事件监听和配置项)在 <code>v5</code> 中不再推荐使用。当然,使用者仍然可以用他们,只是会在 dev 模式下,在 console 中打印一些 warning,并不会影响功能。但是从长远维护考虑,我们还是推荐升级成新的 API。</p>\n<p>下面是不再推荐使用的 API 以及推荐的新 API:</p>\n<ul>\n<li>图形元素 transform 相关的属性被改变了:\n<ul>\n<li>变更点:\n<ul>\n<li><code>position: [number, number]</code> 改为 <code>x: number</code> / <code>y: number</code>。</li>\n<li><code>scale: [number, number]</code> 改为 <code>scaleX: number</code> / <code>scaleY: number</code>。</li>\n<li><code>origin: [number, number]</code> 改为 <code>originX: number</code> / <code>originY: number</code>。</li>\n</ul>\n</li>\n<li><code>position</code>、<code>scale</code> 和 <code>origin</code> 仍然支持,但已不推荐使用。</li>\n<li>它影响到这些地方:\n<ul>\n<li>在<code>graphic</code>组件中:每个元素的声明。</li>\n<li>在 <code>custom series</code> 中:<code>renderItem</code> 返回的每个元素的声明。</li>\n<li>直接使用 zrender 图形元素时。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text 相关的属性被改变:\n<ul>\n<li>变更点:\n<ul>\n<li>图形元素附带的文本的声明方式被改变:\n<ul>\n<li>除了 <code>Text</code> 元素之外,其他元素中的属性 <code>style.text</code> 都不推荐使用了。取而代之的是新属性 <code>textContent</code> 和 <code>textConfig</code>,他们能带来更丰富的功能。</li>\n<li>其中,下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性:\n<ul>\n<li>textPosition => textConfig.position</li>\n<li>textOffset => textConfig.offset</li>\n<li>textRotation => textConfig.rotation</li>\n<li>textDistance => textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>下面左边部分的属性在 <code>style</code> 和 <code>style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性:\n<ul>\n<li>textFill => fill</li>\n<li>textStroke => stroke</li>\n<li>textFont => font</li>\n<li>textStrokeWidth => lineWidth</li>\n<li>textAlign => align</li>\n<li>textVerticalAlign => verticalAlign</li>\n<li>textLineHeight =></li>\n<li>textWidth => width</li>\n<li>textHeight => hight</li>\n<li>textBackgroundColor => backgroundColor</li>\n<li>textPadding => padding</li>\n<li>textBorderColor => borderColor</li>\n<li>textBorderWidth => borderWidth</li>\n<li>textBorderRadius => borderRadius</li>\n<li>textBoxShadowColor => shadowColor</li>\n<li>textBoxShadowBlur => shadowBlur</li>\n<li>textBoxShadowOffsetX => shadowOffsetX</li>\n<li>textBoxShadowOffsetY => shadowOffsetY</li>\n</ul>\n</li>\n<li>注:这些属性并没有变化:\n<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>它影响到这些地方:\n<ul>\n<li>在 <code>graphic</code> 组件中:每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>在自定义系列(<code>custom series</code>)中:<code>renderItem</code> 返回中的每个元素的声明。(原来的写法仍兼容,但在一些很复杂的情况下,可能效果不完全一致。)</li>\n<li>直接使用 zrender API 创建图形元素。(不再兼容,原写法被废弃。)</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>图表实例上的 API:\n<ul>\n<li><code>chart.one(...)</code> 已不推荐使用。</li>\n</ul>\n</li>\n<li><code>label</code>。\n<ul>\n<li>属性 <code>color</code>、<code>textBorderColor</code>、<code>backgroundColor</code>、<code>borderColor</code> 中,值 <code>auto</code> 已不推荐使用,而推荐使用 <code>\'inherit\'</code> 代替。</li>\n</ul>\n</li>\n<li><code>hoverAnimation</code>:\n<ul>\n<li>选项 <code>series.hoverAnimation</code> 已不推荐使用,使用 <code>series.emphasis.scale</code> 代替之。</li>\n</ul>\n</li>\n<li>折线图(<code>line series</code>):\n<ul>\n<li>选项 <code>series.clipOverflow</code> 已不推荐使用,使用 <code>series.clip</code> 代替之。</li>\n</ul>\n</li>\n<li>自定义系列(<code>custom series</code>)。\n<ul>\n<li>在 <code>renderItem</code> 中,<code>api.style(...)</code> 和 <code>api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要,也很难保证向后兼容。用户可以通过 <code>api.visual(...)</code> 获取系统自动分配的视觉信息。</li>\n</ul>\n</li>\n<li>旭日图(<code>sunburst</code>):\n<ul>\n<li>动作类型 <code>highlight</code> 已被弃用,请使用 <code>sunburstHighlight</code> 代替。</li>\n<li>动作类型 <code>downplay</code> 已被弃用,请使用 <code>sunburstUnhighlight</code> 代替。</li>\n<li>选项 <code>series.downplay</code> 已被弃用,请使用 <code>series.blur</code> 代替。</li>\n<li>选项 <code>series.highlightPolicy</code> 已不适用,请使用 <code>series.emphasis.focus</code> 代替。</li>\n</ul>\n</li>\n<li>饼图(<code>pie</code>):\n<ul>\n<li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>pieToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>pieSelect</code> => <code>select</code>。</li>\n<li><code>pieUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>pieselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>pieselected</code> => <code>selected</code>。</li>\n<li><code>pieunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.label.margin</code> 已经不推荐使用。使用 <code>series.label.edgeDistance</code> 代替。</li>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li>地图(<code>map series</code>):\n<ul>\n<li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。\n<ul>\n<li><code>mapToggleSelect</code> => <code>toggleSelect</code>。</li>\n<li><code>mapSelect</code> => <code>select</code>。</li>\n<li><code>mapUnSelect</code> => <code>unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。\n<ul>\n<li><code>mapselectchanged</code> => <code>selectchanged</code>。</li>\n<li><code>mapselected</code> => <code>selected</code>。</li>\n<li><code>mapunselected</code> => <code>unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code>series.mapType</code> 已经不推荐使用。使用 <code>series.map</code> 代替。</li>\n<li>选项 <code>series.mapLocation</code> 已经不推荐使用。</li>\n</ul>\n</li>\n<li>关系图(<code>graph series</code>):\n<ul>\n<li>选项 <code>series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code>series.emphasis: { focus: \'adjacency\'}</code> 代替。</li>\n</ul>\n</li>\n<li>仪表盘(<code>gauge series</code>):\n<ul>\n<li>选项 <code>series.clockWise</code> 已经不推荐使用。使用 <code>series.clockwise</code> 代替。</li>\n<li>选项 <code>series.hoverOffset</code> 已经不推荐使用。使用 <code>series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li><code>dataZoom</code> 组件:\n<ul>\n<li>选项 <code>dataZoom.handleIcon</code> 如果使用 <code>SVGPath</code>,需要前缀 <code>path://</code>。</li>\n</ul>\n</li>\n<li>雷达图(<code>radar</code>):\n<ul>\n<li>选项 <code>radar.name</code> 已经不推荐使用。使用 <code>radar.axisName</code> 代替。</li>\n<li>选项 <code>radar.nameGap</code> 已经不推荐使用。使用 <code>radar.axisNameGap</code> 代替。</li>\n</ul>\n</li>\n<li>Parse and format:\n<ul>\n<li><code>echarts.format.formatTime</code> 已经不推荐使用。使用 <code>echarts.time.format</code> 代替。</li>\n<li><code>echarts.number.parseDate</code> 已经不推荐使用。使用 <code>echarts.time.parse</code> 代替。</li>\n<li><code>echarts.format.getTextRect</code> 已经不推荐使用。</li>\n</ul>\n</li>\n</ul>\n',postPath:"zh/basics/release-note/v5-upgrade-guide"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:c,children:[{title:"获取 ECharts",dir:o},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:e},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:m}]}]},{title:"概念篇",dir:u,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:y,draft:e},{title:"系列",dir:C,draft:e},{title:"样式",dir:E},{title:"数据集",dir:A},{title:"数据转换",dir:f},{title:"坐标系",dir:I,draft:e},{title:"坐标轴",dir:v},{title:"视觉映射",dir:t},{title:"图例",dir:B},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:N,draft:e},{title:"阶梯瀑布图",dir:Z},{title:"视觉映射的柱状图",dir:t,draft:e}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:w},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:L}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:F},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:D,children:[{title:"基础散点图",dir:O}]}]},{title:P,dir:i,draft:e},{title:"跨平台方案",dir:R,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:P,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:te}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:c,children:[{title:"Download ECharts",dir:o},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:e},{title:"Inspiration",dir:r},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:m}]}]},{title:"Concepts",dir:u,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:y,draft:e},{title:"Series",dir:C,draft:e},{title:"Style",dir:E},{title:"Dataset",dir:A},{title:"Data Transform",dir:f},{title:"Coordinate",dir:I,draft:e},{title:"Axis",dir:v},{title:"Visual Mapping",dir:t},{title:"Legend",dir:B},{title:"Event and Action",dir:S}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:N,draft:e},{title:"Waterfall",dir:Z}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:w},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:L}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:F},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:D,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:R,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:te}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/zh/basics/release-note/v5-upgrade-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
+ </body>
+</html>
diff --git a/handbook/zh/best-practice/aria/index.html b/handbook/zh/best-practice/aria/index.html
index b5bf672..04d0e80 100644
--- a/handbook/zh/best-practice/aria/index.html
+++ b/handbook/zh/best-practice/aria/index.html
@@ -3,26 +3,32 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="无障碍访问"><a href="#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>无障碍访问</h1>
-<p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria" rel="nofollow noopener noreferrer" target="_blank">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p>
-<p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p>
-<p>对于配置项:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie"></iframe>
-<p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="整体修改描述"><a href="#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>整体修改描述</h2>
-<p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>
-<p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a> 配置项指定图表的整体描述。</p>
-<h2 id="定制模板描述"><a href="#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>定制模板描述</h2>
-<p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p>
-<p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show" rel="nofollow noopener noreferrer" target="_blank">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description" rel="nofollow noopener noreferrer" target="_blank">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p>
-<p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text" rel="nofollow noopener noreferrer" target="_blank">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle" rel="nofollow noopener noreferrer" target="_blank">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是:{title}。'</code>,则如果包含标题 <code>'价格分布图'</code>,这部分的描述为 <code>'图表的标题是:价格分布图。'</code>。</p>
-<p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series" rel="nofollow noopener noreferrer" target="_blank">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data" rel="nofollow noopener noreferrer" target="_blank">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p>
-<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria" rel="nofollow noopener noreferrer" target="_blank">ARIA 文档</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/best-practice/aria#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0">整体修改描述</a></li><li class="toc2"><a href="/handbook/zh/best-practice/aria#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0">定制模板描述</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/best-practice/aria.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,p,n,h,s,o,c,y,u,g,v,f,m,b,E,A,x,B,C,w,S,P,k,R,D,I,F,T,L,N,_,z,H,G,M,V,W,O,U,Z,$,j,X,q,J,K,Q,Y,tt,et,it,rt,at,lt,dt,pt,nt,ht,st,ot,ct,yt,ut,gt,vt,ft,mt,bt,Et,At,xt){return{layout:"default",data:[{article:{slug:v,toc:[{id:y,depth:2,text:y},{id:u,depth:2,text:u}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:f},children:[{type:e,tag:a,props:{href:"#%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE",ariaHidden:c,tabIndex:-1},children:[{type:e,tag:m,props:{className:[b,E]},children:[]}]},{type:t,value:f}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"W3C 制定了无障碍富互联网应用规范集("},{type:e,tag:a,props:{href:"https://www.w3.org/WAI/intro/aria",rel:[d,p,n],target:h},children:[{type:t,value:"WAI-ARIA"}]},{type:t,value:",the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"默认关闭,需要通过将 "},{type:e,tag:a,props:{href:C,rel:[d,p,n],target:h},children:[{type:t,value:w}]},{type:t,value:S},{type:e,tag:s,props:{},children:[{type:t,value:c}]},{type:t,value:" 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"对于配置项:"}]},{type:t,value:r},{type:e,tag:"div",props:{className:[P]},children:[{type:e,tag:k,props:{lang:"js","line-highlights":o,"file-name":o},children:[{type:t,value:"option = {\n aria: {\n show: true\n },\n title: {\n text: '某站点用户访问来源',\n x: 'center'\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ]\n }\n ]\n};\n"}]}]},{type:t,value:r},{type:e,tag:"md-example",props:{src:"doc-example/aria-pie"},children:[{type:t,value:r}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"生成的图表 DOM 上,会有一个 "},{type:e,tag:s,props:{},children:[{type:t,value:"aria-label"}]},{type:t,value:" 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:"}]},{type:t,value:r},{type:e,tag:"div",props:{className:[P]},children:[{type:e,tag:k,props:{lang:"null","line-highlights":o,"file-name":o},children:[{type:t,value:"这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n"}]}]},{type:t,value:r},{type:e,tag:"h2",props:{id:y},children:[{type:e,tag:a,props:{href:"#%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0",ariaHidden:c,tabIndex:-1},children:[{type:e,tag:m,props:{className:[b,E]},children:[]}]},{type:t,value:y}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"这时候,用户可以通过 "},{type:e,tag:a,props:{href:R,rel:[d,p,n],target:h},children:[{type:t,value:A}]},{type:t,value:" 配置项指定图表的整体描述。"}]},{type:t,value:r},{type:e,tag:"h2",props:{id:u},children:[{type:e,tag:a,props:{href:"#%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0",ariaHidden:c,tabIndex:-1},children:[{type:e,tag:m,props:{className:[b,E]},children:[]}]},{type:t,value:u}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"生成描述的基本流程为,如果 "},{type:e,tag:a,props:{href:C,rel:[d,p,n],target:h},children:[{type:t,value:w}]},{type:t,value:S},{type:e,tag:s,props:{},children:[{type:t,value:c}]},{type:t,value:",则生成无障碍访问描述,否则不生成。如果定义了 "},{type:e,tag:a,props:{href:R,rel:[d,p,n],target:h},children:[{type:t,value:A}]},{type:t,value:",则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 "},{type:e,tag:s,props:{},children:[{type:t,value:A}]},{type:t,value:" 完全覆盖。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"使用模板拼接时,先根据是否存在标题 "},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#title.text",rel:[d,p,n],target:h},children:[{type:t,value:"title.text"}]},{type:t,value:" 决定使用 "},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.general.withTitle",rel:[d,p,n],target:h},children:[{type:t,value:x}]},{type:t,value:" 还是 "},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.general.withoutTitle",rel:[d,p,n],target:h},children:[{type:t,value:"aria.general.withoutTitle"}]},{type:t,value:" 作为整体性描述。其中,"},{type:e,tag:s,props:{},children:[{type:t,value:x}]},{type:t,value:" 配置项包括模板变量 "},{type:e,tag:s,props:{},children:[{type:t,value:"'{title}'"}]},{type:t,value:",将会被替换成图表标题。也就是说,如果 "},{type:e,tag:s,props:{},children:[{type:t,value:x}]},{type:t,value:" 被设置为 "},{type:e,tag:s,props:{},children:[{type:t,value:"'图表的标题是:{title}。'"}]},{type:t,value:",则如果包含标题 "},{type:e,tag:s,props:{},children:[{type:t,value:"'价格分布图'"}]},{type:t,value:",这部分的描述为 "},{type:e,tag:s,props:{},children:[{type:t,value:"'图表的标题是:价格分布图。'"}]},{type:t,value:"。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"拼接完标题之后,会依次拼接系列的描述("},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.series",rel:[d,p,n],target:h},children:[{type:t,value:"aria.series"}]},{type:t,value:"),和每个系列的数据的描述("},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#aria.data",rel:[d,p,n],target:h},children:[{type:t,value:"aria.data"}]},{type:t,value:")。同样,每个模板都有可能包括模板变量,用以替换实际的值。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"完整的描述生成流程请参见 "},{type:e,tag:a,props:{href:"https://echarts.apache.org/option.html#aria",rel:[d,p,n],target:h},children:[{type:t,value:"ARIA 文档"}]},{type:t,value:"。"}]}]},dir:"/zh/best-practice",path:D,extension:".md",createdAt:"2021-06-04T12:26:37.923Z",updatedAt:"2021-07-21T09:55:24.870Z"},postPath:"zh/best-practice/aria"}],fetch:{},error:I,state:{filled:!1,docVersion:o,ghVersion:o,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:F},{title:"入门篇",dir:T,children:[{title:"获取 ECharts",dir:L},{title:"在项目中引入 ECharts",dir:N},{title:"资源列表",dir:_,draft:i},{title:"获取灵感",dir:z},{title:"寻求帮助",dir:H},{title:"版本介绍",dir:G,children:[{title:M,draft:i,dir:V},{title:"ECharts 5 新特性",dir:W},{title:"ECharts 5 升级指南",dir:O}]}]},{title:"概念篇",dir:U,children:[{title:"图表容器及大小",dir:Z},{title:"配置项",dir:$,draft:i},{title:"系列",dir:j,draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:X},{title:"数据转换",dir:q},{title:"坐标系",dir:J,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:B},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:K,children:[{title:"常用图表类型",dir:Q,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:tt},{title:"动态排序柱状图",dir:et,draft:i},{title:"极坐标系柱状图",dir:it,draft:i},{title:"瀑布图",dir:rt,draft:i},{title:"视觉映射的柱状图",dir:B,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:at},{title:"堆叠折线图",dir:lt},{title:"区域面积图",dir:dt},{title:"平滑曲线图",dir:pt},{title:"阶梯线图",dir:nt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ht},{title:"圆环图",dir:st},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ot,children:[{title:"基础散点图",dir:ct}]}]},{title:"移动端优化",dir:g,draft:i},{title:"跨平台方案",dir:yt,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ut},{title:"数据下钻",dir:gt,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:vt}]},{title:"交互",dir:ft,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:mt,draft:i}]}]},{title:"最佳实践",dir:bt,children:[{title:"移动端优化",dir:g,draft:i},{title:Et,dir:At},{title:f,dir:v}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:xt}]}],en:[{title:"Get Started",dir:F},{title:"Basics",dir:T,children:[{title:"Download ECharts",dir:L},{title:"Import ECharts",dir:N},{title:"Resources",dir:_,draft:i},{title:"Inspiration",dir:z},{title:"Get Help",dir:H},{title:"Release Note",dir:G,children:[{title:M,draft:i,dir:V},{title:"ECharts 5 Features",dir:W},{title:"ECharts 5 Upgrade Guide",dir:O}]}]},{title:"Concepts",dir:U,children:[{title:"Chart Container",dir:Z},{title:"Chart Option",dir:$,draft:i},{title:"Series",dir:j,draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:X},{title:"Data Transform",dir:q},{title:"Coordinate",dir:J,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:B},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:K,children:[{title:"Common Charts",dir:Q,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:tt},{title:"Bar Racing",dir:et,draft:i},{title:"Bar Polar",dir:it,draft:i},{title:"Waterfall",dir:rt,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:at},{title:"Stacked Line",dir:lt},{title:"Area Chart",dir:dt},{title:"Smoothed Line",dir:pt},{title:"Step Line",dir:nt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ht},{title:"Ring Style",dir:st},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ot,children:[{title:"Basic Scatter",dir:ct}]}]},{title:"Mobile",dir:g,draft:i},{title:"Cross Platform",dir:yt,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ut},{title:"Drilldown",dir:gt,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:vt}]},{title:"Interaction",dir:ft,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:mt,draft:i}]}]},{title:"Best Practice",dir:bt,children:[{title:"Mobile Optimization",dir:g,draft:i},{title:Et,dir:At},{title:"Aria",dir:v}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:xt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:D,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:I},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","nofollow","noopener","noreferrer","_blank","code","","true","整体修改描述","定制模板描述","mobile","aria","无障碍访问","span","icon","icon-link","aria.description","aria.general.withTitle","visual-map","https://echarts.apache.org/option.html#aria.show","aria.show"," 设置为 ","nuxt-content-highlight","md-code-block","https://echarts.apache.org/option.html#aria.description","/zh/best-practice/aria",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1> <p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p> <p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p> <pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。
+</code></pre> <h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2> <p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p> <p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p> <h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2> <p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p> <p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p> <p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>'{title}'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>'图表的标题是:{title}。'</code>,则如果包含标题 <code>'价格分布图'</code>,这部分的描述为 <code>'图表的标题是:价格分布图。'</code>。</p> <p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p> <p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</a>。</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/zh/best-practice/aria.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,d,l,o,h,n,c,s,p,g,C,I,A,m,f,b,u,B,E,w,x,S,W,k,v,F,R,y,D,K,T,H,L,P,Z,M,G,U,_,z,O,X,J,Q,V,Y,N,j,$,q,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E6%97%A0%E9%9A%9C%E7%A2%8D%E8%AE%BF%E9%97%AE" tabindex="-1">无障碍访问</h1>\n<p>W3C 制定了无障碍富互联网应用规范集(<a href="https://www.w3.org/WAI/intro/aria">WAI-ARIA</a>,the Accessible Rich Internet Applications Suite),致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范,支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。</p>\n<p>默认关闭,需要通过将 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code> 开启。开启后,会根据图表、数据、标题等情况,自动智能生成关于图表的描述,用户也可以通过配置项修改描述。</p>\n<p>对于配置项:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGFyaWE6IHsKICAgIHNob3c6IHRydWUKICB9LAogIHRpdGxlOiB7CiAgICB0ZXh0OiAn5p-Q56uZ54K555So5oi36K6_6Zeu5p2l5rqQJywKICAgIHg6ICdjZW50ZXInCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-iuv-mXruadpea6kCcsCiAgICAgIHR5cGU6ICdwaWUnLAogICAgICBkYXRhOiBbCiAgICAgICAgeyB2YWx1ZTogMzM1LCBuYW1lOiAn55u05o6l6K6_6ZeuJyB9LAogICAgICAgIHsgdmFsdWU6IDMxMCwgbmFtZTogJ-mCruS7tuiQpemUgCcgfSwKICAgICAgICB7IHZhbHVlOiAyMzQsIG5hbWU6ICfogZTnm5_lub_lkYonIH0sCiAgICAgICAgeyB2YWx1ZTogMTM1LCBuYW1lOiAn6KeG6aKR5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDE1NDgsIG5hbWU6ICfmkJzntKLlvJXmk44nIH0KICAgICAgXQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/aria-pie"></md-example></p>\n<p>生成的图表 DOM 上,会有一个 <code>aria-label</code> 属性,在朗读设备的帮助下,盲人能够了解图表的内容。其值为:</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图,表示访问来源。其数据是——直接访问的数据是335,邮件营销的数据是310,联盟广告的数据是234,视频广告的数据是135,搜索引擎的数据是1548。\n</code></pre>\n<h2 id="%E6%95%B4%E4%BD%93%E4%BF%AE%E6%94%B9%E6%8F%8F%E8%BF%B0" tabindex="-1">整体修改描述</h2>\n<p>对于有些图表,默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图,默认生成的描述可以包含数据点的坐标值,但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p>这时候,用户可以通过 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id="%E5%AE%9A%E5%88%B6%E6%A8%A1%E6%9D%BF%E6%8F%8F%E8%BF%B0" tabindex="-1">定制模板描述</h2>\n<p>除了整体性修改描述之外,我们还提供了生成描述的模板,可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为,如果 <a href="https://echarts.apache.org/option.html#aria.show">aria.show</a> 设置为 <code>true</code>,则生成无障碍访问描述,否则不生成。如果定义了 <a href="https://echarts.apache.org/option.html#aria.description">aria.description</a>,则将其作为图表的完整描述,否则根据模板拼接生成描述。我们提供了默认的生成描述的算法,仅当生成的描述不太合适时,才需要修改这些模板,甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时,先根据是否存在标题 <a href="https://echarts.apache.org/option.html#title.text">title.text</a> 决定使用 <a href="https://echarts.apache.org/option.html#aria.general.withTitle">aria.general.withTitle</a> 还是 <a href="https://echarts.apache.org/option.html#aria.general.withoutTitle">aria.general.withoutTitle</a> 作为整体性描述。其中,<code>aria.general.withTitle</code> 配置项包括模板变量 <code>\'{title}\'</code>,将会被替换成图表标题。也就是说,如果 <code>aria.general.withTitle</code> 被设置为 <code>\'图表的标题是:{title}。\'</code>,则如果包含标题 <code>\'价格分布图\'</code>,这部分的描述为 <code>\'图表的标题是:价格分布图。\'</code>。</p>\n<p>拼接完标题之后,会依次拼接系列的描述(<a href="https://echarts.apache.org/option.html#aria.series">aria.series</a>),和每个系列的数据的描述(<a href="https://echarts.apache.org/option.html#aria.data">aria.data</a>)。同样,每个模板都有可能包括模板变量,用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href="https://echarts.apache.org/option.html#aria">ARIA 文档</a>。</p>\n',postPath:"zh/best-practice/aria"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:c},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:g},{title:5.2,dir:C}]}]},{title:"概念篇",dir:I,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:f,draft:t},{title:"样式",dir:b},{title:"数据集",dir:u},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:x},{title:"事件与行为",dir:S}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:k,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:v},{title:"堆叠柱状图",dir:F},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:y,draft:t},{title:"阶梯瀑布图",dir:D},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:K,children:[{title:"基础折线图",dir:T},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:L},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Z}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:G},{title:"南丁格尔图(玫瑰图)",dir:U}]},{title:"散点图",dir:_,children:[{title:"基础散点图",dir:z}]}]},{title:O,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Y,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:N}]},{title:"交互",dir:j,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:t}]}]},{title:"最佳实践",dir:q,children:[{title:O,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:c},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:g},{title:5.2,dir:C}]}]},{title:"Concepts",dir:I,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:f,draft:t},{title:"Style",dir:b},{title:"Dataset",dir:u},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:x},{title:"Event and Action",dir:S}]},{title:"Application",dir:W,children:[{title:"Common Charts",dir:k,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:v},{title:"Stacked Bar",dir:F},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:y,draft:t},{title:"Waterfall",dir:D}]},{title:"Line",dir:K,children:[{title:"Basic Line",dir:T},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:L},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Z}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:G},{title:"Rose Style",dir:U}]},{title:"Scatter",dir:_,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Y,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:N}]},{title:"Interaction",dir:j,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:t}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/best-practice/aria",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/best-practice/canvas-vs-svg/index.html b/handbook/zh/best-practice/canvas-vs-svg/index.html
index 471fa1d..f8fe02d 100644
--- a/handbook/zh/best-practice/canvas-vs-svg/index.html
+++ b/handbook/zh/best-practice/canvas-vs-svg/index.html
@@ -3,36 +3,21 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="使用-canvas-或者-svg-渲染"><a href="#%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用 Canvas 或者 SVG 渲染</h1>
-<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p>
-<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases" rel="nofollow noopener noreferrer" target="_blank">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器,比较方便。</p>
-<blockquote>
-<p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender" rel="nofollow noopener noreferrer" target="_blank">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>
-</blockquote>
-<h2 id="选择哪种渲染器"><a href="#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>选择哪种渲染器</h2>
-<p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect" rel="nofollow noopener noreferrer" target="_blank">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p>
-<p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>
-<ul>
-<li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li>
-<li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:
-<ul>
-<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/" rel="nofollow noopener noreferrer" target="_blank">水球图</a> 等,SVG 渲染器可能效果更好。</li>
-<li>数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。</li>
-</ul>
-</li>
-</ul>
-<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new" rel="nofollow noopener noreferrer" target="_blank">反馈</a>给我们使用的体验和场景,帮助我们更好的做优化。</p>
-<p>注:当前某些特殊的渲染依然需要依赖 Canvas:如<a href="https://echarts.apache.org/option.html#series-lines.effect" rel="nofollow noopener noreferrer" target="_blank">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap" rel="nofollow noopener noreferrer" target="_blank">带有混合效果的热力图</a>等。</p>
-<h2 id="如何使用渲染器"><a href="#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>如何使用渲染器</h2>
-<p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>然后,我们就可以在代码中,初始化图表实例时,<a href="https://echarts.apache.org//api.html/api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">传入参数</a> 选择渲染器类型:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/best-practice/canvas-vs-svg#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8">选择哪种渲染器</a></li><li class="toc2"><a href="/handbook/zh/best-practice/canvas-vs-svg#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8">如何使用渲染器</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/best-practice/canvas-vs-svg.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,r,i,a,l,d,p,n,s,h,c,o,y,v,u,g,f,m,b,C,E,S,B,x,A,G,V,k,D,P,R,w,z,L,N,_,F,H,I,T,M,U,Z,q,O,$,j,W,X,J,K,Q,Y,ee,te,re,ie,ae,le,de,pe,ne,se,he,ce,oe,ye,ve,ue,ge,fe,me,be){return{layout:"default",data:[{article:{slug:u,toc:[{id:c,depth:2,text:c},{id:o,depth:2,text:o}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"使用-canvas-或者-svg-渲染"},children:[{type:t,tag:a,props:{href:"#%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93",ariaHidden:g,tabIndex:-1},children:[{type:t,tag:f,props:{className:[m,b]},children:[]}]},{type:e,value:"使用 Canvas 或者 SVG 渲染"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"ECharts 从初始一直使用 Canvas 绘制图表。而 "},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/releases",rel:[d,p,n],target:s},children:[{type:e,value:"ECharts v4.0"}]},{type:e,value:" 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 "},{type:t,tag:a,props:{href:"https://echarts.apache.org//api.html#echarts.init",rel:[d,p,n],target:s},children:[{type:e,value:"renderer 参数"}]},{type:e,value:" 为 "},{type:t,tag:C,props:{},children:[{type:e,value:"'canvas'"}]},{type:e,value:" 或 "},{type:t,tag:C,props:{},children:[{type:e,value:"'svg'"}]},{type:e,value:" 即可指定渲染器,比较方便。"}]},{type:e,value:i},{type:t,tag:"blockquote",props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 "},{type:t,tag:a,props:{href:"https://github.com/ecomfe/zrender",rel:[d,p,n],target:s},children:[{type:e,value:"ZRender"}]},{type:e,value:" 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。"}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:"h2",props:{id:c},children:[{type:t,tag:a,props:{href:"#%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8",ariaHidden:g,tabIndex:-1},children:[{type:t,tag:f,props:{className:[m,b]},children:[]}]},{type:e,value:c}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 "},{type:t,tag:a,props:{href:"https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect",rel:[d,p,n],target:s},children:[{type:e,value:"特效"}]},{type:e,value:"。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。"}]},{type:e,value:i},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:y,props:{},children:[{type:e,value:"在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。"}]},{type:e,value:i},{type:t,tag:y,props:{},children:[{type:e,value:"在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n"},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:y,props:{},children:[{type:e,value:"在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 "},{type:t,tag:a,props:{href:"https://ecomfe.github.io/echarts-liquidfill/example/",rel:[d,p,n],target:s},children:[{type:e,value:"水球图"}]},{type:e,value:" 等,SVG 渲染器可能效果更好。"}]},{type:e,value:i},{type:t,tag:y,props:{},children:[{type:e,value:"数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。"}]},{type:e,value:i}]},{type:e,value:i}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"我们强烈欢迎开发者们"},{type:t,tag:a,props:{href:"https://github.com/apache/echarts/issues/new",rel:[d,p,n],target:s},children:[{type:e,value:"反馈"}]},{type:e,value:"给我们使用的体验和场景,帮助我们更好的做优化。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"注:当前某些特殊的渲染依然需要依赖 Canvas:如"},{type:t,tag:a,props:{href:"https://echarts.apache.org/option.html#series-lines.effect",rel:[d,p,n],target:s},children:[{type:e,value:"炫光尾迹特效"}]},{type:e,value:"、"},{type:t,tag:a,props:{href:"https://echarts.apache.org//examples/editor.html?c=heatmap-bmap",rel:[d,p,n],target:s},children:[{type:e,value:"带有混合效果的热力图"}]},{type:e,value:"等。"}]},{type:e,value:i},{type:t,tag:"h2",props:{id:o},children:[{type:t,tag:a,props:{href:"#%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8",ariaHidden:g,tabIndex:-1},children:[{type:t,tag:f,props:{className:[m,b]},children:[]}]},{type:e,value:o}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"如果是用如下的方式完整引入"},{type:t,tag:C,props:{},children:[{type:e,value:"echarts"}]},{type:e,value:",代码中已经包含了 SVG 渲染器和 Canvas 渲染器"}]},{type:e,value:i},{type:t,tag:E,props:{className:[S]},children:[{type:t,tag:B,props:{lang:x,"line-highlights":h,"file-name":h},children:[{type:e,value:"import * as echarts from 'echarts';\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"如果你是按照 "},{type:t,tag:a,props:{href:"zh/basics/import"},children:[{type:e,value:"在项目中引入 Apache ECharts"}]},{type:e,value:" 一文中的介绍使用按需引入,则需要手动引入需要的渲染器"}]},{type:e,value:i},{type:t,tag:E,props:{className:[S]},children:[{type:t,tag:B,props:{lang:x,"line-highlights":h,"file-name":h},children:[{type:e,value:"import * as echarts from 'echarts/core';\n// 可以根据需要选用只用到的渲染器\nimport { SVGRenderer, CanvasRenderer } from 'echarts/renderers';\n\necharts.use([SVGRenderer, CanvasRenderer]);\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"然后,我们就可以在代码中,初始化图表实例时,"},{type:t,tag:a,props:{href:"https://echarts.apache.org//api.html/api.html#echarts.init",rel:[d,p,n],target:s},children:[{type:e,value:"传入参数"}]},{type:e,value:" 选择渲染器类型:"}]},{type:e,value:i},{type:t,tag:E,props:{className:[S]},children:[{type:t,tag:B,props:{lang:x,"line-highlights":h,"file-name":h},children:[{type:e,value:"// 使用 Canvas 渲染器(默认)\nvar chart = echarts.init(containerDom, null, { renderer: 'canvas' });\n// 等价于:\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, { renderer: 'svg' });\n"}]}]}]},dir:"/zh/best-practice",path:G,extension:".md",createdAt:"2021-06-04T12:26:37.923Z",updatedAt:"2021-07-21T10:01:22.869Z"},postPath:"zh/best-practice/canvas-vs-svg"}],fetch:{},error:V,state:{filled:!1,docVersion:h,ghVersion:h,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:k},{title:"入门篇",dir:D,children:[{title:"获取 ECharts",dir:P},{title:"在项目中引入 ECharts",dir:R},{title:"资源列表",dir:w,draft:r},{title:"获取灵感",dir:z},{title:"寻求帮助",dir:L},{title:"版本介绍",dir:N,children:[{title:_,draft:r,dir:F},{title:"ECharts 5 新特性",dir:H},{title:"ECharts 5 升级指南",dir:I}]}]},{title:"概念篇",dir:T,children:[{title:"图表容器及大小",dir:M},{title:"配置项",dir:U,draft:r},{title:"系列",dir:Z,draft:r},{title:"样式",dir:q},{title:"数据集",dir:O},{title:"数据转换",dir:$},{title:"坐标系",dir:j,draft:r},{title:"坐标轴",dir:W},{title:"视觉映射",dir:A},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:K},{title:"堆叠柱状图",dir:Q},{title:"动态排序柱状图",dir:Y,draft:r},{title:"极坐标系柱状图",dir:ee,draft:r},{title:"瀑布图",dir:te,draft:r},{title:"视觉映射的柱状图",dir:A,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:re},{title:"堆叠折线图",dir:ie},{title:"区域面积图",dir:ae},{title:"平滑曲线图",dir:le},{title:"阶梯线图",dir:de}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:pe},{title:"圆环图",dir:ne},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:se,children:[{title:"基础散点图",dir:he}]}]},{title:"移动端优化",dir:v,draft:r},{title:"跨平台方案",dir:ce,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:oe},{title:"数据下钻",dir:ye,draft:r}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ve}]},{title:"交互",dir:ue,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ge,draft:r}]}]},{title:"最佳实践",dir:fe,children:[{title:"移动端优化",dir:v,draft:r},{title:me,dir:u},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:be}]}],en:[{title:"Get Started",dir:k},{title:"Basics",dir:D,children:[{title:"Download ECharts",dir:P},{title:"Import ECharts",dir:R},{title:"Resources",dir:w,draft:r},{title:"Inspiration",dir:z},{title:"Get Help",dir:L},{title:"Release Note",dir:N,children:[{title:_,draft:r,dir:F},{title:"ECharts 5 Features",dir:H},{title:"ECharts 5 Upgrade Guide",dir:I}]}]},{title:"Concepts",dir:T,children:[{title:"Chart Container",dir:M},{title:"Chart Option",dir:U,draft:r},{title:"Series",dir:Z,draft:r},{title:"Style",dir:q},{title:"Dataset",dir:O},{title:"Data Transform",dir:$},{title:"Coordinate",dir:j,draft:r},{title:"Axis",dir:W},{title:"Visual Mapping",dir:A},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:K},{title:"Stacked Bar",dir:Q},{title:"Bar Racing",dir:Y,draft:r},{title:"Bar Polar",dir:ee,draft:r},{title:"Waterfall",dir:te,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:re},{title:"Stacked Line",dir:ie},{title:"Area Chart",dir:ae},{title:"Smoothed Line",dir:le},{title:"Step Line",dir:de}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:pe},{title:"Ring Style",dir:ne},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:se,children:[{title:"Basic Scatter",dir:he}]}]},{title:"Mobile",dir:v,draft:r},{title:"Cross Platform",dir:ce,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:oe},{title:"Drilldown",dir:ye,draft:r}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ve}]},{title:"Interaction",dir:ue,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ge,draft:r}]}]},{title:"Best Practice",dir:fe,children:[{title:"Mobile Optimization",dir:v,draft:r},{title:me,dir:u},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:be}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:G,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:V},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","nofollow","noopener","noreferrer","_blank","","选择哪种渲染器","如何使用渲染器","li","mobile","canvas-vs-svg","true","span","icon","icon-link","code","div","nuxt-content-highlight","md-code-block","js","visual-map","/zh/best-practice/canvas-vs-svg",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1> <p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p> <p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>'canvas'</code> 或 <code>'svg'</code> 即可指定渲染器,比较方便。</p> <blockquote><p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p></blockquote> <h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2> <p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p> <p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p> <ul><li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li> <li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:
+<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 href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p> <h2 id="%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">如何使用渲染器</h2> <p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">// 可以根据需要选用只用到的渲染器</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" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>然后,我们就可以在代码中,初始化图表实例时,<a href="https://echarts.apache.org//api.html/api.html#echarts.init">传入参数</a> 选择渲染器类型:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 使用 Canvas 渲染器(默认)</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">'canvas'</span> <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> 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 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/best-practice/canvas-vs-svg.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,a,l,d,n,c,h,s,o,p,m,g,b,f,v,u,C,E,S,B,y,I,k,G,V,Z,w,L,R,W,X,A,D,J,P,Y,j,x,N,z,F,H,K,M,O,T,U,_,q,Q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-canvas-%E6%88%96%E8%80%85-svg-%E6%B8%B2%E6%9F%93" tabindex="-1">使用 Canvas 或者 SVG 渲染</h1>\n<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说,这两种技术往往是可替换的,效果相近。但是在一些场景中,他们的表现和能力又有一定差异。于是,对它们的选择取舍,就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表。而 <a href="https://github.com/apache/echarts/releases">ECharts v4.0</a> 发布了 SVG 渲染器,从而提供了一种新的选择。只须在初始化一个图表实例时,设置 <a href="https://echarts.apache.org//api.html#echarts.init">renderer 参数</a> 为 <code>\'canvas\'</code> 或 <code>\'svg\'</code> 即可指定渲染器,比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术,能够做到同时被透明支持,主要归功于 ECharts 底层库 <a href="https://github.com/ecomfe/zrender">ZRender</a> 的抽象和实现,形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id="%E9%80%89%E6%8B%A9%E5%93%AA%E7%A7%8D%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">选择哪种渲染器</h2>\n<p>一般来说,Canvas 更适合绘制图形元素数量较多(这一般是由数据量大导致)的图表(如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等),也利于实现某些视觉 <a href="https://echarts.apache.org//examples/editor.html?c=lines-bmap-effect">特效</a>。但是,在不少场景中,SVG 具有重要的优势:它的内存占用更低(这对移动端尤其重要)、并且用户使用浏览器内置的缩放功能时不会模糊。</p>\n<p>选择哪种渲染器,我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好,数据量不大的场景下,两种渲染器都可以适用,并不需要太多纠结。</li>\n<li>在环境较差,出现性能问题需要优化的场景下,可以通过试验来确定使用哪种渲染器。比如有这些经验:\n<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下(可能是因为 Canvas 数量多导致内存占用超出手机承受能力),可以使用 SVG 渲染器来进行改善。大略得说,如果图表运行在低端安卓机,或者我们在使用一些特定图表如 <a href="https://ecomfe.github.io/echarts-liquidfill/example/">水球图</a> 等,SVG 渲染器可能效果更好。</li>\n<li>数据量较大(经验判断 > 1k)、较多交互时,建议选择 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们<a href="https://github.com/apache/echarts/issues/new">反馈</a>给我们使用的体验和场景,帮助我们更好的做优化。</p>\n<p>注:当前某些特殊的渲染依然需要依赖 Canvas:如<a href="https://echarts.apache.org/option.html#series-lines.effect">炫光尾迹特效</a>、<a href="https://echarts.apache.org//examples/editor.html?c=heatmap-bmap">带有混合效果的热力图</a>等。</p>\n<h2 id="%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8%E6%B8%B2%E6%9F%93%E5%99%A8" tabindex="-1">如何使用渲染器</h2>\n<p>如果是用如下的方式完整引入<code>echarts</code>,代码中已经包含了 SVG 渲染器和 Canvas 渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzs\'" line-highlights="\'\'" />\n<p>如果你是按照 <a href="zh/basics/import">在项目中引入 Apache ECharts</a> 一文中的介绍使用按需引入,则需要手动引入需要的渲染器</p>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwovLyDlj6_ku6XmoLnmja7pnIDopoHpgInnlKjlj6rnlKjliLDnmoTmuLLmn5PlmagKaW1wb3J0IHsgU1ZHUmVuZGVyZXIsIENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKZWNoYXJ0cy51c2UoW1NWR1JlbmRlcmVyLCBDYW52YXNSZW5kZXJlcl0pOw\'" line-highlights="\'\'" />\n<p>然后,我们就可以在代码中,初始化图表实例时,<a href="https://echarts.apache.org//api.html/api.html#echarts.init">传入参数</a> 选择渲染器类型:</p>\n<md-code-block lang="js" code="\'Ly8g5L2_55SoIENhbnZhcyDmuLLmn5PlmajvvIjpu5jorqTvvIkKdmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGNvbnRhaW5lckRvbSwgbnVsbCwgeyByZW5kZXJlcjogJ2NhbnZhcycgfSk7Ci8vIOetieS7t-S6ju-8mgp2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoY29udGFpbmVyRG9tKTsKCi8vIOS9v-eUqCBTVkcg5riy5p-T5ZmoCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChjb250YWluZXJEb20sIG51bGwsIHsgcmVuZGVyZXI6ICdzdmcnIH0pOw\'" line-highlights="\'\'" />\n',postPath:"zh/best-practice/canvas-vs-svg"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:a},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:h},{title:"寻求帮助",dir:s},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:m},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:f},{title:"配置项",dir:v,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:C},{title:"数据集",dir:E},{title:"数据转换",dir:S},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:I},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:G,children:[{title:"常用图表类型",dir:V,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Z},{title:"堆叠柱状图",dir:w},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:W},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:X,children:[{title:"基础折线图",dir:A},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:J},{title:"平滑曲线图",dir:P},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:j},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:F}]}]},{title:H,dir:i,draft:t},{title:"跨平台方案",dir:K,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:M}]},{title:"数据处理",dir:O,children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:a},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:h},{title:"Get Help",dir:s},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:m},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:f},{title:"Chart Option",dir:v,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:C},{title:"Dataset",dir:E},{title:"Data Transform",dir:S},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:I},{title:"Event and Action",dir:k}]},{title:"Application",dir:G,children:[{title:"Common Charts",dir:V,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Z},{title:"Stacked Bar",dir:w},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:W}]},{title:"Line",dir:X,children:[{title:"Basic Line",dir:A},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:J},{title:"Smoothed Line",dir:P},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:j},{title:"Ring Style",dir:x},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:K,children:[{title:"Server Side Rendering",dir:M}]},{title:"Data",dir:O,children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/best-practice/canvas-vs-svg",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/axis/index.html b/handbook/zh/concepts/axis/index.html
index 38ad52b..a940532 100644
--- a/handbook/zh/concepts/axis/index.html
+++ b/handbook/zh/concepts/axis/index.html
@@ -3,36 +3,278 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="坐标轴"><a href="#%E5%9D%90%E6%A0%87%E8%BD%B4" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>坐标轴</h1>
-<p>直角坐标系中的 x/y 轴。</p>
-<h2 id="x-轴、y-轴"><a href="#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>x 轴、y 轴</h2>
-<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>
-<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">
-
-<p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset" rel="nofollow noopener noreferrer" target="_blank">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="轴线"><a href="#%E8%BD%B4%E7%BA%BF" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>轴线</h2>
-<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine" rel="nofollow noopener noreferrer" target="_blank">axisLine</a> 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="刻度"><a href="#%E5%88%BB%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度</h2>
-<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick" rel="nofollow noopener noreferrer" target="_blank">axisTick</a> 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="刻度标签"><a href="#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>刻度标签</h2>
-<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel" rel="nofollow noopener noreferrer" target="_blank">axisLabel</a> 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="示例"><a href="#%E7%A4%BA%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>示例</h2>
-<p>图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis" rel="nofollow noopener noreferrer" target="_blank">官网</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/axis#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4">x 轴、y 轴</a></li><li class="toc2"><a href="/handbook/zh/concepts/axis#%E8%BD%B4%E7%BA%BF">轴线</a></li><li class="toc2"><a href="/handbook/zh/concepts/axis#%E5%88%BB%E5%BA%A6">刻度</a></li><li class="toc2"><a href="/handbook/zh/concepts/axis#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE">刻度标签</a></li><li class="toc2"><a href="/handbook/zh/concepts/axis#%E7%A4%BA%E4%BE%8B">示例</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/axis.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,n,r,l,d,p,s,h,o,c,y,g,u,x,v,m,f,b,A,B,E,C,k,L,S,N,P,w,D,I,R,T,H,_,z,G,V,M,U,Z,j,F,O,W,$,X,q,J,K,Q,Y,ee,te,ie,ae,ne,re,le,de,pe,se,he,oe,ce,ye,ge,ue,xe,ve,me,fe,be,Ae,Be,Ee,Ce,ke,Le){return{layout:"default",data:[{article:{slug:L,toc:[{id:w,depth:2,text:D},{id:A,depth:2,text:A},{id:B,depth:2,text:B},{id:E,depth:2,text:E},{id:C,depth:2,text:C}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:S},children:[{type:t,tag:r,props:{href:"#%E5%9D%90%E6%A0%87%E8%BD%B4",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:S}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"直角坐标系中的 x/y 轴。"}]},{type:e,value:a},{type:t,tag:x,props:{id:w},children:[{type:t,tag:r,props:{href:"#x-%E8%BD%B4%E3%80%81y-%E8%BD%B4",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:D}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据"}]},{type:e,value:a},{type:t,tag:"img",props:{"max-width":"830",width:I,height:I,src:"images/design/axis/charts_axis_img02.jpg"},children:[]},{type:e,value:"\n\n"},{type:t,tag:l,props:{},children:[{type:e,value:"普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n // ...\n },\n yAxis: {\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: {\n type: 'value',\n name: '销售数量'\n // ...\n },\n dataZoom: [\n // ...\n ]\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#xAxis.offset",rel:[v,m,f],target:b},children:[{type:e,value:"offset"}]},{type:e,value:" 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n type: 'time',\n name: '销售时间'\n // ...\n },\n yAxis: [\n {\n type: 'value',\n name: '销售数量'\n // ...\n },\n {\n type: 'value',\n name: '销售金额'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:x,props:{id:A},children:[{type:t,tag:r,props:{href:"#%E8%BD%B4%E7%BA%BF",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:N},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#xAxis.axisLine",rel:[v,m,f],target:b},children:[{type:e,value:"axisLine"}]},{type:e,value:" 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisLine: {\n symbol: 'arrow',\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:x,props:{id:B},children:[{type:t,tag:r,props:{href:"#%E5%88%BB%E5%BA%A6",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:B}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:N},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#xAxis.axisTick",rel:[v,m,f],target:b},children:[{type:e,value:"axisTick"}]},{type:e,value:" 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n // ...\n },\n yAxis: {\n axisTick: {\n length: 6,\n lineStyle: {\n type: 'dashed'\n // ...\n }\n }\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:x,props:{id:E},children:[{type:t,tag:r,props:{href:"#%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:N},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#xAxis.axisLabel",rel:[v,m,f],target:b},children:[{type:e,value:"axisLabel"}]},{type:e,value:" 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:h,props:{lang:s,"line-highlights":n,"file-name":n},children:[{type:e,value:"option = {\n xAxis: {\n axisLabel: {\n formatter: '{value} kg',\n align: 'center'\n // ...\n }\n // ...\n },\n yAxis: {\n axisLabel: {\n formatter: '{value} 元',\n align: 'center'\n // ...\n }\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:x,props:{id:C},children:[{type:t,tag:r,props:{href:"#%E7%A4%BA%E4%BE%8B",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[g,u]},children:[]}]},{type:e,value:C}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。"}]},{type:e,value:a},{type:t,tag:d,props:{className:[p]},children:[{type:t,tag:"md-live",props:{lang:s,layout:"tb"},children:[{type:e,value:"option = {\n tooltip: {\n trigger: 'axis',\n axisPointer: { type: 'cross' }\n },\n legend: {},\n xAxis: [\n {\n type: 'category',\n axisTick: {\n alignWithLabel: true\n },\n data: [\n '1月',\n '2月',\n '3月',\n '4月',\n '5月',\n '6月',\n '7月',\n '8月',\n '9月',\n '10月',\n '11月',\n '12月'\n ]\n }\n ],\n yAxis: [\n {\n type: 'value',\n name: '降水量',\n min: 0,\n max: 250,\n position: 'right',\n axisLabel: {\n formatter: '{value} ml'\n }\n },\n {\n type: 'value',\n name: '温度',\n min: 0,\n max: 25,\n position: 'left',\n axisLabel: {\n formatter: '{value} °C'\n }\n }\n ],\n series: [\n {\n name: '降水量',\n type: 'bar',\n yAxisIndex: 0,\n data: [6, 32, 70, 86, 68.7, 100.7, 125.6, 112.2, 78.7, 48.8, 36.0, 19.3]\n },\n {\n name: '温度',\n type: 'line',\n smooth: true,\n yAxisIndex: 1,\n data: [\n 6.0,\n 10.2,\n 10.3,\n 11.5,\n 10.3,\n 13.2,\n 14.3,\n 16.4,\n 18.0,\n 16.5,\n 12.0,\n 5.2\n ]\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:l,props:{},children:[{type:e,value:"这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步"},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#xAxis",rel:[v,m,f],target:b},children:[{type:e,value:"官网"}]},{type:e,value:"。"}]}]},dir:"/zh/concepts",path:R,extension:".md",createdAt:"2021-06-04T12:26:37.933Z",updatedAt:"2021-07-19T11:24:02.724Z"},postPath:"zh/concepts/axis"}],fetch:{},error:T,state:{filled:!1,docVersion:n,ghVersion:n,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:H},{title:"入门篇",dir:_,children:[{title:"获取 ECharts",dir:z},{title:"在项目中引入 ECharts",dir:G},{title:"资源列表",dir:V,draft:i},{title:"获取灵感",dir:M},{title:"寻求帮助",dir:U},{title:"版本介绍",dir:Z,children:[{title:j,draft:i,dir:F},{title:"ECharts 5 新特性",dir:O},{title:"ECharts 5 升级指南",dir:W}]}]},{title:"概念篇",dir:$,children:[{title:"图表容器及大小",dir:X},{title:"配置项",dir:q,draft:i},{title:"系列",dir:J,draft:i},{title:"样式",dir:K},{title:"数据集",dir:Q},{title:"数据转换",dir:Y},{title:"坐标系",dir:ee,draft:i},{title:S,dir:L},{title:"视觉映射",dir:P},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:te,children:[{title:"常用图表类型",dir:ie,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:ae},{title:"堆叠柱状图",dir:ne},{title:"动态排序柱状图",dir:re,draft:i},{title:"极坐标系柱状图",dir:le,draft:i},{title:"瀑布图",dir:de,draft:i},{title:"视觉映射的柱状图",dir:P,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:pe},{title:"堆叠折线图",dir:se},{title:"区域面积图",dir:he},{title:"平滑曲线图",dir:oe},{title:"阶梯线图",dir:ce}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ye},{title:"圆环图",dir:ge},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ue,children:[{title:"基础散点图",dir:xe}]}]},{title:"移动端优化",dir:k,draft:i},{title:"跨平台方案",dir:ve,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:me},{title:"数据下钻",dir:fe,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:be}]},{title:"交互",dir:Ae,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Be,draft:i}]}]},{title:"最佳实践",dir:Ee,children:[{title:"移动端优化",dir:k,draft:i},{title:Ce,dir:ke},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Le}]}],en:[{title:"Get Started",dir:H},{title:"Basics",dir:_,children:[{title:"Download ECharts",dir:z},{title:"Import ECharts",dir:G},{title:"Resources",dir:V,draft:i},{title:"Inspiration",dir:M},{title:"Get Help",dir:U},{title:"Release Note",dir:Z,children:[{title:j,draft:i,dir:F},{title:"ECharts 5 Features",dir:O},{title:"ECharts 5 Upgrade Guide",dir:W}]}]},{title:"Concepts",dir:$,children:[{title:"Chart Container",dir:X},{title:"Chart Option",dir:q,draft:i},{title:"Series",dir:J,draft:i},{title:"Style",dir:K},{title:"Dataset",dir:Q},{title:"Data Transform",dir:Y},{title:"Coordinate",dir:ee,draft:i},{title:"Axis",dir:L},{title:"Visual Mapping",dir:P},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:te,children:[{title:"Common Charts",dir:ie,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:ae},{title:"Stacked Bar",dir:ne},{title:"Bar Racing",dir:re,draft:i},{title:"Bar Polar",dir:le,draft:i},{title:"Waterfall",dir:de,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:pe},{title:"Stacked Line",dir:se},{title:"Area Chart",dir:he},{title:"Smoothed Line",dir:oe},{title:"Step Line",dir:ce}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ye},{title:"Ring Style",dir:ge},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ue,children:[{title:"Basic Scatter",dir:xe}]}]},{title:"Mobile",dir:k,draft:i},{title:"Cross Platform",dir:ve,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:me},{title:"Drilldown",dir:fe,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:be}]},{title:"Interaction",dir:Ae,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Be,draft:i}]}]},{title:"Best Practice",dir:Ee,children:[{title:"Mobile Optimization",dir:k,draft:i},{title:Ce,dir:ke},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Le}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:R,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:T},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","a","p","div","nuxt-content-highlight","js","md-code-block","true",-1,"span","icon","icon-link","h2","nofollow","noopener","noreferrer","_blank","轴线","刻度","刻度标签","示例","mobile","axis","坐标轴","ECharts 提供了轴线 ","visual-map","x-轴、y-轴","x 轴、y 轴","100%","/zh/concepts/axis",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1> <p>直角坐标系中的 x/y 轴。</p> <h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2> <p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p> <img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg"> <p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E8%BD%B4%E7%BA%BF" tabindex="-1">轴线</h2> <p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a> 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%88%BB%E5%BA%A6" tabindex="-1">刻度</h2> <p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a> 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" tabindex="-1">刻度标签</h2> <p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a> 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2> <p>图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。</p> <div class="md-live layout-tb"><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 = {
+ 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 number">100.7</span><span class="token punctuation">,</span> <span class="token number">125.6</span><span class="token punctuation">,</span> <span class="token number">112.2</span><span class="token punctuation">,</span> <span class="token number">78.7</span><span class="token punctuation">,</span> <span class="token number">48.8</span><span class="token punctuation">,</span> <span class="token number">36.0</span><span class="token punctuation">,</span> <span class="token number">19.3</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">'温度'</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</a>。</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/zh/concepts/axis.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,g,C,I,A,l,d,r,a,o,n,h,s,c,p,B,u,w,b,L,m,y,G,x,f,K,H,W,Z,D,E,O,X,v,S,z,J,M,N,Y,F,T,R,V,k,j,U,P,Q,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9D%90%E6%A0%87%E8%BD%B4" tabindex="-1">坐标轴</h1>\n<p>直角坐标系中的 x/y 轴。</p>\n<h2 id="x-%E8%BD%B4%E3%80%81y-%E8%BD%B4" tabindex="-1">x 轴、y 轴</h2>\n<p>x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据</p>\n<img max-width="830" width="100%" height="100%" src="images/design/axis/charts_axis_img02.jpg">\n</img>\n<p>普通的二维数据坐标系都有 x 轴和 y 轴,通常情况下,x 轴显示在图表的底部,y 轴显示在左侧,一般配置如下:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICAvLyAuLi4KICB9LAogIHlBeGlzOiB7CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<p>x 轴常用来标示数据的维度,维度一般用来指数据的类别,是观察数据的角度,例如“销售时间” “销售地点” “产品名称”等。y 轴常常用来标示数据的数值,数值是用来具体考察某一类数据的数量值,也是我们需要分析的指标,例如“销售数量”和“销售金额”等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>当 x 轴(水平坐标轴)跨度很大,可以采用才区域缩放方式灵活显示数据内容。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogewogICAgdHlwZTogJ3ZhbHVlJywKICAgIG5hbWU6ICfplIDllK7mlbDph48nCiAgICAvLyAuLi4KICB9LAogIGRhdGFab29tOiBbCiAgICAvLyAuLi4KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<p>在二维数据中,轴也可以有多个。ECharts 中一般情况下单个 grid 组件最多只能放两个 x/y 轴,多于两个 x/y 轴需要通过配置 <a href="https://echarts.apache.org/option.html#xAxis.offset">offset</a> 属性防止同个位置多个轴的重叠。两个 x 轴显示在上下,两个 y 轴显示在左右两侧。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAndGltZScsCiAgICBuYW1lOiAn6ZSA5ZSu5pe26Ze0JwogICAgLy8gLi4uCiAgfSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZSA5ZSu5pWw6YePJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfplIDllK7ph5Hpop0nCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BD%B4%E7%BA%BF" tabindex="-1">轴线</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLine">axisLine</a> 相关的配置,我们可以根据实际情况调整,例如轴线两端的箭头,轴线的样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGluZTogewogICAgICBzeW1ib2w6ICdhcnJvdycsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMaW5lOiB7CiAgICAgIHN5bWJvbDogJ2Fycm93JywKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6" tabindex="-1">刻度</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisTick">axisTick</a> 相关的配置,我们可以根据实际情况调整,例如刻度线的长度,样式等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzVGljazogewogICAgICBsZW5ndGg6IDYsCiAgICAgIGxpbmVTdHlsZTogewogICAgICAgIHR5cGU6ICdkYXNoZWQnCiAgICAgICAgLy8gLi4uCiAgICAgIH0KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNUaWNrOiB7CiAgICAgIGxlbmd0aDogNiwKICAgICAgbGluZVN0eWxlOiB7CiAgICAgICAgdHlwZTogJ2Rhc2hlZCcKICAgICAgICAvLyAuLi4KICAgICAgfQogICAgfQogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%88%BB%E5%BA%A6%E6%A0%87%E7%AD%BE" tabindex="-1">刻度标签</h2>\n<p>ECharts 提供了轴线 <a href="https://echarts.apache.org/option.html#xAxis.axisLabel">axisLabel</a> 相关的配置,我们可以根据实际情况调整,例如文字对齐方式,自定义刻度标签内容等。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBheGlzTGFiZWw6IHsKICAgICAgZm9ybWF0dGVyOiAne3ZhbHVlfSBrZycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0sCiAgeUF4aXM6IHsKICAgIGF4aXNMYWJlbDogewogICAgICBmb3JtYXR0ZXI6ICd7dmFsdWV9IOWFgycsCiAgICAgIGFsaWduOiAnY2VudGVyJwogICAgICAvLyAuLi4KICAgIH0KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%A4%BA%E4%BE%8B" tabindex="-1">示例</h2>\n<p>图左侧的 y 轴代表东京月平均气温,右侧的 y 轴表示东京降水量,x 轴表示时间。两组 y 轴在一起,反映了平均气温和降水量间的趋势关系。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRvb2x0aXA6IHsKICAgIHRyaWdnZXI6ICdheGlzJywKICAgIGF4aXNQb2ludGVyOiB7IHR5cGU6ICdjcm9zcycgfQogIH0sCiAgbGVnZW5kOiB7fSwKICB4QXhpczogWwogICAgewogICAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgICBheGlzVGljazogewogICAgICAgIGFsaWduV2l0aExhYmVsOiB0cnVlCiAgICAgIH0sCiAgICAgIGRhdGE6IFsKICAgICAgICAnMeaciCcsCiAgICAgICAgJzLmnIgnLAogICAgICAgICcz5pyIJywKICAgICAgICAnNOaciCcsCiAgICAgICAgJzXmnIgnLAogICAgICAgICc25pyIJywKICAgICAgICAnN-aciCcsCiAgICAgICAgJzjmnIgnLAogICAgICAgICc55pyIJywKICAgICAgICAnMTDmnIgnLAogICAgICAgICcxMeaciCcsCiAgICAgICAgJzEy5pyIJwogICAgICBdCiAgICB9CiAgXSwKICB5QXhpczogWwogICAgewogICAgICB0eXBlOiAndmFsdWUnLAogICAgICBuYW1lOiAn6ZmN5rC06YePJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDI1MCwKICAgICAgcG9zaXRpb246ICdyaWdodCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gbWwnCiAgICAgIH0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScsCiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICBtaW46IDAsCiAgICAgIG1heDogMjUsCiAgICAgIHBvc2l0aW9uOiAnbGVmdCcsCiAgICAgIGF4aXNMYWJlbDogewogICAgICAgIGZvcm1hdHRlcjogJ3t2YWx1ZX0gwrBDJwogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mZjeawtOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICB5QXhpc0luZGV4OiAwLAogICAgICBkYXRhOiBbNiwgMzIsIDcwLCA4NiwgNjguNywgMTAwLjcsIDEyNS42LCAxMTIuMiwgNzguNywgNDguOCwgMzYuMCwgMTkuM10KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICfmuKnluqYnLAogICAgICB0eXBlOiAnbGluZScsCiAgICAgIHNtb290aDogdHJ1ZSwKICAgICAgeUF4aXNJbmRleDogMSwKICAgICAgZGF0YTogWwogICAgICAgIDYuMCwKICAgICAgICAxMC4yLAogICAgICAgIDEwLjMsCiAgICAgICAgMTEuNSwKICAgICAgICAxMC4zLAogICAgICAgIDEzLjIsCiAgICAgICAgMTQuMywKICAgICAgICAxNi40LAogICAgICAgIDE4LjAsCiAgICAgICAgMTYuNSwKICAgICAgICAxMi4wLAogICAgICAgIDUuMgogICAgICBdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<p>这里简要介绍了坐标轴相关的常用配置项及用法,更多关于坐标轴配置项及用法请移步<a href="https://echarts.apache.org/option.html#xAxis">官网</a>。</p>\n',postPath:"zh/concepts/axis"}],fetch:{},error:g,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:C},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:A},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:i},{title:"获取灵感",dir:r},{title:"寻求帮助",dir:a},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:h},{title:5.2,dir:s}]}]},{title:"概念篇",dir:c,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:i},{title:"系列",dir:u,draft:i},{title:"样式",dir:w},{title:"数据集",dir:b},{title:"数据转换",dir:L},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:e},{title:"图例",dir:G},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:f,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:H},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:Z},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:E},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:O,children:[{title:"基础折线图",dir:X},{title:"堆叠折线图",dir:v},{title:"区域面积图",dir:S},{title:"平滑曲线图",dir:z},{title:"阶梯线图",dir:J}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:M},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:Y}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:T}]}]},{title:R,dir:t,draft:i},{title:"跨平台方案",dir:V,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:P,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:R,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:C},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:A},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:i},{title:"Inspiration",dir:r},{title:"Get Help",dir:a},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:h},{title:5.2,dir:s}]}]},{title:"Concepts",dir:c,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:i},{title:"Series",dir:u,draft:i},{title:"Style",dir:w},{title:"Dataset",dir:b},{title:"Data Transform",dir:L},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:e},{title:"Legend",dir:G},{title:"Event and Action",dir:x}]},{title:"Application",dir:f,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:H},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:Z},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:E}]},{title:"Line",dir:O,children:[{title:"Basic Line",dir:X},{title:"Stacked Line",dir:v},{title:"Area Chart",dir:S},{title:"Smoothed Line",dir:z},{title:"Step Line",dir:J}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:M},{title:"Ring Style",dir:N},{title:"Rose Style",dir:Y}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:V,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:P,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/axis",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:g}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/chart-size/index.html b/handbook/zh/concepts/chart-size/index.html
index 76f4dda..dabd02c 100644
--- a/handbook/zh/concepts/chart-size/index.html
+++ b/handbook/zh/concepts/chart-size/index.html
@@ -3,39 +3,38 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="图表容器及大小"><a href="#%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>图表容器及大小</h1>
-<p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p>
-<p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p>
-<h2 id="初始化"><a href="#%E5%88%9D%E5%A7%8B%E5%8C%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>初始化</h2>
-<h3 id="在-html-中定义有宽度和高度的父容器(推荐)"><a href="#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在 HTML 中定义有宽度和高度的父容器(推荐)</h3>
-<p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p>
-<h3 id="指定图表的大小"><a href="#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>指定图表的大小</h3>
-<p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="响应容器大小的变化"><a href="#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>响应容器大小的变化</h2>
-<h3 id="监听图表容器的大小并改变图表大小"><a href="#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>监听图表容器的大小并改变图表大小</h3>
-<p>在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。</p>
-<p>比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。</p>
-<p>这种情况下,可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件,然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.resize</code></a> 改变图表的大小。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="为图表设置特定的大小"><a href="#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>为图表设置特定的大小</h3>
-<p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p><strong>小贴士:</strong> 阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p>
-</blockquote>
-<h3 id="容器节点被销毁以及被重建时"><a href="#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>容器节点被销毁以及被重建时</h3>
-<p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p>
-<p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p>
-<p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> 初始化。</p>
-<blockquote>
-<p><strong>小贴士:</strong> 在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose" rel="nofollow noopener noreferrer" target="_blank"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p>
-</blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/chart-size#%E5%88%9D%E5%A7%8B%E5%8C%96">初始化</a></li><li class="toc3"><a href="/handbook/zh/concepts/chart-size#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89">在 HTML 中定义有宽度和高度的父容器(推荐)</a></li><li class="toc3"><a href="/handbook/zh/concepts/chart-size#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F">指定图表的大小</a></li><li class="toc2"><a href="/handbook/zh/concepts/chart-size#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96">响应容器大小的变化</a></li><li class="toc3"><a href="/handbook/zh/concepts/chart-size#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F">监听图表容器的大小并改变图表大小</a></li><li class="toc3"><a href="/handbook/zh/concepts/chart-size#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F">为图表设置特定的大小</a></li><li class="toc3"><a href="/handbook/zh/concepts/chart-size#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6">容器节点被销毁以及被重建时</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/chart-size.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,r,a,l,d,p,n,s,h,c,o,y,g,E,u,v,A,m,B,f,b,C,x,w,I,z,P,S,D,k,F,N,H,L,R,M,T,_,G,V,j,O,U,Z,$,q,W,X,J,K,Q,Y,ee,te,ie,re,ae,le,de,pe,ne,se,he,ce,oe,ye,ge,Ee,ue,ve,Ae,me,Be,fe,be,Ce,xe,we,Ie,ze,Pe,Se,De){return{layout:"default",data:[{article:{slug:P,toc:[{id:A,depth:2,text:A},{id:H,depth:3,text:L},{id:m,depth:3,text:m},{id:B,depth:2,text:B},{id:f,depth:3,text:f},{id:b,depth:3,text:b},{id:C,depth:3,text:C}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:S},children:[{type:t,tag:a,props:{href:"#%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:S}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"在"},{type:t,tag:a,props:{href:"zh/get-started"},children:[{type:e,value:R}]},{type:e,value:"中,我们介绍了初始化 ECharts 的接口 "},{type:t,tag:a,props:{href:D,rel:[y,g,E],target:u},children:[{type:t,tag:d,props:{},children:[{type:e,value:k}]}]},{type:e,value:"。"},{type:t,tag:a,props:{href:D,rel:[y,g,E],target:u},children:[{type:e,value:"API 文档"}]},{type:e,value:"中详细介绍了参数的具体含义,建议理解后再阅读本文。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。"}]},{type:e,value:i},{type:t,tag:"h2",props:{id:A},children:[{type:t,tag:a,props:{href:"#%E5%88%9D%E5%A7%8B%E5%8C%96",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:A}]},{type:e,value:i},{type:t,tag:v,props:{id:H},children:[{type:t,tag:a,props:{href:"#%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:L}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"通常来说,需要在 HTML 中先定义一个 "},{type:t,tag:d,props:{},children:[{type:e,value:"<div>"}]},{type:e,value:" 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 "},{type:t,tag:d,props:{},children:[{type:e,value:"opts.width"}]},{type:e,value:" 或 "},{type:t,tag:d,props:{},children:[{type:e,value:"opts.height"}]},{type:e,value:" 将其覆盖。"}]},{type:e,value:i},{type:t,tag:x,props:{className:[w]},children:[{type:t,tag:I,props:{lang:F,"line-highlights":p,"file-name":p},children:[{type:e,value:'<div id="main" style="width: 600px;height:400px;"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"需要注意的是,使用这种方法在调用 "},{type:t,tag:d,props:{},children:[{type:e,value:k}]},{type:e,value:" 时需保证容器已经有宽度和高度了。"}]},{type:e,value:i},{type:t,tag:v,props:{id:m},children:[{type:t,tag:a,props:{href:"#%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:m}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。"}]},{type:e,value:i},{type:t,tag:x,props:{className:[w]},children:[{type:t,tag:I,props:{lang:F,"line-highlights":p,"file-name":p},children:[{type:e,value:'<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'), null, {\n width: 600,\n height: 400\n });\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:"h2",props:{id:B},children:[{type:t,tag:a,props:{href:"#%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:B}]},{type:e,value:i},{type:t,tag:v,props:{id:f},children:[{type:t,tag:a,props:{href:"#%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:f}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"这种情况下,可以监听页面的 "},{type:t,tag:d,props:{},children:[{type:e,value:"window.onresize"}]},{type:e,value:" 事件获取浏览器大小改变的事件,然后调用 "},{type:t,tag:a,props:{href:"https://echarts.apache.org/api.html#echartsInstance.resize",rel:[y,g,E],target:u},children:[{type:t,tag:d,props:{},children:[{type:e,value:"echartsInstance.resize"}]}]},{type:e,value:" 改变图表的大小。"}]},{type:e,value:i},{type:t,tag:x,props:{className:[w]},children:[{type:t,tag:I,props:{lang:F,"line-highlights":p,"file-name":p},children:[{type:e,value:'<style>\n #main,\n html,\n body {\n width: 100%;\n }\n #main {\n height: 400px;\n }\n</style>\n<div id="main"></div>\n<script type="text/javascript">\n var myChart = echarts.init(document.getElementById(\'main\'));\n window.onresize = function() {\n myChart.resize();\n };\n<\/script>\n'}]}]},{type:e,value:i},{type:t,tag:v,props:{id:b},children:[{type:t,tag:a,props:{href:"#%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:b}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"除了直接调用 "},{type:t,tag:d,props:{},children:[{type:e,value:"resize()"}]},{type:e,value:" 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。"}]},{type:e,value:i},{type:t,tag:x,props:{className:[w]},children:[{type:t,tag:I,props:{lang:"js","line-highlights":p,"file-name":p},children:[{type:e,value:"myChart.resize({\n width: 800,\n height: 400\n});\n"}]}]},{type:e,value:i},{type:t,tag:M,props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:t,tag:T,props:{},children:[{type:e,value:_}]},{type:e,value:" 阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。"}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:v,props:{id:C},children:[{type:t,tag:a,props:{href:"#%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6",ariaHidden:n,tabIndex:s},children:[{type:t,tag:h,props:{className:[c,o]},children:[]}]},{type:e,value:C}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"正确的做法是,在图表容器被销毁之后,调用 "},{type:t,tag:a,props:{href:G,rel:[y,g,E],target:u},children:[{type:t,tag:d,props:{},children:[{type:e,value:V}]}]},{type:e,value:" 销毁实例,在图表容器重新被添加后再次调用 "},{type:t,tag:a,props:{href:D,rel:[y,g,E],target:u},children:[{type:e,value:k}]},{type:e,value:" 初始化。"}]},{type:e,value:i},{type:t,tag:M,props:{},children:[{type:e,value:i},{type:t,tag:l,props:{},children:[{type:t,tag:T,props:{},children:[{type:e,value:_}]},{type:e,value:" 在容器节点被销毁时,总是应调用 "},{type:t,tag:a,props:{href:G,rel:[y,g,E],target:u},children:[{type:t,tag:d,props:{},children:[{type:e,value:V}]}]},{type:e,value:" 以销毁实例释放资源,避免内存泄漏。"}]},{type:e,value:i}]}]},dir:"/zh/concepts",path:j,extension:".md",createdAt:"2021-06-04T12:26:37.933Z",updatedAt:"2021-07-24T08:31:59.778Z"},postPath:"zh/concepts/chart-size"}],fetch:{},error:O,state:{filled:!1,docVersion:p,ghVersion:p,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:R,dir:U},{title:"入门篇",dir:Z,children:[{title:"获取 ECharts",dir:$},{title:"在项目中引入 ECharts",dir:q},{title:"资源列表",dir:W,draft:r},{title:"获取灵感",dir:X},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:J,children:[{title:K,draft:r,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:Q},{title:"ECharts 5 升级指南",dir:Y}]}]},{title:"概念篇",dir:ee,children:[{title:S,dir:P},{title:"配置项",dir:te,draft:r},{title:"系列",dir:"series",draft:r},{title:"样式",dir:"style"},{title:"数据集",dir:ie},{title:"数据转换",dir:re},{title:"坐标系",dir:ae,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:N},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:le,children:[{title:"常用图表类型",dir:de,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:pe},{title:"堆叠柱状图",dir:ne},{title:"动态排序柱状图",dir:se,draft:r},{title:"极坐标系柱状图",dir:he,draft:r},{title:"瀑布图",dir:ce,draft:r},{title:"视觉映射的柱状图",dir:N,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:oe},{title:"堆叠折线图",dir:ye},{title:"区域面积图",dir:ge},{title:"平滑曲线图",dir:Ee},{title:"阶梯线图",dir:ue}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ve},{title:"圆环图",dir:Ae},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:me,children:[{title:"基础散点图",dir:Be}]}]},{title:"移动端优化",dir:z,draft:r},{title:"跨平台方案",dir:fe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:be},{title:"数据下钻",dir:Ce,draft:r}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:xe}]},{title:"交互",dir:we,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ie,draft:r}]}]},{title:"最佳实践",dir:ze,children:[{title:"移动端优化",dir:z,draft:r},{title:Pe,dir:Se},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:De}]}],en:[{title:"Get Started",dir:U},{title:"Basics",dir:Z,children:[{title:"Download ECharts",dir:$},{title:"Import ECharts",dir:q},{title:"Resources",dir:W,draft:r},{title:"Inspiration",dir:X},{title:"Get Help",dir:"help"},{title:"Release Note",dir:J,children:[{title:K,draft:r,dir:"5-2-0"},{title:"ECharts 5 Features",dir:Q},{title:"ECharts 5 Upgrade Guide",dir:Y}]}]},{title:"Concepts",dir:ee,children:[{title:"Chart Container",dir:P},{title:"Chart Option",dir:te,draft:r},{title:"Series",dir:"series",draft:r},{title:"Style",dir:"style"},{title:"Dataset",dir:ie},{title:"Data Transform",dir:re},{title:"Coordinate",dir:ae,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:N},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:le,children:[{title:"Common Charts",dir:de,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:pe},{title:"Stacked Bar",dir:ne},{title:"Bar Racing",dir:se,draft:r},{title:"Bar Polar",dir:he,draft:r},{title:"Waterfall",dir:ce,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:oe},{title:"Stacked Line",dir:ye},{title:"Area Chart",dir:ge},{title:"Smoothed Line",dir:Ee},{title:"Step Line",dir:ue}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ve},{title:"Ring Style",dir:Ae},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:me,children:[{title:"Basic Scatter",dir:Be}]}]},{title:"Mobile",dir:z,draft:r},{title:"Cross Platform",dir:fe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:be},{title:"Drilldown",dir:Ce,draft:r}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:xe}]},{title:"Interaction",dir:we,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ie,draft:r}]}]},{title:"Best Practice",dir:ze,children:[{title:"Mobile Optimization",dir:z,draft:r},{title:Pe,dir:Se},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:De}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:j,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:O},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","code","","true",-1,"span","icon","icon-link","nofollow","noopener","noreferrer","_blank","h3","初始化","指定图表的大小","响应容器大小的变化","监听图表容器的大小并改变图表大小","为图表设置特定的大小","容器节点被销毁以及被重建时","div","nuxt-content-highlight","md-code-block","mobile","chart-size","图表容器及大小","https://echarts.apache.org//api.html#echarts.init","echarts.init","html","visual-map","在-html-中定义有宽度和高度的父容器(推荐)","在 HTML 中定义有宽度和高度的父容器(推荐)","快速上手","blockquote","strong","小贴士:","https://echarts.apache.org/api.html#echartsInstance.dispose","echartsInstance.dispose","/zh/concepts/chart-size",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1> <p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p> <p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p> <h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2> <h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3> <p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p> <h3 id="%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">指定图表的大小</h3> <p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" tabindex="-1">响应容器大小的变化</h2> <h3 id="%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" tabindex="-1">监听图表容器的大小并改变图表大小</h3> <p>在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。</p> <p>比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。</p> <p>这种情况下,可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件,然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> 改变图表的大小。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
+ <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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">为图表设置特定的大小</h3> <p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">resize</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p></blockquote> <h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3> <p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p> <p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p> <p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p> <blockquote><p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</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/zh/concepts/chart-size.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,n,h,c,o,s,p,E,A,B,g,C,b,m,f,I,u,D,w,P,k,W,R,G,S,Z,x,F,v,L,H,X,y,z,V,N,Y,j,M,J,K,Q,O,U,T,_,q,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E5%8F%8A%E5%A4%A7%E5%B0%8F" tabindex="-1">图表容器及大小</h1>\n<p>在<a href="zh/get-started">快速上手</a>中,我们介绍了初始化 ECharts 的接口 <a href="https://echarts.apache.org//api.html#echarts.init"><code>echarts.init</code></a>。<a href="https://echarts.apache.org//api.html#echarts.init">API 文档</a>中详细介绍了参数的具体含义,建议理解后再阅读本文。</p>\n<p>下面,我们就常见的几种使用场景,介绍如何初始化一个图表以及改变其大小。</p>\n<h2 id="%E5%88%9D%E5%A7%8B%E5%8C%96" tabindex="-1">初始化</h2>\n<h3 id="%E5%9C%A8-html-%E4%B8%AD%E5%AE%9A%E4%B9%89%E6%9C%89%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%E7%9A%84%E7%88%B6%E5%AE%B9%E5%99%A8%EF%BC%88%E6%8E%A8%E8%8D%90%EF%BC%89" tabindex="-1">在 HTML 中定义有宽度和高度的父容器(推荐)</h3>\n<p>通常来说,需要在 HTML 中先定义一个 <code><div></code> 节点,并且通过 CSS 使得该节点具有宽度和高度。初始化的时候,传入该节点,图表的大小默认即为该节点的大小,除非声明了 <code>opts.width</code> 或 <code>opts.height</code> 将其覆盖。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgogIHZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwo8L3NjcmlwdD4\'" line-highlights="\'\'" />\n<p>需要注意的是,使用这种方法在调用 <code>echarts.init</code> 时需保证容器已经有宽度和高度了。</p>\n<h3 id="%E6%8C%87%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">指定图表的大小</h3>\n<p>如果图表容器不存在宽度和高度,或者,你希望图表宽度和高度不等于容器大小,也可以在初始化的时候指定大小。</p>\n<md-code-block lang="html" code="\'PGRpdiBpZD0ibWFpbiI-PC9kaXY-CjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpLCBudWxsLCB7CiAgICB3aWR0aDogNjAwLAogICAgaGVpZ2h0OiA0MDAKICB9KTsKPC9zY3JpcHQ-\'" line-highlights="\'\'" />\n<h2 id="%E5%93%8D%E5%BA%94%E5%AE%B9%E5%99%A8%E5%A4%A7%E5%B0%8F%E7%9A%84%E5%8F%98%E5%8C%96" tabindex="-1">响应容器大小的变化</h2>\n<h3 id="%E7%9B%91%E5%90%AC%E5%9B%BE%E8%A1%A8%E5%AE%B9%E5%99%A8%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%B9%B6%E6%94%B9%E5%8F%98%E5%9B%BE%E8%A1%A8%E5%A4%A7%E5%B0%8F" tabindex="-1">监听图表容器的大小并改变图表大小</h3>\n<p>在有些场景下,我们希望当容器大小改变时,图表的大小也相应地改变。</p>\n<p>比如,图表容器是一个高度为 300px、宽度为页面 100% 的节点,你希望在浏览器宽度改变的时候,始终保持图表宽度是页面的 100%。</p>\n<p>这种情况下,可以监听页面的 <code>window.onresize</code> 事件获取浏览器大小改变的事件,然后调用 <a href="https://echarts.apache.org/api.html#echartsInstance.resize"><code>echartsInstance.resize</code></a> 改变图表的大小。</p>\n<md-code-block lang="html" code="\'PHN0eWxlPgogICNtYWluLAogIGh0bWwsCiAgYm9keSB7CiAgICB3aWR0aDogMTAwJTsKICB9CiAgI21haW4gewogICAgaGVpZ2h0OiA0MDBweDsKICB9Cjwvc3R5bGU-CjxkaXYgaWQ9Im1haW4iPjwvZGl2Pgo8c2NyaXB0IHR5cGU9InRleHQvamF2YXNjcmlwdCI-CiAgdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7CiAgd2luZG93Lm9ucmVzaXplID0gZnVuY3Rpb24oKSB7CiAgICBteUNoYXJ0LnJlc2l6ZSgpOwogIH07Cjwvc2NyaXB0Pg\'" line-highlights="\'\'" />\n<h3 id="%E4%B8%BA%E5%9B%BE%E8%A1%A8%E8%AE%BE%E7%BD%AE%E7%89%B9%E5%AE%9A%E7%9A%84%E5%A4%A7%E5%B0%8F" tabindex="-1">为图表设置特定的大小</h3>\n<p>除了直接调用 <code>resize()</code> 不含参数的形式之外,还可以指定宽度和高度,实现图表大小不等于容器大小的效果。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5yZXNpemUoewogIHdpZHRoOiA4MDAsCiAgaGVpZ2h0OiA0MDAKfSk7\'" line-highlights="\'\'" />\n<blockquote>\n<p>小贴士:阅读 API 文档的时候要留意接口的定义方式,这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式,但其实不存在这样的调用方式。</p>\n</blockquote>\n<h3 id="%E5%AE%B9%E5%99%A8%E8%8A%82%E7%82%B9%E8%A2%AB%E9%94%80%E6%AF%81%E4%BB%A5%E5%8F%8A%E8%A2%AB%E9%87%8D%E5%BB%BA%E6%97%B6" tabindex="-1">容器节点被销毁以及被重建时</h3>\n<p>假设页面中存在多个标签页,每个标签页都包含一些图表。当选中一个标签页的时候,其他标签页的内容在 DOM 中被移除了。这样,当用户再选中这些标签页的时候,就会发现图表“不见”了。</p>\n<p>本质上,这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加,图表所在的节点也已经不存在了。</p>\n<p>正确的做法是,在图表容器被销毁之后,调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 销毁实例,在图表容器重新被添加后再次调用 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 初始化。</p>\n<blockquote>\n<p>小贴士:在容器节点被销毁时,总是应调用 <a href="https://echarts.apache.org/api.html#echartsInstance.dispose"><code>echartsInstance.dispose</code></a> 以销毁实例释放资源,避免内存泄漏。</p>\n</blockquote>\n',postPath:"zh/concepts/chart-size"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:h,draft:t},{title:"获取灵感",dir:c},{title:"寻求帮助",dir:o},{title:"版本特性",dir:s,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:E},{title:5.2,dir:A}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:g},{title:"配置项",dir:C,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:m},{title:"数据集",dir:f},{title:"数据转换",dir:I},{title:"坐标系",dir:u,draft:t},{title:"坐标轴",dir:D},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:P}]},{title:"应用篇",dir:k,children:[{title:"常用图表类型",dir:W,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:G},{title:"动态排序柱状图",dir:S},{title:"极坐标系柱状图",dir:Z,draft:t},{title:"阶梯瀑布图",dir:x},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:F,children:[{title:"基础折线图",dir:v},{title:"堆叠折线图",dir:L},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:X},{title:"阶梯线图",dir:y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:z},{title:"圆环图",dir:V},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:Y,children:[{title:"基础散点图",dir:j}]}]},{title:M,dir:i,draft:t},{title:"跨平台方案",dir:J,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:K}]},{title:"数据处理",dir:Q,children:[{title:"动态的异步数据",dir:O},{title:"数据下钻",dir:U,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:M,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:n},{title:"Resources",dir:h,draft:t},{title:"Inspiration",dir:c},{title:"Get Help",dir:o},{title:"What's New",dir:s,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:E},{title:5.2,dir:A}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:g},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:m},{title:"Dataset",dir:f},{title:"Data Transform",dir:I},{title:"Coordinate",dir:u,draft:t},{title:"Axis",dir:D},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:P}]},{title:"Application",dir:k,children:[{title:"Common Charts",dir:W,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:G},{title:"Bar Racing",dir:S},{title:"Bar Polar",dir:Z,draft:t},{title:"Waterfall",dir:x}]},{title:"Line",dir:F,children:[{title:"Basic Line",dir:v},{title:"Stacked Line",dir:L},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:X},{title:"Step Line",dir:y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:z},{title:"Ring Style",dir:V},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:Y,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:J,children:[{title:"Server Side Rendering",dir:K}]},{title:"Data",dir:Q,children:[{title:"Dynamic Data",dir:O},{title:"Drilldown",dir:U,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/concepts/chart-size",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/data-transform/index.html b/handbook/zh/concepts/data-transform/index.html
index b2cc132..bbc370d 100644
--- a/handbook/zh/concepts/data-transform/index.html
+++ b/handbook/zh/concepts/data-transform/index.html
@@ -3,126 +3,577 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="使用-transform-进行数据转换"><a href="#%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用 transform 进行数据转换</h1>
-<p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset" rel="nofollow noopener noreferrer" target="_blank">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>
-<p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p>
-<ul>
-<li>把数据分成多份用不同的饼图展现。</li>
-<li>进行一些数据统计运算,并展示结果。</li>
-<li>用某些数据可视化算法处理数据,并展示结果。</li>
-<li>数据排序。</li>
-<li>去除或直选择数据项。</li>
-<li>...</li>
-</ul>
-<h2 id="数据转换基础使用"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换基础使用</h2>
-<p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset" rel="nofollow noopener noreferrer" target="_blank">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。例如。</p>
-<p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>现在我们简单总结下,使用 transform 时的几个要点:</p>
-<ul>
-<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>
-<li>系列引用这个 dataset 。</li>
-</ul>
-<h2 id="数据转换的进阶使用"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换的进阶使用</h2>
-<h4 id="链式声明-transform"><a href="#%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>链式声明 transform</h4>
-<p><code>transform</code> 可以被链式声明,这是一个语法糖。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote>
-<p>注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。</p>
-</blockquote>
-<h4 id="一个-transform-输出多个-data"><a href="#%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>一个 transform 输出多个 data</h4>
-<p>在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。</p>
-<p>例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity" rel="nofollow noopener noreferrer" target="_blank">example</a>。</p>
-<p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> 来满足这种情况,例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>另外,<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult" rel="nofollow noopener noreferrer" target="_blank">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform" rel="nofollow noopener noreferrer" target="_blank">dataset.transform</a> 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h4 id="在开发环境中-debug"><a href="#%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在开发环境中 debug</h4>
-<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="数据转换器-filter"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-filter" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换器 "filter"</h2>
-<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>,以及给出数据筛选条件。如下例:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>这是 filter 的另一个例子的效果:</p>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-filter"></iframe>
-<p>在 "filter" transform 中,有这些要素:</p>
-<p><strong>关于维度( dimension ):</strong></p>
-<p><code>config.dimension</code> 指定了维度,能设成这样的值:</p>
-<ul>
-<li>设定成声明在 dataset 中的维度名,例如 <code>config: { dimension: 'Year', '=': 2011 }</code>。不过, dataset 中维度名的声明并非强制,所以我们也可以</li>
-<li>设定成 dataset 中的维度 index (index 值从 0 开始)例如 <code>config: { dimension: 3, '=': 2011 }</code>。</li>
-</ul>
-<p><strong>关于关系比较操作符:</strong></p>
-<p>关系操作符,可以设定这些:
-<code>></code>(<code>gt</code>)、<code>>=</code>(<code>gte</code>)、<code><</code>(<code>lt</code>)、<code><=</code>(<code>lte</code>)、<code>=</code>(<code>eq</code>)、<code>!=</code>(<code>ne</code>、<code><></code>)、<code>reg</code>。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:</p>
-<ul>
-<li>多个关系操作符能声明在一个 {} 中,例如 <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。</li>
-<li>data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 <code>' 123 '</code>。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。</li>
-<li>如果我们需要对日期对象(JS <code>Date</code>)或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 <code>parser: 'time'</code>,例如 <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>。</li>
-<li>纯字符串比较也被支持,但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。</li>
-<li><code>reg</code> 操作符能提供正则表达式比较。例如, <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> 能在 <code>'Name'</code> 维度上选出姓 <code>'Müller'</code> 的数据项。</li>
-</ul>
-<p><strong>关于逻辑比较:</strong></p>
-<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>( <code>and</code> | <code>or</code> | <code>not</code> ):</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><code>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套,例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><strong>关于解析器( parser ):</strong></p>
-<p>还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:</p>
-<ul>
-<li><code>parser: 'time'</code>:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 <code>echarts.time.parse</code> 相同,即,当原始值为时间对象( JS <code>Date</code> 实例),或者是时间戳,或者是描述时间的字符串(例如 <code>'2012-05-12 03:11:22'</code> ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。</li>
-<li><code>parser: 'trim'</code>:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。</li>
-<li><code>parser: 'number'</code>:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 <code>NaN</code>。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 <code>'33%'</code>, <code>12px</code>),我们需要手动指定 <code>parser: 'number'</code>,从而去掉尾缀转为数值才能比较。</li>
-</ul>
-<p>这个例子显示了如何使用 <code>parser: 'time'</code>:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><strong>形式化定义:</strong></p>
-<p>最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="数据转换器-sort"><a href="#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-sort" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据转换器 "sort"</h2>
-<p>"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( <code>axis.type: 'category'</code> )中显示排过序的数据。例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=data-transform-sort-bar"></iframe>
-<p>数据转换器 "sort" 还有一些额外的功能:</p>
-<ul>
-<li>可以多重排序,多个维度一起排序。见下面的例子。</li>
-<li>排序规则是这样的:
-<ul>
-<li>默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。</li>
-<li>对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。</li>
-<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 <code>incomparable: 'min' | 'max'</code> 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>)在排序的头还是尾。</li>
-</ul>
-</li>
-<li>过滤器 <code>filter: 'time' | 'trim' | 'number'</code> 可以被使用,和数据转换器 "filter" 中的情况一样。
-<ul>
-<li>如果要对时间进行排序(例如,值为 JS <code>Date</code> 实例或者时间字符串如 <code>'2012-03-12 11:13:54'</code>),我们需要声明 <code>parser: 'time'</code>。</li>
-<li>如果需要对有后缀的数值进行排序(如 <code>'33%'</code>, <code>'16px'</code>)我们需要声明 <code>parser: 'number'</code>。</li>
-</ul>
-</li>
-</ul>
-<p>这是一个“多维度排序”的例子。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/data-transform-multiple-sort-bar"></iframe>
-<p>最后,我们给出数据转换器 "sort" 的 config 的形式化定义。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="使用外部的数据转换器"><a href="#%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用外部的数据转换器</h2>
-<p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat" rel="nofollow noopener noreferrer" target="_blank">ecStat</a> 提供的数据转换器。</p>
-<p>生成数据的回归线:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>一些使用 echarts-stat 的例子:</p>
-<ul>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">聚集 (Aggregate)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">直方图 (Histogram)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">简单聚类 (Clustering)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">线性回归线 (Linear Regression)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">指数回归线 (Exponential Regression)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">对数回归线 (Logarithmic Regression)</a></li>
-<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">多项式回归线 (Polynomial Regression)</a></li>
-</ul></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8">数据转换基础使用</a></li><li class="toc2"><a href="/handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8">数据转换的进阶使用</a></li><li class="toc2"><a href="/handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-filter">数据转换器 "filter"</a></li><li class="toc2"><a href="/handbook/zh/concepts/data-transform#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-sort">数据转换器 "sort"</a></li><li class="toc2"><a href="/handbook/zh/concepts/data-transform#%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8">使用外部的数据转换器</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/data-transform.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,r,p,n,l,i,s,d,o,y,c,u,h,g,v,m,f,x,E,b,D,A,B,C,N,I,T,P,k,S,R,L,M,V,H,z,F,O,w,Y,q,G,_,K,J,Z,Q,U,$,j,W,X,ee,te,ae,re,pe,ne,le,ie,se,de,oe,ye,ce,ue,he,ge,ve,me,fe,xe,Ee,be,De,Ae,Be,Ce,Ne,Ie,Te,Pe,ke,Se,Re,Le,Me,Ve,He,ze,Fe){return{layout:"default",data:[{article:{slug:H,toc:[{id:k,depth:2,text:k},{id:S,depth:2,text:S},{id:_,depth:2,text:K},{id:J,depth:2,text:Z},{id:R,depth:2,text:R}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"使用-transform-进行数据转换"},children:[{type:t,tag:s,props:{href:"#%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:"使用 transform 进行数据转换"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”("},{type:t,tag:s,props:{href:Q,rel:[d,o,y],target:c},children:[{type:e,value:L}]},{type:e,value:")和一个“转换方法”("},{type:t,tag:s,props:{href:z,rel:[d,o,y],target:c},children:[{type:e,value:F}]},{type:e,value:"),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"抽象地来说,数据转换是这样一种公式:"},{type:t,tag:r,props:{},children:[{type:e,value:"outData = f(inputData)"}]},{type:e,value:B},{type:t,tag:r,props:{},children:[{type:e,value:"f"}]},{type:e,value:" 是转换方法,例如:"},{type:t,tag:r,props:{},children:[{type:e,value:"filter"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"sort"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"regression"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"boxplot"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"cluster"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"aggregate"}]},{type:e,value:"(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"把数据分成多份用不同的饼图展现。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"进行一些数据统计运算,并展示结果。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"用某些数据可视化算法处理数据,并展示结果。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"数据排序。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"去除或直选择数据项。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"..."}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:P,props:{id:k},children:[{type:t,tag:s,props:{href:"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:k}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"在 echarts 中,数据转换是依托于数据集("},{type:t,tag:s,props:{href:Q,rel:[d,o,y],target:c},children:[{type:e,value:L}]},{type:e,value:")来实现的. 我们可以设置 "},{type:t,tag:s,props:{href:z,rel:[d,o,y],target:c},children:[{type:e,value:U}]},{type:e,value:" 来表示,此 dataset 的数据,来自于此 transform 的结果。例如。"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:$,props:{lang:g,layout:"tb"},children:[{type:e,value:"var option = {\n dataset: [\n {\n // 这个 dataset 的 index 是 `0`。\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Cereal', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Dumpling', 341, 25, 2011],\n ['Biscuit', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Cereal', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Dumpling', 241, 27, 2012],\n ['Biscuit', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Cereal', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Dumpling', 281, 31, 2013],\n ['Biscuit', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Cereal', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Dumpling', 211, 35, 2014],\n ['Biscuit', 72, 24, 2014]\n ]\n // id: 'a'\n },\n {\n // 这个 dataset 的 index 是 `1`。\n // 这个 `transform` 配置,表示,此 dataset 的数据,来自于此 transform 的结果。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2011 }\n }\n // 我们还可以设置这些可选的属性: `fromDatasetIndex` 或 `fromDatasetId`。\n // 这些属性,指定了,transform 的输入,来自于哪个 dataset。例如,\n // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如,\n // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。\n // 当这些属性都不指定时,默认认为,输入来自于 index 为 `0` 的 dataset 。\n },\n {\n // 这个 dataset 的 index 是 `2`。\n // 同样,这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定,\n // 那么输入默认来自于 index 为 `0` 的 dataset 。\n transform: {\n // 这个类型为 \"filter\" 的 transform 能够遍历并筛选出满足条件的数据项。\n type: 'filter',\n // 每个 transform 如果需要有配置参数的话,都须配置在 `config` 里。\n // 在这个 \"filter\" transform 中,`config` 用于指定筛选条件。\n // 下面这个筛选条件是:选出维度( dimension )'Year' 中值为 2012 的所有\n // 数据项。\n config: { dimension: 'Year', value: 2012 }\n }\n },\n {\n // 这个 dataset 的 index 是 `3`。\n transform: {\n type: 'filter',\n config: { dimension: 'Year', value: 2013 }\n }\n }\n ],\n series: [\n {\n type: 'pie',\n radius: 50,\n center: ['25%', '50%'],\n // 这个饼图系列,引用了 index 为 `1` 的 dataset 。也就是,引用了上述\n // 2011 年那个 \"filter\" transform 的结果。\n datasetIndex: 1\n },\n {\n type: 'pie',\n radius: 50,\n center: ['50%', '50%'],\n datasetIndex: 2\n },\n {\n type: 'pie',\n radius: 50,\n center: ['75%', '50%'],\n datasetIndex: 3\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"现在我们简单总结下,使用 transform 时的几个要点:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在一个空的 dataset 中声明 "},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"fromDatasetIndex"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"fromDatasetId"}]},{type:e,value:" 来表示我们要生成新的数据。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"系列引用这个 dataset 。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:P,props:{id:S},children:[{type:t,tag:s,props:{href:"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:S}]},{type:e,value:a},{type:t,tag:O,props:{id:"链式声明-transform"},children:[{type:t,tag:s,props:{href:"#%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:"链式声明 transform"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:" 可以被链式声明,这是一个语法糖。"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n // 原始数据\n ]\n },\n {\n // 几个 transform 被声明成 array ,他们构成了一个链,\n // 前一个 transform 的输出是后一个 transform 的输入。\n transform: [\n {\n type: 'filter',\n config: { dimension: 'Product', value: 'Tofu' }\n },\n {\n type: 'sort',\n config: { dimension: 'Year', order: 'desc' }\n }\n ]\n }\n ],\n series: {\n type: 'pie',\n // 这个系列引用上述 transform 的结果。\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:O,props:{id:"一个-transform-输出多个-data"},children:[{type:t,tag:s,props:{href:"#%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:"一个 transform 输出多个 data"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,'},{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity",rel:[d,o,y],target:c},children:[{type:e,value:"example"}]},{type:e,value:B}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"我们提供配置 "},{type:t,tag:s,props:{href:j,rel:[d,o,y],target:c},children:[{type:e,value:W}]},{type:e,value:" 来满足这种情况,例如:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n // 这个 dataset 的 index 为 `0`。\n source: [\n // 原始数据\n ]\n },\n {\n // 这个 dataset 的 index 为 `1`。\n transform: {\n type: 'boxplot'\n }\n // 这个 \"boxplot\" transform 生成了两个数据:\n // result[0]: boxplot series 所需的数据。\n // result[1]: 离群点数据。\n // 当其他 series 或者 dataset 引用这个 dataset 时,他们默认只能得到\n // result[0] 。\n // 如果想要他们得到 result[1] ,需要额外声明如下这样一个 dataset :\n },\n {\n // 这个 dataset 的 index 为 `2`。\n // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。\n fromDatasetIndex: 1,\n // 并且指定了获取 transform result[1] 。\n fromTransformResult: 1\n }\n ],\n xAxis: {\n type: 'category'\n },\n yAxis: {},\n series: [\n {\n name: 'boxplot',\n type: 'boxplot',\n // Reference the data from result[0].\n // 这个 series 引用 index 为 `1` 的 dataset 。\n datasetIndex: 1\n },\n {\n name: 'outlier',\n type: 'scatter',\n // 这个 series 引用 index 为 `2` 的 dataset 。\n // 从而也就得到了上述的 transform result[1] (即离群点数据)\n datasetIndex: 2\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"另外,"},{type:t,tag:s,props:{href:j,rel:[d,o,y],target:c},children:[{type:e,value:W}]},{type:e,value:" 和 "},{type:t,tag:s,props:{href:z,rel:[d,o,y],target:c},children:[{type:e,value:U}]},{type:e,value:" 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 "},{type:t,tag:r,props:{},children:[{type:e,value:"fromTransformResult"}]},{type:e,value:" 获取的结果。例如:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"{\n fromDatasetIndex: 1,\n fromTransformResult: 1,\n transform: {\n type: 'sort',\n config: { dimension: 2, order: 'desc' }\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:O,props:{id:"在开发环境中-debug"},children:[{type:t,tag:s,props:{href:"#%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:"在开发环境中 debug"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 "},{type:t,tag:r,props:{},children:[{type:e,value:"transform.print"}]},{type:e,value:" 方便 debug 。这个配置项只在开发环境中生效。如下例:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n source: []\n },\n {\n transform: {\n type: 'filter',\n config: {},\n // 配置为 `true` 后, transform 的结果\n // 会被 console.log 打印出来。\n print: true\n }\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:P,props:{id:_},children:[{type:t,tag:s,props:{href:"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-filter",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:K}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 "},{type:t,tag:r,props:{},children:[{type:e,value:'transform.type: "filter"'}]},{type:e,value:",以及给出数据筛选条件。如下例:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:$,props:{lang:g,layout:"tb"},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Year'],\n ['Cake', 123, 32, 2011],\n ['Latte', 231, 14, 2011],\n ['Tofu', 235, 5, 2011],\n ['Milk Tee', 341, 25, 2011],\n ['Porridge', 122, 29, 2011],\n ['Cake', 143, 30, 2012],\n ['Latte', 201, 19, 2012],\n ['Tofu', 255, 7, 2012],\n ['Milk Tee', 241, 27, 2012],\n ['Porridge', 102, 34, 2012],\n ['Cake', 153, 28, 2013],\n ['Latte', 181, 21, 2013],\n ['Tofu', 395, 4, 2013],\n ['Milk Tee', 281, 31, 2013],\n ['Porridge', 92, 39, 2013],\n ['Cake', 223, 29, 2014],\n ['Latte', 211, 17, 2014],\n ['Tofu', 345, 3, 2014],\n ['Milk Tee', 211, 35, 2014],\n ['Porridge', 72, 24, 2014]\n ]\n },\n {\n transform: {\n type: 'filter',\n config: { dimension: 'Year', '=': 2011 }\n // 这个筛选条件表示,遍历数据,筛选出维度( dimension )\n // 'Year' 上值为 2011 的所有数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"这是 filter 的另一个例子的效果:"}]},{type:e,value:a},{type:t,tag:w,props:{src:"data-transform-filter"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'在 "filter" transform 中,有这些要素:'}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:N,props:{},children:[{type:e,value:"关于维度( dimension ):"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"config.dimension"}]},{type:e,value:" 指定了维度,能设成这样的值:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"设定成声明在 dataset 中的维度名,例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 'Year', '=': 2011 }"}]},{type:e,value:"。不过, dataset 中维度名的声明并非强制,所以我们也可以"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"设定成 dataset 中的维度 index (index 值从 0 开始)例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 3, '=': 2011 }"}]},{type:e,value:B}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:N,props:{},children:[{type:e,value:"关于关系比较操作符:"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"关系操作符,可以设定这些:\n"},{type:t,tag:r,props:{},children:[{type:e,value:">"}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"gt"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:">="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"gte"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:"<"}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"lt"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:"<="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"lte"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:"="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"eq"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:"!="}]},{type:e,value:I},{type:t,tag:r,props:{},children:[{type:e,value:"ne"}]},{type:e,value:C},{type:t,tag:r,props:{},children:[{type:e,value:"<>"}]},{type:e,value:T},{type:t,tag:r,props:{},children:[{type:e,value:"reg"}]},{type:e,value:"。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"多个关系操作符能声明在一个 {} 中,例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"{ dimension: 'Price', '>=': 20, '<': 30 }"}]},{type:e,value:"。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"' 123 '"}]},{type:e,value:"。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果我们需要对日期对象(JS "},{type:t,tag:r,props:{},children:[{type:e,value:Y}]},{type:e,value:")或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 "},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:",例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"config: { dimension: 3, lt: '2012-05-12', parser: 'time' }"}]},{type:e,value:B}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"纯字符串比较也被支持,但是只能用在 "},{type:t,tag:r,props:{},children:[{type:e,value:"="}]},{type:e,value:" 或 "},{type:t,tag:r,props:{},children:[{type:e,value:"!="}]},{type:e,value:" 上。而 "},{type:t,tag:r,props:{},children:[{type:e,value:">"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:">="}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"<"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"<="}]},{type:e,value:" 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"reg"}]},{type:e,value:" 操作符能提供正则表达式比较。例如, "},{type:t,tag:r,props:{},children:[{type:e,value:"{ dimension: 'Name', reg: /\\s+Müller\\s*$/ }"}]},{type:e,value:" 能在 "},{type:t,tag:r,props:{},children:[{type:e,value:"'Name'"}]},{type:e,value:" 维度上选出姓 "},{type:t,tag:r,props:{},children:[{type:e,value:"'Müller'"}]},{type:e,value:" 的数据项。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:N,props:{},children:[{type:e,value:"关于逻辑比较:"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"我们也支持了逻辑比较操作符 "},{type:t,tag:N,props:{},children:[{type:e,value:"与或非"}]},{type:e,value:"( "},{type:t,tag:r,props:{},children:[{type:e,value:"and"}]},{type:e,value:" | "},{type:t,tag:r,props:{},children:[{type:e,value:"or"}]},{type:e,value:" | "},{type:t,tag:r,props:{},children:[{type:e,value:"not"}]},{type:e,value:" ):"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n // 使用 and 操作符。\n // 类似地,同样的位置也可以使用 “or” 或 “not”。\n // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。\n and: [\n { dimension: 'Year', '=': 2011 },\n { dimension: 'Price', '>=': 20, '<': 30 }\n ]\n }\n // 这个表达的是,选出 2011 年价格大于等于 20 但小于 30 的数据项。\n }\n }\n ],\n series: {\n type: 'pie',\n datasetIndex: 1\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"and"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"or"}]},{type:e,value:"/"},{type:t,tag:r,props:{},children:[{type:e,value:"not"}]},{type:e,value:" 自然可以被嵌套,例如:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"transform: {\n type: 'filter',\n config: {\n or: [{\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Tofu' }\n }]\n }, {\n and: [{\n dimension: 'Price', '>=': 10, '<': 20\n }, {\n dimension: 'Sales', '<': 100\n }, {\n not: { dimension: 'Product', '=': 'Cake' }\n }]\n }]\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:N,props:{},children:[{type:e,value:"关于解析器( parser ):"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:":把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 "},{type:t,tag:r,props:{},children:[{type:e,value:"echarts.time.parse"}]},{type:e,value:" 相同,即,当原始值为时间对象( JS "},{type:t,tag:r,props:{},children:[{type:e,value:Y}]},{type:e,value:" 实例),或者是时间戳,或者是描述时间的字符串(例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"'2012-05-12 03:11:22'"}]},{type:e,value:" ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:"parser: 'trim'"}]},{type:e,value:":如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:r,props:{},children:[{type:e,value:q}]},{type:e,value:":强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 "},{type:t,tag:r,props:{},children:[{type:e,value:"NaN"}]},{type:e,value:"。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"'33%'"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"12px"}]},{type:e,value:"),我们需要手动指定 "},{type:t,tag:r,props:{},children:[{type:e,value:q}]},{type:e,value:",从而去掉尾缀转为数值才能比较。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"这个例子显示了如何使用 "},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:":"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n source: [\n ['Product', 'Sales', 'Price', 'Date'],\n ['Milk Tee', 311, 21, '2012-05-12'],\n ['Cake', 135, 28, '2012-05-22'],\n ['Latte', 262, 36, '2012-06-02'],\n ['Milk Tee', 359, 21, '2012-06-22'],\n ['Cake', 121, 28, '2012-07-02'],\n ['Latte', 271, 36, '2012-06-22']\n // ...\n ]\n },\n {\n transform: {\n type: 'filter',\n config: {\n dimension: 'Date',\n '>=': '2012-05',\n '<': '2012-06',\n parser: 'time'\n }\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:t,tag:N,props:{},children:[{type:e,value:"形式化定义:"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:'}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:"ts","line-highlights":l,"file-name":l},children:[{type:e,value:"type FilterTransform = {\n type: 'filter';\n config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n | true\n | false\n | RelationalExpressionOption\n | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n dimension: DimensionName | DimensionIndex;\n parser?: 'time' | 'trim' | 'number';\n lt?: DataValue; // less than\n lte?: DataValue; // less than or equal\n gt?: DataValue; // greater than\n gte?: DataValue; // greater than or equal\n eq?: DataValue; // equal\n ne?: DataValue; // not equal\n '<'?: DataValue; // lt\n '<='?: DataValue; // lte\n '>'?: DataValue; // gt\n '>='?: DataValue; // gte\n '='?: DataValue; // eq\n '!='?: DataValue; // ne\n '<>'?: DataValue; // ne (SQL style)\n reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n and?: ConditionalExpressionOption[];\n or?: ConditionalExpressionOption[];\n not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{type:e,value:a},{type:t,tag:P,props:{id:J},children:[{type:t,tag:s,props:{href:"#%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-sort",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:Z}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( '},{type:t,tag:r,props:{},children:[{type:e,value:"axis.type: 'category'"}]},{type:e,value:" )中显示排过序的数据。例如:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n // 按分数排序\n config: { dimension: 'score', order: 'asc' }\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:w,props:{src:"data-transform-sort-bar"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'数据转换器 "sort" 还有一些额外的功能:'}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"可以多重排序,多个维度一起排序。见下面的例子。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"排序规则是这样的:\n"},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 "},{type:t,tag:r,props:{},children:[{type:e,value:"incomparable: 'min' | 'max'"}]},{type:e,value:" 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 "},{type:t,tag:r,props:{},children:[{type:e,value:"null"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"undefined"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"NaN"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"''"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"'-'"}]},{type:e,value:")在排序的头还是尾。"}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"过滤器 "},{type:t,tag:r,props:{},children:[{type:e,value:"filter: 'time' | 'trim' | 'number'"}]},{type:e,value:' 可以被使用,和数据转换器 "filter" 中的情况一样。\n'},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果要对时间进行排序(例如,值为 JS "},{type:t,tag:r,props:{},children:[{type:e,value:Y}]},{type:e,value:" 实例或者时间字符串如 "},{type:t,tag:r,props:{},children:[{type:e,value:"'2012-03-12 11:13:54'"}]},{type:e,value:"),我们需要声明 "},{type:t,tag:r,props:{},children:[{type:e,value:M}]},{type:e,value:B}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果需要对有后缀的数值进行排序(如 "},{type:t,tag:r,props:{},children:[{type:e,value:"'33%'"}]},{type:e,value:m},{type:t,tag:r,props:{},children:[{type:e,value:"'16px'"}]},{type:e,value:")我们需要声明 "},{type:t,tag:r,props:{},children:[{type:e,value:q}]},{type:e,value:B}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"这是一个“多维度排序”的例子。"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n dimensions: ['name', 'age', 'profession', 'score', 'date'],\n source: [\n [' Hannah Krause ', 41, 'Engineer', 314, '2011-02-12'],\n ['Zhao Qian ', 20, 'Teacher', 351, '2011-03-01'],\n [' Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],\n ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],\n [' Karle Neumann ', 25, 'Engineer', 253, '2011-04-02'],\n [' Adrian Groß', 19, 'Teacher', null, '2011-01-16'],\n ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],\n [' Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],\n ['Han Meimei ', 67, 'Engineer', 366, '2011-03-12']\n ]\n },\n {\n transform: {\n type: 'sort',\n config: [\n // 对两个维度按声明的优先级分别排序。\n { dimension: 'profession', order: 'desc' },\n { dimension: 'score', order: 'desc' }\n ]\n }\n }\n ],\n series: {\n type: 'bar',\n datasetIndex: 1\n }\n //...\n};\n"}]}]},{type:e,value:a},{type:t,tag:w,props:{src:"doc-example/data-transform-multiple-sort-bar"},children:[{type:e,value:a}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:'最后,我们给出数据转换器 "sort" 的 config 的形式化定义。'}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:"ts","line-highlights":l,"file-name":l},children:[{type:e,value:"type SortTransform = {\n type: 'filter';\n config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n dimension: DimensionName | DimensionIndex;\n order: 'asc' | 'desc';\n incomparable?: 'min' | 'max';\n parser?: 'time' | 'trim' | 'number';\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n"}]}]},{type:e,value:a},{type:t,tag:P,props:{id:R},children:[{type:t,tag:s,props:{href:"#%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8",ariaHidden:f,tabIndex:x},children:[{type:t,tag:E,props:{className:[b,D]},children:[]}]},{type:e,value:R}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 "},{type:t,tag:s,props:{href:"https://github.com/ecomfe/echarts-stat",rel:[d,o,y],target:c},children:[{type:e,value:"ecStat"}]},{type:e,value:" 提供的数据转换器。"}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"生成数据的回归线:"}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"// 首先要注册外部数据转换器。\necharts.registerTransform(ecStatTransform(ecStat).regression);\n"}]}]},{type:e,value:a},{type:t,tag:u,props:{className:[h]},children:[{type:t,tag:v,props:{lang:g,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n dataset: [\n {\n source: rawData\n },\n {\n transform: {\n // 引用注册的数据转换器。\n // 注意,每个外部的数据转换器,都有名空间(如 'ecStat:xxx','ecStat' 是名空间)。\n // 而内置数据转换器(如 'filter', 'sort')没有名空间。\n type: 'ecStat:regression',\n config: {\n // 这里是此外部数据转换器所需的参数。\n method: 'exponential'\n }\n }\n }\n ],\n xAxis: { type: 'category' },\n yAxis: {},\n series: [\n {\n name: 'scatter',\n type: 'scatter',\n datasetIndex: 0\n },\n {\n name: 'regression',\n type: 'line',\n symbol: 'none',\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:p,props:{},children:[{type:e,value:"一些使用 echarts-stat 的例子:"}]},{type:e,value:a},{type:t,tag:A,props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"聚集 (Aggregate)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"直方图 (Histogram)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"简单聚类 (Clustering)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"线性回归线 (Linear Regression)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"指数回归线 (Exponential Regression)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"对数回归线 (Logarithmic Regression)"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:s,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1",rel:[d,o,y],target:c},children:[{type:e,value:"多项式回归线 (Polynomial Regression)"}]}]},{type:e,value:a}]}]},dir:"/zh/concepts",path:X,extension:".md",createdAt:"2021-06-04T12:26:37.933Z",updatedAt:"2021-07-21T14:58:00.297Z"},postPath:"zh/concepts/data-transform"}],fetch:{},error:ee,state:{filled:!1,docVersion:l,ghVersion:l,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:te},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:ae},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:re,draft:i},{title:"获取灵感",dir:pe},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:ne,children:[{title:le,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:ie},{title:"ECharts 5 升级指南",dir:se}]}]},{title:"概念篇",dir:de,children:[{title:"图表容器及大小",dir:oe},{title:"配置项",dir:ye,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:L},{title:"数据转换",dir:H},{title:"坐标系",dir:ce,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:G},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ue,children:[{title:"常用图表类型",dir:he,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:ge},{title:"堆叠柱状图",dir:ve},{title:"动态排序柱状图",dir:me,draft:i},{title:"极坐标系柱状图",dir:fe,draft:i},{title:"瀑布图",dir:xe,draft:i},{title:"视觉映射的柱状图",dir:G,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:Ee},{title:"堆叠折线图",dir:be},{title:"区域面积图",dir:De},{title:"平滑曲线图",dir:Ae},{title:"阶梯线图",dir:Be}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Ce},{title:"圆环图",dir:Ne},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Ie,children:[{title:"基础散点图",dir:Te}]}]},{title:"移动端优化",dir:V,draft:i},{title:"跨平台方案",dir:Pe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ke},{title:"数据下钻",dir:Se,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Re}]},{title:"交互",dir:Le,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Me,draft:i}]}]},{title:"最佳实践",dir:Ve,children:[{title:"移动端优化",dir:V,draft:i},{title:He,dir:ze},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Fe}]}],en:[{title:"Get Started",dir:te},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:ae},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:re,draft:i},{title:"Inspiration",dir:pe},{title:"Get Help",dir:"help"},{title:"Release Note",dir:ne,children:[{title:le,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:ie},{title:"ECharts 5 Upgrade Guide",dir:se}]}]},{title:"Concepts",dir:de,children:[{title:"Chart Container",dir:oe},{title:"Chart Option",dir:ye,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:L},{title:"Data Transform",dir:H},{title:"Coordinate",dir:ce,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:G},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ue,children:[{title:"Common Charts",dir:he,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:ge},{title:"Stacked Bar",dir:ve},{title:"Bar Racing",dir:me,draft:i},{title:"Bar Polar",dir:fe,draft:i},{title:"Waterfall",dir:xe,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:Ee},{title:"Stacked Line",dir:be},{title:"Area Chart",dir:De},{title:"Smoothed Line",dir:Ae},{title:"Step Line",dir:Be}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Ce},{title:"Ring Style",dir:Ne},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Ie,children:[{title:"Basic Scatter",dir:Te}]}]},{title:"Mobile",dir:V,draft:i},{title:"Cross Platform",dir:Pe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ke},{title:"Drilldown",dir:Se,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Re}]},{title:"Interaction",dir:Le,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Me,draft:i}]}]},{title:"Best Practice",dir:Ve,children:[{title:"Mobile Optimization",dir:V,draft:i},{title:He,dir:ze},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Fe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:X,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:ee},content:{dbHash:"570e7c13"}}}}("text","element","\n","code","p","li","",!0,"a","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","js","md-code-block",", ","true",-1,"span","icon","icon-link","ul","。","、","strong","(",")、","h2","数据转换基础使用","数据转换的进阶使用","使用外部的数据转换器","dataset","parser: 'time'","mobile","data-transform","https://echarts.apache.org/option.html##dataset.transform","transform","h4","md-example","Date","parser: 'number'","visual-map","数据转换器-filter",'数据转换器 "filter"',"数据转换器-sort",'数据转换器 "sort"',"https://echarts.apache.org/option.html##dataset","dataset.transform","md-live","https://echarts.apache.org/option.html##dataset.fromTransformResult","dataset.fromTransformResult","/zh/concepts/data-transform",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1> <p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p> <p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p> <ul><li>把数据分成多份用不同的饼图展现。</li> <li>进行一些数据统计运算,并展示结果。</li> <li>用某些数据可视化算法处理数据,并展示结果。</li> <li>数据排序。</li> <li>去除或直选择数据项。</li> <li>...</li></ul> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2> <p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p> <p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p> <div class="md-live layout-tb"><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">var option = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>现在我们简单总结下,使用 transform 时的几个要点:</p> <ul><li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li> <li>系列引用这个 dataset 。</li></ul> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换的进阶使用</h2> <h4 id="%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" tabindex="-1">链式声明 transform</h4> <p><code>transform</code> 可以被链式声明,这是一个语法糖。</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。</p></blockquote> <h4 id="%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" tabindex="-1">一个 transform 输出多个 data</h4> <p>在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。</p> <p>例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity">example</a>。</p> <p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 来满足这种情况,例如:</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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>另外,<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token punctuation">{</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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h4 id="%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" tabindex="-1">在开发环境中 debug</h4> <p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22filter%22" tabindex="-1">数据转换器 "filter"</h2> <p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>,以及给出数据筛选条件。如下例:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这是 filter 的另一个例子的效果:</p> <p><iframe width="100%" height="350" src=""></iframe></p> <p>在 "filter" transform 中,有这些要素:</p> <p><strong>关于维度( dimension ):</strong></p> <p><code>config.dimension</code> 指定了维度,能设成这样的值:</p> <ul><li>设定成声明在 dataset 中的维度名,例如 <code>config: { dimension: 'Year', '=': 2011 }</code>。不过, dataset 中维度名的声明并非强制,所以我们也可以</li> <li>设定成 dataset 中的维度 index (index 值从 0 开始)例如 <code>config: { dimension: 3, '=': 2011 }</code>。</li></ul> <p><strong>关于关系比较操作符:</strong></p> <p>关系操作符,可以设定这些:
+<code>></code>(<code>gt</code>)、<code>>=</code>(<code>gte</code>)、<code><</code>(<code>lt</code>)、<code><=</code>(<code>lte</code>)、<code>=</code>(<code>eq</code>)、<code>!=</code>(<code>ne</code>、<code><></code>)、<code>reg</code>。(小括号中的符号或名字,是别名,设置起来作用相同)。他们首先基本地能基于数值大小进行比较,然后也有些额外的功能特性:</p> <ul><li>多个关系操作符能声明在一个 {} 中,例如 <code>{ dimension: 'Price', '>=': 20, '<': 30 }</code>。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。</li> <li>data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 <code>' 123 '</code>。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。</li> <li>如果我们需要对日期对象(JS <code>Date</code>)或者日期字符串(如 '2012-05-12')进行比较,我们需要手动指定 <code>parser: 'time'</code>,例如 <code>config: { dimension: 3, lt: '2012-05-12', parser: 'time' }</code>。</li> <li>纯字符串比较也被支持,但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。</li> <li><code>reg</code> 操作符能提供正则表达式比较。例如, <code>{ dimension: 'Name', reg: /\s+Müller\s*$/ }</code> 能在 <code>'Name'</code> 维度上选出姓 <code>'Müller'</code> 的数据项。</li></ul> <p><strong>关于逻辑比较:</strong></p> <p>我们也支持了逻辑比较操作符 <strong>与或非</strong>( <code>and</code> | <code>or</code> | <code>not</code> ):</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><code>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套,例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><strong>关于解析器( parser ):</strong></p> <p>还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:</p> <ul><li><code>parser: 'time'</code>:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 <code>echarts.time.parse</code> 相同,即,当原始值为时间对象( JS <code>Date</code> 实例),或者是时间戳,或者是描述时间的字符串(例如 <code>'2012-05-12 03:11:22'</code> ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。</li> <li><code>parser: 'trim'</code>:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。</li> <li><code>parser: 'number'</code>:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 <code>NaN</code>。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 <code>'33%'</code>, <code>12px</code>),我们需要手动指定 <code>parser: 'number'</code>,从而去掉尾缀转为数值才能比较。</li></ul> <p>这个例子显示了如何使用 <code>parser: 'time'</code>:</p> <div class="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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><strong>形式化定义:</strong></p> <p>最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">FilterTransform</span> <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> 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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22sort%22" tabindex="-1">数据转换器 "sort"</h2> <p>"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( <code>axis.type: 'category'</code> )中显示排过序的数据。例如:</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 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">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 punctuation">,</span>
+ <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>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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>
+ <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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>数据转换器 "sort" 还有一些额外的功能:</p> <ul><li>可以多重排序,多个维度一起排序。见下面的例子。</li> <li>排序规则是这样的:
+<ul><li>默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。</li> <li>对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。</li> <li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 <code>incomparable: 'min' | 'max'</code> 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>''</code>, <code>'-'</code>)在排序的头还是尾。</li></ul></li> <li>过滤器 <code>filter: 'time' | 'trim' | 'number'</code> 可以被使用,和数据转换器 "filter" 中的情况一样。
+<ul><li>如果要对时间进行排序(例如,值为 JS <code>Date</code> 实例或者时间字符串如 <code>'2012-03-12 11:13:54'</code>),我们需要声明 <code>parser: 'time'</code>。</li> <li>如果需要对有后缀的数值进行排序(如 <code>'33%'</code>, <code>'16px'</code>)我们需要声明 <code>parser: 'number'</code>。</li></ul></li></ul> <p>这是一个“多维度排序”的例子。</p> <div class="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 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">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 punctuation">,</span>
+ <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>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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 punctuation">,</span>
+ <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>
+ <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>
+ <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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><iframe width="100%" height="350" src=""></iframe></p> <p>最后,我们给出数据转换器 "sort" 的 config 的形式化定义。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">SortTransform</span> <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> 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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" tabindex="-1">使用外部的数据转换器</h2> <p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> 提供的数据转换器。</p> <p>生成数据的回归线:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 首先要注册外部数据转换器。</span>
+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://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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>
+ 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">// 这里是此外部数据转换器所需的参数。</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>一些使用 echarts-stat 的例子:</p> <ul><li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li> <li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></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/concepts/data-transform.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,e,t,d,o,l,a,c,n,r,s,m,h,y,p,b,W,u,Z,B,L,w,J,M,G,D,O,S,X,E,F,z,R,v,Y,H,K,N,V,j,f,x,k,T,U,Q,q,P,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="%E4%BD%BF%E7%94%A8-transform-%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2" tabindex="-1">使用 transform 进行数据转换</h1>\n<p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”( data transform )功能。在 echarts 中,“数据转换” 这个词指的是,给定一个已有的“数据集”(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)和一个“转换方法”(<a href="https://echarts.apache.org/option.html##dataset.transform">transform</a>),echarts 能生成一个新的“数据集”,然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>\n<p>抽象地来说,数据转换是这样一种公式:<code>outData = f(inputData)</code>。<code>f</code> 是转换方法,例如:<code>filter</code>、<code>sort</code>、<code>regression</code>、<code>boxplot</code>、<code>cluster</code>、<code>aggregate</code>(todo) 等等。有了数据转换能力后,我们就至少可以做到这些事情:</p>\n<ul>\n<li>把数据分成多份用不同的饼图展现。</li>\n<li>进行一些数据统计运算,并展示结果。</li>\n<li>用某些数据可视化算法处理数据,并展示结果。</li>\n<li>数据排序。</li>\n<li>去除或直选择数据项。</li>\n<li>...</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换基础使用</h2>\n<p>在 echarts 中,数据转换是依托于数据集(<a href="https://echarts.apache.org/option.html##dataset">dataset</a>)来实现的. 我们可以设置 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 来表示,此 dataset 的数据,来自于此 transform 的结果。</p>\n<p>下面是上述例子的效果,三个饼图分别显示了 2011、2012、2013 年的数据。</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDmmK8gYDBg44CCCiAgICAgIHNvdXJjZTogWwogICAgICAgIFsnUHJvZHVjdCcsICdTYWxlcycsICdQcmljZScsICdZZWFyJ10sCiAgICAgICAgWydDYWtlJywgMTIzLCAzMiwgMjAxMV0sCiAgICAgICAgWydDZXJlYWwnLCAyMzEsIDE0LCAyMDExXSwKICAgICAgICBbJ1RvZnUnLCAyMzUsIDUsIDIwMTFdLAogICAgICAgIFsnRHVtcGxpbmcnLCAzNDEsIDI1LCAyMDExXSwKICAgICAgICBbJ0Jpc2N1aXQnLCAxMjIsIDI5LCAyMDExXSwKICAgICAgICBbJ0Nha2UnLCAxNDMsIDMwLCAyMDEyXSwKICAgICAgICBbJ0NlcmVhbCcsIDIwMSwgMTksIDIwMTJdLAogICAgICAgIFsnVG9mdScsIDI1NSwgNywgMjAxMl0sCiAgICAgICAgWydEdW1wbGluZycsIDI0MSwgMjcsIDIwMTJdLAogICAgICAgIFsnQmlzY3VpdCcsIDEwMiwgMzQsIDIwMTJdLAogICAgICAgIFsnQ2FrZScsIDE1MywgMjgsIDIwMTNdLAogICAgICAgIFsnQ2VyZWFsJywgMTgxLCAyMSwgMjAxM10sCiAgICAgICAgWydUb2Z1JywgMzk1LCA0LCAyMDEzXSwKICAgICAgICBbJ0R1bXBsaW5nJywgMjgxLCAzMSwgMjAxM10sCiAgICAgICAgWydCaXNjdWl0JywgOTIsIDM5LCAyMDEzXSwKICAgICAgICBbJ0Nha2UnLCAyMjMsIDI5LCAyMDE0XSwKICAgICAgICBbJ0NlcmVhbCcsIDIxMSwgMTcsIDIwMTRdLAogICAgICAgIFsnVG9mdScsIDM0NSwgMywgMjAxNF0sCiAgICAgICAgWydEdW1wbGluZycsIDIxMSwgMzUsIDIwMTRdLAogICAgICAgIFsnQmlzY3VpdCcsIDcyLCAyNCwgMjAxNF0KICAgICAgXQogICAgICAvLyBpZDogJ2EnCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAxYOOAggogICAgICAvLyDov5nkuKogYHRyYW5zZm9ybWAg6YWN572u77yM6KGo56S677yM5q2kIGRhdGFzZXQg55qE5pWw5o2u77yM5p2l6Ieq5LqO5q2kIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1llYXInLCB2YWx1ZTogMjAxMSB9CiAgICAgIH0KICAgICAgLy8g5oiR5Lus6L-Y5Y-v5Lul6K6-572u6L-Z5Lqb5Y-v6YCJ55qE5bGe5oCn77yaIGBmcm9tRGF0YXNldEluZGV4YCDmiJYgYGZyb21EYXRhc2V0SWRg44CCCiAgICAgIC8vIOi_meS6m-WxnuaAp--8jOaMh-WumuS6hu-8jHRyYW5zZm9ybSDnmoTovpPlhaXvvIzmnaXoh6rkuo7lk6rkuKogZGF0YXNldOOAguS-i-Wmgu-8jAogICAgICAvLyBgZnJvbURhdGFzZXRJbmRleDogMGAg6KGo56S66L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CC5Y-I5L6L5aaC77yMCiAgICAgIC8vIGBmcm9tRGF0YXNldElkOiAnYSdgIOihqOekuui-k-WFpeadpeiHquS6jiBgaWQ6ICdhJ2Ag55qEIGRhdGFzZXTjgIIKICAgICAgLy8g5b2T6L-Z5Lqb5bGe5oCn6YO95LiN5oyH5a6a5pe277yM6buY6K6k6K6k5Li677yM6L6T5YWl5p2l6Ieq5LqOIGluZGV4IOS4uiBgMGAg55qEIGRhdGFzZXQg44CCCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAyYOOAggogICAgICAvLyDlkIzmoLfvvIzov5nph4zlm6DkuLogYGZyb21EYXRhc2V0SW5kZXhgIOWSjCBgZnJvbURhdGFzZXRJZGAg6YO95rKh5pyJ6KKr5oyH5a6a77yMCiAgICAgIC8vIOmCo-S5iOi-k-WFpem7mOiupOadpeiHquS6jiBpbmRleCDkuLogYDBgIOeahCBkYXRhc2V0IOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDov5nkuKrnsbvlnovkuLogImZpbHRlciIg55qEIHRyYW5zZm9ybSDog73lpJ_pgY3ljoblubbnrZvpgInlh7rmu6HotrPmnaHku7bnmoTmlbDmja7pobnjgIIKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICAvLyDmr4_kuKogdHJhbnNmb3JtIOWmguaenOmcgOimgeaciemFjee9ruWPguaVsOeahOivne-8jOmDvemhu-mFjee9ruWcqCBgY29uZmlnYCDph4zjgIIKICAgICAgICAvLyDlnKjov5nkuKogImZpbHRlciIgdHJhbnNmb3JtIOS4re-8jGBjb25maWdgIOeUqOS6juaMh-Wumuetm-mAieadoeS7tuOAggogICAgICAgIC8vIOS4i-mdoui_meS4quetm-mAieadoeS7tuaYr--8mumAieWHuue7tOW6pu-8iCBkaW1lbnNpb24g77yJJ1llYXInIOS4reWAvOS4uiAyMDEyIOeahOaJgOaciQogICAgICAgIC8vIOaVsOaNrumhueOAggogICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgdmFsdWU6IDIwMTIgfQogICAgICB9CiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5pivIGAzYOOAggogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsIHZhbHVlOiAyMDEzIH0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnMjUlJywgJzUwJSddLAogICAgICAvLyDov5nkuKrppbzlm77ns7vliJfvvIzlvJXnlKjkuoYgaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgILkuZ_lsLHmmK_vvIzlvJXnlKjkuobkuIrov7AKICAgICAgLy8gMjAxMSDlubTpgqPkuKogImZpbHRlciIgdHJhbnNmb3JtIOeahOe7k-aenOOAggogICAgICBkYXRhc2V0SW5kZXg6IDEKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNTAlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICByYWRpdXM6IDUwLAogICAgICBjZW50ZXI6IFsnNzUlJywgJzUwJSddLAogICAgICBkYXRhc2V0SW5kZXg6IDMKICAgIH0KICBdCn07\'" v-bind="{}" />\n<p>现在我们简单总结下,使用 transform 时的几个要点:</p>\n<ul>\n<li>在一个空的 dataset 中声明 <code>transform</code>, <code>fromDatasetIndex</code>/<code>fromDatasetId</code> 来表示我们要生成新的数据。</li>\n<li>系列引用这个 dataset 。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E7%9A%84%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8" tabindex="-1">数据转换的进阶使用</h2>\n<h4 id="%E9%93%BE%E5%BC%8F%E5%A3%B0%E6%98%8E-transform" tabindex="-1">链式声明 transform</h4>\n<p><code>transform</code> 可以被链式声明,这是一个语法糖。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOWHoOS4qiB0cmFuc2Zvcm0g6KKr5aOw5piO5oiQIGFycmF5IO-8jOS7luS7rOaehOaIkOS6huS4gOS4qumTvu-8jAogICAgICAvLyDliY3kuIDkuKogdHJhbnNmb3JtIOeahOi-k-WHuuaYr-WQjuS4gOS4qiB0cmFuc2Zvcm0g55qE6L6T5YWl44CCCiAgICAgIHRyYW5zZm9ybTogWwogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgICAgY29uZmlnOiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCB2YWx1ZTogJ1RvZnUnIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAgIGNvbmZpZzogeyBkaW1lbnNpb246ICdZZWFyJywgb3JkZXI6ICdkZXNjJyB9CiAgICAgICAgfQogICAgICBdCiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdwaWUnLAogICAgLy8g6L-Z5Liq57O75YiX5byV55So5LiK6L-wIHRyYW5zZm9ybSDnmoTnu5PmnpzjgIIKICAgIGRhdGFzZXRJbmRleDogMQogIH0KfTs\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意:理论上,任何 transform 都可能有多个输入或多个输出。但是,如果一个 transform 被链式声明,它只能获取前一个 transform 的第一个输出作为输入(第一个 transform 除外),以及它只能把自己的第一个输出给到后一个 transform (最后一个 transform 除外)。</p>\n</blockquote>\n<h4 id="%E4%B8%80%E4%B8%AA-transform-%E8%BE%93%E5%87%BA%E5%A4%9A%E4%B8%AA-data" tabindex="-1">一个 transform 输出多个 data</h4>\n<p>在大多数场景下,transform 只需输出一个 data 。但是也有一些场景,需要输出多个 data ,每个 data 可以被不同的 series 或者 dataset 所使用。</p>\n<p>例如,在内置的 "boxplot" transform 中,除了 boxplot 系列所需要的 data 外,离群点( outlier )也会被生成,并且可以用例如散点图系列显示出来。例如,<a href="https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity">example</a>。</p>\n<p>我们提供配置 <a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 来满足这种情况,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgLy8g6L-Z5LiqIGRhdGFzZXQg55qEIGluZGV4IOS4uiBgMGDjgIIKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8g5Y6f5aeL5pWw5o2uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIC8vIOi_meS4qiBkYXRhc2V0IOeahCBpbmRleCDkuLogYDFg44CCCiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdib3hwbG90JwogICAgICB9CiAgICAgIC8vIOi_meS4qiAiYm94cGxvdCIgdHJhbnNmb3JtIOeUn-aIkOS6huS4pOS4quaVsOaNru-8mgogICAgICAvLyByZXN1bHRbMF06IGJveHBsb3Qgc2VyaWVzIOaJgOmcgOeahOaVsOaNruOAggogICAgICAvLyByZXN1bHRbMV06IOemu-e-pOeCueaVsOaNruOAggogICAgICAvLyDlvZPlhbbku5Ygc2VyaWVzIOaIluiAhSBkYXRhc2V0IOW8leeUqOi_meS4qiBkYXRhc2V0IOaXtu-8jOS7luS7rOm7mOiupOWPquiDveW-l-WIsAogICAgICAvLyByZXN1bHRbMF0g44CCCiAgICAgIC8vIOWmguaenOaDs-imgeS7luS7rOW-l-WIsCByZXN1bHRbMV0g77yM6ZyA6KaB6aKd5aSW5aOw5piO5aaC5LiL6L-Z5qC35LiA5LiqIGRhdGFzZXQg77yaCiAgICB9LAogICAgewogICAgICAvLyDov5nkuKogZGF0YXNldCDnmoQgaW5kZXgg5Li6IGAyYOOAggogICAgICAvLyDov5nkuKrpop3lpJbnmoQgZGF0YXNldCDmjIflrprkuobmlbDmja7mnaXmupDkuo4gaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldOOAggogICAgICBmcm9tRGF0YXNldEluZGV4OiAxLAogICAgICAvLyDlubbkuJTmjIflrprkuobojrflj5YgdHJhbnNmb3JtIHJlc3VsdFsxXSDjgIIKICAgICAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHR5cGU6ICdjYXRlZ29yeScKICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ2JveHBsb3QnLAogICAgICB0eXBlOiAnYm94cGxvdCcsCiAgICAgIC8vIFJlZmVyZW5jZSB0aGUgZGF0YSBmcm9tIHJlc3VsdFswXS4KICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAxYCDnmoQgZGF0YXNldCDjgIIKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9LAogICAgewogICAgICBuYW1lOiAnb3V0bGllcicsCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgLy8g6L-Z5LiqIHNlcmllcyDlvJXnlKggaW5kZXgg5Li6IGAyYCDnmoQgZGF0YXNldCDjgIIKICAgICAgLy8g5LuO6ICM5Lmf5bCx5b6X5Yiw5LqG5LiK6L-w55qEIHRyYW5zZm9ybSByZXN1bHRbMV0g77yI5Y2z56a7576k54K55pWw5o2u77yJCiAgICAgIGRhdGFzZXRJbmRleDogMgogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<p>另外,<a href="https://echarts.apache.org/option.html##dataset.fromTransformResult">dataset.fromTransformResult</a> 和 <a href="https://echarts.apache.org/option.html##dataset.transform">dataset.transform</a> 能同时出现在一个 dataset 中,这表示,这个 transform 的输入,是上游的结果中以 <code>fromTransformResult</code> 获取的结果。例如:</p>\n<md-code-block lang="js" code="\'ewogIGZyb21EYXRhc2V0SW5kZXg6IDEsCiAgZnJvbVRyYW5zZm9ybVJlc3VsdDogMSwKICB0cmFuc2Zvcm06IHsKICAgIHR5cGU6ICdzb3J0JywKICAgIGNvbmZpZzogeyBkaW1lbnNpb246IDIsIG9yZGVyOiAnZGVzYycgfQogIH0KfQ\'" line-highlights="\'\'" />\n<h4 id="%E5%9C%A8%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E4%B8%AD-debug" tabindex="-1">在开发环境中 debug</h4>\n<p>使用 transform 时,有时候我们会配不对,显示不出来结果,并且不知道哪里错了。所以,这里提供了一个配置项 <code>transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7fSwKICAgICAgICAvLyDphY3nva7kuLogYHRydWVgIOWQju-8jCB0cmFuc2Zvcm0g55qE57uT5p6cCiAgICAgICAgLy8g5Lya6KKrIGNvbnNvbGUubG9nIOaJk-WNsOWHuuadpeOAggogICAgICAgIHByaW50OiB0cnVlCiAgICAgIH0KICAgIH0KICBdCiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22filter%22" tabindex="-1">数据转换器 "filter"</h2>\n<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code>transform.type: "filter"</code>,以及给出数据筛选条件。如下例:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ1llYXInXSwKICAgICAgICBbJ0Nha2UnLCAxMjMsIDMyLCAyMDExXSwKICAgICAgICBbJ0xhdHRlJywgMjMxLCAxNCwgMjAxMV0sCiAgICAgICAgWydUb2Z1JywgMjM1LCA1LCAyMDExXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzQxLCAyNSwgMjAxMV0sCiAgICAgICAgWydQb3JyaWRnZScsIDEyMiwgMjksIDIwMTFdLAogICAgICAgIFsnQ2FrZScsIDE0MywgMzAsIDIwMTJdLAogICAgICAgIFsnTGF0dGUnLCAyMDEsIDE5LCAyMDEyXSwKICAgICAgICBbJ1RvZnUnLCAyNTUsIDcsIDIwMTJdLAogICAgICAgIFsnTWlsayBUZWUnLCAyNDEsIDI3LCAyMDEyXSwKICAgICAgICBbJ1BvcnJpZGdlJywgMTAyLCAzNCwgMjAxMl0sCiAgICAgICAgWydDYWtlJywgMTUzLCAyOCwgMjAxM10sCiAgICAgICAgWydMYXR0ZScsIDE4MSwgMjEsIDIwMTNdLAogICAgICAgIFsnVG9mdScsIDM5NSwgNCwgMjAxM10sCiAgICAgICAgWydNaWxrIFRlZScsIDI4MSwgMzEsIDIwMTNdLAogICAgICAgIFsnUG9ycmlkZ2UnLCA5MiwgMzksIDIwMTNdLAogICAgICAgIFsnQ2FrZScsIDIyMywgMjksIDIwMTRdLAogICAgICAgIFsnTGF0dGUnLCAyMTEsIDE3LCAyMDE0XSwKICAgICAgICBbJ1RvZnUnLCAzNDUsIDMsIDIwMTRdLAogICAgICAgIFsnTWlsayBUZWUnLCAyMTEsIDM1LCAyMDE0XSwKICAgICAgICBbJ1BvcnJpZGdlJywgNzIsIDI0LCAyMDE0XQogICAgICBdCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICB0eXBlOiAnZmlsdGVyJywKICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnWWVhcicsICc9JzogMjAxMSB9CiAgICAgICAgLy8g6L-Z5Liq562b6YCJ5p2h5Lu26KGo56S677yM6YGN5Y6G5pWw5o2u77yM562b6YCJ5Ye657u05bqm77yIIGRpbWVuc2lvbiDvvIkKICAgICAgICAvLyAnWWVhcicg5LiK5YC85Li6IDIwMTEg55qE5omA5pyJ5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" v-bind="{}" />\n<p>这是 filter 的另一个例子的效果:</p>\n<p><md-example src="data-transform-filter"></md-example></p>\n<p>在 "filter" transform 中,有这些要素:</p>\n<p><strong>关于维度( dimension ):</strong></p>\n<p><code>config.dimension</code> 指定了维度,能设成这样的值:</p>\n<ul>\n<li>设定成声明在 dataset 中的维度名,例如 <code>config: { dimension: \'Year\', \'=\': 2011 }</code>。不过, dataset 中维度名的声明并非强制,所以我们也可以</li>\n<li>设定成 dataset 中的维度 index (index 值从 0 开始)例如 <code>config: { dimension: 3, \'=\': 2011 }</code>。</li>\n</ul>\n<p><strong>关于关系比较操作符:</strong></p>\n<p>关系操作符,可以设定这些:\n<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>\n<ul>\n<li>多个关系操作符能声明在一个 {} 中,例如 <code>{ dimension: \'Price\', \'>=\': 20, \'<\': 30 }</code>。这表示“与”的关系,即,筛选出价格大于等于 20 小雨 30 的数据项。</li>\n<li>data 里的值,不仅可以是数值( number ),也可以是“类数值的字符串”(“ numeric string ”)。“类数值的字符串”本身是一个字符串,但是可以被转换为字面所描述的数值,例如 <code>\' 123 \'</code>。转换过程中,空格(全角半角空格)和换行符都能被消除( trim )。</li>\n<li>如果我们需要对日期对象(JS <code>Date</code>)或者日期字符串(如 \'2012-05-12\')进行比较,我们需要手动指定 <code>parser: \'time\'</code>,例如 <code>config: { dimension: 3, lt: \'2012-05-12\', parser: \'time\' }</code>。</li>\n<li>纯字符串比较也被支持,但是只能用在 <code>=</code> 或 <code>!=</code> 上。而 <code>></code>, <code>>=</code>, <code><</code>, <code><=</code> 并不支持纯字符串比较,也就是说,这四个操作符的右值,不能是字符串。</li>\n<li><code>reg</code> 操作符能提供正则表达式比较。例如, <code>{ dimension: \'Name\', reg: /\\s+Müller\\s*$/ }</code> 能在 <code>\'Name\'</code> 维度上选出姓 <code>\'Müller\'</code> 的数据项。</li>\n</ul>\n<p><strong>关于逻辑比较:</strong></p>\n<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>( <code>and</code> | <code>or</code> | <code>not</code> ):</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgLy8gLi4uCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdmaWx0ZXInLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g5L2_55SoIGFuZCDmk43kvZznrKbjgIIKICAgICAgICAgIC8vIOexu-S8vOWcsO-8jOWQjOagt-eahOS9jee9ruS5n-WPr-S7peS9v-eUqCDigJxvcuKAnSDmiJYg4oCcbm904oCd44CCCiAgICAgICAgICAvLyDkvYbmmK_ms6jmhI8g4oCcbm904oCdIOWQjuW6lOivpei3n-S4gOS4qiB7Li4ufSDogIzpnZ4gWy4uLl0g44CCCiAgICAgICAgICBhbmQ6IFsKICAgICAgICAgICAgeyBkaW1lbnNpb246ICdZZWFyJywgJz0nOiAyMDExIH0sCiAgICAgICAgICAgIHsgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAyMCwgJzwnOiAzMCB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICAgIC8vIOi_meS4quihqOi-vueahOaYr--8jOmAieWHuiAyMDExIOW5tOS7t-agvOWkp-S6juetieS6jiAyMCDkvYblsI_kuo4gMzAg55qE5pWw5o2u6aG544CCCiAgICAgIH0KICAgIH0KICBdLAogIHNlcmllczogewogICAgdHlwZTogJ3BpZScsCiAgICBkYXRhc2V0SW5kZXg6IDEKICB9Cn07\'" line-highlights="\'\'" />\n<p><code>and</code>/<code>or</code>/<code>not</code> 自然可以被嵌套,例如:</p>\n<md-code-block lang="js" code="\'dHJhbnNmb3JtOiB7CiAgdHlwZTogJ2ZpbHRlcicsCiAgY29uZmlnOiB7CiAgICBvcjogW3sKICAgICAgYW5kOiBbewogICAgICAgIGRpbWVuc2lvbjogJ1ByaWNlJywgJz49JzogMTAsICc8JzogMjAKICAgICAgfSwgewogICAgICAgIGRpbWVuc2lvbjogJ1NhbGVzJywgJzwnOiAxMDAKICAgICAgfSwgewogICAgICAgIG5vdDogeyBkaW1lbnNpb246ICdQcm9kdWN0JywgJz0nOiAnVG9mdScgfQogICAgICB9XQogICAgfSwgewogICAgICBhbmQ6IFt7CiAgICAgICAgZGltZW5zaW9uOiAnUHJpY2UnLCAnPj0nOiAxMCwgJzwnOiAyMAogICAgICB9LCB7CiAgICAgICAgZGltZW5zaW9uOiAnU2FsZXMnLCAnPCc6IDEwMAogICAgICB9LCB7CiAgICAgICAgbm90OiB7IGRpbWVuc2lvbjogJ1Byb2R1Y3QnLCAnPSc6ICdDYWtlJyB9CiAgICAgIH1dCiAgICB9XQogIH0KfQ\'" line-highlights="\'\'" />\n<p><strong>关于解析器( parser ):</strong></p>\n<p>还可以指定“解析器”( parser )来对值进行解析后再做比较。现在支持的解析器有:</p>\n<ul>\n<li><code>parser: \'time\'</code>:把原始值解析成时间戳( timestamp )后再做比较。这个解析器的行为,和 <code>echarts.time.parse</code> 相同,即,当原始值为时间对象( JS <code>Date</code> 实例),或者是时间戳,或者是描述时间的字符串(例如 <code>\'2012-05-12 03:11:22\'</code> ),都可以被解析为时间戳,然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值,那么会被解析为 NaN。</li>\n<li><code>parser: \'trim\'</code>:如果原始数据是字符串,则把字符串两端的空格(全角半角)和换行符去掉。如果不是字符串,还保持为原始数据。</li>\n<li><code>parser: \'number\'</code>:强制把原始数据转成数值。如果不能转成有意义的数值,那么转成 <code>NaN</code>。在大多数场景下,我们并不需要这个解析器,因为按默认策略,“像数值的字符串”就会被转成数值。但是默认策略比较严格,这个解析器比较宽松,如果我们遇到含有尾缀的字符串(例如 <code>\'33%\'</code>, <code>12px</code>),我们需要手动指定 <code>parser: \'number\'</code>,从而去掉尾缀转为数值才能比较。</li>\n</ul>\n<p>这个例子显示了如何使用 <code>parser: \'time\'</code>:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiBbCiAgICAgICAgWydQcm9kdWN0JywgJ1NhbGVzJywgJ1ByaWNlJywgJ0RhdGUnXSwKICAgICAgICBbJ01pbGsgVGVlJywgMzExLCAyMSwgJzIwMTItMDUtMTInXSwKICAgICAgICBbJ0Nha2UnLCAxMzUsIDI4LCAnMjAxMi0wNS0yMiddLAogICAgICAgIFsnTGF0dGUnLCAyNjIsIDM2LCAnMjAxMi0wNi0wMiddLAogICAgICAgIFsnTWlsayBUZWUnLCAzNTksIDIxLCAnMjAxMi0wNi0yMiddLAogICAgICAgIFsnQ2FrZScsIDEyMSwgMjgsICcyMDEyLTA3LTAyJ10sCiAgICAgICAgWydMYXR0ZScsIDI3MSwgMzYsICcyMDEyLTA2LTIyJ10KICAgICAgICAvLyAuLi4KICAgICAgXQogICAgfSwKICAgIHsKICAgICAgdHJhbnNmb3JtOiB7CiAgICAgICAgdHlwZTogJ2ZpbHRlcicsCiAgICAgICAgY29uZmlnOiB7CiAgICAgICAgICBkaW1lbnNpb246ICdEYXRlJywKICAgICAgICAgICc-PSc6ICcyMDEyLTA1JywKICAgICAgICAgICc8JzogJzIwMTItMDYnLAogICAgICAgICAgcGFyc2VyOiAndGltZScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<p><strong>形式化定义:</strong></p>\n<p>最后,我们给出,数据转换器 "filter" 的 config 的形式化定义:</p>\n<md-code-block lang="ts" code="\'dHlwZSBGaWx0ZXJUcmFuc2Zvcm0gPSB7CiAgdHlwZTogJ2ZpbHRlcic7CiAgY29uZmlnOiBDb25kaXRpb25hbEV4cHJlc3Npb25PcHRpb247Cn07CnR5cGUgQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uID0KICB8IHRydWUKICB8IGZhbHNlCiAgfCBSZWxhdGlvbmFsRXhwcmVzc2lvbk9wdGlvbgogIHwgTG9naWNhbEV4cHJlc3Npb25PcHRpb247CnR5cGUgUmVsYXRpb25hbEV4cHJlc3Npb25PcHRpb24gPSB7CiAgZGltZW5zaW9uOiBEaW1lbnNpb25OYW1lIHwgRGltZW5zaW9uSW5kZXg7CiAgcGFyc2VyPzogJ3RpbWUnIHwgJ3RyaW0nIHwgJ251bWJlcic7CiAgbHQ_OiBEYXRhVmFsdWU7IC8vIGxlc3MgdGhhbgogIGx0ZT86IERhdGFWYWx1ZTsgLy8gbGVzcyB0aGFuIG9yIGVxdWFsCiAgZ3Q_OiBEYXRhVmFsdWU7IC8vIGdyZWF0ZXIgdGhhbgogIGd0ZT86IERhdGFWYWx1ZTsgLy8gZ3JlYXRlciB0aGFuIG9yIGVxdWFsCiAgZXE_OiBEYXRhVmFsdWU7IC8vIGVxdWFsCiAgbmU_OiBEYXRhVmFsdWU7IC8vIG5vdCBlcXVhbAogICc8Jz86IERhdGFWYWx1ZTsgLy8gbHQKICAnPD0nPzogRGF0YVZhbHVlOyAvLyBsdGUKICAnPic_OiBEYXRhVmFsdWU7IC8vIGd0CiAgJz49Jz86IERhdGFWYWx1ZTsgLy8gZ3RlCiAgJz0nPzogRGF0YVZhbHVlOyAvLyBlcQogICchPSc_OiBEYXRhVmFsdWU7IC8vIG5lCiAgJzw-Jz86IERhdGFWYWx1ZTsgLy8gbmUgKFNRTCBzdHlsZSkKICByZWc_OiBSZWdFeHAgfCBzdHJpbmc7IC8vIFJlZ0V4cAp9Owp0eXBlIExvZ2ljYWxFeHByZXNzaW9uT3B0aW9uID0gewogIGFuZD86IENvbmRpdGlvbmFsRXhwcmVzc2lvbk9wdGlvbltdOwogIG9yPzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uW107CiAgbm90PzogQ29uZGl0aW9uYWxFeHByZXNzaW9uT3B0aW9uOwp9Owp0eXBlIERhdGFWYWx1ZSA9IHN0cmluZyB8IG51bWJlciB8IERhdGU7CnR5cGUgRGltZW5zaW9uTmFtZSA9IHN0cmluZzsKdHlwZSBEaW1lbnNpb25JbmRleCA9IG51bWJlcjs\'" line-highlights="\'\'" />\n<h2 id="%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8-%22sort%22" tabindex="-1">数据转换器 "sort"</h2>\n<p>"sort" 是另一个内置的数据转换器,用于排序数据。目前主要能用于在类目轴( <code>axis.type: \'category\'</code> )中显示排过序的数据。例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICAvLyDmjInliIbmlbDmjpLluo8KICAgICAgICBjb25maWc6IHsgZGltZW5zaW9uOiAnc2NvcmUnLCBvcmRlcjogJ2FzYycgfQogICAgICB9CiAgICB9CiAgXSwKICBzZXJpZXM6IHsKICAgIHR5cGU6ICdiYXInLAogICAgZGF0YXNldEluZGV4OiAxCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="data-transform-sort-bar"></md-example></p>\n<p>数据转换器 "sort" 还有一些额外的功能:</p>\n<ul>\n<li>可以多重排序,多个维度一起排序。见下面的例子。</li>\n<li>排序规则是这样的:\n<ul>\n<li>默认按照数值大小排序。其中,“可转为数值的字符串”也被转换成数值,和其他数值一起按大小排序。</li>\n<li>对于其他“不能转为数值的字符串”,也能在它们之间按字符串进行排序。这个特性有助于这种场景:把相同标签的数据项排到一起,尤其是当多个维度共同排序时。见下面的例子。</li>\n<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时,或者它们和“其他类型的值”进行比较时,它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”,并且可以设置 <code>incomparable: \'min\' | \'max\'</code> 来指定一个“incomparable”在这个比较中是最大还是最小,从而能使它们能产生比较结果。这个设定的用途,比如可以是,决定空值(例如 <code>null</code>, <code>undefined</code>, <code>NaN</code>, <code>\'\'</code>, <code>\'-\'</code>)在排序的头还是尾。</li>\n</ul>\n</li>\n<li>过滤器 <code>filter: \'time\' | \'trim\' | \'number\'</code> 可以被使用,和数据转换器 "filter" 中的情况一样。\n<ul>\n<li>如果要对时间进行排序(例如,值为 JS <code>Date</code> 实例或者时间字符串如 <code>\'2012-03-12 11:13:54\'</code>),我们需要声明 <code>parser: \'time\'</code>。</li>\n<li>如果需要对有后缀的数值进行排序(如 <code>\'33%\'</code>, <code>\'16px\'</code>)我们需要声明 <code>parser: \'number\'</code>。</li>\n</ul>\n</li>\n</ul>\n<p>这是一个“多维度排序”的例子。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgZGltZW5zaW9uczogWyduYW1lJywgJ2FnZScsICdwcm9mZXNzaW9uJywgJ3Njb3JlJywgJ2RhdGUnXSwKICAgICAgc291cmNlOiBbCiAgICAgICAgWycgSGFubmFoIEtyYXVzZSAnLCA0MSwgJ0VuZ2luZWVyJywgMzE0LCAnMjAxMS0wMi0xMiddLAogICAgICAgIFsnWmhhbyBRaWFuICcsIDIwLCAnVGVhY2hlcicsIDM1MSwgJzIwMTEtMDMtMDEnXSwKICAgICAgICBbJyBKYXNtaW4gS3JhdXNlICcsIDUyLCAnTXVzaWNpYW4nLCAyODcsICcyMDExLTAyLTE0J10sCiAgICAgICAgWydMaSBMZWknLCAzNywgJ1RlYWNoZXInLCAyMTksICcyMDExLTAyLTE4J10sCiAgICAgICAgWycgS2FybGUgTmV1bWFubiAnLCAyNSwgJ0VuZ2luZWVyJywgMjUzLCAnMjAxMS0wNC0wMiddLAogICAgICAgIFsnIEFkcmlhbiBHcm_DnycsIDE5LCAnVGVhY2hlcicsIG51bGwsICcyMDExLTAxLTE2J10sCiAgICAgICAgWydNaWEgTmV1bWFubicsIDcxLCAnRW5naW5lZXInLCAxNjUsICcyMDExLTAzLTE5J10sCiAgICAgICAgWycgQsO2aG0gRnVjaHMnLCAzNiwgJ011c2ljaWFuJywgMzE4LCAnMjAxMS0wMi0yNCddLAogICAgICAgIFsnSGFuIE1laW1laSAnLCA2NywgJ0VuZ2luZWVyJywgMzY2LCAnMjAxMS0wMy0xMiddCiAgICAgIF0KICAgIH0sCiAgICB7CiAgICAgIHRyYW5zZm9ybTogewogICAgICAgIHR5cGU6ICdzb3J0JywKICAgICAgICBjb25maWc6IFsKICAgICAgICAgIC8vIOWvueS4pOS4que7tOW6puaMieWjsOaYjueahOS8mOWFiOe6p-WIhuWIq-aOkuW6j-OAggogICAgICAgICAgeyBkaW1lbnNpb246ICdwcm9mZXNzaW9uJywgb3JkZXI6ICdkZXNjJyB9LAogICAgICAgICAgeyBkaW1lbnNpb246ICdzY29yZScsIG9yZGVyOiAnZGVzYycgfQogICAgICAgIF0KICAgICAgfQogICAgfQogIF0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnYmFyJywKICAgIGRhdGFzZXRJbmRleDogMQogIH0KICAvLy4uLgp9Ow\'" line-highlights="\'\'" />\n<p><md-example src="doc-example/data-transform-multiple-sort-bar"></md-example></p>\n<p>最后,我们给出数据转换器 "sort" 的 config 的形式化定义。</p>\n<md-code-block lang="ts" code="\'dHlwZSBTb3J0VHJhbnNmb3JtID0gewogIHR5cGU6ICdmaWx0ZXInOwogIGNvbmZpZzogT3JkZXJFeHByZXNzaW9uIHwgT3JkZXJFeHByZXNzaW9uW107Cn07CnR5cGUgT3JkZXJFeHByZXNzaW9uID0gewogIGRpbWVuc2lvbjogRGltZW5zaW9uTmFtZSB8IERpbWVuc2lvbkluZGV4OwogIG9yZGVyOiAnYXNjJyB8ICdkZXNjJzsKICBpbmNvbXBhcmFibGU_OiAnbWluJyB8ICdtYXgnOwogIHBhcnNlcj86ICd0aW1lJyB8ICd0cmltJyB8ICdudW1iZXInOwp9Owp0eXBlIERpbWVuc2lvbk5hbWUgPSBzdHJpbmc7CnR5cGUgRGltZW5zaW9uSW5kZXggPSBudW1iZXI7\'" line-highlights="\'\'" />\n<h2 id="%E4%BD%BF%E7%94%A8%E5%A4%96%E9%83%A8%E7%9A%84%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2%E5%99%A8" tabindex="-1">使用外部的数据转换器</h2>\n<p>除了上述的内置的数据转换器外,我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中,我们使用第三方库 <a href="https://github.com/ecomfe/echarts-stat">ecStat</a> 提供的数据转换器。</p>\n<p>生成数据的回归线:</p>\n<md-code-block lang="js" code="\'Ly8g6aaW5YWI6KaB5rOo5YaM5aSW6YOo5pWw5o2u6L2s5o2i5Zmo44CCCmVjaGFydHMucmVnaXN0ZXJUcmFuc2Zvcm0oZWNTdGF0VHJhbnNmb3JtKGVjU3RhdCkucmVncmVzc2lvbik7\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGRhdGFzZXQ6IFsKICAgIHsKICAgICAgc291cmNlOiByYXdEYXRhCiAgICB9LAogICAgewogICAgICB0cmFuc2Zvcm06IHsKICAgICAgICAvLyDlvJXnlKjms6jlhoznmoTmlbDmja7ovazmjaLlmajjgIIKICAgICAgICAvLyDms6jmhI_vvIzmr4_kuKrlpJbpg6jnmoTmlbDmja7ovazmjaLlmajvvIzpg73mnInlkI3nqbrpl7TvvIjlpoIgJ2VjU3RhdDp4eHgn77yMJ2VjU3RhdCcg5piv5ZCN56m66Ze077yJ44CCCiAgICAgICAgLy8g6ICM5YaF572u5pWw5o2u6L2s5o2i5Zmo77yI5aaCICdmaWx0ZXInLCAnc29ydCfvvInmsqHmnInlkI3nqbrpl7TjgIIKICAgICAgICB0eXBlOiAnZWNTdGF0OnJlZ3Jlc3Npb24nLAogICAgICAgIGNvbmZpZzogewogICAgICAgICAgLy8g6L-Z6YeM5piv5q2k5aSW6YOo5pWw5o2u6L2s5o2i5Zmo5omA6ZyA55qE5Y-C5pWw44CCCiAgICAgICAgICBtZXRob2Q6ICdleHBvbmVudGlhbCcKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICdzY2F0dGVyJywKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBkYXRhc2V0SW5kZXg6IDAKICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICdyZWdyZXNzaW9uJywKICAgICAgdHlwZTogJ2xpbmUnLAogICAgICBzeW1ib2w6ICdub25lJywKICAgICAgZGF0YXNldEluZGV4OiAxCiAgICB9CiAgXQp9Ow\'" line-highlights="\'\'" />\n<p>一些使用 echarts-stat 的例子:</p>\n<ul>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&edit=1&reset=1">聚集 (Aggregate)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&edit=1&reset=1">直方图 (Histogram)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&edit=1&reset=1">简单聚类 (Clustering)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&edit=1&reset=1">线性回归线 (Linear Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&edit=1&reset=1">指数回归线 (Exponential Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&edit=1&reset=1">对数回归线 (Logarithmic Regression)</a></li>\n<li><a href="https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&edit=1&reset=1">多项式回归线 (Polynomial Regression)</a></li>\n</ul>\n',postPath:"zh/concepts/data-transform"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:e,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:o,draft:g},{title:"获取灵感",dir:l},{title:"寻求帮助",dir:a},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"ECharts 5 升级指南",dir:r},{title:5.2,dir:s}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:h},{title:"配置项",dir:y,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:b},{title:"数据集",dir:W},{title:"数据转换",dir:u},{title:"坐标系",dir:Z,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:M,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:S,draft:g},{title:"阶梯瀑布图",dir:X},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:E,children:[{title:"基础折线图",dir:F},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:R},{title:"平滑曲线图",dir:v},{title:"阶梯线图",dir:Y}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:H},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:V,children:[{title:"基础散点图",dir:j}]}]},{title:f,dir:I,draft:g},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:k}]},{title:"数据处理",dir:T,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:f,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:e,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:d},{title:"Resources",dir:o,draft:g},{title:"Inspiration",dir:l},{title:"Get Help",dir:a},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:n},{title:"ECharts 5 Upgrade Guide",dir:r},{title:5.2,dir:s}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:h},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:b},{title:"Dataset",dir:W},{title:"Data Transform",dir:u},{title:"Coordinate",dir:Z,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:w}]},{title:"Application",dir:J,children:[{title:"Common Charts",dir:M,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:S,draft:g},{title:"Waterfall",dir:X}]},{title:"Line",dir:E,children:[{title:"Basic Line",dir:F},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:R},{title:"Smoothed Line",dir:v},{title:"Step Line",dir:Y}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:H},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:V,children:[{title:"Basic Scatter",dir:j}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:k}]},{title:"Data",dir:T,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/data-transform",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/dataset/index.html b/handbook/zh/concepts/dataset/index.html
index 94bc35c..1ed4eb9 100644
--- a/handbook/zh/concepts/dataset/index.html
+++ b/handbook/zh/concepts/dataset/index.html
@@ -3,126 +3,497 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="数据集"><a href="#%E6%95%B0%E6%8D%AE%E9%9B%86" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据集</h1>
-<p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p>
-<h2 id="在系列中设置数据"><a href="#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在系列中设置数据</h2>
-<p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。
-但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。</p>
-<h2 id="在数据集中设置数据"><a href="#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>在数据集中设置数据</h2>
-<p>而数据设置在 <code>数据集</code>(<code>dataset</code>)中,会有这些好处:</p>
-<ul>
-<li>能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。</li>
-<li>数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。</li>
-<li>数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。</li>
-<li>支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。</li>
-</ul>
-<p>下面是一个最简单的 <code>dataset</code> 的例子:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>或者也可以使用常见的“对象数组”的格式:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="数据到图形的映射"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射</h2>
-<p>如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。</p>
-<p>简而言之,可以进行这些映射的设定:</p>
-<ul>
-<li>指定 <code>数据集</code> 的列(column)还是行(row)映射为 <code>系列</code>(<code>series</code>)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">series.seriesLayoutBy</a> 属性来配置。默认是按照列(column)来映射。</li>
-<li>指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 属性,以及 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 <code>dataset.source</code> 中的第一列;三个柱图系列,一一对应到 <code>dataset.source</code> 中后面每一列。</li>
-</ul>
-<p>下面详细解释这些映射的设定。</p>
-<h2 id="把数据集(-dataset-)的行或列映射为系列(series)"><a href="#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>把数据集( dataset )的行或列映射为系列(series)</h2>
-<p>有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。</p>
-<p>用户可以使用 <code>seriesLayoutBy</code> 配置项,改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值:</p>
-<ul>
-<li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>
-<li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li>
-</ul>
-<p>看这个例子:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="维度(-dimension-)"><a href="#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>维度( dimension )</h2>
-<p>常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。</p>
-<p>维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始,才是正式的数据。<code>dataset.source</code> 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行(列)就是维度,或者 <code>dataset.sourceHeader: false</code> 表明第一行(列)开始就直接是数据。</p>
-<p>维度的定义,也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。</p>
-<p>维度类型( dimension type )可以取这些值:</p>
-<ul>
-<li><code>'number'</code>: 默认,表示普通数据。</li>
-<li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。</li>
-<li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴(<a href="https://echarts.apache.org/option.html##xAxis.type" rel="nofollow noopener noreferrer" target="_blank">axis.type</a> 为 <code>'time'</code>)上,那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">data</a>。</li>
-<li><code>'float'</code>: 如果设置成 <code>'float'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>
-<li><code>'int'</code>: 如果设置成 <code>'int'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>
-</ul>
-<h2 id="数据到图形的映射(-seriesencode-)"><a href="#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据到图形的映射( series.encode )</h2>
-<p>了解了维度的概念后,我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode" rel="nofollow noopener noreferrer" target="_blank">series.encode</a> 来做映射。总体是这样的感觉:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。</p>
-<p>下面是 <code>series.encode</code> 支持的属性:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a> 。</p>
-<h2 id="默认的-seriesencode"><a href="#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>默认的 series.encode</h2>
-<p>值得一提的是,当 <code>series.encode</code> 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:</p>
-<ul>
-<li>在坐标系中(如直角坐标系、极坐标系等)
-<ul>
-<li>如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。</li>
-<li>如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。</li>
-</ul>
-</li>
-<li>如果没有坐标系(如饼图)
-<ul>
-<li>取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。</li>
-</ul>
-</li>
-</ul>
-<p>默认的规则不能满足要求时,就可以自己来配置 <code>encode</code>,也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">例子</a>。</p>
-<h2 id="几个常见的-seriesencode-设置方式举例"><a href="#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>几个常见的 series.encode 设置方式举例</h2>
-<p>问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?</p>
-<p>答:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?</p>
-<p>答:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>问:如何把第二列设置为标签?</p>
-<p>答:
-关于标签的显示 <a href="https://echarts.apache.org/option.html##series.label.formatter" rel="nofollow noopener noreferrer" target="_blank">label.formatter</a>,现在支持引用特定维度的值,例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?</p>
-<p>答:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>问:数据里没有维度名,那么怎么给出维度名?</p>
-<p>答:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>问:如何把第三列映射为气泡图的点的大小?</p>
-<p>答:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>问:encode 里指定了映射,但是不管用?</p>
-<p>答:可以查查有没有拼错,比如,维度名是:<code>'Life Expectancy'</code>,encode 中拼成了 <code>'Life Expectency'</code>。</p>
-<h2 id="视觉通道(颜色、尺寸等)的映射"><a href="#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>视觉通道(颜色、尺寸等)的映射</h2>
-<p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>。</p>
-<h2 id="数据的各种格式"><a href="#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据的各种格式</h2>
-<p>多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 <code>dataset.source</code> 中,在不少情况下可以免去一些数据处理的步骤。</p>
-<blockquote>
-<p>假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv" rel="nofollow noopener noreferrer" target="_blank">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse" rel="nofollow noopener noreferrer" target="_blank">PapaParse</a> 将 csv 转成 JSON。</p>
-</blockquote>
-<p>在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>
-<p>除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy" rel="nofollow noopener noreferrer" target="_blank">seriesLayoutBy</a> 参数。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="多个-dataset-以及如何引用他们"><a href="#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>多个 dataset 以及如何引用他们</h2>
-<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex" rel="nofollow noopener noreferrer" target="_blank">series.datasetIndex</a> 来指定引用哪个 dataset。例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="echarts-3-的数据设置方式(seriesdata)仍正常使用"><a href="#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>ECharts 3 的数据设置方式(series.data)仍正常使用</h2>
-<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>, 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 而非 <code>dataset</code>。</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>其实,<a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap" rel="nofollow noopener noreferrer" target="_blank">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph" rel="nofollow noopener noreferrer" target="_blank">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines" rel="nofollow noopener noreferrer" target="_blank">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p>
-<h2 id="其他"><a href="#%E5%85%B6%E4%BB%96" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>其他</h2>
-<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1> <p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p> <h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2> <p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。
+但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。</p> <h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在数据集中设置数据</h2> <p>而数据设置在 <code>数据集</code>(<code>dataset</code>)中,会有这些好处:</p> <ul><li>能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。</li> <li>数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。</li> <li>数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。</li> <li>支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。</li></ul> <p>下面是一个最简单的 <code>dataset</code> 的例子:</p> <div class="md-live layout-tb"><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 = {
+ legend: {},
+ tooltip: {},
+ 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]
+ ]
+ },
+ // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。
+ xAxis: { type: 'category' },
+ // 声明一个 Y 轴,数值轴。
+ yAxis: {},
+ // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。
+ 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">// 提供一份数据。</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">// 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。</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">// 声明一个 Y 轴,数值轴。</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">// 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。</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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>或者也可以使用常见的“对象数组”的格式:</p> <div class="md-live layout-tb"><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 = {
+ legend: {},
+ tooltip: {},
+ dataset: {
+ // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,
+ // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。
+ // 如果不指定 dimensions,也可以通过指定 series.encode
+ // 完成映射,参见后文。
+ 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">// 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,</span>
+ <span class="token comment">// 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。</span>
+ <span class="token comment">// 如果不指定 dimensions,也可以通过指定 series.encode</span>
+ <span class="token comment">// 完成映射,参见后文。</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">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">93.7</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> <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 string">'2017'</span><span class="token operator">:</span> <span class="token number">55.1</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> <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">,</span> <span class="token string">'2017'</span><span class="token operator">:</span> <span class="token number">82.5</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> <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">,</span> <span class="token string">'2017'</span><span class="token operator">:</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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2> <p>如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。</p> <p>简而言之,可以进行这些映射的设定:</p> <ul><li>指定 <code>数据集</code> 的列(column)还是行(row)映射为 <code>系列</code>(<code>series</code>)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列(column)来映射。</li> <li>指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 属性,以及 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 <code>dataset.source</code> 中的第一列;三个柱图系列,一一对应到 <code>dataset.source</code> 中后面每一列。</li></ul> <p>下面详细解释这些映射的设定。</p> <h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" tabindex="-1">把数据集( dataset )的行或列映射为系列(series)</h2> <p>有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。</p> <p>用户可以使用 <code>seriesLayoutBy</code> 配置项,改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值:</p> <ul><li>'column': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li> <li>'row': 系列被安放到 <code>dataset</code> 的行上面。</li></ul> <p>看这个例子:</p> <div class="md-live layout-tb"><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 = {
+ 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: [
+ // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ { type: 'bar', seriesLayoutBy: 'row' },
+ // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 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">]</span><span class="token punctuation">,</span>
+ 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><span class="token punctuation">,</span>
+ series<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// 这几个系列会出现在第一个直角坐标系中,每个系列对应到 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">// 这几个系列会出现在第二个直角坐标系中,每个系列对应到 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" tabindex="-1">维度( dimension )</h2> <p>常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。</p> <p>维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,<code>'score'</code>、<code>'amount'</code>、<code>'product'</code> 就是维度名。从第二行开始,才是正式的数据。<code>dataset.source</code> 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行(列)就是维度,或者 <code>dataset.sourceHeader: false</code> 表明第一行(列)开始就直接是数据。</p> <p>维度的定义,也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> option1 <span class="token operator">=</span> <span class="token punctuation">{</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 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">// 可以简写为 string ,表示 dimension name 。</span>
+ <span class="token string">'amount'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 可以在 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 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>
+
+<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 comment">// ...</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 会更优先于 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">// 可以设置为 null 表示不想设置维度名</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。</p> <p>维度类型( dimension type )可以取这些值:</p> <ul><li><code>'number'</code>: 默认,表示普通数据。</li> <li><code>'ordinal'</code>: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。</li> <li><code>'time'</code>: 表示时间数据。设置成 <code>'time'</code> 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴(<a href="https://echarts.apache.org/option.html##xAxis.type">axis.type</a> 为 <code>'time'</code>)上,那么会被自动设置为 <code>'time'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data">data</a>。</li> <li><code>'float'</code>: 如果设置成 <code>'float'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li> <li><code>'int'</code>: 如果设置成 <code>'int'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li></ul> <h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-series.encode-%EF%BC%89" tabindex="-1">数据到图形的映射( series.encode )</h2> <p>了解了维度的概念后,我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 来做映射。总体是这样的感觉:</p> <div class="md-live layout-tb"><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">var option = {
+ 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: {
+ // 将 "amount" 列映射到 X 轴。
+ x: 'amount',
+ // 将 "product" 列映射到 Y 轴。
+ 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">// 将 "amount" 列映射到 X 轴。</span>
+ x<span class="token operator">:</span> <span class="token string">'amount'</span><span class="token punctuation">,</span>
+ <span class="token comment">// 将 "product" 列映射到 Y 轴。</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 <code>'x'</code>, <code>'y'</code>, <code>'tooltip'</code> 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。</p> <p>下面是 <code>series.encode</code> 支持的属性:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 在任何坐标系和系列中,都支持:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 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">// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 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">// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。</span>
+ itemId<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
+ <span class="token comment">// 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。</span>
+ itemName<span class="token operator">:</span> <span class="token number">3</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 直角坐标系(grid/cartesian)特有的属性:</span>
+encode<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:</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">// 把“维度0”映射到 Y 轴。</span>
+ y<span class="token operator">:</span> <span class="token number">0</span>
+<span class="token punctuation">}</span>
+
+<span class="token comment">// 单轴(singleAxis)特有的属性:</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)特有的属性:</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)特有的属性:</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">// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1">示例</a> 。</p> <h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2> <p>值得一提的是,当 <code>series.encode</code> 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:</p> <ul><li>在坐标系中(如直角坐标系、极坐标系等)
+<ul><li>如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。</li> <li>如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。</li></ul></li> <li>如果没有坐标系(如饼图)
+<ul><li>取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。</li></ul></li></ul> <p>默认的规则不能满足要求时,就可以自己来配置 <code>encode</code>,也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1">例子</a>。</p> <h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2> <p>问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?</p> <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>
+ series<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?</p> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>问:如何把第二列设置为标签?</p> <p>答:
+关于标签的显示 <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}'` 表示 “名为 score” 的维度里的值。</span>
+ <span class="token comment">// `'{@[4]}'` 表示引用序号为 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?</p> <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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>问:数据里没有维度名,那么怎么给出维度名?</p> <p>答:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>问:如何把第三列映射为气泡图的点的大小?</p> <p>答:</p> <div class="md-live layout-tb"><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">var option = {
+ 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, // 指向第三列(列序号从 0 开始记,所以设置为 2)。
+ min: 2, // 需要给出数值范围,最小数值。
+ max: 15, // 需要给出数值范围,最大数值。
+ inRange: {
+ // 气泡尺寸:5 像素到 60 像素。
+ 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">// 指向第三列(列序号从 0 开始记,所以设置为 2)。</span>
+ min<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token comment">// 需要给出数值范围,最小数值。</span>
+ max<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> <span class="token comment">// 需要给出数值范围,最大数值。</span>
+ inRange<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 气泡尺寸:5 像素到 60 像素。</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>问:encode 里指定了映射,但是不管用?</p> <p>答:可以查查有没有拼错,比如,维度名是:<code>'Life Expectancy'</code>,encode 中拼成了 <code>'Life Expectency'</code>。</p> <h2 id="%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">视觉通道(颜色、尺寸等)的映射</h2> <p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1">示例</a>。</p> <h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2> <p>多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 <code>dataset.source</code> 中,在不少情况下可以免去一些数据处理的步骤。</p> <blockquote><p>假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p></blockquote> <p>在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p> <p>除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>dataset<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 按行的 key-value 形式(对象数组),这是个比较常见的格式。</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">// 按列的 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" tabindex="-1">多个 dataset 以及如何引用他们</h2> <p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">// 序号为 0 的 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">// 序号为 1 的 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">// 序号为 2 的 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">// 使用序号为 2 的 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">// 使用序号为 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><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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式(series.data)仍正常使用</h2> <p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a> 而非 <code>dataset</code>。</p> <div class="md-live layout-tb"><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 = {
+ 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>其实,<a href="https://echarts.apache.org/option.html##series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p> <h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2> <p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:
<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。
-后续会有更多的图表进行支持。</p>
-<p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1" rel="nofollow noopener noreferrer" target="_blank">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">在系列中设置数据</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE">在数据集中设置数据</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84">数据到图形的映射</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89">把数据集( dataset )的行或列映射为系列(series)</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89">维度( dimension )</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89">数据到图形的映射( series.encode )</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode">默认的 series.encode</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B">几个常见的 series.encode 设置方式举例</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84">视觉通道(颜色、尺寸等)的映射</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F">数据的各种格式</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC">多个 dataset 以及如何引用他们</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8">ECharts 3 的数据设置方式(series.data)仍正常使用</a></li><li class="toc2"><a href="/handbook/zh/concepts/dataset#%E5%85%B6%E4%BB%96">其他</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/dataset.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,p,r,l,i,n,d,s,y,o,c,h,u,v,g,E,m,B,x,f,A,b,C,I,N,D,k,w,L,M,S,F,H,P,T,z,R,X,Y,W,_,O,G,J,V,U,Z,$,j,q,K,Q,ee,te,ae,pe,re,le,ie,ne,de,se,ye,oe,ce,he,ue,ve,ge,Ee,me,Be,xe,fe,Ae,be,Ce,Ie,Ne,De,ke,we,Le,Me,Se,Fe,He,Pe,Te,ze,Re,Xe,Ye,We,_e,Oe,Ge,Je,Ve,Ue,Ze,$e,je,qe,Ke,Qe,et,tt,at,pt,rt,lt,it,nt){return{layout:"default",data:[{article:{slug:b,toc:[{id:H,depth:2,text:H},{id:P,depth:2,text:P},{id:T,depth:2,text:T},{id:ee,depth:2,text:te},{id:ae,depth:2,text:pe},{id:re,depth:2,text:le},{id:ie,depth:2,text:ne},{id:de,depth:2,text:se},{id:z,depth:2,text:z},{id:R,depth:2,text:R},{id:ye,depth:2,text:oe},{id:ce,depth:2,text:he},{id:X,depth:2,text:X}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:I},children:[{type:t,tag:l,props:{href:"#%E6%95%B0%E6%8D%AE%E9%9B%86",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:I}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:I}]},{type:e,value:Y},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:")是专门用来管理数据的组件。虽然每个系列都可以在 "},{type:t,tag:p,props:{},children:[{type:e,value:M}]},{type:e,value:" 中设置数据,但是从 ECharts4 支持 "},{type:t,tag:p,props:{},children:[{type:e,value:I}]},{type:e,value:" 开始,更推荐使用 "},{type:t,tag:p,props:{},children:[{type:e,value:I}]},{type:e,value:" 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。"}]},{type:e,value:a},{type:t,tag:f,props:{id:H},children:[{type:t,tag:l,props:{href:"#%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:H}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"如果数据设置在 "},{type:t,tag:p,props:{},children:[{type:e,value:J}]},{type:e,value:Y},{type:t,tag:p,props:{},children:[{type:e,value:W}]},{type:e,value:")中,例如:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:ue}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。"}]},{type:e,value:a},{type:t,tag:f,props:{id:P},children:[{type:t,tag:l,props:{href:"#%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:P}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"而数据设置在 "},{type:t,tag:p,props:{},children:[{type:e,value:I}]},{type:e,value:Y},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:")中,会有这些好处:"}]},{type:e,value:a},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"下面是一个最简单的 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:" 的例子:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 提供一份数据。\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n // 声明一个 X 轴,类目轴(category)。默认情况下,类目轴对应到 dataset 第一列。\n xAxis: { type: 'category' },\n // 声明一个 Y 轴,数值轴。\n yAxis: {},\n // 声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列。\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"或者也可以使用常见的“对象数组”的格式:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n // 用 dimensions 指定了维度的顺序。直角坐标系中,如果 X 轴 type 为 category,\n // 默认把第一个维度映射到 X 轴上,后面维度映射到 Y 轴上。\n // 如果不指定 dimensions,也可以通过指定 series.encode\n // 完成映射,参见后文。\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n { product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },\n { product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },\n { product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },\n { product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:e,value:a},{type:t,tag:f,props:{id:T},children:[{type:t,tag:l,props:{href:"#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:T}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"简而言之,可以进行这些映射的设定:"}]},{type:e,value:a},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"指定 "},{type:t,tag:p,props:{},children:[{type:e,value:I}]},{type:e,value:" 的列(column)还是行(row)映射为 "},{type:t,tag:p,props:{},children:[{type:e,value:J}]},{type:e,value:Y},{type:t,tag:p,props:{},children:[{type:e,value:W}]},{type:e,value:")。这件事可以使用 "},{type:t,tag:l,props:{href:ve,rel:[n,d,s],target:y},children:[{type:e,value:"series.seriesLayoutBy"}]},{type:e,value:" 属性来配置。默认是按照列(column)来映射。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 "},{type:t,tag:l,props:{href:ge,rel:[n,d,s],target:y},children:[{type:e,value:w}]},{type:e,value:" 属性,以及 "},{type:t,tag:l,props:{href:V,rel:[n,d,s],target:y},children:[{type:e,value:U}]},{type:e,value:" 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 "},{type:t,tag:p,props:{},children:[{type:e,value:_}]},{type:e,value:" 中的第一列;三个柱图系列,一一对应到 "},{type:t,tag:p,props:{},children:[{type:e,value:_}]},{type:e,value:" 中后面每一列。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"下面详细解释这些映射的设定。"}]},{type:e,value:a},{type:t,tag:f,props:{id:ee},children:[{type:t,tag:l,props:{href:"#%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:te}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"用户可以使用 "},{type:t,tag:p,props:{},children:[{type:e,value:Z}]},{type:e,value:" 配置项,改变图表对于行列的理解。"},{type:t,tag:p,props:{},children:[{type:e,value:Z}]},{type:e,value:" 可取值:"}]},{type:e,value:a},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"'column': 默认值。系列被安放到 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:" 的列上面。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"'row': 系列被安放到 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:" 的行上面。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"看这个例子:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:"option = {\n legend: {},\n tooltip: {},\n dataset: {\n source: [\n ['product', '2012', '2013', '2014', '2015'],\n ['Matcha Latte', 41.1, 30.4, 65.1, 53.3],\n ['Milk Tea', 86.5, 92.1, 85.7, 83.1],\n ['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]\n ]\n },\n xAxis: [\n { type: 'category', gridIndex: 0 },\n { type: 'category', gridIndex: 1 }\n ],\n yAxis: [{ gridIndex: 0 }, { gridIndex: 1 }],\n grid: [{ bottom: '55%' }, { top: '55%' }],\n series: [\n // 这几个系列会出现在第一个直角坐标系中,每个系列对应到 dataset 的每一行。\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n { type: 'bar', seriesLayoutBy: 'row' },\n // 这几个系列会出现在第二个直角坐标系中,每个系列对应到 dataset 的每一列。\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 },\n { type: 'bar', xAxisIndex: 1, yAxisIndex: 1 }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:f,props:{id:ae},children:[{type:t,tag:l,props:{href:"#%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:pe}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,"},{type:t,tag:p,props:{},children:[{type:e,value:"'score'"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"'amount'"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"'product'"}]},{type:e,value:" 就是维度名。从第二行开始,才是正式的数据。"},{type:t,tag:p,props:{},children:[{type:e,value:_}]},{type:e,value:" 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 "},{type:t,tag:p,props:{},children:[{type:e,value:"dataset.sourceHeader: true"}]},{type:e,value:" 显示声明第一行(列)就是维度,或者 "},{type:t,tag:p,props:{},children:[{type:e,value:"dataset.sourceHeader: false"}]},{type:e,value:" 表明第一行(列)开始就直接是数据。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"维度的定义,也可以使用单独的 "},{type:t,tag:p,props:{},children:[{type:e,value:"dataset.dimensions"}]},{type:e,value:" 或者 "},{type:t,tag:p,props:{},children:[{type:e,value:"series.dimensions"}]},{type:e,value:" 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"var option1 = {\n dataset: {\n dimensions: [\n { name: 'score' },\n // 可以简写为 string ,表示 dimension name 。\n 'amount',\n // 可以在 type 中指定维度类型。\n { name: 'product', type: 'ordinal' }\n ],\n source: [\n //...\n ]\n }\n // ...\n};\n\nvar option2 = {\n dataset: {\n source: [\n // ...\n ]\n },\n series: {\n type: 'line',\n // series.dimensions 会更优先于 dataset.dimension 采纳。\n dimensions: [\n null, // 可以设置为 null 表示不想设置维度名\n 'amount',\n { name: 'product', type: 'ordinal' }\n ]\n }\n // ...\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"维度类型( dimension type )可以取这些值:"}]},{type:e,value:a},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:"'number'"}]},{type:e,value:": 默认,表示普通数据。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:"'ordinal'"}]},{type:e,value:": 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 'ordinal' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:O}]},{type:e,value:": 表示时间数据。设置成 "},{type:t,tag:p,props:{},children:[{type:e,value:O}]},{type:e,value:" 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 '2017-05-10',会自动被解析。如果这个维度被用在时间数轴("},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##xAxis.type",rel:[n,d,s],target:y},children:[{type:e,value:"axis.type"}]},{type:e,value:" 为 "},{type:t,tag:p,props:{},children:[{type:e,value:O}]},{type:e,value:")上,那么会被自动设置为 "},{type:t,tag:p,props:{},children:[{type:e,value:O}]},{type:e,value:" 类型。时间类型的支持参见 "},{type:t,tag:l,props:{href:S,rel:[n,d,s],target:y},children:[{type:e,value:$}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:Ee}]},{type:e,value:me},{type:t,tag:p,props:{},children:[{type:e,value:Ee}]},{type:e,value:Be},{type:t,tag:p,props:{},children:[{type:e,value:xe}]},{type:e,value:fe}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:"'int'"}]},{type:e,value:me},{type:t,tag:p,props:{},children:[{type:e,value:"'int'"}]},{type:e,value:Be},{type:t,tag:p,props:{},children:[{type:e,value:xe}]},{type:e,value:fe}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:f,props:{id:re},children:[{type:t,tag:l,props:{href:"#%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-seriesencode-%EF%BC%89",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:le}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"了解了维度的概念后,我们就可以使用 "},{type:t,tag:l,props:{href:ge,rel:[n,d,s],target:y},children:[{type:e,value:w}]},{type:e,value:" 来做映射。总体是这样的感觉:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:"var option = {\n dataset: {\n source: [\n ['score', 'amount', 'product'],\n [89.3, 58212, 'Matcha Latte'],\n [57.1, 78254, 'Milk Tea'],\n [74.4, 41032, 'Cheese Cocoa'],\n [50.1, 12755, 'Cheese Brownie'],\n [89.7, 20145, 'Matcha Cocoa'],\n [68.1, 79146, 'Tea'],\n [19.6, 91852, 'Orange Juice'],\n [10.6, 101852, 'Lemon Juice'],\n [32.7, 20112, 'Walnut Brownie']\n ]\n },\n xAxis: {},\n yAxis: { type: 'category' },\n series: [\n {\n type: 'bar',\n encode: {\n // 将 \"amount\" 列映射到 X 轴。\n x: 'amount',\n // 将 \"product\" 列映射到 Y 轴。\n y: 'product'\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:t,tag:p,props:{},children:[{type:e,value:w}]},{type:e,value:" 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 "},{type:t,tag:p,props:{},children:[{type:e,value:"'x'"}]},{type:e,value:", "},{type:t,tag:p,props:{},children:[{type:e,value:"'y'"}]},{type:e,value:", "},{type:t,tag:p,props:{},children:[{type:e,value:"'tooltip'"}]},{type:e,value:" 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"下面是 "},{type:t,tag:p,props:{},children:[{type:e,value:w}]},{type:e,value:" 支持的属性:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"// 在任何坐标系和系列中,都支持:\nencode: {\n // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n tooltip: ['product', 'score']\n // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。(有时候名字比较长,这可以避免在 series.name 重复输入这些名字)\n seriesName: [1, 3],\n // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处,可以使新老数据用 id 对应起来,从而能够产生合适的数据更新动画。\n itemId: 2,\n // 指定数据项的名称使用 “维度3” 在饼图等图表中有用,可以使这个名字显示在图例(legend)中。\n itemName: 3\n}\n\n// 直角坐标系(grid/cartesian)特有的属性:\nencode: {\n // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴:\n x: [1, 5, 'score'],\n // 把“维度0”映射到 Y 轴。\n y: 0\n}\n\n// 单轴(singleAxis)特有的属性:\nencode: {\n single: 3\n}\n\n// 极坐标系(polar)特有的属性:\nencode: {\n radius: 3,\n angle: 2\n}\n\n// 地理坐标系(geo)特有的属性:\nencode: {\n lng: 3,\n lat: 2\n}\n\n// 对于一些没有坐标系的图表,例如饼图、漏斗图等,可以是:\nencode: {\n value: 3\n}\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"这是个更丰富的 "},{type:t,tag:p,props:{},children:[{type:e,value:w}]},{type:e,value:" 的 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1",rel:[n,d,s],target:y},children:[{type:e,value:j}]},{type:e,value:" 。"}]},{type:e,value:a},{type:t,tag:f,props:{id:ie},children:[{type:t,tag:l,props:{href:"#%E9%BB%98%E8%AE%A4%E7%9A%84-seriesencode",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:ne}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"值得一提的是,当 "},{type:t,tag:p,props:{},children:[{type:e,value:w}]},{type:e,value:" 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:"}]},{type:e,value:a},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"在坐标系中(如直角坐标系、极坐标系等)\n"},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"如果有类目轴(axis.type 为 'category'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。"}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。"}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"如果没有坐标系(如饼图)\n"},{type:t,tag:k,props:{},children:[{type:e,value:a},{type:t,tag:c,props:{},children:[{type:e,value:"取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。"}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"默认的规则不能满足要求时,就可以自己来配置 "},{type:t,tag:p,props:{},children:[{type:e,value:"encode"}]},{type:e,value:",也并不复杂。这是一个 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1",rel:[n,d,s],target:y},children:[{type:e,value:"例子"}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:f,props:{id:de},children:[{type:t,tag:l,props:{href:"#%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-seriesencode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:se}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"option = {\n series: {\n // 注意维度序号(dimensionIndex)从 0 开始计数,第三列是 dimensions[2]。\n encode: { x: 2, y: 4 }\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"option = {\n series: {\n encode: { x: 2, y: 4 },\n seriesLayoutBy: 'row'\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:如何把第二列设置为标签?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"答:\n关于标签的显示 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##series.label.formatter",rel:[n,d,s],target:y},children:[{type:e,value:"label.formatter"}]},{type:e,value:",现在支持引用特定维度的值,例如:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"series: {\n label: {\n // `'{@score}'` 表示 “名为 score” 的维度里的值。\n // `'{@[4]}'` 表示引用序号为 4 的维度里的值。\n formatter: 'aaa{@product}bbb{@score}ccc{@[4]}ddd';\n }\n}\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"option = {\n series: {\n encode: {\n tooltip: [1, 2]\n // ...\n }\n // ...\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:数据里没有维度名,那么怎么给出维度名?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"var option = {\n dataset: {\n dimensions: ['score', 'amount'],\n source: [\n [89.3, 3371],\n [92.1, 8123],\n [94.4, 1954],\n [85.4, 829]\n ]\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:如何把第三列映射为气泡图的点的大小?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:"var option = {\n dataset: {\n source: [\n [12, 323, 11.2],\n [23, 167, 8.3],\n [81, 284, 12],\n [91, 413, 4.1],\n [13, 287, 13.5]\n ]\n },\n visualMap: {\n show: false,\n dimension: 2, // 指向第三列(列序号从 0 开始记,所以设置为 2)。\n min: 2, // 需要给出数值范围,最小数值。\n max: 15, // 需要给出数值范围,最大数值。\n inRange: {\n // 气泡尺寸:5 像素到 60 像素。\n symbolSize: [5, 60]\n }\n },\n xAxis: {},\n yAxis: {},\n series: {\n type: 'scatter'\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"问:encode 里指定了映射,但是不管用?"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"答:可以查查有没有拼错,比如,维度名是:"},{type:t,tag:p,props:{},children:[{type:e,value:"'Life Expectancy'"}]},{type:e,value:",encode 中拼成了 "},{type:t,tag:p,props:{},children:[{type:e,value:"'Life Expectency'"}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:f,props:{id:z},children:[{type:t,tag:l,props:{href:"#%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:z}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"我们可以使用 "},{type:t,tag:l,props:{href:V,rel:[n,d,s],target:y},children:[{type:e,value:U}]},{type:e,value:" 组件进行视觉通道的映射。详见 "},{type:t,tag:l,props:{href:V,rel:[n,d,s],target:y},children:[{type:e,value:U}]},{type:e,value:" 文档的介绍。这是一个 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1",rel:[n,d,s],target:y},children:[{type:e,value:j}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:f,props:{id:R},children:[{type:t,tag:l,props:{href:"#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:R}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 "},{type:t,tag:p,props:{},children:[{type:e,value:_}]},{type:e,value:" 中,在不少情况下可以免去一些数据处理的步骤。"}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 "},{type:t,tag:l,props:{href:"https://github.com/d3/d3-dsv",rel:[n,d,s],target:y},children:[{type:e,value:"dsv"}]},{type:e,value:" 或者 "},{type:t,tag:l,props:{href:"https://github.com/mholt/PapaParse",rel:[n,d,s],target:y},children:[{type:e,value:"PapaParse"}]},{type:e,value:" 将 csv 转成 JSON。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 "},{type:t,tag:l,props:{href:ve,rel:[n,d,s],target:y},children:[{type:e,value:Z}]},{type:e,value:" 参数。"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"dataset: [\n {\n // 按行的 key-value 形式(对象数组),这是个比较常见的格式。\n source: [\n { product: 'Matcha Latte', count: 823, score: 95.8 },\n { product: 'Milk Tea', count: 235, score: 81.4 },\n { product: 'Cheese Cocoa', count: 1042, score: 91.2 },\n { product: 'Walnut Brownie', count: 988, score: 76.9 }\n ]\n },\n {\n // 按列的 key-value 形式。\n source: {\n product: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n count: [823, 235, 1042, 988],\n score: [95.8, 81.4, 91.2, 76.9]\n }\n }\n];\n"}]}]},{type:e,value:a},{type:t,tag:f,props:{id:ye},children:[{type:t,tag:l,props:{href:"#%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:oe}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"可以同时定义多个 dataset。系列可以通过 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##series.datasetIndex",rel:[n,d,s],target:y},children:[{type:e,value:"series.datasetIndex"}]},{type:e,value:" 来指定引用哪个 dataset。例如:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:C,props:{lang:v,"line-highlights":o,"file-name":o},children:[{type:e,value:"var option = {\n dataset: [\n {\n // 序号为 0 的 dataset。\n source: []\n },\n {\n // 序号为 1 的 dataset。\n source: []\n },\n {\n // 序号为 2 的 dataset。\n source: []\n }\n ],\n series: [\n {\n // 使用序号为 2 的 dataset。\n datasetIndex: 2\n },\n {\n // 使用序号为 1 的 dataset。\n datasetIndex: 1\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:f,props:{id:ce},children:[{type:t,tag:l,props:{href:"#echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88seriesdata%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:he}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 "},{type:t,tag:l,props:{href:S,rel:[n,d,s],target:y},children:[{type:e,value:M}]},{type:e,value:", 那么就会使用 "},{type:t,tag:l,props:{href:S,rel:[n,d,s],target:y},children:[{type:e,value:M}]},{type:e,value:" 而非 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:h,props:{className:[u]},children:[{type:t,tag:N,props:{lang:v,layout:D},children:[{type:e,value:ue}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"其实,"},{type:t,tag:l,props:{href:S,rel:[n,d,s],target:y},children:[{type:e,value:M}]},{type:e,value:" 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##series-treemap",rel:[n,d,s],target:y},children:[{type:e,value:"treemap"}]},{type:e,value:A},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##series-graph",rel:[n,d,s],target:y},children:[{type:e,value:"graph"}]},{type:e,value:A},{type:t,tag:l,props:{href:"https://echarts.apache.org/option.html##series-lines",rel:[n,d,s],target:y},children:[{type:e,value:"lines"}]},{type:e,value:" 等,现在仍不支持在 dataset 中设置,仍然需要使用 "},{type:t,tag:l,props:{href:S,rel:[n,d,s],target:y},children:[{type:e,value:M}]},{type:e,value:"。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 "},{type:t,tag:l,props:{href:"api.html#echartsInstance.appendData"},children:[{type:e,value:"appendData"}]},{type:e,value:" 进行增量加载,这种情况不支持使用 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:f,props:{id:X},children:[{type:t,tag:l,props:{href:"#%E5%85%B6%E4%BB%96",ariaHidden:g,tabIndex:E},children:[{type:t,tag:m,props:{className:[B,x]},children:[]}]},{type:e,value:X}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n"},{type:t,tag:p,props:{},children:[{type:e,value:q}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"bar"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"pie"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:K}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"effectScatter"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"parallel"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"candlestick"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"map"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"funnel"}]},{type:e,value:A},{type:t,tag:p,props:{},children:[{type:e,value:"custom"}]},{type:e,value:"。\n后续会有更多的图表进行支持。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"最后,给出这个 "},{type:t,tag:l,props:{href:"https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1",rel:[n,d,s],target:y},children:[{type:e,value:j}]},{type:e,value:",多个图表共享一个 "},{type:t,tag:p,props:{},children:[{type:e,value:b}]},{type:e,value:",并带有联动交互。"}]}]},dir:"/zh/concepts",path:Ae,extension:".md",createdAt:"2021-06-04T12:26:37.933Z",updatedAt:"2021-07-21T15:12:02.141Z"},postPath:"zh/concepts/dataset"}],fetch:{},error:be,state:{filled:!1,docVersion:o,ghVersion:o,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:Ce},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:Ie},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:Ne,draft:i},{title:"获取灵感",dir:De},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:ke,children:[{title:we,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:Le},{title:"ECharts 5 升级指南",dir:Me}]}]},{title:"概念篇",dir:Se,children:[{title:"图表容器及大小",dir:Fe},{title:"配置项",dir:He,draft:i},{title:J,dir:W,draft:i},{title:"样式",dir:"style"},{title:I,dir:b},{title:"数据转换",dir:Pe},{title:"坐标系",dir:Te,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:Q},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ze,children:[{title:"常用图表类型",dir:Re,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Xe},{title:"堆叠柱状图",dir:Ye},{title:"动态排序柱状图",dir:We,draft:i},{title:"极坐标系柱状图",dir:_e,draft:i},{title:"瀑布图",dir:Oe,draft:i},{title:"视觉映射的柱状图",dir:Q,draft:i}]},{title:"折线图",dir:q,children:[{title:"基础折线图",dir:Ge},{title:"堆叠折线图",dir:Je},{title:"区域面积图",dir:Ve},{title:"平滑曲线图",dir:Ue},{title:"阶梯线图",dir:Ze}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:$e},{title:"圆环图",dir:je},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:K,children:[{title:"基础散点图",dir:qe}]}]},{title:"移动端优化",dir:G,draft:i},{title:"跨平台方案",dir:Ke,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:$,children:[{title:"动态的异步数据",dir:Qe},{title:"数据下钻",dir:et,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:tt}]},{title:"交互",dir:at,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:pt,draft:i}]}]},{title:"最佳实践",dir:rt,children:[{title:"移动端优化",dir:G,draft:i},{title:lt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:nt}]}],en:[{title:"Get Started",dir:Ce},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:Ie},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:Ne,draft:i},{title:"Inspiration",dir:De},{title:"Get Help",dir:"help"},{title:"Release Note",dir:ke,children:[{title:we,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:Le},{title:"ECharts 5 Upgrade Guide",dir:Me}]}]},{title:"Concepts",dir:Se,children:[{title:"Chart Container",dir:Fe},{title:"Chart Option",dir:He,draft:i},{title:"Series",dir:W,draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:b},{title:"Data Transform",dir:Pe},{title:"Coordinate",dir:Te,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:Q},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ze,children:[{title:"Common Charts",dir:Re,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Xe},{title:"Stacked Bar",dir:Ye},{title:"Bar Racing",dir:We,draft:i},{title:"Bar Polar",dir:_e,draft:i},{title:"Waterfall",dir:Oe,draft:i}]},{title:"Line",dir:q,children:[{title:"Basic Line",dir:Ge},{title:"Stacked Line",dir:Je},{title:"Area Chart",dir:Ve},{title:"Smoothed Line",dir:Ue},{title:"Step Line",dir:Ze}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:$e},{title:"Ring Style",dir:je},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:K,children:[{title:"Basic Scatter",dir:qe}]}]},{title:"Mobile",dir:G,draft:i},{title:"Cross Platform",dir:Ke,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:$,children:[{title:"Dynamic Data",dir:Qe},{title:"Drilldown",dir:et,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:tt}]},{title:"Interaction",dir:at,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:pt,draft:i}]}]},{title:"Best Practice",dir:rt,children:[{title:"Mobile Optimization",dir:G,draft:i},{title:lt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:nt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:Ae,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:be},content:{dbHash:"570e7c13"}}}}("text","element","\n","code","p","a",!0,"nofollow","noopener","noreferrer","_blank","","li","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link","h2","、","dataset","md-code-block","数据集","md-live","tb","ul","series.encode","。","series.data","https://echarts.apache.org/option.html##series.data","答:","在系列中设置数据","在数据集中设置数据","数据到图形的映射","视觉通道(颜色、尺寸等)的映射","数据的各种格式","其他","(","series","dataset.source","'time'","mobile","系列","https://echarts.apache.org/option.html##visualMap","visualMap","seriesLayoutBy","data","示例","line","scatter","visual-map","把数据集(-dataset-)的行或列映射为系列(series)","把数据集( dataset )的行或列映射为系列(series)","维度(-dimension-)","维度( dimension )","数据到图形的映射(-seriesencode-)","数据到图形的映射( series.encode )","默认的-seriesencode","默认的 series.encode","几个常见的-seriesencode-设置方式举例","几个常见的 series.encode 设置方式举例","多个-dataset-以及如何引用他们","多个 dataset 以及如何引用他们","echarts-3-的数据设置方式(seriesdata)仍正常使用","ECharts 3 的数据设置方式(series.data)仍正常使用","option = {\n xAxis: {\n type: 'category',\n data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']\n },\n yAxis: {},\n series: [\n {\n type: 'bar',\n name: '2015',\n data: [89.3, 92.1, 94.4, 85.4]\n },\n {\n type: 'bar',\n name: '2016',\n data: [95.8, 89.4, 91.2, 76.9]\n },\n {\n type: 'bar',\n name: '2017',\n data: [97.7, 83.1, 92.5, 78.1]\n }\n ]\n};\n","https://echarts.apache.org/option.html##series.seriesLayoutBy","https://echarts.apache.org/option.html##series.encode","'float'",": 如果设置成 ",",在存储时候会使用 ","TypedArray",",对性能优化有好处。","/zh/concepts/dataset",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+后续会有更多的图表进行支持。</p> <p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</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/zh/concepts/dataset.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,i,g,t,d,I,l,o,C,a,n,A,s,c,r,h,p,B,u,m,y,b,E,L,v,W,O,D,w,Z,J,j,H,z,Y,M,X,S,G,K,k,N,f,T,F,x,Q,R,V,U,q,P,_,$,ee,ie,ge){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E9%9B%86" tabindex="-1">数据集</h1>\n<p><code>数据集</code>(<code>dataset</code>)是专门用来管理数据的组件。虽然每个系列都可以在 <code>series.data</code> 中设置数据,但是从 ECharts4 支持 <code>数据集</code> 开始,更推荐使用 <code>数据集</code> 来管理数据。因为这样,数据可以被多个组件复用,也方便进行 “数据和其他配置” 分离的配置风格。毕竟,在运行时,数据是最常改变的,而其他配置大多并不会改变。</p>\n<h2 id="%E5%9C%A8%E7%B3%BB%E5%88%97%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在系列中设置数据</h2>\n<p>如果数据设置在 <code>系列</code>(<code>series</code>)中,例如:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>这种方式的优点是,适于对一些特殊的数据结构(如“树”、“图”、超大数据)进行一定的数据类型定制。\n但是缺点是,常需要用户先处理数据,把数据分割设置到各个系列(和类目轴)中。此外,不利于多个系列共享一份数据,也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<h2 id="%E5%9C%A8%E6%95%B0%E6%8D%AE%E9%9B%86%E4%B8%AD%E8%AE%BE%E7%BD%AE%E6%95%B0%E6%8D%AE" tabindex="-1">在数据集中设置数据</h2>\n<p>而数据设置在 <code>数据集</code>(<code>dataset</code>)中,会有这些好处:</p>\n<ul>\n<li>能够贴近数据可视化常见思维方式:(I)提供数据,(II)指定数据到视觉的映射,从而形成图表。</li>\n<li>数据和其他配置可以被分离开来。数据常变,其他配置常不变。分开易于分别管理。</li>\n<li>数据可以被多个系列或者组件复用,对于大数据量的场景,不必为每个系列创建一份数据。</li>\n<li>支持更多的数据的常用格式,例如二维数组、对象数组等,一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p>下面是一个最简单的 <code>dataset</code> 的例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g5o-Q5L6b5LiA5Lu95pWw5o2u44CCCiAgICBzb3VyY2U6IFsKICAgICAgWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDMuMywgODUuOCwgOTMuN10sCiAgICAgIFsnTWlsayBUZWEnLCA4My4xLCA3My40LCA1NS4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCA4Ni40LCA2NS4yLCA4Mi41XSwKICAgICAgWydXYWxudXQgQnJvd25pZScsIDcyLjQsIDUzLjksIDM5LjFdCiAgICBdCiAgfSwKICAvLyDlo7DmmI7kuIDkuKogWCDovbTvvIznsbvnm67ovbTvvIhjYXRlZ29yee-8ieOAgum7mOiupOaDheWGteS4i--8jOexu-ebrui9tOWvueW6lOWIsCBkYXRhc2V0IOesrOS4gOWIl-OAggogIHhBeGlzOiB7IHR5cGU6ICdjYXRlZ29yeScgfSwKICAvLyDlo7DmmI7kuIDkuKogWSDovbTvvIzmlbDlgLzovbTjgIIKICB5QXhpczoge30sCiAgLy8g5aOw5piO5aSa5LiqIGJhciDns7vliJfvvIzpu5jorqTmg4XlhrXkuIvvvIzmr4_kuKrns7vliJfkvJroh6rliqjlr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>或者也可以使用常见的“对象数组”的格式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgLy8g55SoIGRpbWVuc2lvbnMg5oyH5a6a5LqG57u05bqm55qE6aG65bqP44CC55u06KeS5Z2Q5qCH57O75Lit77yM5aaC5p6cIFgg6L20IHR5cGUg5Li6IGNhdGVnb3J577yMCiAgICAvLyDpu5jorqTmiornrKzkuIDkuKrnu7TluqbmmKDlsITliLAgWCDovbTkuIrvvIzlkI7pnaLnu7TluqbmmKDlsITliLAgWSDovbTkuIrjgIIKICAgIC8vIOWmguaenOS4jeaMh-WumiBkaW1lbnNpb25z77yM5Lmf5Y-v5Lul6YCa6L-H5oyH5a6aIHNlcmllcy5lbmNvZGUKICAgIC8vIOWujOaIkOaYoOWwhO-8jOWPguingeWQjuaWh-OAggogICAgZGltZW5zaW9uczogWydwcm9kdWN0JywgJzIwMTUnLCAnMjAxNicsICcyMDE3J10sCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgJzIwMTUnOiA0My4zLCAnMjAxNic6IDg1LjgsICcyMDE3JzogOTMuNyB9LAogICAgICB7IHByb2R1Y3Q6ICdNaWxrIFRlYScsICcyMDE1JzogODMuMSwgJzIwMTYnOiA3My40LCAnMjAxNyc6IDU1LjEgfSwKICAgICAgeyBwcm9kdWN0OiAnQ2hlZXNlIENvY29hJywgJzIwMTUnOiA4Ni40LCAnMjAxNic6IDY1LjIsICcyMDE3JzogODIuNSB9LAogICAgICB7IHByb2R1Y3Q6ICdXYWxudXQgQnJvd25pZScsICcyMDE1JzogNzIuNCwgJzIwMTYnOiA1My45LCAnMjAxNyc6IDM5LjEgfQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">数据到图形的映射</h2>\n<p>如上所述,数据可视化的一个常见思路是:(I)提供数据,(II)指定数据到视觉的映射。</p>\n<p>简而言之,可以进行这些映射的设定:</p>\n<ul>\n<li>指定 <code>数据集</code> 的列(column)还是行(row)映射为 <code>系列</code>(<code>series</code>)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">series.seriesLayoutBy</a> 属性来配置。默认是按照列(column)来映射。</li>\n<li>指定维度映射的规则:如何从 dataset 的维度(一个“维度”的意思是一行/列)映射到坐标轴(如 X、Y 轴)、提示框(tooltip)、标签(label)、图形元素大小颜色等(visualMap)。这件事可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 属性,以及 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件来配置(如果有需要映射颜色大小等视觉维度的话)。上面的例子中,没有给出这种映射配置,那么 ECharts 就按最常见的理解进行默认映射:X 坐标轴声明为类目轴,默认情况下会自动对应到 <code>dataset.source</code> 中的第一列;三个柱图系列,一一对应到 <code>dataset.source</code> 中后面每一列。</li>\n</ul>\n<p>下面详细解释这些映射的设定。</p>\n<h2 id="%E6%8A%8A%E6%95%B0%E6%8D%AE%E9%9B%86%EF%BC%88-dataset-%EF%BC%89%E7%9A%84%E8%A1%8C%E6%88%96%E5%88%97%E6%98%A0%E5%B0%84%E4%B8%BA%E7%B3%BB%E5%88%97%EF%BC%88series%EF%BC%89" tabindex="-1">把数据集( dataset )的行或列映射为系列(series)</h2>\n<p>有了数据表之后,使用者可以灵活地配置:数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项,改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值:</p>\n<ul>\n<li>\'column\': 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>\'row\': 系列被安放到 <code>dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDoge30sCiAgdG9vbHRpcDoge30sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDEyJywgJzIwMTMnLCAnMjAxNCcsICcyMDE1J10sCiAgICAgIFsnTWF0Y2hhIExhdHRlJywgNDEuMSwgMzAuNCwgNjUuMSwgNTMuM10sCiAgICAgIFsnTWlsayBUZWEnLCA4Ni41LCA5Mi4xLCA4NS43LCA4My4xXSwKICAgICAgWydDaGVlc2UgQ29jb2EnLCAyNC4xLCA2Ny4yLCA3OS41LCA4Ni40XQogICAgXQogIH0sCiAgeEF4aXM6IFsKICAgIHsgdHlwZTogJ2NhdGVnb3J5JywgZ3JpZEluZGV4OiAwIH0sCiAgICB7IHR5cGU6ICdjYXRlZ29yeScsIGdyaWRJbmRleDogMSB9CiAgXSwKICB5QXhpczogW3sgZ3JpZEluZGV4OiAwIH0sIHsgZ3JpZEluZGV4OiAxIH1dLAogIGdyaWQ6IFt7IGJvdHRvbTogJzU1JScgfSwgeyB0b3A6ICc1NSUnIH1dLAogIHNlcmllczogWwogICAgLy8g6L-Z5Yeg5Liq57O75YiX5Lya5Ye6546w5Zyo56ys5LiA5Liq55u06KeS5Z2Q5qCH57O75Lit77yM5q-P5Liq57O75YiX5a-55bqU5YiwIGRhdGFzZXQg55qE5q-P5LiA6KGM44CCCiAgICB7IHR5cGU6ICdiYXInLCBzZXJpZXNMYXlvdXRCeTogJ3JvdycgfSwKICAgIHsgdHlwZTogJ2JhcicsIHNlcmllc0xheW91dEJ5OiAncm93JyB9LAogICAgeyB0eXBlOiAnYmFyJywgc2VyaWVzTGF5b3V0Qnk6ICdyb3cnIH0sCiAgICAvLyDov5nlh6DkuKrns7vliJfkvJrlh7rnjrDlnKjnrKzkuozkuKrnm7Top5LlnZDmoIfns7vkuK3vvIzmr4_kuKrns7vliJflr7nlupTliLAgZGF0YXNldCDnmoTmr4_kuIDliJfjgIIKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfSwKICAgIHsgdHlwZTogJ2JhcicsIHhBeGlzSW5kZXg6IDEsIHlBeGlzSW5kZXg6IDEgfQogIF0KfTs\'" v-bind="{}" />\n<h2 id="%E7%BB%B4%E5%BA%A6%EF%BC%88-dimension-%EF%BC%89" tabindex="-1">维度( dimension )</h2>\n<p>常用图表所描述的数据大部分是“二维表”结构,上述的例子中,我们都使用二维数组来容纳二维表。现在,当我们把系列( series )对应到“列”的时候,那么每一列就称为一个“维度( dimension )”,而每一行称为数据项( item )。反之,如果我们把系列( series )对应到表行,那么每一行就是“维度( dimension )”,每一列就是数据项( item )。</p>\n<p>维度可以有单独的名字,便于在图表中显示。维度名( dimension name )可以在定义在 dataset 的第一行(或者第一列)。例如上面的例子中,<code>\'score\'</code>、<code>\'amount\'</code>、<code>\'product\'</code> 就是维度名。从第二行开始,才是正式的数据。<code>dataset.source</code> 中第一行(列)到底包含不包含维度名,ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行(列)就是维度,或者 <code>dataset.sourceHeader: false</code> 表明第一行(列)开始就直接是数据。</p>\n<p>维度的定义,也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>series.dimensions</code> 来定义,这样可以同时指定维度名,和维度的类型( dimension type ):</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbjEgPSB7CiAgZGF0YXNldDogewogICAgZGltZW5zaW9uczogWwogICAgICB7IG5hbWU6ICdzY29yZScgfSwKICAgICAgLy8g5Y-v5Lul566A5YaZ5Li6IHN0cmluZyDvvIzooajnpLogZGltZW5zaW9uIG5hbWUg44CCCiAgICAgICdhbW91bnQnLAogICAgICAvLyDlj6_ku6XlnKggdHlwZSDkuK3mjIflrprnu7TluqbnsbvlnovjgIIKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdLAogICAgc291cmNlOiBbCiAgICAgIC8vLi4uCiAgICBdCiAgfQogIC8vIC4uLgp9OwoKdmFyIG9wdGlvbjIgPSB7CiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIC8vIC4uLgogICAgXQogIH0sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnbGluZScsCiAgICAvLyBzZXJpZXMuZGltZW5zaW9ucyDkvJrmm7TkvJjlhYjkuo4gZGF0YXNldC5kaW1lbnNpb24g6YeH57qz44CCCiAgICBkaW1lbnNpb25zOiBbCiAgICAgIG51bGwsIC8vIOWPr-S7peiuvue9ruS4uiBudWxsIOihqOekuuS4jeaDs-iuvue9rue7tOW6puWQjQogICAgICAnYW1vdW50JywKICAgICAgeyBuYW1lOiAncHJvZHVjdCcsIHR5cGU6ICdvcmRpbmFsJyB9CiAgICBdCiAgfQogIC8vIC4uLgp9Ow\'" line-highlights="\'\'" />\n<p>大多数情况下,我们并不需要去设置维度类型,因为 ECharts 会自动尝试判断。但是如果不足够准确时,可以手动设置维度类型。</p>\n<p>维度类型( dimension type )可以取这些值:</p>\n<ul>\n<li><code>\'number\'</code>: 默认,表示普通数据。</li>\n<li><code>\'ordinal\'</code>: 对于类目、文本这些 string 类型的数据,如果需要能在数轴上使用,须是 \'ordinal\' 类型。ECharts 默认会试图自动判断这个类型。但是自动判断也可能不准确,所以使用者也可以手动强制指定。</li>\n<li><code>\'time\'</code>: 表示时间数据。设置成 <code>\'time\'</code> 则能支持自动解析数据成时间戳(timestamp),比如该维度的数据是 \'2017-05-10\',会自动被解析。如果这个维度被用在时间数轴(<a href="https://echarts.apache.org/option.html##xAxis.type">axis.type</a> 为 <code>\'time\'</code>)上,那么会被自动设置为 <code>\'time\'</code> 类型。时间类型的支持参见 <a href="https://echarts.apache.org/option.html##series.data">data</a>。</li>\n<li><code>\'float\'</code>: 如果设置成 <code>\'float\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n<li><code>\'int\'</code>: 如果设置成 <code>\'int\'</code>,在存储时候会使用 <code>TypedArray</code>,对性能优化有好处。</li>\n</ul>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%88%B0%E5%9B%BE%E5%BD%A2%E7%9A%84%E6%98%A0%E5%B0%84%EF%BC%88-series.encode-%EF%BC%89" tabindex="-1">数据到图形的映射( series.encode )</h2>\n<p>了解了维度的概念后,我们就可以使用 <a href="https://echarts.apache.org/option.html##series.encode">series.encode</a> 来做映射。总体是这样的感觉:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWydzY29yZScsICdhbW91bnQnLCAncHJvZHVjdCddLAogICAgICBbODkuMywgNTgyMTIsICdNYXRjaGEgTGF0dGUnXSwKICAgICAgWzU3LjEsIDc4MjU0LCAnTWlsayBUZWEnXSwKICAgICAgWzc0LjQsIDQxMDMyLCAnQ2hlZXNlIENvY29hJ10sCiAgICAgIFs1MC4xLCAxMjc1NSwgJ0NoZWVzZSBCcm93bmllJ10sCiAgICAgIFs4OS43LCAyMDE0NSwgJ01hdGNoYSBDb2NvYSddLAogICAgICBbNjguMSwgNzkxNDYsICdUZWEnXSwKICAgICAgWzE5LjYsIDkxODUyLCAnT3JhbmdlIEp1aWNlJ10sCiAgICAgIFsxMC42LCAxMDE4NTIsICdMZW1vbiBKdWljZSddLAogICAgICBbMzIuNywgMjAxMTIsICdXYWxudXQgQnJvd25pZSddCiAgICBdCiAgfSwKICB4QXhpczoge30sCiAgeUF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZW5jb2RlOiB7CiAgICAgICAgLy8g5bCGICJhbW91bnQiIOWIl-aYoOWwhOWIsCBYIOi9tOOAggogICAgICAgIHg6ICdhbW91bnQnLAogICAgICAgIC8vIOWwhiAicHJvZHVjdCIg5YiX5pig5bCE5YiwIFkg6L2044CCCiAgICAgICAgeTogJ3Byb2R1Y3QnCiAgICAgIH0KICAgIH0KICBdCn07\'" v-bind="{}" />\n<p><code>series.encode</code> 声明的基本结构如下。其中冒号左边是坐标系、标签等特定名称,如 <code>\'x\'</code>, <code>\'y\'</code>, <code>\'tooltip\'</code> 等,冒号右边是数据中的维度名(string 格式)或者维度的序号(number 格式,从 0 开始计数),可以指定一个或多个维度(使用数组)。通常情况下,下面各种信息不需要所有的都写,按需写即可。</p>\n<p>下面是 <code>series.encode</code> 支持的属性:</p>\n<md-code-block lang="js" code="\'Ly8g5Zyo5Lu75L2V5Z2Q5qCH57O75ZKM57O75YiX5Lit77yM6YO95pSv5oyB77yaCmVuY29kZTogewogIC8vIOS9v-eUqCDigJzlkI3kuLogcHJvZHVjdCDnmoTnu7TluqbigJ0g5ZKMIOKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g55qE5YC85ZyoIHRvb2x0aXAg5Lit5pi-56S6CiAgdG9vbHRpcDogWydwcm9kdWN0JywgJ3Njb3JlJ10KICAvLyDkvb_nlKgg4oCc57u05bqmIDHigJ0g5ZKMIOKAnOe7tOW6piAz4oCdIOeahOe7tOW6puWQjei_nui1t-adpeS9nOS4uuezu-WIl-WQjeOAgu-8iOacieaXtuWAmeWQjeWtl-avlOi-g-mVv--8jOi_meWPr-S7pemBv-WFjeWcqCBzZXJpZXMubmFtZSDph43lpI3ovpPlhaXov5nkupvlkI3lrZfvvIkKICBzZXJpZXNOYW1lOiBbMSwgM10sCiAgLy8g6KGo56S65L2_55SoIOKAnOe7tOW6pjLigJ0g5Lit55qE5YC85L2c5Li6IGlk44CC6L-Z5Zyo5L2_55SoIHNldE9wdGlvbiDliqjmgIHmm7TmlrDmlbDmja7ml7bmnInnlKjlpITvvIzlj6_ku6Xkvb_mlrDogIHmlbDmja7nlKggaWQg5a-55bqU6LW35p2l77yM5LuO6ICM6IO95aSf5Lqn55Sf5ZCI6YCC55qE5pWw5o2u5pu05paw5Yqo55S744CCCiAgaXRlbUlkOiAyLAogIC8vIOaMh-WumuaVsOaNrumhueeahOWQjeensOS9v-eUqCDigJznu7TluqYz4oCdIOWcqOmlvOWbvuetieWbvuihqOS4reacieeUqO-8jOWPr-S7peS9v-i_meS4quWQjeWtl-aYvuekuuWcqOWbvuS-i--8iGxlZ2VuZO-8ieS4reOAggogIGl0ZW1OYW1lOiAzCn0KCi8vIOebtOinkuWdkOagh-ezu--8iGdyaWQvY2FydGVzaWFu77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIC8vIOaKiiDigJznu7TluqYx4oCd44CB4oCc57u05bqmNeKAneOAgeKAnOWQjeS4uiBzY29yZSDnmoTnu7TluqbigJ0g5pig5bCE5YiwIFgg6L2077yaCiAgeDogWzEsIDUsICdzY29yZSddLAogIC8vIOaKiuKAnOe7tOW6pjDigJ3mmKDlsITliLAgWSDovbTjgIIKICB5OiAwCn0KCi8vIOWNlei9tO-8iHNpbmdsZUF4aXPvvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgc2luZ2xlOiAzCn0KCi8vIOaegeWdkOagh-ezu--8iHBvbGFy77yJ54m55pyJ55qE5bGe5oCn77yaCmVuY29kZTogewogIHJhZGl1czogMywKICBhbmdsZTogMgp9CgovLyDlnLDnkIblnZDmoIfns7vvvIhnZW_vvInnibnmnInnmoTlsZ7mgKfvvJoKZW5jb2RlOiB7CiAgbG5nOiAzLAogIGxhdDogMgp9CgovLyDlr7nkuo7kuIDkupvmsqHmnInlnZDmoIfns7vnmoTlm77ooajvvIzkvovlpoLppbzlm77jgIHmvI_mlpflm77nrYnvvIzlj6_ku6XmmK_vvJoKZW5jb2RlOiB7CiAgdmFsdWU6IDMKfQ\'" line-highlights="\'\'" />\n<p>这是个更丰富的 <code>series.encode</code> 的 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode1&edit=1&reset=1">示例</a> 。</p>\n<h2 id="%E9%BB%98%E8%AE%A4%E7%9A%84-series.encode" tabindex="-1">默认的 series.encode</h2>\n<p>值得一提的是,当 <code>series.encode</code> 并没有指定时,ECharts 针对最常见直角坐标系中的图表(折线图、柱状图、散点图、K 线图等)、饼图、漏斗图,会采用一些默认的映射规则。默认的映射规则比较简单,大体是:</p>\n<ul>\n<li>在坐标系中(如直角坐标系、极坐标系等)\n<ul>\n<li>如果有类目轴(axis.type 为 \'category\'),则将第一列(行)映射到这个轴上,后续每一列(行)对应一个系列。</li>\n<li>如果没有类目轴,假如坐标系有两个轴(例如直角坐标系的 X Y 轴),则每两列对应一个系列,这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系(如饼图)\n<ul>\n<li>取第一列(行)为名字,第二列(行)为数值(如果只有一列,则取第一列为数值)。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时,就可以自己来配置 <code>encode</code>,也并不复杂。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-default&edit=1&reset=1">例子</a>。</p>\n<h2 id="%E5%87%A0%E4%B8%AA%E5%B8%B8%E8%A7%81%E7%9A%84-series.encode-%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%E4%B8%BE%E4%BE%8B" tabindex="-1">几个常见的 series.encode 设置方式举例</h2>\n<p>问:如何把第三列设置为 X 轴,第五列设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgLy8g5rOo5oSP57u05bqm5bqP5Y-377yIZGltZW5zaW9uSW5kZXjvvInku44gMCDlvIDlp4vorqHmlbDvvIznrKzkuInliJfmmK8gZGltZW5zaW9uc1syXeOAggogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfQogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三行设置为 X 轴,第五行设置为 Y 轴?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7IHg6IDIsIHk6IDQgfSwKICAgIHNlcmllc0xheW91dEJ5OiAncm93JwogICAgLy8gLi4uCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第二列设置为标签?</p>\n<p>答:\n关于标签的显示 <a href="https://echarts.apache.org/option.html##series.label.formatter">label.formatter</a>,现在支持引用特定维度的值,例如:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgbGFiZWw6IHsKICAgIC8vIGAne0BzY29yZX0nYCDooajnpLog4oCc5ZCN5Li6IHNjb3Jl4oCdIOeahOe7tOW6pumHjOeahOWAvOOAggogICAgLy8gYCd7QFs0XX0nYCDooajnpLrlvJXnlKjluo_lj7fkuLogNCDnmoTnu7Tluqbph4znmoTlgLzjgIIKICAgIGZvcm1hdHRlcjogJ2FhYXtAcHJvZHVjdH1iYmJ7QHNjb3JlfWNjY3tAWzRdfWRkZCc7CiAgfQp9\'" line-highlights="\'\'" />\n<p>问:如何让第 2 列和第 3 列显示在提示框(tooltip)中?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgZW5jb2RlOiB7CiAgICAgIHRvb2x0aXA6IFsxLCAyXQogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KfTs\'" line-highlights="\'\'" />\n<p>问:数据里没有维度名,那么怎么给出维度名?</p>\n<p>答:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBkaW1lbnNpb25zOiBbJ3Njb3JlJywgJ2Ftb3VudCddLAogICAgc291cmNlOiBbCiAgICAgIFs4OS4zLCAzMzcxXSwKICAgICAgWzkyLjEsIDgxMjNdLAogICAgICBbOTQuNCwgMTk1NF0sCiAgICAgIFs4NS40LCA4MjldCiAgICBdCiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>问:如何把第三列映射为气泡图的点的大小?</p>\n<p>答:</p>\n<md-live lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiB7CiAgICBzb3VyY2U6IFsKICAgICAgWzEyLCAzMjMsIDExLjJdLAogICAgICBbMjMsIDE2NywgOC4zXSwKICAgICAgWzgxLCAyODQsIDEyXSwKICAgICAgWzkxLCA0MTMsIDQuMV0sCiAgICAgIFsxMywgMjg3LCAxMy41XQogICAgXQogIH0sCiAgdmlzdWFsTWFwOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIGRpbWVuc2lvbjogMiwgLy8g5oyH5ZCR56ys5LiJ5YiX77yI5YiX5bqP5Y-35LuOIDAg5byA5aeL6K6w77yM5omA5Lul6K6-572u5Li6IDLvvInjgIIKICAgIG1pbjogMiwgLy8g6ZyA6KaB57uZ5Ye65pWw5YC86IyD5Zu077yM5pyA5bCP5pWw5YC844CCCiAgICBtYXg6IDE1LCAvLyDpnIDopoHnu5nlh7rmlbDlgLzojIPlm7TvvIzmnIDlpKfmlbDlgLzjgIIKICAgIGluUmFuZ2U6IHsKICAgICAgLy8g5rCU5rOh5bC65a-477yaNSDlg4_ntKDliLAgNjAg5YOP57Sg44CCCiAgICAgIHN5bWJvbFNpemU6IFs1LCA2MF0KICAgIH0KICB9LAogIHhBeGlzOiB7fSwKICB5QXhpczoge30sCiAgc2VyaWVzOiB7CiAgICB0eXBlOiAnc2NhdHRlcicKICB9Cn07\'" v-bind="{}" />\n<p>问:encode 里指定了映射,但是不管用?</p>\n<p>答:可以查查有没有拼错,比如,维度名是:<code>\'Life Expectancy\'</code>,encode 中拼成了 <code>\'Life Expectency\'</code>。</p>\n<h2 id="%E8%A7%86%E8%A7%89%E9%80%9A%E9%81%93%EF%BC%88%E9%A2%9C%E8%89%B2%E3%80%81%E5%B0%BA%E5%AF%B8%E7%AD%89%EF%BC%89%E7%9A%84%E6%98%A0%E5%B0%84" tabindex="-1">视觉通道(颜色、尺寸等)的映射</h2>\n<p>我们可以使用 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 组件进行视觉通道的映射。详见 <a href="https://echarts.apache.org/option.html##visualMap">visualMap</a> 文档的介绍。这是一个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-encode0&edit=1&reset=1">示例</a>。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E5%90%84%E7%A7%8D%E6%A0%BC%E5%BC%8F" tabindex="-1">数据的各种格式</h2>\n<p>多数常见图表中,数据适于用二维表的形式描述。广为使用的数据表格软件(如 MS Excel、Numbers)或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式,输入到 <code>dataset.source</code> 中,在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件,那么可以使用一些 csv 工具如 <a href="https://github.com/d3/d3-dsv">dsv</a> 或者 <a href="https://github.com/mholt/PapaParse">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中,二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外,dataset 也支持例如下面 key-value 方式的数据格式,这类格式也非常常见。但是这类格式中,目前并不支持 <a href="https://echarts.apache.org/option.html##series.seriesLayoutBy">seriesLayoutBy</a> 参数。</p>\n<md-code-block lang="js" code="\'ZGF0YXNldDogWwogIHsKICAgIC8vIOaMieihjOeahCBrZXktdmFsdWUg5b2i5byP77yI5a-56LGh5pWw57uE77yJ77yM6L-Z5piv5Liq5q-U6L6D5bi46KeB55qE5qC85byP44CCCiAgICBzb3VyY2U6IFsKICAgICAgeyBwcm9kdWN0OiAnTWF0Y2hhIExhdHRlJywgY291bnQ6IDgyMywgc2NvcmU6IDk1LjggfSwKICAgICAgeyBwcm9kdWN0OiAnTWlsayBUZWEnLCBjb3VudDogMjM1LCBzY29yZTogODEuNCB9LAogICAgICB7IHByb2R1Y3Q6ICdDaGVlc2UgQ29jb2EnLCBjb3VudDogMTA0Miwgc2NvcmU6IDkxLjIgfSwKICAgICAgeyBwcm9kdWN0OiAnV2FsbnV0IEJyb3duaWUnLCBjb3VudDogOTg4LCBzY29yZTogNzYuOSB9CiAgICBdCiAgfSwKICB7CiAgICAvLyDmjInliJfnmoQga2V5LXZhbHVlIOW9ouW8j-OAggogICAgc291cmNlOiB7CiAgICAgIHByb2R1Y3Q6IFsnTWF0Y2hhIExhdHRlJywgJ01pbGsgVGVhJywgJ0NoZWVzZSBDb2NvYScsICdXYWxudXQgQnJvd25pZSddLAogICAgICBjb3VudDogWzgyMywgMjM1LCAxMDQyLCA5ODhdLAogICAgICBzY29yZTogWzk1LjgsIDgxLjQsIDkxLjIsIDc2LjldCiAgICB9CiAgfQpdOw\'" line-highlights="\'\'" />\n<h2 id="%E5%A4%9A%E4%B8%AA-dataset-%E4%BB%A5%E5%8F%8A%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8%E4%BB%96%E4%BB%AC" tabindex="-1">多个 dataset 以及如何引用他们</h2>\n<p>可以同时定义多个 dataset。系列可以通过 <a href="https://echarts.apache.org/option.html##series.datasetIndex">series.datasetIndex</a> 来指定引用哪个 dataset。例如:</p>\n<md-code-block lang="js" code="\'dmFyIG9wdGlvbiA9IHsKICBkYXRhc2V0OiBbCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAwIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0sCiAgICB7CiAgICAgIC8vIOW6j-WPt-S4uiAyIOeahCBkYXRhc2V044CCCiAgICAgIHNvdXJjZTogW10KICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICAvLyDkvb_nlKjluo_lj7fkuLogMiDnmoQgZGF0YXNldOOAggogICAgICBkYXRhc2V0SW5kZXg6IDIKICAgIH0sCiAgICB7CiAgICAgIC8vIOS9v-eUqOW6j-WPt-S4uiAxIOeahCBkYXRhc2V044CCCiAgICAgIGRhdGFzZXRJbmRleDogMQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h2 id="echarts-3-%E7%9A%84%E6%95%B0%E6%8D%AE%E8%AE%BE%E7%BD%AE%E6%96%B9%E5%BC%8F%EF%BC%88series.data%EF%BC%89%E4%BB%8D%E6%AD%A3%E5%B8%B8%E4%BD%BF%E7%94%A8" tabindex="-1">ECharts 3 的数据设置方式(series.data)仍正常使用</h2>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持,如果系列已经声明了 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>, 那么就会使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a> 而非 <code>dataset</code>。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICB0eXBlOiAnY2F0ZWdvcnknLAogICAgZGF0YTogWydNYXRjaGEgTGF0dGUnLCAnTWlsayBUZWEnLCAnQ2hlZXNlIENvY29hJywgJ1dhbG51dCBCcm93bmllJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIG5hbWU6ICcyMDE1JywKICAgICAgZGF0YTogWzg5LjMsIDkyLjEsIDk0LjQsIDg1LjRdCiAgICB9LAogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgbmFtZTogJzIwMTYnLAogICAgICBkYXRhOiBbOTUuOCwgODkuNCwgOTEuMiwgNzYuOV0KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBuYW1lOiAnMjAxNycsCiAgICAgIGRhdGE6IFs5Ny43LCA4My4xLCA5Mi41LCA3OC4xXQogICAgfQogIF0KfTs\'" v-bind="{}" />\n<p>其实,<a href="https://echarts.apache.org/option.html##series.data">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表,如 <a href="https://echarts.apache.org/option.html##series-treemap">treemap</a>、<a href="https://echarts.apache.org/option.html##series-graph">graph</a>、<a href="https://echarts.apache.org/option.html##series-lines">lines</a> 等,现在仍不支持在 dataset 中设置,仍然需要使用 <a href="https://echarts.apache.org/option.html##series.data">series.data</a>。另外,对于巨大数据量的渲染(如百万以上的数据量),需要使用 <a href="api.html#echartsInstance.appendData">appendData</a> 进行增量加载,这种情况不支持使用 <code>dataset</code>。</p>\n<h2 id="%E5%85%B6%E4%BB%96" tabindex="-1">其他</h2>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有:\n<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>。\n后续会有更多的图表进行支持。</p>\n<p>最后,给出这个 <a href="https://echarts.apache.org/examples/zh/editor.html?c=dataset-link&edit=1&reset=1">示例</a>,多个图表共享一个 <code>dataset</code>,并带有联动交互。</p>\n',postPath:"zh/concepts/dataset"}],fetch:{},error:t,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:I,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:C,draft:e},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:n},{title:"版本特性",dir:A,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:r}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:B,draft:e},{title:"系列",dir:u,draft:e},{title:"样式",dir:m},{title:"数据集",dir:y},{title:"数据转换",dir:b},{title:"坐标系",dir:E,draft:e},{title:"坐标轴",dir:L},{title:"视觉映射",dir:g},{title:"图例",dir:v},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:O,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:w},{title:"堆叠柱状图",dir:Z},{title:"动态排序柱状图",dir:J},{title:"极坐标系柱状图",dir:j,draft:e},{title:"阶梯瀑布图",dir:H},{title:"视觉映射的柱状图",dir:g,draft:e}]},{title:"折线图",dir:z,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:S},{title:"阶梯线图",dir:G}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:K},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:f,children:[{title:"基础散点图",dir:T}]}]},{title:F,dir:i,draft:e},{title:"跨平台方案",dir:x,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:U,draft:e}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:e}]}]},{title:"最佳实践",dir:$,children:[{title:F,dir:i,draft:e},{title:ee,dir:ie},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ge}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:I,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:o},{title:"Resources",dir:C,draft:e},{title:"Inspiration",dir:a},{title:"Get Help",dir:n},{title:"What's New",dir:A,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:r}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:B,draft:e},{title:"Series",dir:u,draft:e},{title:"Style",dir:m},{title:"Dataset",dir:y},{title:"Data Transform",dir:b},{title:"Coordinate",dir:E,draft:e},{title:"Axis",dir:L},{title:"Visual Mapping",dir:g},{title:"Legend",dir:v},{title:"Event and Action",dir:W}]},{title:"Application",dir:O,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:w},{title:"Stacked Bar",dir:Z},{title:"Bar Racing",dir:J},{title:"Bar Polar",dir:j,draft:e},{title:"Waterfall",dir:H}]},{title:"Line",dir:z,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:S},{title:"Step Line",dir:G}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:K},{title:"Ring Style",dir:k},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:f,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:i,draft:e},{title:"Cross Platform",dir:x,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:U,draft:e}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:e}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:e},{title:ee,dir:ie},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ge}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:e,routePath:"/zh/concepts/dataset",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:t}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/event/index.html b/handbook/zh/concepts/event/index.html
index 9987898..f18856a 100644
--- a/handbook/zh/concepts/event/index.html
+++ b/handbook/zh/concepts/event/index.html
@@ -3,55 +3,330 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="事件与行为"><a href="#%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>事件与行为</h1>
-<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p>
-<p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'legendselectchanged'</a> 事件(这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged" rel="nofollow noopener noreferrer" target="_blank">'datazoom'</a> 事件等等。</p>
-<h2 id="鼠标事件的处理"><a href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>鼠标事件的处理</h2>
-<p>ECharts 支持常规的鼠标事件类型,包括 <code>'click'</code>、 <code>'dblclick'</code>、 <code>'mousedown'</code>、 <code>'mousemove'</code>、 <code>'mouseup'</code>、 <code>'mouseover'</code>、 <code>'mouseout'</code>、 <code>'globalout'</code>、 <code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>所有的鼠标事件包含参数 <code>params</code>,这是一个包含点击图形的数据信息的对象,如下格式:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>如何区分鼠标点击到了哪里:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>
-<p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="组件交互的行为事件"><a href="#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>组件交互的行为事件</h2>
-<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events" rel="nofollow noopener noreferrer" target="_blank">events</a> 文档中有列出。</p>
-<p>下面是监听一个图例开关的示例:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="代码触发-echarts-中组件的行为"><a href="#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码触发 ECharts 中组件的行为</h2>
-<p>上面提到诸如 <code>'legendselectchanged'</code> 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。</p>
-<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。</p>
-<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action" rel="nofollow noopener noreferrer" target="_blank">action</a> 文档中有列出。</p>
-<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="监听空白处的事件"><a href="#%E7%9B%91%E5%90%AC%E7%A9%BA%E7%99%BD%E5%A4%84%E7%9A%84%E4%BA%8B%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>监听“空白处”的事件</h2>
-<p>有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。</p>
-<p>在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。</p>
-<p>有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/event#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86">鼠标事件的处理</a></li><li class="toc2"><a href="/handbook/zh/concepts/event#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6">组件交互的行为事件</a></li><li class="toc2"><a href="/handbook/zh/concepts/event#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA">代码触发 ECharts 中组件的行为</a></li><li class="toc2"><a href="/handbook/zh/concepts/event#%E7%9B%91%E5%90%AC%E7%A9%BA%E7%99%BD%E5%A4%84%E7%9A%84%E4%BA%8B%E4%BB%B6">监听“空白处”的事件</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/event.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,n,i,r,l,p,d,s,c,o,h,y,u,g,m,v,f,E,B,x,b,C,A,k,I,T,N,w,P,S,z,D,L,O,R,_,H,$,G,M,V,Z,U,j,q,F,X,W,J,K,Q,Y,ee,te,ae,ne,ie,re,le,pe,de,se,ce,oe,he,ye,ue,ge,me,ve,fe,Ee,Be,xe,be,Ce,Ae,ke,Ie,Te,Ne,we,Pe){return{layout:"default",data:[{article:{slug:I,toc:[{id:v,depth:2,text:v},{id:f,depth:2,text:f},{id:w,depth:2,text:P},{id:S,depth:2,text:z}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:T},children:[{type:t,tag:o,props:{href:"#%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:u,props:{className:[g,m]},children:[]}]},{type:e,value:T}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"myChart.on('click', function(params) {\n // 控制台打印数据的名称\n console.log(params.name);\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 "},{type:t,tag:o,props:{href:D,rel:[E,B,x],target:b},children:[{type:e,value:L}]},{type:e,value:" 事件(这里需要注意切换图例开关是不会触发 "},{type:t,tag:l,props:{},children:[{type:e,value:"'legendselected'"}]},{type:e,value:" 事件的),数据区域缩放时触发的 "},{type:t,tag:o,props:{href:D,rel:[E,B,x],target:b},children:[{type:e,value:"'datazoom'"}]},{type:e,value:" 事件等等。"}]},{type:e,value:a},{type:t,tag:C,props:{id:v},children:[{type:t,tag:o,props:{href:"#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:u,props:{className:[g,m]},children:[]}]},{type:e,value:v}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"ECharts 支持常规的鼠标事件类型,包括 "},{type:t,tag:l,props:{},children:[{type:e,value:"'click'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'dblclick'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mousedown'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mousemove'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseup'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseover'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'mouseout'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'globalout'"}]},{type:e,value:h},{type:t,tag:l,props:{},children:[{type:e,value:"'contextmenu'"}]},{type:e,value:" 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:O,props:{lang:c,layout:"tb"},children:[{type:e,value:"// 基于准备好的dom,初始化ECharts实例\n// var myChart = echarts.init(document.getElementById('main'));\n\n// 指定图表的配置项和数据\nvar option = {\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on('click', function(params) {\n window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"所有的鼠标事件包含参数 "},{type:t,tag:l,props:{},children:[{type:e,value:"params"}]},{type:e,value:",这是一个包含点击图形的数据信息的对象,如下格式:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:"ts","line-highlights":n,"file-name":n},children:[{type:e,value:"type EventParams = {\n // 当前点击的图形元素所属的组件名称,\n // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。\n componentType: string;\n // 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。\n seriesType: string;\n // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。\n seriesIndex: number;\n // 系列名称。当 componentType 为 'series' 时有意义。\n seriesName: string;\n // 数据名,类目名\n name: string;\n // 数据在传入的 data 数组中的 index\n dataIndex: number;\n // 传入的原始数据项\n data: Object;\n // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,\n // dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。\n // 其他大部分图表中只有一种 data,dataType 无意义。\n dataType: string;\n // 传入的数据值\n value: number | Array;\n // 数据图形的颜色。当 componentType 为 'series' 时有意义。\n color: string;\n};\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"如何区分鼠标点击到了哪里:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"myChart.on('click', function(params) {\n if (params.componentType === 'markPoint') {\n // 点击到了 markPoint 上\n if (params.seriesIndex === 5) {\n // 点击到了 index 为 5 的 series 的 markPoint 上。\n }\n } else if (params.componentType === 'series') {\n if (params.seriesType === 'graph') {\n if (params.dataType === 'edge') {\n // 点击到了 graph 的 edge(边)上。\n } else {\n // 点击到了 graph 的 node(节点)上。\n }\n }\n }\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"使用 "},{type:t,tag:l,props:{},children:[{type:e,value:R}]},{type:e,value:" 只对指定的组件的图形元素的触发回调:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.on(eventName, query, handler);\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:t,tag:l,props:{},children:[{type:e,value:R}]},{type:e,value:" 可为 "},{type:t,tag:l,props:{},children:[{type:e,value:_}]},{type:e,value:" 或者 "},{type:t,tag:l,props:{},children:[{type:e,value:H}]},{type:e,value:"。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:$},{type:t,tag:l,props:{},children:[{type:e,value:_}]},{type:e,value:" 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.on('click', 'series', function() {});\nchart.on('click', 'series.line', function() {});\nchart.on('click', 'dataZoom', function() {});\nchart.on('click', 'xAxis.category', function() {});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:$},{type:t,tag:l,props:{},children:[{type:e,value:H}]},{type:e,value:",可以包含以下一个或多个属性,每个属性都是可选的:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:"ts","line-highlights":n,"file-name":n},children:[{type:e,value:"{\n ${mainType}Index: number // 组件 index\n ${mainType}Name: string // 组件 name\n ${mainType}Id: string // 组件 id\n dataIndex: number // 数据项 index\n name: string // 数据项 name\n dataType: string // 数据项 type,如关系图中的 'node', 'edge'\n element: string // 自定义系列中的 el 的 name\n}\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:A}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n name: 'uuu'\n // ...\n }\n ]\n});\nchart.on('mouseover', { seriesName: 'uuu' }, function() {\n // series name 为 'uuu' 的系列中的图形元素被 'mouseover' 时,此方法被回调。\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:A}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n // ...\n },\n {\n // ...\n data: [\n { name: 'xx', value: 121 },\n { name: 'yy', value: 33 }\n ]\n }\n ]\n});\nchart.on('mouseover', { seriesIndex: 1, name: 'xx' }, function() {\n // series index 1 的系列中的 name 为 'xx' 的元素被 'mouseover' 时,此方法被回调。\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:A}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.setOption({\n // ...\n series: [\n {\n type: 'graph',\n nodes: [\n { name: 'a', value: 10 },\n { name: 'b', value: 20 }\n ],\n edges: [{ source: 0, target: 1 }]\n }\n ]\n});\nchart.on('click', { dataType: 'node' }, function() {\n // 关系图的节点被点击时此方法被回调。\n});\nchart.on('click', { dataType: 'edge' }, function() {\n // 关系图的边被点击时此方法被回调。\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:A}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"chart.setOption({\n // ...\n series: {\n // ...\n type: 'custom',\n renderItem: function(params, api) {\n return {\n type: 'group',\n children: [\n {\n type: 'circle',\n name: 'my_el'\n // ...\n },\n {\n // ...\n }\n ]\n };\n },\n data: [[12, 33]]\n }\n});\nchart.on('mouseup', { element: 'my_el' }, function() {\n // name 为 'my_el' 的元素被 'mouseup' 时,此方法被回调。\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"myChart.on('click', function(parmas) {\n $.get('detail?q=' + params.name, function(detail) {\n myChart.setOption({\n series: [\n {\n name: 'pie',\n // 通过饼图表现单个柱子中的数据分布\n data: [detail.data]\n }\n ]\n });\n });\n});\n"}]}]},{type:e,value:a},{type:t,tag:C,props:{id:f},children:[{type:t,tag:o,props:{href:"#%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:u,props:{className:[g,m]},children:[]}]},{type:e,value:f}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 "},{type:t,tag:o,props:{href:"https://echarts.apache.org//api.html#events",rel:[E,B,x],target:b},children:[{type:e,value:"events"}]},{type:e,value:G}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"下面是监听一个图例开关的示例:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on('legendselectchanged', function(params) {\n // 获取点击图例的选中状态\n var isSelected = params.selected[params.name];\n // 在控制台中打印\n console.log((isSelected ? '选中了' : '取消选中了') + '图例' + params.name);\n // 打印所有图例的状态\n console.log(params.selected);\n});\n"}]}]},{type:e,value:a},{type:t,tag:C,props:{id:w},children:[{type:t,tag:o,props:{href:"#%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:u,props:{className:[g,m]},children:[]}]},{type:e,value:P}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"上面提到诸如 "},{type:t,tag:l,props:{},children:[{type:e,value:L}]},{type:e,value:" 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在 ECharts 通过调用 "},{type:t,tag:l,props:{},children:[{type:e,value:"myChart.dispatchAction({ type: '' })"}]},{type:e,value:" 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"常用的动作和动作对应参数在 "},{type:t,tag:o,props:{href:"https://echarts.apache.org//api.html#action",rel:[E,B,x],target:b},children:[{type:e,value:"action"}]},{type:e,value:G}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"下面示例演示了如何通过 "},{type:t,tag:l,props:{},children:[{type:e,value:"dispatchAction"}]},{type:e,value:" 去轮流高亮饼图的每个扇形。"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:O,props:{lang:c,layout:"tb"},children:[{type:e,value:"option = {\n title: {\n text: '饼图程序调用高亮示例',\n left: 'center'\n },\n tooltip: {\n trigger: 'item',\n formatter: '{a} <br/>{b} : {c} ({d}%)'\n },\n legend: {\n orient: 'vertical',\n left: 'left',\n data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']\n },\n series: [\n {\n name: '访问来源',\n type: 'pie',\n radius: '55%',\n center: ['50%', '60%'],\n data: [\n { value: 335, name: '直接访问' },\n { value: 310, name: '邮件营销' },\n { value: 234, name: '联盟广告' },\n { value: 135, name: '视频广告' },\n { value: 1548, name: '搜索引擎' }\n ],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)'\n }\n }\n }\n ]\n};\n\nlet currentIndex = -1;\n\nsetInterval(function() {\n var dataLen = option.series[0].data.length;\n // 取消之前高亮的图形\n myChart.dispatchAction({\n type: 'downplay',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n currentIndex = (currentIndex + 1) % dataLen;\n // 高亮当前图形\n myChart.dispatchAction({\n type: 'highlight',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n // 显示 tooltip\n myChart.dispatchAction({\n type: 'showTip',\n seriesIndex: 0,\n dataIndex: currentIndex\n });\n}, 1000);\n"}]}]},{type:e,value:a},{type:t,tag:C,props:{id:S},children:[{type:t,tag:o,props:{href:"#%E7%9B%91%E5%90%AC%E7%A9%BA%E7%99%BD%E5%A4%84%E7%9A%84%E4%BA%8B%E4%BB%B6",ariaHidden:y,tabIndex:-1},children:[{type:t,tag:u,props:{className:[g,m]},children:[]}]},{type:e,value:z}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"myChart.getZr().on('click', function(event) {\n // 该监听器正在监听一个`zrender 事件`。\n});\nmyChart.on('click', function(event) {\n // 该监听器正在监听一个`echarts 事件`。\n});\n"}]}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。"}]},{type:e,value:a},{type:t,tag:r,props:{},children:[{type:e,value:"有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:"}]},{type:e,value:a},{type:t,tag:p,props:{className:[d]},children:[{type:t,tag:s,props:{lang:c,"line-highlights":n,"file-name":n},children:[{type:e,value:"myChart.getZr().on('click', function(event) {\n // 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。\n if (!event.target) {\n // 点击在了空白处,做些什么。\n }\n});\n"}]}]}]},dir:"/zh/concepts",path:M,extension:".md",createdAt:"2021-06-04T12:26:37.934Z",updatedAt:"2021-07-21T11:12:44.166Z"},postPath:"zh/concepts/event"}],fetch:{},error:V,state:{filled:!1,docVersion:n,ghVersion:n,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:Z},{title:"入门篇",dir:U,children:[{title:"获取 ECharts",dir:j},{title:"在项目中引入 ECharts",dir:q},{title:"资源列表",dir:F,draft:i},{title:"获取灵感",dir:X},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:W,children:[{title:J,draft:i,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:K},{title:"ECharts 5 升级指南",dir:Q}]}]},{title:"概念篇",dir:Y,children:[{title:"图表容器及大小",dir:ee},{title:"配置项",dir:te,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:ae},{title:"数据转换",dir:ne},{title:"坐标系",dir:ie,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:N},{title:"图例",dir:"legend"},{title:T,dir:I}]},{title:"应用篇",dir:re,children:[{title:"常用图表类型",dir:le,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:pe},{title:"堆叠柱状图",dir:de},{title:"动态排序柱状图",dir:se,draft:i},{title:"极坐标系柱状图",dir:ce,draft:i},{title:"瀑布图",dir:oe,draft:i},{title:"视觉映射的柱状图",dir:N,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:he},{title:"堆叠折线图",dir:ye},{title:"区域面积图",dir:ue},{title:"平滑曲线图",dir:ge},{title:"阶梯线图",dir:me}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ve},{title:"圆环图",dir:fe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Ee,children:[{title:"基础散点图",dir:Be}]}]},{title:"移动端优化",dir:k,draft:i},{title:"跨平台方案",dir:xe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:be},{title:"数据下钻",dir:Ce,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Ae}]},{title:"交互",dir:ke,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ie,draft:i}]}]},{title:"最佳实践",dir:Te,children:[{title:"移动端优化",dir:k,draft:i},{title:Ne,dir:we},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Pe}]}],en:[{title:"Get Started",dir:Z},{title:"Basics",dir:U,children:[{title:"Download ECharts",dir:j},{title:"Import ECharts",dir:q},{title:"Resources",dir:F,draft:i},{title:"Inspiration",dir:X},{title:"Get Help",dir:"help"},{title:"Release Note",dir:W,children:[{title:J,draft:i,dir:"5-2-0"},{title:"ECharts 5 Features",dir:K},{title:"ECharts 5 Upgrade Guide",dir:Q}]}]},{title:"Concepts",dir:Y,children:[{title:"Chart Container",dir:ee},{title:"Chart Option",dir:te,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:ae},{title:"Data Transform",dir:ne},{title:"Coordinate",dir:ie,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:N},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:I}]},{title:"Application",dir:re,children:[{title:"Common Charts",dir:le,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:pe},{title:"Stacked Bar",dir:de},{title:"Bar Racing",dir:se,draft:i},{title:"Bar Polar",dir:ce,draft:i},{title:"Waterfall",dir:oe,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:he},{title:"Stacked Line",dir:ye},{title:"Area Chart",dir:ue},{title:"Smoothed Line",dir:ge},{title:"Step Line",dir:me}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ve},{title:"Ring Style",dir:fe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Ee,children:[{title:"Basic Scatter",dir:Be}]}]},{title:"Mobile",dir:k,draft:i},{title:"Cross Platform",dir:xe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:be},{title:"Drilldown",dir:Ce,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Ae}]},{title:"Interaction",dir:ke,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ie,draft:i}]}]},{title:"Best Practice",dir:Te,children:[{title:"Mobile Optimization",dir:k,draft:i},{title:Ne,dir:we},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Pe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:M,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:V},content:{dbHash:"570e7c13"}}}}("text","element","\n","",!0,"p","code","div","nuxt-content-highlight","md-code-block","js","a","、 ","true","span","icon","icon-link","鼠标事件的处理","组件交互的行为事件","nofollow","noopener","noreferrer","_blank","h2","例如:","mobile","event","事件与行为","visual-map","代码触发-echarts-中组件的行为","代码触发 ECharts 中组件的行为","监听空白处的事件","监听“空白处”的事件","https://echarts.apache.org/api.html#events.legendselectchanged","'legendselectchanged'","md-live","query","string","Object","如果为 "," 文档中有列出。","/zh/concepts/event",null,"get-started","basics","download","import","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1> <p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p> <p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <span class="token comment">// 控制台打印数据的名称</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'legendselectchanged'</a> 事件(这里需要注意切换图例开关是不会触发 <code>'legendselected'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">'datazoom'</a> 事件等等。</p> <h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2> <p>ECharts 支持常规的鼠标事件类型,包括 <code>'click'</code>、 <code>'dblclick'</code>、 <code>'mousedown'</code>、 <code>'mousemove'</code>、 <code>'mouseup'</code>、 <code>'mouseover'</code>、 <code>'mouseout'</code>、 <code>'globalout'</code>、 <code>'contextmenu'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p> <div class="md-live layout-tb"><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">// 基于准备好的dom,初始化ECharts实例
+// var myChart = echarts.init(document.getElementById('main'));
+
+// 指定图表的配置项和数据
+var option = {
+ xAxis: {
+ data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+ },
+ yAxis: {},
+ series: [
+ {
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }
+ ]
+};
+// 使用刚指定的配置项和数据显示图表。
+myChart.setOption(option);
+// 处理点击事件并且跳转到相应的百度搜索页面
+myChart.on('click', function(params) {
+ window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
+});</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token comment">// 基于准备好的dom,初始化ECharts实例</span>
+<span class="token comment">// var myChart = echarts.init(document.getElementById('main'));</span>
+
+<span class="token comment">// 指定图表的配置项和数据</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">'衬衫'</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 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 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 comment">// 使用刚指定的配置项和数据显示图表。</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">// 处理点击事件并且跳转到相应的百度搜索页面</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.baidu.com/s?wd='</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><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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <p>所有的鼠标事件包含参数 <code>params</code>,这是一个包含点击图形的数据信息的对象,如下格式:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">type</span> <span class="token class-name">EventParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 当前点击的图形元素所属的组件名称,</span>
+ <span class="token comment">// 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。</span>
+ componentType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+ <span class="token comment">// 系列类型。值可能为:'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。</span>
+ seriesType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+ <span class="token comment">// 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。</span>
+ seriesIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
+ <span class="token comment">// 系列名称。当 componentType 为 'series' 时有意义。</span>
+ seriesName<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+ <span class="token comment">// 数据名,类目名</span>
+ name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+ <span class="token comment">// 数据在传入的 data 数组中的 index</span>
+ dataIndex<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
+ <span class="token comment">// 传入的原始数据项</span>
+ data<span class="token operator">:</span> Object<span class="token punctuation">;</span>
+ <span class="token comment">// sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data,</span>
+ <span class="token comment">// dataType 的值会是 'node' 或者 'edge',表示当前点击在 node 还是 edge 上。</span>
+ <span class="token comment">// 其他大部分图表中只有一种 data,dataType 无意义。</span>
+ dataType<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
+ <span class="token comment">// 传入的数据值</span>
+ value<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">Array</span><span class="token punctuation">;</span>
+ <span class="token comment">// 数据图形的颜色。当 componentType 为 'series' 时有意义。</span>
+ color<span class="token operator">:</span> <span class="token builtin">string</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如何区分鼠标点击到了哪里:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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>
+ <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">// 点击到了 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">// 点击到了 index 为 5 的 series 的 markPoint 上。</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">// 点击到了 graph 的 edge(边)上。</span>
+ <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 点击到了 graph 的 node(节点)上。</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>eventName<span class="token punctuation">,</span> query<span class="token punctuation">,</span> handler<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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p> <p>如果为 <code>string</code> 表示组件类型。格式可以是 'mainType' 或者 'mainType.subType'。例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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'</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 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 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 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 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 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 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 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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token punctuation">{</span>
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Index<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token comment">// 组件 index</span>
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 组件 name</span>
+ $<span class="token punctuation">{</span>mainType<span class="token punctuation">}</span>Id<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 组件 id</span>
+ dataIndex<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token comment">// 数据项 index</span>
+ name<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 数据项 name</span>
+ dataType<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 数据项 type,如关系图中的 'node', 'edge'</span>
+ element<span class="token operator">:</span> <span class="token builtin">string</span> <span class="token comment">// 自定义系列中的 el 的 name</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// series name 为 'uuu' 的系列中的图形元素被 '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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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">}</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 comment">// series index 1 的系列中的 name 为 'xx' 的元素被 '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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><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>
+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><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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>chart<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>
+ 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><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ <span class="token comment">// name 为 'my_el' 的元素被 '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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>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">parmas</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
+ $<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 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>
+ <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">// 通过饼图表现单个柱子中的数据分布</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2> <p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p> <p>下面是监听一个图例开关的示例:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 图例开关的行为只会触发 legendselectchanged 事件</span>
+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">// 获取点击图例的选中状态</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">// 在控制台中打印</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">'选中了'</span> <span class="token operator">:</span> <span class="token string">'取消选中了'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'图例'</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">// 打印所有图例的状态</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2> <p>上面提到诸如 <code>'legendselectchanged'</code> 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。</p> <p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: '' })</code> 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。</p> <p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p> <p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p> <div class="md-live layout-tb"><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 = {
+ title: {
+ text: '饼图程序调用高亮示例',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{a} <br/>{b} : {c} ({d}%)'
+ },
+ legend: {
+ orient: 'vertical',
+ left: 'left',
+ data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
+ },
+ series: [
+ {
+ name: '访问来源',
+ type: 'pie',
+ radius: '55%',
+ center: ['50%', '60%'],
+ data: [
+ { value: 335, name: '直接访问' },
+ { value: 310, name: '邮件营销' },
+ { value: 234, name: '联盟广告' },
+ { value: 135, name: '视频广告' },
+ { value: 1548, name: '搜索引擎' }
+ ],
+ 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
+ });
+ // 显示 tooltip
+ 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>
+ 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>
+ left<span class="token operator">:</span> <span class="token string">'center'</span>
+ <span class="token punctuation">}</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">'直接访问'</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 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>
+ 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">'直接访问'</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>
+ 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>
+ <span class="token comment">// 取消之前高亮的图形</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>
+ <span class="token comment">// 高亮当前图形</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>
+ <span class="token comment">// 显示 tooltip</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 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2> <p>有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。</p> <p>在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">// 该监听器正在监听一个`zrender 事件`。</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">// 该监听器正在监听一个`echarts 事件`。</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。</p> <p>有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>myChart<span class="token punctuation">.</span><span class="token function">getZr</span><span class="token punctuation">(</span><span class="token punctuation">)</span><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">// 没有 target 意味着鼠标/指针不在任何一个图形元素上,它是从“空白处”触发的。</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">// 点击在了空白处,做些什么。</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></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/concepts/event.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/100pah" target="_blank" class="post-contributor"><img alt="100pah" src="https://avatars.githubusercontent.com/100pah?size=60"> <span>100pah</span></a><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/huanghan01" target="_blank" class="post-contributor"><img alt="huanghan01" src="https://avatars.githubusercontent.com/huanghan01?size=60"> <span>huanghan01</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60"> <span>plainheart</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,g,l,t,d,I,C,n,a,o,c,r,A,h,s,b,m,p,u,B,Z,W,y,G,v,L,K,X,Y,O,k,w,J,S,H,V,j,F,R,E,D,z,f,N,T,U,q,M,Q,x,P,_,$,ii,ei,gi){return{layout:"default",data:[{html:'<h1 id="%E4%BA%8B%E4%BB%B6%E4%B8%8E%E8%A1%8C%E4%B8%BA" tabindex="-1">事件与行为</h1>\n<p>在 Apache ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件,然后通过回调函数做相应的处理,比如跳转到一个地址,或者弹出对话框,或者做数据下钻等等。</p>\n<p>ECharts 中的事件名称对应 DOM 事件名称,均为小写的字符串,如下是一个绑定点击操作的示例。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDmjqfliLblj7DmiZPljbDmlbDmja7nmoTlkI3np7AKICBjb25zb2xlLmxvZyhwYXJhbXMubmFtZSk7Cn0pOw\'" line-highlights="\'\'" />\n<p>在 ECharts 中事件分为两种类型,一种是用户鼠标操作点击,或者 hover 图表的图形时触发的事件,还有一种是用户在使用可以交互的组件后触发的行为事件,例如在切换图例开关时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'legendselectchanged\'</a> 事件(这里需要注意切换图例开关是不会触发 <code>\'legendselected\'</code> 事件的),数据区域缩放时触发的 <a href="https://echarts.apache.org/api.html#events.legendselectchanged">\'datazoom\'</a> 事件等等。</p>\n<h2 id="%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%A4%84%E7%90%86" tabindex="-1">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型,包括 <code>\'click\'</code>、 <code>\'dblclick\'</code>、 <code>\'mousedown\'</code>、 <code>\'mousemove\'</code>、 <code>\'mouseup\'</code>、 <code>\'mouseover\'</code>、 <code>\'mouseout\'</code>、 <code>\'globalout\'</code>、 <code>\'contextmenu\'</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<md-live lang="js" code="\'Ly8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWRUNoYXJ0c-WunuS-iwovLyB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCi8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgp2YXIgb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfTsKLy8g5L2_55So5Yia5oyH5a6a55qE6YWN572u6aG55ZKM5pWw5o2u5pi-56S65Zu-6KGo44CCCm15Q2hhcnQuc2V0T3B0aW9uKG9wdGlvbik7Ci8vIOWkhOeQhueCueWHu-S6i-S7tuW5tuS4lOi3s-i9rOWIsOebuOW6lOeahOeZvuW6puaQnOe0oumhtemdogpteUNoYXJ0Lm9uKCdjbGljaycsIGZ1bmN0aW9uKHBhcmFtcykgewogIHdpbmRvdy5vcGVuKCdodHRwczovL3d3dy5iYWlkdS5jb20vcz93ZD0nICsgZW5jb2RlVVJJQ29tcG9uZW50KHBhcmFtcy5uYW1lKSk7Cn0pOw\'" v-bind="{}" />\n<p>所有的鼠标事件包含参数 <code>params</code>,这是一个包含点击图形的数据信息的对象,如下格式:</p>\n<md-code-block lang="ts" code="\'dHlwZSBFdmVudFBhcmFtcyA9IHsKICAvLyDlvZPliY3ngrnlh7vnmoTlm77lvaLlhYPntKDmiYDlsZ7nmoTnu4Tku7blkI3np7DvvIwKICAvLyDlhbblgLzlpoIgJ3NlcmllcyfjgIEnbWFya0xpbmUn44CBJ21hcmtQb2ludCfjgIEndGltZUxpbmUnIOetieOAggogIGNvbXBvbmVudFR5cGU6IHN0cmluZzsKICAvLyDns7vliJfnsbvlnovjgILlgLzlj6_og73kuLrvvJonbGluZSfjgIEnYmFyJ-OAgSdwaWUnIOetieOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBzZXJpZXNUeXBlOiBzdHJpbmc7CiAgLy8g57O75YiX5Zyo5Lyg5YWl55qEIG9wdGlvbi5zZXJpZXMg5Lit55qEIGluZGV444CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc0luZGV4OiBudW1iZXI7CiAgLy8g57O75YiX5ZCN56ew44CC5b2TIGNvbXBvbmVudFR5cGUg5Li6ICdzZXJpZXMnIOaXtuacieaEj-S5ieOAggogIHNlcmllc05hbWU6IHN0cmluZzsKICAvLyDmlbDmja7lkI3vvIznsbvnm67lkI0KICBuYW1lOiBzdHJpbmc7CiAgLy8g5pWw5o2u5Zyo5Lyg5YWl55qEIGRhdGEg5pWw57uE5Lit55qEIGluZGV4CiAgZGF0YUluZGV4OiBudW1iZXI7CiAgLy8g5Lyg5YWl55qE5Y6f5aeL5pWw5o2u6aG5CiAgZGF0YTogT2JqZWN0OwogIC8vIHNhbmtleeOAgWdyYXBoIOetieWbvuihqOWQjOaXtuWQq-aciSBub2RlRGF0YSDlkowgZWRnZURhdGEg5Lik56eNIGRhdGHvvIwKICAvLyBkYXRhVHlwZSDnmoTlgLzkvJrmmK8gJ25vZGUnIOaIluiAhSAnZWRnZSfvvIzooajnpLrlvZPliY3ngrnlh7vlnKggbm9kZSDov5jmmK8gZWRnZSDkuIrjgIIKICAvLyDlhbbku5blpKfpg6jliIblm77ooajkuK3lj6rmnInkuIDnp40gZGF0Ye-8jGRhdGFUeXBlIOaXoOaEj-S5ieOAggogIGRhdGFUeXBlOiBzdHJpbmc7CiAgLy8g5Lyg5YWl55qE5pWw5o2u5YC8CiAgdmFsdWU6IG51bWJlciB8IEFycmF5OwogIC8vIOaVsOaNruWbvuW9oueahOminOiJsuOAguW9kyBjb21wb25lbnRUeXBlIOS4uiAnc2VyaWVzJyDml7bmnInmhI_kuYnjgIIKICBjb2xvcjogc3RyaW5nOwp9Ow\'" line-highlights="\'\'" />\n<p>如何区分鼠标点击到了哪里:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJhbXMpIHsKICBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdtYXJrUG9pbnQnKSB7CiAgICAvLyDngrnlh7vliLDkuoYgbWFya1BvaW50IOS4igogICAgaWYgKHBhcmFtcy5zZXJpZXNJbmRleCA9PT0gNSkgewogICAgICAvLyDngrnlh7vliLDkuoYgaW5kZXgg5Li6IDUg55qEIHNlcmllcyDnmoQgbWFya1BvaW50IOS4iuOAggogICAgfQogIH0gZWxzZSBpZiAocGFyYW1zLmNvbXBvbmVudFR5cGUgPT09ICdzZXJpZXMnKSB7CiAgICBpZiAocGFyYW1zLnNlcmllc1R5cGUgPT09ICdncmFwaCcpIHsKICAgICAgaWYgKHBhcmFtcy5kYXRhVHlwZSA9PT0gJ2VkZ2UnKSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBlZGdl77yI6L6577yJ5LiK44CCCiAgICAgIH0gZWxzZSB7CiAgICAgICAgLy8g54K55Ye75Yiw5LqGIGdyYXBoIOeahCBub2Rl77yI6IqC54K577yJ5LiK44CCCiAgICAgIH0KICAgIH0KICB9Cn0pOw\'" line-highlights="\'\'" />\n<p>使用 <code>query</code> 只对指定的组件的图形元素的触发回调:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oZXZlbnROYW1lLCBxdWVyeSwgaGFuZGxlcik7\'" line-highlights="\'\'" />\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>string</code> 表示组件类型。格式可以是 \'mainType\' 或者 \'mainType.subType\'。例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQub24oJ2NsaWNrJywgJ3NlcmllcycsIGZ1bmN0aW9uKCkge30pOwpjaGFydC5vbignY2xpY2snLCAnc2VyaWVzLmxpbmUnLCBmdW5jdGlvbigpIHt9KTsKY2hhcnQub24oJ2NsaWNrJywgJ2RhdGFab29tJywgZnVuY3Rpb24oKSB7fSk7CmNoYXJ0Lm9uKCdjbGljaycsICd4QXhpcy5jYXRlZ29yeScsIGZ1bmN0aW9uKCkge30pOw\'" line-highlights="\'\'" />\n<p>如果为 <code>Object</code>,可以包含以下一个或多个属性,每个属性都是可选的:</p>\n<md-code-block lang="ts" code="\'ewogICR7bWFpblR5cGV9SW5kZXg6IG51bWJlciAvLyDnu4Tku7YgaW5kZXgKICAke21haW5UeXBlfU5hbWU6IHN0cmluZyAvLyDnu4Tku7YgbmFtZQogICR7bWFpblR5cGV9SWQ6IHN0cmluZyAvLyDnu4Tku7YgaWQKICBkYXRhSW5kZXg6IG51bWJlciAvLyDmlbDmja7pobkgaW5kZXgKICBuYW1lOiBzdHJpbmcgLy8g5pWw5o2u6aG5IG5hbWUKICBkYXRhVHlwZTogc3RyaW5nIC8vIOaVsOaNrumhuSB0eXBl77yM5aaC5YWz57O75Zu-5Lit55qEICdub2RlJywgJ2VkZ2UnCiAgZWxlbWVudDogc3RyaW5nIC8vIOiHquWumuS5ieezu-WIl-S4reeahCBlbCDnmoQgbmFtZQp9\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ3V1dScKICAgICAgLy8gLi4uCiAgICB9CiAgXQp9KTsKY2hhcnQub24oJ21vdXNlb3ZlcicsIHsgc2VyaWVzTmFtZTogJ3V1dScgfSwgZnVuY3Rpb24oKSB7CiAgLy8gc2VyaWVzIG5hbWUg5Li6ICd1dXUnIOeahOezu-WIl-S4reeahOWbvuW9ouWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyAuLi4KICAgICAgZGF0YTogWwogICAgICAgIHsgbmFtZTogJ3h4JywgdmFsdWU6IDEyMSB9LAogICAgICAgIHsgbmFtZTogJ3l5JywgdmFsdWU6IDMzIH0KICAgICAgXQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdtb3VzZW92ZXInLCB7IHNlcmllc0luZGV4OiAxLCBuYW1lOiAneHgnIH0sIGZ1bmN0aW9uKCkgewogIC8vIHNlcmllcyBpbmRleCAxIOeahOezu-WIl-S4reeahCBuYW1lIOS4uiAneHgnIOeahOWFg-e0oOiiqyAnbW91c2VvdmVyJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2dyYXBoJywKICAgICAgbm9kZXM6IFsKICAgICAgICB7IG5hbWU6ICdhJywgdmFsdWU6IDEwIH0sCiAgICAgICAgeyBuYW1lOiAnYicsIHZhbHVlOiAyMCB9CiAgICAgIF0sCiAgICAgIGVkZ2VzOiBbeyBzb3VyY2U6IDAsIHRhcmdldDogMSB9XQogICAgfQogIF0KfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdub2RlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoToioLngrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7CmNoYXJ0Lm9uKCdjbGljaycsIHsgZGF0YVR5cGU6ICdlZGdlJyB9LCBmdW5jdGlvbigpIHsKICAvLyDlhbPns7vlm77nmoTovrnooqvngrnlh7vml7bmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>例如:</p>\n<md-code-block lang="js" code="\'Y2hhcnQuc2V0T3B0aW9uKHsKICAvLyAuLi4KICBzZXJpZXM6IHsKICAgIC8vIC4uLgogICAgdHlwZTogJ2N1c3RvbScsCiAgICByZW5kZXJJdGVtOiBmdW5jdGlvbihwYXJhbXMsIGFwaSkgewogICAgICByZXR1cm4gewogICAgICAgIHR5cGU6ICdncm91cCcsCiAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgIHsKICAgICAgICAgICAgdHlwZTogJ2NpcmNsZScsCiAgICAgICAgICAgIG5hbWU6ICdteV9lbCcKICAgICAgICAgICAgLy8gLi4uCiAgICAgICAgICB9LAogICAgICAgICAgewogICAgICAgICAgICAvLyAuLi4KICAgICAgICAgIH0KICAgICAgICBdCiAgICAgIH07CiAgICB9LAogICAgZGF0YTogW1sxMiwgMzNdXQogIH0KfSk7CmNoYXJ0Lm9uKCdtb3VzZXVwJywgeyBlbGVtZW50OiAnbXlfZWwnIH0sIGZ1bmN0aW9uKCkgewogIC8vIG5hbWUg5Li6ICdteV9lbCcg55qE5YWD57Sg6KKrICdtb3VzZXVwJyDml7bvvIzmraTmlrnms5Xooqvlm57osIPjgIIKfSk7\'" line-highlights="\'\'" />\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息后更新图表,显示浮层等等,如下示例代码:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihwYXJtYXMpIHsKICAkLmdldCgnZGV0YWlsP3E9JyArIHBhcmFtcy5uYW1lLCBmdW5jdGlvbihkZXRhaWwpIHsKICAgIG15Q2hhcnQuc2V0T3B0aW9uKHsKICAgICAgc2VyaWVzOiBbCiAgICAgICAgewogICAgICAgICAgbmFtZTogJ3BpZScsCiAgICAgICAgICAvLyDpgJrov4fppbzlm77ooajnjrDljZXkuKrmn7HlrZDkuK3nmoTmlbDmja7liIbluIMKICAgICAgICAgIGRhdGE6IFtkZXRhaWwuZGF0YV0KICAgICAgICB9CiAgICAgIF0KICAgIH0pOwogIH0pOwp9KTs\'" line-highlights="\'\'" />\n<h2 id="%E7%BB%84%E4%BB%B6%E4%BA%A4%E4%BA%92%E7%9A%84%E8%A1%8C%E4%B8%BA%E4%BA%8B%E4%BB%B6" tabindex="-1">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件,常用的事件和事件对应参数在 <a href="https://echarts.apache.org//api.html#events">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例:</p>\n<md-code-block lang="js" code="\'Ly8g5Zu-5L6L5byA5YWz55qE6KGM5Li65Y-q5Lya6Kem5Y-RIGxlZ2VuZHNlbGVjdGNoYW5nZWQg5LqL5Lu2Cm15Q2hhcnQub24oJ2xlZ2VuZHNlbGVjdGNoYW5nZWQnLCBmdW5jdGlvbihwYXJhbXMpIHsKICAvLyDojrflj5bngrnlh7vlm77kvovnmoTpgInkuK3nirbmgIEKICB2YXIgaXNTZWxlY3RlZCA9IHBhcmFtcy5zZWxlY3RlZFtwYXJhbXMubmFtZV07CiAgLy8g5Zyo5o6n5Yi25Y-w5Lit5omT5Y2wCiAgY29uc29sZS5sb2coKGlzU2VsZWN0ZWQgPyAn6YCJ5Lit5LqGJyA6ICflj5bmtojpgInkuK3kuoYnKSArICflm77kvosnICsgcGFyYW1zLm5hbWUpOwogIC8vIOaJk-WNsOaJgOacieWbvuS-i-eahOeKtuaAgQogIGNvbnNvbGUubG9nKHBhcmFtcy5zZWxlY3RlZCk7Cn0pOw\'" line-highlights="\'\'" />\n<h2 id="%E4%BB%A3%E7%A0%81%E8%A7%A6%E5%8F%91-echarts-%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84%E8%A1%8C%E4%B8%BA" tabindex="-1">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如 <code>\'legendselectchanged\'</code> 事件会由组件交互的行为触发,那除了用户的交互操作,有时候也会有需要在程序里调用方法触发图表的行为,诸如显示 tooltip,选中图例。</p>\n<p>在 ECharts 通过调用 <code>myChart.dispatchAction({ type: \'\' })</code> 触发图表行为,统一管理了所有动作,也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href="https://echarts.apache.org//api.html#action">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过 <code>dispatchAction</code> 去轮流高亮饼图的每个扇形。</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHRpdGxlOiB7CiAgICB0ZXh0OiAn6aW85Zu-56iL5bqP6LCD55So6auY5Lqu56S65L6LJywKICAgIGxlZnQ6ICdjZW50ZXInCiAgfSwKICB0b29sdGlwOiB7CiAgICB0cmlnZ2VyOiAnaXRlbScsCiAgICBmb3JtYXR0ZXI6ICd7YX0gPGJyLz57Yn0gOiB7Y30gKHtkfSUpJwogIH0sCiAgbGVnZW5kOiB7CiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICBsZWZ0OiAnbGVmdCcsCiAgICBkYXRhOiBbJ-ebtOaOpeiuv-mXricsICfpgq7ku7bokKXplIAnLCAn6IGU55uf5bm_5ZGKJywgJ-inhumikeW5v-WRiicsICfmkJzntKLlvJXmk44nXQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICforr_pl67mnaXmupAnLAogICAgICB0eXBlOiAncGllJywKICAgICAgcmFkaXVzOiAnNTUlJywKICAgICAgY2VudGVyOiBbJzUwJScsICc2MCUnXSwKICAgICAgZGF0YTogWwogICAgICAgIHsgdmFsdWU6IDMzNSwgbmFtZTogJ-ebtOaOpeiuv-mXricgfSwKICAgICAgICB7IHZhbHVlOiAzMTAsIG5hbWU6ICfpgq7ku7bokKXplIAnIH0sCiAgICAgICAgeyB2YWx1ZTogMjM0LCBuYW1lOiAn6IGU55uf5bm_5ZGKJyB9LAogICAgICAgIHsgdmFsdWU6IDEzNSwgbmFtZTogJ-inhumikeW5v-WRiicgfSwKICAgICAgICB7IHZhbHVlOiAxNTQ4LCBuYW1lOiAn5pCc57Si5byV5pOOJyB9CiAgICAgIF0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgICBzaGFkb3dCbHVyOiAxMCwKICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICBzaGFkb3dDb2xvcjogJ3JnYmEoMCwgMCwgMCwgMC41KScKICAgICAgICB9CiAgICAgIH0KICAgIH0KICBdCn07CgpsZXQgY3VycmVudEluZGV4ID0gLTE7CgpzZXRJbnRlcnZhbChmdW5jdGlvbigpIHsKICB2YXIgZGF0YUxlbiA9IG9wdGlvbi5zZXJpZXNbMF0uZGF0YS5sZW5ndGg7CiAgLy8g5Y-W5raI5LmL5YmN6auY5Lqu55qE5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnZG93bnBsYXknLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwogIGN1cnJlbnRJbmRleCA9IChjdXJyZW50SW5kZXggKyAxKSAlIGRhdGFMZW47CiAgLy8g6auY5Lqu5b2T5YmN5Zu-5b2iCiAgbXlDaGFydC5kaXNwYXRjaEFjdGlvbih7CiAgICB0eXBlOiAnaGlnaGxpZ2h0JywKICAgIHNlcmllc0luZGV4OiAwLAogICAgZGF0YUluZGV4OiBjdXJyZW50SW5kZXgKICB9KTsKICAvLyDmmL7npLogdG9vbHRpcAogIG15Q2hhcnQuZGlzcGF0Y2hBY3Rpb24oewogICAgdHlwZTogJ3Nob3dUaXAnLAogICAgc2VyaWVzSW5kZXg6IDAsCiAgICBkYXRhSW5kZXg6IGN1cnJlbnRJbmRleAogIH0pOwp9LCAxMDAwKTs\'" v-bind="{}" />\n<h2 id="%E7%9B%91%E5%90%AC%E2%80%9C%E7%A9%BA%E7%99%BD%E5%A4%84%E2%80%9D%E7%9A%84%E4%BA%8B%E4%BB%B6" tabindex="-1">监听“空白处”的事件</h2>\n<p>有时候,开发者需要监听画布的“空白处”所触发的事件。比如,当需要在用户点击“空白处”的时候重置图表时。</p>\n<p>在讨论这个功能之前,我们需要先明确两种事件。zrender 事件和 echarts 事件。</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g6K-l55uR5ZCs5Zmo5q2j5Zyo55uR5ZCs5LiA5LiqYHpyZW5kZXIg5LqL5Lu2YOOAggp9KTsKbXlDaGFydC5vbignY2xpY2snLCBmdW5jdGlvbihldmVudCkgewogIC8vIOivpeebkeWQrOWZqOato-WcqOebkeWQrOS4gOS4qmBlY2hhcnRzIOS6i-S7tmDjgIIKfSk7\'" line-highlights="\'\'" />\n<p>zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发,而后者是只有当鼠标在图形元素上时才能被触发。事实上,echarts 事件是在 zrender 事件的基础上实现的,也就是说,当一个 zrender 事件在图形元素上被触发时,echarts 将触发一个 echarts 事件给开发者。</p>\n<p>有了 zrender 事件,我们就可以实现监听空白处的事件,具体如下:</p>\n<md-code-block lang="js" code="\'bXlDaGFydC5nZXRacigpLm9uKCdjbGljaycsIGZ1bmN0aW9uKGV2ZW50KSB7CiAgLy8g5rKh5pyJIHRhcmdldCDmhI_lkbPnnYDpvKDmoIcv5oyH6ZKI5LiN5Zyo5Lu75L2V5LiA5Liq5Zu-5b2i5YWD57Sg5LiK77yM5a6D5piv5LuO4oCc56m655m95aSE4oCd6Kem5Y-R55qE44CCCiAgaWYgKCFldmVudC50YXJnZXQpIHsKICAgIC8vIOeCueWHu-WcqOS6huepuueZveWkhO-8jOWBmuS6m-S7gOS5iOOAggogIH0KfSk7\'" line-highlights="\'\'" />\n',postPath:"zh/concepts/event"}],fetch:{},error:l,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:t},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:I},{title:"在项目中引入 ECharts",dir:C},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:o},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"ECharts 5 升级指南",dir:A},{title:5.2,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:i},{title:"系列",dir:p,draft:i},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:Z},{title:"坐标系",dir:W,draft:i},{title:"坐标轴",dir:y},{title:"视觉映射",dir:g},{title:"图例",dir:G},{title:"事件与行为",dir:v}]},{title:"应用篇",dir:L,children:[{title:"常用图表类型",dir:K,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:X},{title:"堆叠柱状图",dir:Y},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:k,draft:i},{title:"阶梯瀑布图",dir:w},{title:"视觉映射的柱状图",dir:g,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:H},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:F}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:E},{title:"南丁格尔图(玫瑰图)",dir:D}]},{title:"散点图",dir:z,children:[{title:"基础散点图",dir:f}]}]},{title:N,dir:e,draft:i},{title:"跨平台方案",dir:T,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:x}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:N,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:gi}]}],en:[{title:"Get Started",dir:t},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:I},{title:"Import ECharts",dir:C},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:a},{title:"Get Help",dir:o},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:r},{title:"ECharts 5 Upgrade Guide",dir:A},{title:5.2,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:i},{title:"Series",dir:p,draft:i},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:Z},{title:"Coordinate",dir:W,draft:i},{title:"Axis",dir:y},{title:"Visual Mapping",dir:g},{title:"Legend",dir:G},{title:"Event and Action",dir:v}]},{title:"Application",dir:L,children:[{title:"Common Charts",dir:K,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:X},{title:"Stacked Bar",dir:Y},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:k,draft:i},{title:"Waterfall",dir:w}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:H},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:F}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:E},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:z,children:[{title:"Basic Scatter",dir:f}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:T,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:x}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:gi}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/event",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:l}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/legend/index.html b/handbook/zh/concepts/legend/index.html
index 33210d3..5b58de1 100644
--- a/handbook/zh/concepts/legend/index.html
+++ b/handbook/zh/concepts/legend/index.html
@@ -3,29 +3,121 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="图例"><a aria-hidden="true" href="#%E5%9B%BE%E4%BE%8B" tabindex="-1"><span class="icon icon-link"></span></a>图例</h1>
-<p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>
-<h2 id="布局"><a aria-hidden="true" href="#%E5%B8%83%E5%B1%80" tabindex="-1"><span class="icon icon-link"></span></a>布局</h2>
-<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<p>对于图例较多时,可以使用可滚动翻页的图例</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="样式"><a aria-hidden="true" href="#%E6%A0%B7%E5%BC%8F" tabindex="-1"><span class="icon icon-link"></span></a>样式</h2>
-<p>在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>
-<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png">
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="交互"><a aria-hidden="true" href="#%E4%BA%A4%E4%BA%92" tabindex="-1"><span class="icon icon-link"></span></a>交互</h2>
-<p>根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="图例注意事项"><a aria-hidden="true" href="#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1"><span class="icon icon-link"></span></a>图例注意事项</h2>
-<p>图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/legend#%E5%B8%83%E5%B1%80">布局</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E6%A0%B7%E5%BC%8F">样式</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E4%BA%A4%E4%BA%92">交互</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9">图例注意事项</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/legend.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,n,p,c,s,o,h,g,y,u,m,v,f,b,B,E,x,C,A,S,k,P,w,N,R,L,D,H,I,_,z,T,M,G,V,F,U,O,W,Z,$,j,X,q,J,K,Q,Y,tt,et,it,rt,at,lt,dt,nt,pt,ct,st,ot,ht,gt,yt,ut,mt,vt,ft,bt){return{layout:"default",data:[{article:{slug:E,toc:[{id:v,depth:2,text:v},{id:c,depth:2,text:c},{id:s,depth:2,text:s},{id:f,depth:2,text:f}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:x},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%9B%BE%E4%BE%8B",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:x}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。"}]},{type:t,value:r},{type:e,tag:b,props:{id:v},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%B8%83%E5%B1%80",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:v}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:"md-live",props:{lang:p,layout:"tb"},children:[{type:t,value:"option = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"对于图例较多时,可以使用可滚动翻页的图例"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:c},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E6%A0%B7%E5%BC%8F",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:c}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。"}]},{type:t,value:r},{type:e,tag:"img",props:{"max-width":"830",width:"80%",height:"80%",src:"images/design/legend/charts_sign_img04.png"},children:[]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:s},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E4%BA%A4%E4%BA%92",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:s}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:f},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:f}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。"}]}]},dir:"/zh/concepts",path:A,extension:".md",createdAt:"2021-06-04T12:26:37.934Z",updatedAt:"2021-07-21T13:04:56.122Z"},postPath:"zh/concepts/legend"}],fetch:{},error:S,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:k},{title:"入门篇",dir:P,children:[{title:"获取 ECharts",dir:w},{title:"在项目中引入 ECharts",dir:N},{title:"资源列表",dir:R,draft:i},{title:"获取灵感",dir:L},{title:"寻求帮助",dir:D},{title:"版本介绍",dir:H,children:[{title:I,draft:i,dir:_},{title:"ECharts 5 新特性",dir:z},{title:"ECharts 5 升级指南",dir:T}]}]},{title:"概念篇",dir:M,children:[{title:"图表容器及大小",dir:G},{title:"配置项",dir:V,draft:i},{title:"系列",dir:F,draft:i},{title:c,dir:U},{title:"数据集",dir:O},{title:"数据转换",dir:W},{title:"坐标系",dir:Z,draft:i},{title:"坐标轴",dir:$},{title:"视觉映射",dir:C},{title:x,dir:E},{title:"事件与行为",dir:j}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:q,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:K},{title:"动态排序柱状图",dir:Q,draft:i},{title:"极坐标系柱状图",dir:Y,draft:i},{title:"瀑布图",dir:tt,draft:i},{title:"视觉映射的柱状图",dir:C,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:et},{title:"堆叠折线图",dir:it},{title:"区域面积图",dir:rt},{title:"平滑曲线图",dir:at},{title:"阶梯线图",dir:lt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:dt},{title:"圆环图",dir:nt},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:pt,children:[{title:"基础散点图",dir:ct}]}]},{title:"移动端优化",dir:B,draft:i},{title:"跨平台方案",dir:st,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ot},{title:"数据下钻",dir:ht,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:gt}]},{title:s,dir:yt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ut,draft:i}]}]},{title:"最佳实践",dir:mt,children:[{title:"移动端优化",dir:B,draft:i},{title:vt,dir:ft},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:bt}]}],en:[{title:"Get Started",dir:k},{title:"Basics",dir:P,children:[{title:"Download ECharts",dir:w},{title:"Import ECharts",dir:N},{title:"Resources",dir:R,draft:i},{title:"Inspiration",dir:L},{title:"Get Help",dir:D},{title:"Release Note",dir:H,children:[{title:I,draft:i,dir:_},{title:"ECharts 5 Features",dir:z},{title:"ECharts 5 Upgrade Guide",dir:T}]}]},{title:"Concepts",dir:M,children:[{title:"Chart Container",dir:G},{title:"Chart Option",dir:V,draft:i},{title:"Series",dir:F,draft:i},{title:"Style",dir:U},{title:"Dataset",dir:O},{title:"Data Transform",dir:W},{title:"Coordinate",dir:Z,draft:i},{title:"Axis",dir:$},{title:"Visual Mapping",dir:C},{title:"Legend",dir:E},{title:"Event and Action",dir:j}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:q,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:K},{title:"Bar Racing",dir:Q,draft:i},{title:"Bar Polar",dir:Y,draft:i},{title:"Waterfall",dir:tt,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:et},{title:"Stacked Line",dir:it},{title:"Area Chart",dir:rt},{title:"Smoothed Line",dir:at},{title:"Step Line",dir:lt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:dt},{title:"Ring Style",dir:nt},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:pt,children:[{title:"Basic Scatter",dir:ct}]}]},{title:"Mobile",dir:B,draft:i},{title:"Cross Platform",dir:st,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ot},{title:"Drilldown",dir:ht,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:gt}]},{title:"Interaction",dir:yt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ut,draft:i}]}]},{title:"Best Practice",dir:mt,children:[{title:"Mobile Optimization",dir:B,draft:i},{title:vt,dir:ft},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:bt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:A,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:S},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","p","div","nuxt-content-highlight","js","样式","交互","a","true","span","icon","icon-link","md-code-block","布局","图例注意事项","h2","mobile","legend","图例","visual-map","/zh/concepts/legend",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1> <p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p> <h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2> <p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p> <div class="md-live layout-tb"><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 = {
+ 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> 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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <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>
+ 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">'图例一'</span><span class="token punctuation">,</span> <span class="token string">'图例二'</span><span class="token punctuation">,</span> <span class="token string">'图例三'</span> <span class="token comment">/* ... */</span><span class="token punctuation">,</span> <span class="token punctuation">,</span> <span class="token string">'图例n'</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%A0%B7%E5%BC%8F" tabindex="-1">样式</h2> <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>
+ 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">'图例一'</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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p> <img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png"> <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>
+ 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">'图例一'</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 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E4%BA%A4%E4%BA%92" tabindex="-1">交互</h2> <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>
+ 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">'图例一'</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 punctuation">,</span>
+ selected<span class="token operator">:</span> <span class="token punctuation">{</span>
+ 图例一<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
+ 图例二<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">图例注意事项</h2> <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>
+ 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">'图例一'</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">'图例二'</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">'图例三'</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">'图例一'</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">'图例二'</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">'图例三'</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</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/zh/concepts/legend.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,d,r,l,g,a,n,o,C,I,A,s,c,h,u,p,L,b,B,w,m,v,y,f,Z,J,S,E,W,D,G,k,H,M,V,Y,x,F,K,N,j,T,O,X,P,R,z,Q,U,_,q,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E5%9B%BE%E4%BE%8B" tabindex="-1">图例</h1>\n<p>图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列,通过点击对应数据列的标记,可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。</p>\n<h2 id="%E5%B8%83%E5%B1%80" tabindex="-1">布局</h2>\n<p>图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致,可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgLy8gVHJ5ICdob3Jpem9udGFsJwogICAgb3JpZW50OiAndmVydGljYWwnLAogICAgcmlnaHQ6IDEwLAogICAgdG9wOiAnY2VudGVyJwogIH0sCiAgZGF0YXNldDogewogICAgc291cmNlOiBbCiAgICAgIFsncHJvZHVjdCcsICcyMDE1JywgJzIwMTYnLCAnMjAxNyddLAogICAgICBbJ01hdGNoYSBMYXR0ZScsIDQzLjMsIDg1LjgsIDkzLjddLAogICAgICBbJ01pbGsgVGVhJywgODMuMSwgNzMuNCwgNTUuMV0sCiAgICAgIFsnQ2hlZXNlIENvY29hJywgODYuNCwgNjUuMiwgODIuNV0sCiAgICAgIFsnV2FsbnV0IEJyb3duaWUnLCA3Mi40LCA1My45LCAzOS4xXQogICAgXQogIH0sCiAgeEF4aXM6IHsgdHlwZTogJ2NhdGVnb3J5JyB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFt7IHR5cGU6ICdiYXInIH0sIHsgdHlwZTogJ2JhcicgfSwgeyB0eXBlOiAnYmFyJyB9XQp9Ow\'" v-bind="{}" />\n<p>对于图例较多时,可以使用可滚动翻页的图例</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgdHlwZTogJ3Njcm9sbCcsCiAgICBvcmllbnQ6ICd2ZXJ0aWNhbCcsCiAgICByaWdodDogMTAsCiAgICB0b3A6IDIwLAogICAgYm90dG9tOiAyMCwKICAgIGRhdGE6IFsn5Zu-5L6L5LiAJywgJ-WbvuS-i-S6jCcsICflm77kvovkuIknIC8qIC4uLiAqLywgLCAn5Zu-5L6LbiddCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E6%A0%B7%E5%BC%8F" tabindex="-1">样式</h2>\n<p>在深色系背景下、为了方便阅读,建议给图例加上半透明的浅色背景层,文字颜色设置为浅色。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgYmFja2dyb3VuZENvbG9yOiAnI2NjYycsCiAgICB0ZXh0U3R5bGU6IHsKICAgICAgY29sb3I6ICcjY2NjJwogICAgICAvLyAuLi4KICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。</p>\n<img max-width="830" width="80%" height="80%" src="images/design/legend/charts_sign_img04.png" />\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgaWNvbjogJ3JlY3QnCiAgICAvLyAuLi4KICB9CiAgLy8gLi4uCn07\'" line-highlights="\'\'" />\n<h2 id="%E4%BA%A4%E4%BA%92" tabindex="-1">交互</h2>\n<p>根据场景需要,图例可支持交互操作,点击控制显示或隐藏对应的数据列;</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWyflm77kvovkuIAnLCAn5Zu-5L6L5LqMJywgJ-WbvuS-i-S4iSddLAogICAgc2VsZWN0ZWQ6IHsKICAgICAg5Zu-5L6L5LiAOiB0cnVlLAogICAgICDlm77kvovkuow6IHRydWUsCiAgICAgIOWbvuS-i-S4iTogZmFsc2UKICAgIH0KICAgIC8vIC4uLgogIH0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9" tabindex="-1">图例注意事项</h2>\n<p>图例要要注意视情况使用,有些双轴图包含了多种图表类型,不同类型的图例样式要有所区分。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIGxlZ2VuZDogewogICAgZGF0YTogWwogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4gCcsCiAgICAgICAgaWNvbjogJ3JlY3QnCiAgICAgIH0sCiAgICAgIHsKICAgICAgICBuYW1lOiAn5Zu-5L6L5LqMJywKICAgICAgICBpY29uOiAnY2lyY2xlJwogICAgICB9LAogICAgICB7CiAgICAgICAgbmFtZTogJ-WbvuS-i-S4iScsCiAgICAgICAgaWNvbjogJ3BpbicKICAgICAgfQogICAgXQogICAgLy8gLi4uCiAgfSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-WbvuS-i-S4gCcKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICBuYW1lOiAn5Zu-5L6L5LqMJwogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIG5hbWU6ICflm77kvovkuIknCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<p>当图表只有一种数据信息时,用图表标题说明数据信息即可。建议此时不要加上图例。</p>\n',postPath:"zh/concepts/legend"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:g},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:C},{title:"版本特性",dir:I,children:[{title:"ECharts 5 特性介绍",dir:A},{title:"ECharts 5 升级指南",dir:s},{title:5.2,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:p,draft:i},{title:"系列",dir:L,draft:i},{title:"样式",dir:b},{title:"数据集",dir:B},{title:"数据转换",dir:w},{title:"坐标系",dir:m,draft:i},{title:"坐标轴",dir:v},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:J,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:S},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:W},{title:"极坐标系柱状图",dir:D,draft:i},{title:"阶梯瀑布图",dir:G},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:k,children:[{title:"基础折线图",dir:H},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:V},{title:"平滑曲线图",dir:Y},{title:"阶梯线图",dir:x}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:F},{title:"圆环图",dir:K},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:j,children:[{title:"基础散点图",dir:T}]}]},{title:O,dir:t,draft:i},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:P}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:z},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:U}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:q,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:O,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:g},{title:"Import ECharts",dir:a},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:C},{title:"What's New",dir:I,children:[{title:"ECharts 5 Features",dir:A},{title:"ECharts 5 Upgrade Guide",dir:s},{title:5.2,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:L,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:B},{title:"Data Transform",dir:w},{title:"Coordinate",dir:m,draft:i},{title:"Axis",dir:v},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:f}]},{title:"Application",dir:Z,children:[{title:"Common Charts",dir:J,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:S},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:W},{title:"Bar Polar",dir:D,draft:i},{title:"Waterfall",dir:G}]},{title:"Line",dir:k,children:[{title:"Basic Line",dir:H},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:V},{title:"Smoothed Line",dir:Y},{title:"Step Line",dir:x}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:F},{title:"Ring Style",dir:K},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:j,children:[{title:"Basic Scatter",dir:T}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:P}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:z},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:U}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:q,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/legend",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/style/index.html b/handbook/zh/concepts/style/index.html
index ecd5f48..701a51f 100644
--- a/handbook/zh/concepts/style/index.html
+++ b/handbook/zh/concepts/style/index.html
@@ -3,47 +3,453 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="echarts-中的样式简介"><a href="#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>ECharts 中的样式简介</h1>
-<p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p>
-<blockquote>
-<p>之所以用“样式”这种可能不很符合数据可视化思维的词,是因为,比较通俗易懂。</p>
-</blockquote>
-<p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p>
-<ul>
-<li>颜色主题(Theme)</li>
-<li>调色盘</li>
-<li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li>
-<li>视觉映射(visualMap)</li>
-</ul>
-<h2 id="颜色主题(theme)"><a href="#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>颜色主题(Theme)</h2>
-<p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p>
-<p>ECharts5 除了一贯的默认主题外,还内置了<code>'dark'</code>主题。可以如下切换成深色模式:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p>
-<p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="调色盘"><a href="#%E8%B0%83%E8%89%B2%E7%9B%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>调色盘</h2>
-<p>调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。
-可以设置全局的调色盘,也可以设置系列自己专属的调色盘。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="直接的样式设置-itemstyle-linestyle-areastyle-label-"><a href="#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>
-<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a> 中,很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle" rel="nofollow noopener noreferrer" target="_blank">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label" rel="nofollow noopener noreferrer" target="_blank">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>
-<p>一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>
-<p>在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:</p>
-<div class="nuxt-content-highlight"><!----></div>
-<h2 id="高亮的样式:emphasis"><a href="#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮的样式:emphasis</h2>
-<p>在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphsis</a> 中的结构,和普通样式的结构相同,例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p>
-<h2 id="通过-visualmap-组件设定样式"><a href="#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>通过 visualMap 组件设定样式</h2>
-<p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89">颜色主题(Theme)</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E8%B0%83%E8%89%B2%E7%9B%98">调色盘</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis">高亮的样式:emphasis</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F">通过 visualMap 组件设定样式</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/style.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,r,i,n,l,p,d,s,o,h,c,y,u,g,v,m,f,b,E,B,S,C,A,x,w,N,k,F,P,D,T,I,M,L,R,H,z,J,O,U,G,_,K,V,Z,$,j,q,Y,W,X,Q,ee,te,ae,re,ie,ne,le,pe,de,se,oe,he,ce,ye,ue,ge,ve,me,fe,be,Ee,Be,Se,Ce,Ae,xe,we,Ne,ke,Fe,Pe){return{layout:"default",data:[{article:{slug:k,toc:[{id:D,depth:2,text:F},{id:E,depth:2,text:E},{id:T,depth:2,text:I},{id:S,depth:2,text:S},{id:M,depth:2,text:L}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"echarts-中的样式简介"},children:[{type:t,tag:i,props:{href:"#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:"ECharts 中的样式简介"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"本文主要是大略概述,用哪些方法,可以在 Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。"}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"之所以用“样式”这种可能不很符合数据可视化思维的词,是因为,比较通俗易懂。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。"}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:E}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:"直接样式设置(itemStyle、lineStyle、areaStyle、label、...)"}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:"视觉映射(visualMap)"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:B,props:{id:D},children:[{type:t,tag:i,props:{href:"#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:F}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 "},{type:t,tag:i,props:{href:"$%7BwebsitePath%7D/examples"},children:[{type:e,value:"示例集合"}]},{type:e,value:" 中,可以通过切换深色模式,直接看到采用主题的效果。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"ECharts5 除了一贯的默认主题外,还内置了"},{type:t,tag:A,props:{},children:[{type:e,value:"'dark'"}]},{type:e,value:"主题。可以如下切换成深色模式:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"var chart = echarts.init(dom, 'dark');\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 "},{type:t,tag:i,props:{href:"https://echarts.apache.org/theme-builder.html",rel:[p,d,s],target:o},children:[{type:e,value:"主题编辑器"}]},{type:e,value:" 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"// 假设主题名称是 \"vintage\"\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"// HTML 引入 vintage.js 文件后(假设主题名称是 \"vintage\")\nvar chart = echarts.init(dom, 'vintage');\n// ...\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:E},children:[{type:t,tag:i,props:{href:"#%E8%B0%83%E8%89%B2%E7%9B%98",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n // 全局调色盘。\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // 此系列自己的调色盘。\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // 此系列自己的调色盘。\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:T},children:[{type:t,tag:i,props:{href:"#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:I}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"直接的样式设置是比较常用设置方式。纵观 ECharts 的 "},{type:t,tag:i,props:{href:R,rel:[p,d,s],target:o},children:[{type:e,value:"option"}]},{type:e,value:" 中,很多地方可以设置 "},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-bar.itemStyle",rel:[p,d,s],target:o},children:[{type:e,value:H}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-line.lineStyle",rel:[p,d,s],target:o},children:[{type:e,value:"lineStyle"}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-line.areaStyle",rel:[p,d,s],target:o},children:[{type:e,value:"areaStyle"}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-bar.label",rel:[p,d,s],target:o},children:[{type:e,value:w}]},{type:e,value:" 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,"},{type:t,tag:A,props:{},children:[{type:e,value:H}]},{type:e,value:x},{type:t,tag:A,props:{},children:[{type:e,value:w}]},{type:e,value:" 等可能出现在不同的地方。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:"md-live",props:{lang:y,layout:"tb"},children:[{type:e,value:"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:S},children:[{type:t,tag:i,props:{href:"#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:S}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 "},{type:t,tag:i,props:{href:z,rel:[p,d,s],target:o},children:[{type:e,value:"emphasis"}]},{type:e,value:" 属性来定制。"},{type:t,tag:i,props:{href:z,rel:[p,d,s],target:o},children:[{type:e,value:"emphsis"}]},{type:e,value:" 中的结构,和普通样式的结构相同,例如:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"这种写法 "},{type:t,tag:"strong",props:{},children:[{type:e,value:"仍然被兼容"}]},{type:e,value:",但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 "},{type:t,tag:A,props:{},children:[{type:e,value:"normal"}]},{type:e,value:" 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。"}]},{type:e,value:a},{type:t,tag:B,props:{id:M},children:[{type:t,tag:i,props:{href:"#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#visualMap",rel:[p,d,s],target:o},children:[{type:e,value:"visualMap 组件"}]},{type:e,value:" 能指定数据到颜色、图形尺寸的映射规则,详见 "},{type:t,tag:i,props:{href:"zh/concepts/visual-map"},children:[{type:e,value:"数据的视觉映射"}]},{type:e,value:"。"}]}]},dir:"/zh/concepts",path:J,extension:".md",createdAt:"2021-07-21T05:40:02.101Z",updatedAt:"2021-07-21T15:26:59.863Z"},postPath:"zh/concepts/style"}],fetch:{},error:O,state:{filled:!1,docVersion:l,ghVersion:l,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:U},{title:"入门篇",dir:G,children:[{title:"获取 ECharts",dir:_},{title:"在项目中引入 ECharts",dir:K},{title:"资源列表",dir:V,draft:r},{title:"获取灵感",dir:Z},{title:"寻求帮助",dir:$},{title:"版本介绍",dir:j,children:[{title:q,draft:r,dir:Y},{title:"ECharts 5 新特性",dir:W},{title:"ECharts 5 升级指南",dir:X}]}]},{title:"概念篇",dir:Q,children:[{title:"图表容器及大小",dir:ee},{title:"配置项",dir:te,draft:r},{title:"系列",dir:"series",draft:r},{title:"样式",dir:k},{title:"数据集",dir:ae},{title:"数据转换",dir:re},{title:"坐标系",dir:ie,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:P},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ne,children:[{title:"常用图表类型",dir:le,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:pe},{title:"堆叠柱状图",dir:de},{title:"动态排序柱状图",dir:se,draft:r},{title:"极坐标系柱状图",dir:oe,draft:r},{title:"瀑布图",dir:he,draft:r},{title:"视觉映射的柱状图",dir:P,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ce},{title:"堆叠折线图",dir:ye},{title:"区域面积图",dir:ue},{title:"平滑曲线图",dir:ge},{title:"阶梯线图",dir:ve}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:me},{title:"圆环图",dir:fe},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:be,children:[{title:"基础散点图",dir:Ee}]}]},{title:"移动端优化",dir:N,draft:r},{title:"跨平台方案",dir:Be,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Se},{title:"数据下钻",dir:Ce,draft:r}]},{title:"标签",dir:w,children:[{title:"富文本标签",dir:Ae}]},{title:"交互",dir:xe,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:we,draft:r}]}]},{title:"最佳实践",dir:Ne,children:[{title:"移动端优化",dir:N,draft:r},{title:ke,dir:Fe},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Pe}]}],en:[{title:"Get Started",dir:U},{title:"Basics",dir:G,children:[{title:"Download ECharts",dir:_},{title:"Import ECharts",dir:K},{title:"Resources",dir:V,draft:r},{title:"Inspiration",dir:Z},{title:"Get Help",dir:$},{title:"Release Note",dir:j,children:[{title:q,draft:r,dir:Y},{title:"ECharts 5 Features",dir:W},{title:"ECharts 5 Upgrade Guide",dir:X}]}]},{title:"Concepts",dir:Q,children:[{title:"Chart Container",dir:ee},{title:"Chart Option",dir:te,draft:r},{title:"Series",dir:"series",draft:r},{title:"Style",dir:k},{title:"Dataset",dir:ae},{title:"Data Transform",dir:re},{title:"Coordinate",dir:ie,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:P},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ne,children:[{title:"Common Charts",dir:le,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:pe},{title:"Stacked Bar",dir:de},{title:"Bar Racing",dir:se,draft:r},{title:"Bar Polar",dir:oe,draft:r},{title:"Waterfall",dir:he,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ce},{title:"Stacked Line",dir:ye},{title:"Area Chart",dir:ue},{title:"Smoothed Line",dir:ge},{title:"Step Line",dir:ve}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:me},{title:"Ring Style",dir:fe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:be,children:[{title:"Basic Scatter",dir:Ee}]}]},{title:"Mobile",dir:N,draft:r},{title:"Cross Platform",dir:Be,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Se},{title:"Drilldown",dir:Ce,draft:r}]},{title:"Label",dir:w,children:[{title:"Rich Text",dir:Ae}]},{title:"Interaction",dir:xe,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:we,draft:r}]}]},{title:"Best Practice",dir:Ne,children:[{title:"Mobile Optimization",dir:N,draft:r},{title:ke,dir:Fe},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Pe}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:R,gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:J,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:O},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link","md-code-block","调色盘","h2","高亮的样式:emphasis","li","code","、","label","mobile","style","颜色主题(Theme)","visual-map","颜色主题(theme)","直接的样式设置-itemstyle-linestyle-areastyle-label-","直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...","通过-visualmap-组件设定样式","通过 visualMap 组件设定样式","https://echarts.apache.org/option.html#","itemStyle","https://echarts.apache.org/option.html#series-bar.emphasis","/zh/concepts/style",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1> <p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p> <blockquote><p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p></blockquote> <p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p> <ul><li>颜色主题(Theme)</li> <li>调色盘</li> <li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li> <li>视觉映射(visualMap)</li></ul> <h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2> <p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p> <p>ECharts5 除了一贯的默认主题外,还内置了<code>'dark'</code>主题。可以如下切换成深色模式:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><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">'dark'</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p> <p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 假设主题名称是 "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 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> <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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// HTML 引入 vintage.js 文件后(假设主题名称是 "vintage")</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> <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 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2> <p>调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。
+可以设置全局的调色盘,也可以设置系列自己专属的调色盘。</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>
+ <span class="token comment">// 全局调色盘。</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">// 此系列自己的调色盘。</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">// 此系列自己的调色盘。</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-..." tabindex="-1">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2> <p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中,很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p> <p>一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p> <p>在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:</p> <div class="md-live layout-tb"><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">var data = [
+ [
+ [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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h2 id="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式:emphasis</h2> <p>在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphsis</a> 中的结构,和普通样式的结构相同,例如:</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>
+ 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">// 普通样式。</span>
+ itemStyle<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">'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">// 标签的文字。</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">// 高亮样式。</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">// 高亮时点的颜色。</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">// 高亮时标签的文字。</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:</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>
+ 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">// 普通样式。</span>
+ normal<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">'red'</span>
+ <span class="token punctuation">}</span><span class="token punctuation">,</span>
+ <span class="token comment">// 高亮样式。</span>
+ emphasis<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">'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">// 普通样式。</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>
+ <span class="token comment">// 标签的文字。</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">// 高亮样式。</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 comment">// 高亮时标签的文字。</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p> <h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</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/zh/concepts/style.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,t,e,l,d,a,s,r,o,c,n,h,w,y,M,p,N,m,b,B,L,D,z,O,T,E,Y,K,S,Z,G,J,j,W,u,x,k,F,X,v,H,f,U,R,V,Q,P,q,_,$,gg,Ig,Cg){return{layout:"default",data:[{html:'<h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1>\n<p>本文主要是大略概述,用哪些方法,可以在 Apache ECharts<sup>TM</sup> 中设置样式,改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>为了让表述更通俗易懂,我们在这里用了“样式”这种可能不很符合数据可视化思维的词</p>\n</blockquote>\n<p>本文介绍这几种方式,他们的功能范畴可能会有交叉(即同一种细节的效果可能可以用不同的方式实现),但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题(Theme)</li>\n<li>调色盘</li>\n<li>直接样式设置(itemStyle、lineStyle、areaStyle、label、...)</li>\n<li>视觉映射(visualMap)</li>\n</ul>\n<h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题(Theme)</h2>\n<p>最简单的更改全局样式的方式,是直接采用颜色主题(theme)。例如,在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中,可以通过切换深色模式,直接看到采用主题的效果。</p>\n<p>ECharts5 除了一贯的默认主题外,还内置了<code>\'dark\'</code>主题。可以如下切换成深色模式:</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>其他的主题,没有内置在 ECharts 中,需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器,自己编辑主题。下载下来的主题可以这样使用:</p>\n<p>如果主题保存为 JSON 文件,那么可以自行加载和注册,例如:</p>\n<md-code-block lang="js" code="\'Ly8g5YGH6K6-5Li76aKY5ZCN56ew5pivICJ2aW50YWdlIgokLmdldEpTT04oJ3h4eC94eHgvdmludGFnZS5qc29uJywgZnVuY3Rpb24odGhlbWVKU09OKSB7CiAgZWNoYXJ0cy5yZWdpc3RlclRoZW1lKCd2aW50YWdlJywgSlNPTi5wYXJzZSh0aGVtZUpTT04pKTsKICB2YXIgY2hhcnQgPSBlY2hhcnRzLmluaXQoZG9tLCAndmludGFnZScpOwp9KTs\'" line-highlights="\'\'" />\n<p>如果保存为 UMD 格式的 JS 文件,那么支持了自注册,直接引入 JS 文件即可:</p>\n<md-code-block lang="js" code="\'Ly8gSFRNTCDlvJXlhaUgdmludGFnZS5qcyDmlofku7blkI7vvIjlgYforr7kuLvpopjlkI3np7DmmK8gInZpbnRhZ2Ui77yJCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sICd2aW50YWdlJyk7Ci8vIC4uLg\'" line-highlights="\'\'" />\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2>\n<p>调色盘,可以在 option 中设置。它给定了一组颜色,图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘,也可以设置系列自己专属的调色盘。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIOWFqOWxgOiwg-iJsuebmOOAggogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOatpOezu-WIl-iHquW3seeahOiwg-iJsuebmOOAggogICAgICBjb2xvcjogWwogICAgICAgICcjZGQ2YjY2JywKICAgICAgICAnIzc1OWFhMCcsCiAgICAgICAgJyNlNjlkODcnLAogICAgICAgICcjOGRjMWE5JywKICAgICAgICAnI2VhN2U1MycsCiAgICAgICAgJyNlZWRkNzgnLAogICAgICAgICcjNzNhMzczJywKICAgICAgICAnIzczYjliYycsCiAgICAgICAgJyM3Mjg5YWInLAogICAgICAgICcjOTFjYThjJywKICAgICAgICAnI2Y0OWY0MicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICAvLyDmraTns7vliJfoh6rlt7HnmoTosIPoibLnm5jjgIIKICAgICAgY29sb3I6IFsKICAgICAgICAnIzM3QTJEQScsCiAgICAgICAgJyMzMkM1RTknLAogICAgICAgICcjNjdFMEUzJywKICAgICAgICAnIzlGRTZCOCcsCiAgICAgICAgJyNGRkRCNUMnLAogICAgICAgICcjZmY5ZjdmJywKICAgICAgICAnI2ZiNzI5MycsCiAgICAgICAgJyNFMDYyQUUnLAogICAgICAgICcjRTY5MEQxJywKICAgICAgICAnI2U3YmNmMycsCiAgICAgICAgJyM5ZDk2ZjUnLAogICAgICAgICcjODM3OEVBJywKICAgICAgICAnIzk2QkZGRicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle%2C-linestyle%2C-areastyle%2C-label%2C-..." tabindex="-1">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中,很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说,ECharts 的各个系列和组件,都遵从这些命名习惯,虽然不同图表和组件中,<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>在下面例子中我们给气泡图设置了阴影,渐变色等复杂的样式,你可以修改代码中的样式看修改后的效果:</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式:emphasis</h2>\n<p>在鼠标悬浮到图形元素上时,一般会出现高亮的样式。默认情况下,高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义,主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphsis</a> 中的结构,和普通样式的结构相同,例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIOaZrumAmuagt-W8j-OAggogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIOeCueeahOminOiJsuOAggogICAgICBjb2xvcjogJ3JlZCcKICAgIH0sCiAgICBsYWJlbDogewogICAgICBzaG93OiB0cnVlLAogICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIG5vcm1hbCBsYWJlbC4nCiAgICB9LAoKICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8g6auY5Lqu5pe254K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8g6auY5Lqu5pe25qCH562-55qE5paH5a2X44CCCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>注意:在 ECharts4 以前,高亮和普通样式的写法,是这样的:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgLy8g54K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgICBlbXBoYXNpczogewogICAgICAgIC8vIOmrmOS6ruaXtueCueeahOminOiJsuOAggogICAgICAgIGNvbG9yOiAnYmx1ZScKICAgICAgfQogICAgfSwKCiAgICBsYWJlbDogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgbm9ybWFsIGxhYmVsLicKICAgICAgfSwKICAgICAgLy8g6auY5Lqu5qC35byP44CCCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDpq5jkuq7ml7bmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>这种写法 <strong>仍然被兼容</strong>,但是,不再推荐。事实上,多数情况下,使用者只会配置普通状态下的样式,而使用默认的高亮样式。所以在 ECharts4 中,支持不写 <code>normal</code> 的配置方法(即本文开头的那种写法),使得配置项更扁平简单。</p>\n<h2 id="%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" tabindex="-1">通过 visualMap 组件设定样式</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则,详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p>\n',postPath:"zh/concepts/style"}],fetch:{},error:A,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:i},{title:"入门篇",dir:t,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:l},{title:"资源列表",dir:d,draft:g},{title:"获取灵感",dir:a},{title:"寻求帮助",dir:s},{title:"版本特性",dir:r,children:[{title:"ECharts 5 特性介绍",dir:o},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:n}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:M,draft:g},{title:"样式",dir:p},{title:"数据集",dir:N},{title:"数据转换",dir:m},{title:"坐标系",dir:b,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:L},{title:"事件与行为",dir:D}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:O,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:K,draft:g},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:Z,children:[{title:"基础折线图",dir:G},{title:"堆叠折线图",dir:J},{title:"区域面积图",dir:j},{title:"平滑曲线图",dir:W},{title:"阶梯线图",dir:u}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:x},{title:"圆环图",dir:k},{title:"南丁格尔图(玫瑰图)",dir:F}]},{title:"散点图",dir:X,children:[{title:"基础散点图",dir:v}]}]},{title:H,dir:I,draft:g},{title:"跨平台方案",dir:f,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:U}]},{title:"数据处理",dir:R,children:[{title:"动态的异步数据",dir:V},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g}]}]},{title:"最佳实践",dir:$,children:[{title:H,dir:I,draft:g},{title:gg,dir:Ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Cg}]}],en:[{title:"Get Started",dir:i},{title:"Basics",dir:t,children:[{title:"Download ECharts",dir:e},{title:"Import ECharts",dir:l},{title:"Resources",dir:d,draft:g},{title:"Inspiration",dir:a},{title:"Get Help",dir:s},{title:"What's New",dir:r,children:[{title:"ECharts 5 Features",dir:o},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:n}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:M,draft:g},{title:"Style",dir:p},{title:"Dataset",dir:N},{title:"Data Transform",dir:m},{title:"Coordinate",dir:b,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:L},{title:"Event and Action",dir:D}]},{title:"Application",dir:z,children:[{title:"Common Charts",dir:O,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:K,draft:g},{title:"Waterfall",dir:S}]},{title:"Line",dir:Z,children:[{title:"Basic Line",dir:G},{title:"Stacked Line",dir:J},{title:"Area Chart",dir:j},{title:"Smoothed Line",dir:W},{title:"Step Line",dir:u}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:x},{title:"Ring Style",dir:k},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:X,children:[{title:"Basic Scatter",dir:v}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:f,children:[{title:"Server Side Rendering",dir:U}]},{title:"Data",dir:R,children:[{title:"Dynamic Data",dir:V},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:gg,dir:Ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Cg}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:A}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/concepts/visual-map/index.html b/handbook/zh/concepts/visual-map/index.html
index be18827..f8e309e 100644
--- a/handbook/zh/concepts/visual-map/index.html
+++ b/handbook/zh/concepts/visual-map/index.html
@@ -3,46 +3,76 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="数据的视觉映射"><a href="#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据的视觉映射</h1>
-<p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p>
-<p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p>
-<p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p>
-<ul>
-<li>图形类别(symbol)、图形大小(symbolSize)</li>
-<li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li>
-<li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li>
-</ul>
-<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>
-<h2 id="数据和维度"><a href="#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>数据和维度</h2>
-<p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p>
-<p>例如,<a href="https://echarts.apache.org/option.html#series.data" rel="nofollow noopener noreferrer" target="_blank">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 <code>visualMap</code>。最常见的情况,<a href="https://echarts.apache.org/option.html#series-scatter" rel="nofollow noopener noreferrer" target="_blank">散点图(scatter)</a> 使用半径展现了第三个维度。</p>
-<h2 id="visualmap-组件"><a href="#visualmap-%E7%BB%84%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>visualMap 组件</h2>
-<p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p>
-<p>现在提供如下两种类型的 visualMap 组件,通过 <a href="https://echarts.apache.org/option.html#visualMap.type" rel="nofollow noopener noreferrer" target="_blank">visualMap.type</a> 来区分。</p>
-<p>其定义结构例如:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="连续型与分段型视觉映射组件"><a href="#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>连续型与分段型视觉映射组件</h2>
-<p>ECharts 的视觉映射组件分为连续型(<a href="https://echarts.apache.org/option.html#visualMap-continuous" rel="nofollow noopener noreferrer" target="_blank">visualMapContinuous</a>)与分段型(<a href="https://echarts.apache.org/option.html#visualMap-piecewise" rel="nofollow noopener noreferrer" target="_blank">visualMapPiecewise</a>)。</p>
-<p>连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。</p>
-<h3 id="连续型视觉映射"><a href="#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>连续型视觉映射</h3>
-<p>连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange" rel="nofollow noopener noreferrer" target="_blank">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p>
-<p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p>
-<h3 id="分段型视觉映射"><a href="#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>分段型视觉映射</h3>
-<p>分段型视觉映射组件有三种模式:</p>
-<ul>
-<li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>
-<li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.pieces</a> 来定义每块范围。</li>
-<li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories" rel="nofollow noopener noreferrer" target="_blank">visualMap-piecewise.categories</a> 中。</li>
-</ul>
-<p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>'piecewise'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/visual-map#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6">数据和维度</a></li><li class="toc2"><a href="/handbook/zh/concepts/visual-map#visualmap-%E7%BB%84%E4%BB%B6">visualMap 组件</a></li><li class="toc2"><a href="/handbook/zh/concepts/visual-map#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6">连续型与分段型视觉映射组件</a></li><li class="toc3"><a href="/handbook/zh/concepts/visual-map#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84">连续型视觉映射</a></li><li class="toc3"><a href="/handbook/zh/concepts/visual-map#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84">分段型视觉映射</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/visual-map.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,i,a,r,l,p,d,n,s,h,o,c,y,u,v,g,m,f,E,b,B,M,A,x,C,w,S,P,R,I,k,N,D,z,H,L,_,G,O,V,T,F,U,$,j,W,X,Z,q,J,K,Q,Y,ee,te,ie,ae,re,le,pe,de,ne,se,he,oe,ce,ye,ue,ve,ge,me,fe,Ee,be,Be,Me,Ae,xe,Ce,we,Se){return{layout:"default",data:[{article:{slug:f,toc:[{id:E,depth:2,text:E},{id:k,depth:2,text:P},{id:b,depth:2,text:b},{id:B,depth:3,text:B},{id:M,depth:3,text:M}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:N},children:[{type:t,tag:r,props:{href:"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:N}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"此外,ECharts 还提供了 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap",rel:[p,d,n],target:s},children:[{type:e,value:P}]},{type:e,value:" 来提供通用的视觉映射。"},{type:t,tag:g,props:{},children:[{type:e,value:R}]},{type:e,value:" 组件中可以使用的视觉元素有:"}]},{type:e,value:i},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"图形类别(symbol)、图形大小(symbolSize)"}]},{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、"}]},{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)"}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"下面对 "},{type:t,tag:g,props:{},children:[{type:e,value:R}]},{type:e,value:" 组件的使用方式进行简要的介绍。"}]},{type:e,value:i},{type:t,tag:I,props:{id:E},children:[{type:t,tag:r,props:{href:"#%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:E}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"ECharts 中的数据,一般存放于 "},{type:t,tag:r,props:{href:D,rel:[p,d,n],target:s},children:[{type:t,tag:g,props:{},children:[{type:e,value:z}]}]},{type:e,value:" 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"例如,"},{type:t,tag:r,props:{href:D,rel:[p,d,n],target:s},children:[{type:e,value:z}]},{type:e,value:" 最常见的形式,是“线性表“,即一个普通数组:"}]},{type:e,value:i},{type:t,tag:A,props:{className:[x]},children:[{type:t,tag:C,props:{lang:w,"line-highlights":h,"file-name":h},children:[{type:e,value:"series: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: 2323, // 这是数据项的数据值(value)\n itemStyle: {}\n },\n 1212, // 也可以直接是 dataItem 的 value,这更常见。\n 2323, // 每个 value 都是“一维“的。\n 4343,\n 3434\n ];\n}\n"}]}]},{type:e,value:i},{type:t,tag:A,props:{className:[x]},children:[{type:t,tag:C,props:{lang:w,"line-highlights":h,"file-name":h},children:[{type:e,value:"series: {\n data: [\n {\n // 这里每一个项就是数据项(dataItem)\n value: [3434, 129, '圣马力诺'], // 这是数据项的数据值(value)\n itemStyle: {}\n },\n [1212, 5454, '梵蒂冈'], // 也可以直接是 dataItem 的 value,这更常见。\n [2323, 3223, '瑙鲁'], // 每个 value 都是“三维“的,每列是一个维度。\n [4343, 23, '图瓦卢'] // 假如是“气泡图“,常见第一维度映射到x轴,\n // 第二维度映射到y轴,\n // 第三维度映射到气泡半径(symbolSize)\n ];\n}\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 "},{type:t,tag:g,props:{},children:[{type:e,value:R}]},{type:e,value:"。最常见的情况,"},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#series-scatter",rel:[p,d,n],target:s},children:[{type:e,value:"散点图(scatter)"}]},{type:e,value:" 使用半径展现了第三个维度。"}]},{type:e,value:i},{type:t,tag:I,props:{id:k},children:[{type:t,tag:r,props:{href:"#visualmap-%E7%BB%84%E4%BB%B6",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:P}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"visualMap 组件定义了把数据的"},{type:t,tag:"em",props:{},children:[{type:e,value:"哪个维度"}]},{type:e,value:"映射到"},{type:t,tag:"em",props:{},children:[{type:e,value:"什么视觉元素上"}]},{type:e,value:"。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"现在提供如下两种类型的 visualMap 组件,通过 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.type",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap.type"}]},{type:e,value:" 来区分。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"其定义结构例如:"}]},{type:e,value:i},{type:t,tag:A,props:{className:[x]},children:[{type:t,tag:C,props:{lang:w,"line-highlights":h,"file-name":h},children:[{type:e,value:"option = {\n visualMap: [\n // 可以同时定义多个 visualMap 组件。\n {\n // 第一个 visualMap 组件\n type: 'continuous' // 定义为连续型 visualMap\n // ...\n },\n {\n // 第二个 visualMap 组件\n type: 'piecewise' // 定义为分段型 visualMap\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:e,value:i},{type:t,tag:I,props:{id:b},children:[{type:t,tag:r,props:{href:"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:b}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"ECharts 的视觉映射组件分为连续型("},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-continuous",rel:[p,d,n],target:s},children:[{type:e,value:"visualMapContinuous"}]},{type:e,value:")与分段型("},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise",rel:[p,d,n],target:s},children:[{type:e,value:"visualMapPiecewise"}]},{type:e,value:")。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。"}]},{type:e,value:i},{type:t,tag:"h3",props:{id:B},children:[{type:t,tag:r,props:{href:"#%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:B}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。"}]},{type:e,value:i},{type:t,tag:A,props:{className:[x]},children:[{type:t,tag:C,props:{lang:w,"line-highlights":h,"file-name":h},children:[{type:e,value:"option = {\n visualMap: [\n {\n type: 'piecewise',\n min: 0,\n max: 5000,\n dimension: 3, // series.data 的第四个维度(即 value[3])被映射\n seriesIndex: 4, // 对第四个系列进行映射。\n inRange: {\n // 选中范围中的视觉配置\n color: ['blue', '#121122', 'red'], // 定义了图形颜色映射的颜色列表,\n // 数据最小值映射到'blue'上,\n // 最大值映射到'red'上,\n // 其余自动线性计算。\n symbolSize: [30, 100] // 定义了图形尺寸的映射范围,\n // 数据最小值映射到30上,\n // 最大值映射到100上,\n // 其余自动线性计算。\n },\n outOfRange: {\n // 选中范围外的视觉配置\n symbolSize: [30, 100]\n }\n }\n // ...\n ]\n};\n"}]}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"其中,"},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.inRange",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap.inRange"}]},{type:e,value:" 表示在数据映射范围内的数据采用的样式;而 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap.outOfRange",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap.outOfRange"}]},{type:e,value:" 则指定了超出映射范围外的数据的样式。"}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:t,tag:r,props:{href:"~visualMap.dimension"},children:[{type:e,value:"visualMap.dimension"}]},{type:e,value:" 则指定了将数据的哪个维度做视觉映射。"}]},{type:e,value:i},{type:t,tag:"h3",props:{id:M},children:[{type:t,tag:r,props:{href:"#%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84",ariaHidden:o,tabIndex:c},children:[{type:t,tag:y,props:{className:[u,v]},children:[]}]},{type:e,value:M}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"分段型视觉映射组件有三种模式:"}]},{type:e,value:i},{type:t,tag:"ul",props:{},children:[{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"连续型数据平均分段:依据 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap-piecewise.splitNumber"}]},{type:e,value:" 来自动平均分割成若干块。"}]},{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"连续型数据自定义分段:依据 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.pieces",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap-piecewise.pieces"}]},{type:e,value:" 来定义每块范围。"}]},{type:e,value:i},{type:t,tag:m,props:{},children:[{type:e,value:"离散数据(类别性数据):类别定义在 "},{type:t,tag:r,props:{href:"https://echarts.apache.org/option.html#visualMap-piecewise.categories",rel:[p,d,n],target:s},children:[{type:e,value:"visualMap-piecewise.categories"}]},{type:e,value:" 中。"}]},{type:e,value:i}]},{type:e,value:i},{type:t,tag:l,props:{},children:[{type:e,value:"使用分段型视觉映射时,需要将 "},{type:t,tag:g,props:{},children:[{type:e,value:"type"}]},{type:e,value:" 设为 "},{type:t,tag:g,props:{},children:[{type:e,value:"'piecewise'"}]},{type:e,value:",并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。"}]}]},dir:"/zh/concepts",path:H,extension:".md",createdAt:L,updatedAt:L},postPath:"zh/concepts/visual-map"}],fetch:{},error:_,state:{filled:!1,docVersion:h,ghVersion:h,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:G},{title:"入门篇",dir:O,children:[{title:"获取 ECharts",dir:V},{title:"在项目中引入 ECharts",dir:T},{title:"资源列表",dir:F,draft:a},{title:"获取灵感",dir:U},{title:"寻求帮助",dir:$},{title:"版本介绍",dir:j,children:[{title:W,draft:a,dir:X},{title:"ECharts 5 新特性",dir:Z},{title:"ECharts 5 升级指南",dir:q}]}]},{title:"概念篇",dir:J,children:[{title:"图表容器及大小",dir:K},{title:"配置项",dir:Q,draft:a},{title:"系列",dir:"series",draft:a},{title:"样式",dir:"style"},{title:"数据集",dir:Y},{title:"数据转换",dir:ee},{title:"坐标系",dir:te,draft:a},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:f},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ie,children:[{title:"常用图表类型",dir:ae,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:re},{title:"堆叠柱状图",dir:le},{title:"动态排序柱状图",dir:pe,draft:a},{title:"极坐标系柱状图",dir:de,draft:a},{title:"瀑布图",dir:ne,draft:a},{title:"视觉映射的柱状图",dir:f,draft:a}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:se},{title:"堆叠折线图",dir:he},{title:"区域面积图",dir:oe},{title:"平滑曲线图",dir:ce},{title:"阶梯线图",dir:ye}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ue},{title:"圆环图",dir:ve},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:ge,children:[{title:"基础散点图",dir:me}]}]},{title:"移动端优化",dir:S,draft:a},{title:"跨平台方案",dir:fe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Ee},{title:"数据下钻",dir:be,draft:a}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Be}]},{title:"交互",dir:Me,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Ae,draft:a}]}]},{title:"最佳实践",dir:xe,children:[{title:"移动端优化",dir:S,draft:a},{title:Ce,dir:we},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Se}]}],en:[{title:"Get Started",dir:G},{title:"Basics",dir:O,children:[{title:"Download ECharts",dir:V},{title:"Import ECharts",dir:T},{title:"Resources",dir:F,draft:a},{title:"Inspiration",dir:U},{title:"Get Help",dir:$},{title:"Release Note",dir:j,children:[{title:W,draft:a,dir:X},{title:"ECharts 5 Features",dir:Z},{title:"ECharts 5 Upgrade Guide",dir:q}]}]},{title:"Concepts",dir:J,children:[{title:"Chart Container",dir:K},{title:"Chart Option",dir:Q,draft:a},{title:"Series",dir:"series",draft:a},{title:"Style",dir:"style"},{title:"Dataset",dir:Y},{title:"Data Transform",dir:ee},{title:"Coordinate",dir:te,draft:a},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:f},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ie,children:[{title:"Common Charts",dir:ae,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:re},{title:"Stacked Bar",dir:le},{title:"Bar Racing",dir:pe,draft:a},{title:"Bar Polar",dir:de,draft:a},{title:"Waterfall",dir:ne,draft:a}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:se},{title:"Stacked Line",dir:he},{title:"Area Chart",dir:oe},{title:"Smoothed Line",dir:ce},{title:"Step Line",dir:ye}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ue},{title:"Ring Style",dir:ve},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:ge,children:[{title:"Basic Scatter",dir:me}]}]},{title:"Mobile",dir:S,draft:a},{title:"Cross Platform",dir:fe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Ee},{title:"Drilldown",dir:be,draft:a}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Be}]},{title:"Interaction",dir:Me,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Ae,draft:a}]}]},{title:"Best Practice",dir:xe,children:[{title:"Mobile Optimization",dir:S,draft:a},{title:Ce,dir:we},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Se}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:a,routePath:H,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:_},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","nofollow","noopener","noreferrer","_blank","","true",-1,"span","icon","icon-link","code","li","visual-map","数据和维度","连续型与分段型视觉映射组件","连续型视觉映射","分段型视觉映射","div","nuxt-content-highlight","md-code-block","js","mobile","visualMap 组件","visualMap","h2","visualmap-组件","数据的视觉映射","https://echarts.apache.org/option.html#series.data","series.data","/zh/concepts/visual-map","2021-06-04T12:26:37.934Z",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1> <p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p> <p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p> <p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p> <ul><li>图形类别(symbol)、图形大小(symbolSize)</li> <li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li> <li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li></ul> <p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p> <h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2> <p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p> <p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</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>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这里每一个项就是数据项(dataItem)</span>
+ value<span class="token operator">:</span> <span class="token number">2323</span><span class="token punctuation">,</span> <span class="token comment">// 这是数据项的数据值(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">// 也可以直接是 dataItem 的 value,这更常见。</span>
+ <span class="token number">2323</span><span class="token punctuation">,</span> <span class="token comment">// 每个 value 都是“一维“的。</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ data<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 这里每一个项就是数据项(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">'圣马力诺'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 这是数据项的数据值(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">'梵蒂冈'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 也可以直接是 dataItem 的 value,这更常见。</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">'瑙鲁'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token comment">// 每个 value 都是“三维“的,每列是一个维度。</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">'图瓦卢'</span><span class="token punctuation">]</span> <span class="token comment">// 假如是“气泡图“,常见第一维度映射到x轴,</span>
+ <span class="token comment">// 第二维度映射到y轴,</span>
+ <span class="token comment">// 第三维度映射到气泡半径(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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 <code>visualMap</code>。最常见的情况,<a href="https://echarts.apache.org/option.html#series-scatter">散点图(scatter)</a> 使用半径展现了第三个维度。</p> <h2 id="visualmap-%E7%BB%84%E4%BB%B6" tabindex="-1">visualMap 组件</h2> <p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p> <p>现在提供如下两种类型的 visualMap 组件,通过 <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a> 来区分。</p> <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>
+ visualMap<span class="token operator">:</span> <span class="token punctuation">[</span>
+ <span class="token comment">// 可以同时定义多个 visualMap 组件。</span>
+ <span class="token punctuation">{</span>
+ <span class="token comment">// 第一个 visualMap 组件</span>
+ type<span class="token operator">:</span> <span class="token string">'continuous'</span> <span class="token comment">// 定义为连续型 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">// 第二个 visualMap 组件</span>
+ type<span class="token operator">:</span> <span class="token string">'piecewise'</span> <span class="token comment">// 定义为分段型 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" tabindex="-1">连续型与分段型视觉映射组件</h2> <p>ECharts 的视觉映射组件分为连续型(<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>)与分段型(<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>)。</p> <p>连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。</p> <h3 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">连续型视觉映射</h3> <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>
+ 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">// series.data 的第四个维度(即 value[3])被映射</span>
+ seriesIndex<span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token comment">// 对第四个系列进行映射。</span>
+ inRange<span class="token operator">:</span> <span class="token punctuation">{</span>
+ <span class="token comment">// 选中范围中的视觉配置</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">// 定义了图形颜色映射的颜色列表,</span>
+ <span class="token comment">// 数据最小值映射到'blue'上,</span>
+ <span class="token comment">// 最大值映射到'red'上,</span>
+ <span class="token comment">// 其余自动线性计算。</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">// 定义了图形尺寸的映射范围,</span>
+ <span class="token comment">// 数据最小值映射到30上,</span>
+ <span class="token comment">// 最大值映射到100上,</span>
+ <span class="token comment">// 其余自动线性计算。</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">// 选中范围外的视觉配置</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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p> <p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p> <h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3> <p>分段型视觉映射组件有三种模式:</p> <ul><li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li> <li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li> <li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li></ul> <p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>'piecewise'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</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/zh/concepts/visual-map.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,t,e,a,r,l,d,o,n,g,s,p,h,c,I,C,A,u,m,b,v,E,y,L,B,f,M,w,D,W,O,K,S,Y,z,k,Z,j,T,X,x,V,R,G,q,H,J,P,F,N,_,Q,U,$,ii,ti,ei){return{layout:"default",data:[{html:'<h1 id="%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">数据的视觉映射</h1>\n<p>数据可视化是数据到视觉元素的映射过程(这个过程也可称为视觉编码,视觉元素也可称为视觉通道)。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程,比如折线图把数据映射到“线”,柱状图把数据映射到“长度”。一些更复杂的图表,如关系图、事件河流图、树图也都会做出各自内置的映射。</p>\n<p>此外,ECharts 还提供了 <a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有:</p>\n<ul>\n<li>图形类别(symbol)、图形大小(symbolSize)</li>\n<li>颜色(color)、透明度(opacity)、颜色透明度(colorAlpha)、</li>\n<li>颜色明暗度(colorLightness)、颜色饱和度(colorSaturation)、色调(colorHue)</li>\n</ul>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<h2 id="%E6%95%B0%E6%8D%AE%E5%92%8C%E7%BB%B4%E5%BA%A6" tabindex="-1">数据和维度</h2>\n<p>ECharts 中的数据,一般存放于 <a href="https://echarts.apache.org/option.html#series.data"><code>series.data</code></a> 中。根据图表类型不同,数据的具体形式也可能有些许差异。比如可能是“线性表“、“树“、“图“等。但他们都有个共性:都是“数据项(dataItem)“的集合。每个数据项含有“数据值(value)“和其他信息(如果需要的话)。每个数据值,可以是单一的数值(一维)或者一个数组(多维)。</p>\n<p>例如,<a href="https://echarts.apache.org/option.html#series.data">series.data</a> 最常见的形式,是“线性表“,即一个普通数组:</p>\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogMjMyMywgLy8g6L-Z5piv5pWw5o2u6aG555qE5pWw5o2u5YC877yIdmFsdWXvvIkKICAgICAgaXRlbVN0eWxlOiB7fQogICAgfSwKICAgIDEyMTIsIC8vIOS5n-WPr-S7peebtOaOpeaYryBkYXRhSXRlbSDnmoQgdmFsdWXvvIzov5nmm7TluLjop4HjgIIKICAgIDIzMjMsIC8vIOavj-S4qiB2YWx1ZSDpg73mmK_igJzkuIDnu7TigJznmoTjgIIKICAgIDQzNDMsCiAgICAzNDM0CiAgXTsKfQ\'" line-highlights="\'\'" />\n<md-code-block lang="js" code="\'c2VyaWVzOiB7CiAgZGF0YTogWwogICAgewogICAgICAvLyDov5nph4zmr4_kuIDkuKrpobnlsLHmmK_mlbDmja7pobnvvIhkYXRhSXRlbe-8iQogICAgICB2YWx1ZTogWzM0MzQsIDEyOSwgJ-Wco-mprOWKm-ivuiddLCAvLyDov5nmmK_mlbDmja7pobnnmoTmlbDmja7lgLzvvIh2YWx1Ze-8iQogICAgICBpdGVtU3R5bGU6IHt9CiAgICB9LAogICAgWzEyMTIsIDU0NTQsICfmorXokoLlhognXSwgLy8g5Lmf5Y-v5Lul55u05o6l5pivIGRhdGFJdGVtIOeahCB2YWx1Ze-8jOi_meabtOW4uOingeOAggogICAgWzIzMjMsIDMyMjMsICfnkZnpsoEnXSwgLy8g5q-P5LiqIHZhbHVlIOmDveaYr-KAnOS4iee7tOKAnOeahO-8jOavj-WIl-aYr-S4gOS4que7tOW6puOAggogICAgWzQzNDMsIDIzLCAn5Zu-55Om5Y2iJ10gLy8g5YGH5aaC5piv4oCc5rCU5rOh5Zu-4oCc77yM5bi46KeB56ys5LiA57u05bqm5pig5bCE5YiweOi9tO-8jAogICAgLy8g56ys5LqM57u05bqm5pig5bCE5Yiweei9tO-8jAogICAgLy8g56ys5LiJ57u05bqm5pig5bCE5Yiw5rCU5rOh5Y2K5b6E77yIc3ltYm9sU2l6Ze-8iQogIF07Cn0\'" line-highlights="\'\'" />\n<p>在图表中,往往默认把 value 的前一两个维度进行映射,比如取第一个维度映射到 x 轴,取第二个维度映射到 y 轴。如果想要把更多的维度展现出来,可以借助 <code>visualMap</code>。最常见的情况,<a href="https://echarts.apache.org/option.html#series-scatter">散点图(scatter)</a> 使用半径展现了第三个维度。</p>\n<h2 id="visualmap-%E7%BB%84%E4%BB%B6" tabindex="-1">visualMap 组件</h2>\n<p>visualMap 组件定义了把数据的<em>哪个维度</em>映射到<em>什么视觉元素上</em>。</p>\n<p>现在提供如下两种类型的 visualMap 组件,通过 <a href="https://echarts.apache.org/option.html#visualMap.type">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgLy8g5Y-v5Lul5ZCM5pe25a6a5LmJ5aSa5LiqIHZpc3VhbE1hcCDnu4Tku7bjgIIKICAgIHsKICAgICAgLy8g56ys5LiA5LiqIHZpc3VhbE1hcCDnu4Tku7YKICAgICAgdHlwZTogJ2NvbnRpbnVvdXMnIC8vIOWumuS5ieS4uui_nue7reWeiyB2aXN1YWxNYXAKICAgICAgLy8gLi4uCiAgICB9LAogICAgewogICAgICAvLyDnrKzkuozkuKogdmlzdWFsTWFwIOe7hOS7tgogICAgICB0eXBlOiAncGllY2V3aXNlJyAvLyDlrprkuYnkuLrliIbmrrXlnosgdmlzdWFsTWFwCiAgICAgIC8vIC4uLgogICAgfQogIF0KICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n<h2 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E4%B8%8E%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84%E7%BB%84%E4%BB%B6" tabindex="-1">连续型与分段型视觉映射组件</h2>\n<p>ECharts 的视觉映射组件分为连续型(<a href="https://echarts.apache.org/option.html#visualMap-continuous">visualMapContinuous</a>)与分段型(<a href="https://echarts.apache.org/option.html#visualMap-piecewise">visualMapPiecewise</a>)。</p>\n<p>连续型的意思是,进行视觉映射的数据维度是连续的数值;而分段型则是数据被分成了多段或者是离散型的数据。</p>\n<h3 id="%E8%BF%9E%E7%BB%AD%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">连续型视觉映射</h3>\n<p>连续型视觉映射通过指定最大值、最小值,就可以确定视觉映射的范围。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHZpc3VhbE1hcDogWwogICAgewogICAgICB0eXBlOiAncGllY2V3aXNlJywKICAgICAgbWluOiAwLAogICAgICBtYXg6IDUwMDAsCiAgICAgIGRpbWVuc2lvbjogMywgLy8gc2VyaWVzLmRhdGEg55qE56ys5Zub5Liq57u05bqm77yI5Y2zIHZhbHVlWzNd77yJ6KKr5pig5bCECiAgICAgIHNlcmllc0luZGV4OiA0LCAvLyDlr7nnrKzlm5vkuKrns7vliJfov5vooYzmmKDlsITjgIIKICAgICAgaW5SYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOS4reeahOinhuiniemFjee9rgogICAgICAgIGNvbG9yOiBbJ2JsdWUnLCAnIzEyMTEyMicsICdyZWQnXSwgLy8g5a6a5LmJ5LqG5Zu-5b2i6aKc6Imy5pig5bCE55qE6aKc6Imy5YiX6KGo77yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwJ2JsdWUn5LiK77yMCiAgICAgICAgLy8g5pyA5aSn5YC85pig5bCE5YiwJ3JlZCfkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgICBzeW1ib2xTaXplOiBbMzAsIDEwMF0gLy8g5a6a5LmJ5LqG5Zu-5b2i5bC65a-455qE5pig5bCE6IyD5Zu077yMCiAgICAgICAgLy8g5pWw5o2u5pyA5bCP5YC85pig5bCE5YiwMzDkuIrvvIwKICAgICAgICAvLyDmnIDlpKflgLzmmKDlsITliLAxMDDkuIrvvIwKICAgICAgICAvLyDlhbbkvZnoh6rliqjnur_mgKforqHnrpfjgIIKICAgICAgfSwKICAgICAgb3V0T2ZSYW5nZTogewogICAgICAgIC8vIOmAieS4reiMg-WbtOWklueahOinhuiniemFjee9rgogICAgICAgIHN5bWJvbFNpemU6IFszMCwgMTAwXQogICAgICB9CiAgICB9CiAgICAvLyAgICAuLi4KICBdCn07\'" line-highlights="\'\'" />\n<p>其中,<a href="https://echarts.apache.org/option.html#visualMap.inRange">visualMap.inRange</a> 表示在数据映射范围内的数据采用的样式;而 <a href="https://echarts.apache.org/option.html#visualMap.outOfRange">visualMap.outOfRange</a> 则指定了超出映射范围外的数据的样式。</p>\n<p><a href="~visualMap.dimension">visualMap.dimension</a> 则指定了将数据的哪个维度做视觉映射。</p>\n<h3 id="%E5%88%86%E6%AE%B5%E5%9E%8B%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84" tabindex="-1">分段型视觉映射</h3>\n<p>分段型视觉映射组件有三种模式:</p>\n<ul>\n<li>连续型数据平均分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段:依据 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据(类别性数据):类别定义在 <a href="https://echarts.apache.org/option.html#visualMap-piecewise.categories">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p>使用分段型视觉映射时,需要将 <code>type</code> 设为 <code>\'piecewise\'</code>,并且将上面的三个配置项选其一配置即可,其他配置项类似连续型视觉映射。</p>\n',postPath:"zh/concepts/visual-map"}],fetch:{},error:a,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:d},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:n,draft:i},{title:"获取灵感",dir:g},{title:"寻求帮助",dir:s},{title:"版本特性",dir:p,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"ECharts 5 升级指南",dir:c},{title:5.2,dir:I}]}]},{title:"概念篇",dir:C,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:u,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:b},{title:"数据集",dir:v},{title:"数据转换",dir:E},{title:"坐标系",dir:y,draft:i},{title:"坐标轴",dir:L},{title:"视觉映射",dir:e},{title:"图例",dir:B},{title:"事件与行为",dir:f}]},{title:"应用篇",dir:M,children:[{title:"常用图表类型",dir:w,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:K,draft:i},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:i}]},{title:"折线图",dir:Y,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:k},{title:"区域面积图",dir:Z},{title:"平滑曲线图",dir:j},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:X},{title:"圆环图",dir:x},{title:"南丁格尔图(玫瑰图)",dir:V}]},{title:"散点图",dir:R,children:[{title:"基础散点图",dir:G}]}]},{title:q,dir:t,draft:i},{title:"跨平台方案",dir:H,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:J}]},{title:"数据处理",dir:P,children:[{title:"动态的异步数据",dir:F},{title:"数据下钻",dir:N,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:_}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:U,draft:i}]}]},{title:"最佳实践",dir:$,children:[{title:q,dir:t,draft:i},{title:ii,dir:ti},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ei}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:d},{title:"Import ECharts",dir:o},{title:"Resources",dir:n,draft:i},{title:"Inspiration",dir:g},{title:"Get Help",dir:s},{title:"What's New",dir:p,children:[{title:"ECharts 5 Features",dir:h},{title:"ECharts 5 Upgrade Guide",dir:c},{title:5.2,dir:I}]}]},{title:"Concepts",dir:C,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:u,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:b},{title:"Dataset",dir:v},{title:"Data Transform",dir:E},{title:"Coordinate",dir:y,draft:i},{title:"Axis",dir:L},{title:"Visual Mapping",dir:e},{title:"Legend",dir:B},{title:"Event and Action",dir:f}]},{title:"Application",dir:M,children:[{title:"Common Charts",dir:w,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:K,draft:i},{title:"Waterfall",dir:S}]},{title:"Line",dir:Y,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:k},{title:"Area Chart",dir:Z},{title:"Smoothed Line",dir:j},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:X},{title:"Ring Style",dir:x},{title:"Rose Style",dir:V}]},{title:"Scatter",dir:R,children:[{title:"Basic Scatter",dir:G}]}]},{title:"Mobile",dir:t,draft:i},{title:"Cross Platform",dir:H,children:[{title:"Server Side Rendering",dir:J}]},{title:"Data",dir:P,children:[{title:"Dynamic Data",dir:F},{title:"Drilldown",dir:N,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:_}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:U,draft:i}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:t,draft:i},{title:ii,dir:ti},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ei}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/concepts/visual-map",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:a}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/get-started/index.html b/handbook/zh/get-started/index.html
index ec6e8a4..50c95f2 100644
--- a/handbook/zh/get-started/index.html
+++ b/handbook/zh/get-started/index.html
@@ -3,27 +3,61 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="快速上手"><a href="#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>快速上手</h1>
-<h2 id="获取-apache-echarts"><a href="#%E8%8E%B7%E5%8F%96-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>获取 Apache ECharts</h2>
-<p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p>
-<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts" rel="nofollow noopener noreferrer" target="_blank">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p>
-<blockquote>
-<p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>
-</blockquote>
-<h2 id="引入-apache-echarts"><a href="#%E5%BC%95%E5%85%A5-apache-echarts" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引入 Apache ECharts</h2>
-<p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>打开这个 <code>index.html</code>,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。</p>
-<h2 id="绘制一个简单的图表"><a href="#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>绘制一个简单的图表</h2>
-<p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后,添加:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init" rel="nofollow noopener noreferrer" target="_blank">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption" rel="nofollow noopener noreferrer" target="_blank">setOption</a> 方法生成一个简单的柱状图,下面是完整代码。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>这样你的第一个图表就诞生了!</p>
-<iframe width="100%" height="350" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started"></iframe></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/get-started#%E8%8E%B7%E5%8F%96-apache-echarts">获取 Apache ECharts</a></li><li class="toc2"><a href="/handbook/zh/get-started#%E5%BC%95%E5%85%A5-apache-echarts">引入 Apache ECharts</a></li><li class="toc2"><a href="/handbook/zh/get-started#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8">绘制一个简单的图表</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/get-started.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,p,n,h,s,c,o,y,g,u,v,m,f,E,b,C,x,B,A,w,P,k,D,S,N,O,R,I,L,j,z,H,M,T,_,G,V,F,U,Y,Z,$,q,W,X,J,K,Q,tt,et,it,rt,at,lt,dt,pt,nt,ht,st,ct,ot,yt,gt,ut,vt,mt,ft,Et,bt,Ct,xt,Bt,At){return{layout:"default",data:[{article:{slug:f,toc:[{id:k,depth:2,text:D},{id:S,depth:2,text:N},{id:n,depth:2,text:n}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:E},children:[{type:e,tag:a,props:{href:"#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[c,o]},children:[]}]},{type:t,value:E}]},{type:t,value:r},{type:e,tag:b,props:{id:k},children:[{type:e,tag:a,props:{href:"#%E8%8E%B7%E5%8F%96-apache-echarts",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[c,o]},children:[]}]},{type:t,value:D}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"Apache ECharts 支持多种下载方式,可以在下一篇教程"},{type:e,tag:a,props:{href:O},children:[{type:t,value:"安装"}]},{type:t,value:"中查看所有方式。这里,我们以从 "},{type:e,tag:a,props:{href:C,rel:[y,g,u],target:v},children:[{type:t,value:"jsDelivr"}]},{type:t,value:" CDN 上获取为例,介绍如何快速安装。"}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"在 "},{type:e,tag:a,props:{href:C,rel:[y,g,u],target:v},children:[{type:t,value:C}]},{type:t,value:" 选择 "},{type:e,tag:p,props:{},children:[{type:t,value:"dist/echarts.js"}]},{type:t,value:",点击并保存为 "},{type:e,tag:p,props:{},children:[{type:t,value:R}]},{type:t,value:" 文件。"}]},{type:t,value:r},{type:e,tag:"blockquote",props:{},children:[{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"关于这些文件的介绍,可以在下一篇教程"},{type:e,tag:a,props:{href:O},children:[{type:t,value:"安装"}]},{type:t,value:"中了解更多信息。"}]},{type:t,value:r}]},{type:t,value:r},{type:e,tag:b,props:{id:S},children:[{type:e,tag:a,props:{href:"#%E5%BC%95%E5%85%A5-apache-echarts",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[c,o]},children:[]}]},{type:t,value:N}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"在刚才保存 "},{type:e,tag:p,props:{},children:[{type:t,value:R}]},{type:t,value:" 的目录新建一个 "},{type:e,tag:p,props:{},children:[{type:t,value:I}]},{type:t,value:" 文件,内容如下:"}]},{type:t,value:r},{type:e,tag:x,props:{className:[B]},children:[{type:e,tag:A,props:{lang:w,"line-highlights":d,"file-name":d},children:[{type:t,value:'<!DOCTYPE html>\n<html>\n <head>\n <meta charset="utf-8" />\n \x3c!-- 引入刚刚下载的 ECharts 文件 --\x3e\n <script src="echarts.js"><\/script>\n </head>\n</html>\n'}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"打开这个 "},{type:e,tag:p,props:{},children:[{type:t,value:I}]},{type:t,value:",你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。"}]},{type:t,value:r},{type:e,tag:b,props:{id:n},children:[{type:e,tag:a,props:{href:"#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8",ariaHidden:h,tabIndex:-1},children:[{type:e,tag:s,props:{className:[c,o]},children:[]}]},{type:t,value:n}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 "},{type:e,tag:p,props:{},children:[{type:t,value:"</head>"}]},{type:t,value:" 之后,添加:"}]},{type:t,value:r},{type:e,tag:x,props:{className:[B]},children:[{type:e,tag:A,props:{lang:w,"line-highlights":d,"file-name":d},children:[{type:t,value:'<body>\n \x3c!-- 为 ECharts 准备一个定义了宽高的 DOM --\x3e\n <div id="main" style="width: 600px;height:400px;"></div>\n</body>\n'}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"然后就可以通过 "},{type:e,tag:a,props:{href:"https://echarts.apache.org//api.html#echarts.init",rel:[y,g,u],target:v},children:[{type:t,value:"echarts.init"}]},{type:t,value:" 方法初始化一个 echarts 实例并通过 "},{type:e,tag:a,props:{href:"https://echarts.apache.org//api.html#echartsInstance.setOption",rel:[y,g,u],target:v},children:[{type:t,value:"setOption"}]},{type:t,value:" 方法生成一个简单的柱状图,下面是完整代码。"}]},{type:t,value:r},{type:e,tag:x,props:{className:[B]},children:[{type:e,tag:A,props:{lang:w,"line-highlights":d,"file-name":d},children:[{type:t,value:"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" />\n <title>ECharts</title>\n \x3c!-- 引入刚刚下载的 ECharts 文件 --\x3e\n <script src=\"echarts.min.js\"><\/script>\n </head>\n <body>\n \x3c!-- 为 ECharts 准备一个定义了宽高的 DOM --\x3e\n <div id=\"main\" style=\"width: 600px;height:400px;\"></div>\n <script type=\"text/javascript\">\n // 基于准备好的dom,初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n // 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n // 使用刚指定的配置项和数据显示图表。\n myChart.setOption(option);\n <\/script>\n </body>\n</html>\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"这样你的第一个图表就诞生了!"}]},{type:t,value:r},{type:e,tag:"md-example",props:{src:"doc-example/getting-started"},children:[{type:t,value:r}]}]},dir:"/zh",path:L,extension:".md",createdAt:"2021-07-24T07:49:57.150Z",updatedAt:"2021-07-24T07:49:57.151Z"},postPath:"zh/get-started"}],fetch:{},error:j,state:{filled:!1,docVersion:d,ghVersion:d,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:E,dir:f},{title:"入门篇",dir:z,children:[{title:"获取 ECharts",dir:H},{title:"在项目中引入 ECharts",dir:M},{title:"资源列表",dir:T,draft:i},{title:"获取灵感",dir:_},{title:"寻求帮助",dir:G},{title:"版本介绍",dir:V,children:[{title:F,draft:i,dir:U},{title:"ECharts 5 新特性",dir:Y},{title:"ECharts 5 升级指南",dir:Z}]}]},{title:"概念篇",dir:$,children:[{title:"图表容器及大小",dir:q},{title:"配置项",dir:W,draft:i},{title:"系列",dir:"series",draft:i},{title:"样式",dir:"style"},{title:"数据集",dir:X},{title:"数据转换",dir:J},{title:"坐标系",dir:K,draft:i},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:P},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:Q,children:[{title:"常用图表类型",dir:tt,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:et},{title:"堆叠柱状图",dir:it},{title:"动态排序柱状图",dir:rt,draft:i},{title:"极坐标系柱状图",dir:at,draft:i},{title:"瀑布图",dir:lt,draft:i},{title:"视觉映射的柱状图",dir:P,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:dt},{title:"堆叠折线图",dir:pt},{title:"区域面积图",dir:nt},{title:"平滑曲线图",dir:ht},{title:"阶梯线图",dir:st}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:ct},{title:"圆环图",dir:ot},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:yt,children:[{title:"基础散点图",dir:gt}]}]},{title:"移动端优化",dir:m,draft:i},{title:"跨平台方案",dir:ut,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:vt},{title:"数据下钻",dir:mt,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:ft}]},{title:"交互",dir:Et,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:bt,draft:i}]}]},{title:"最佳实践",dir:Ct,children:[{title:"移动端优化",dir:m,draft:i},{title:xt,dir:Bt},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:At}]}],en:[{title:"Get Started",dir:f},{title:"Basics",dir:z,children:[{title:"Download ECharts",dir:H},{title:"Import ECharts",dir:M},{title:"Resources",dir:T,draft:i},{title:"Inspiration",dir:_},{title:"Get Help",dir:G},{title:"Release Note",dir:V,children:[{title:F,draft:i,dir:U},{title:"ECharts 5 Features",dir:Y},{title:"ECharts 5 Upgrade Guide",dir:Z}]}]},{title:"Concepts",dir:$,children:[{title:"Chart Container",dir:q},{title:"Chart Option",dir:W,draft:i},{title:"Series",dir:"series",draft:i},{title:"Style",dir:"style"},{title:"Dataset",dir:X},{title:"Data Transform",dir:J},{title:"Coordinate",dir:K,draft:i},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:P},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:Q,children:[{title:"Common Charts",dir:tt,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:et},{title:"Stacked Bar",dir:it},{title:"Bar Racing",dir:rt,draft:i},{title:"Bar Polar",dir:at,draft:i},{title:"Waterfall",dir:lt,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:dt},{title:"Stacked Line",dir:pt},{title:"Area Chart",dir:nt},{title:"Smoothed Line",dir:ht},{title:"Step Line",dir:st}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:ct},{title:"Ring Style",dir:ot},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:yt,children:[{title:"Basic Scatter",dir:gt}]}]},{title:"Mobile",dir:m,draft:i},{title:"Cross Platform",dir:ut,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:vt},{title:"Drilldown",dir:mt,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:ft}]},{title:"Interaction",dir:Et,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:bt,draft:i}]}]},{title:"Best Practice",dir:Ct,children:[{title:"Mobile Optimization",dir:m,draft:i},{title:xt,dir:Bt},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:At}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:L,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:j},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","a","p","","code","绘制一个简单的图表","true","span","icon","icon-link","nofollow","noopener","noreferrer","_blank","mobile","get-started","快速上手","h2","https://www.jsdelivr.com/package/npm/echarts","div","nuxt-content-highlight","md-code-block","html","visual-map","获取-apache-echarts","获取 Apache ECharts","引入-apache-echarts","引入 Apache ECharts","zh/basics/download","echarts.js","index.html","/zh/get-started",null,"basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1> <h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2> <p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p> <p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p> <blockquote><p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p></blockquote> <h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2> <p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</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>
+ <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"><!-- 引入刚刚下载的 ECharts 文件 --></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="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>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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>打开这个 <code>index.html</code>,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。</p> <h2 id="%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" tabindex="-1">绘制一个简单的图表</h2> <p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后,添加:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><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"><!-- 为 ECharts 准备一个定义了宽高的 DOM --></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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+<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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a> 方法生成一个简单的柱状图,下面是完整代码。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-html line-numbers"><code><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</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>
+ <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"><!-- 引入刚刚下载的 ECharts 文件 --></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 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>body</span><span class="token punctuation">></span></span>
+ <span class="token comment"><!-- 为 ECharts 准备一个定义了宽高的 DOM --></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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span>400px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></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 punctuation">></span></span>
+ <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>
+ // 基于准备好的dom,初始化echarts实例
+ var myChart = echarts.init(document.getElementById('main'));
+
+ // 指定图表的配置项和数据
+ var option = {
+ title: {
+ text: 'ECharts 入门示例'
+ },
+ tooltip: {},
+ legend: {
+ data: ['销量']
+ },
+ xAxis: {
+ data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+ },
+ yAxis: {},
+ series: [
+ {
+ name: '销量',
+ type: 'bar',
+ data: [5, 20, 36, 10, 10, 20]
+ }
+ ]
+ };
+
+ // 使用刚指定的配置项和数据显示图表。
+ 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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>这样你的第一个图表就诞生了!</p> <p><iframe width="100%" height="350" src=""></iframe></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/zh/get-started.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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,a,l,h,c,n,o,g,s,C,I,p,A,m,b,u,B,f,E,w,W,k,P,D,G,v,O,R,S,L,j,Y,x,F,H,J,N,X,Z,y,K,z,Q,M,U,q,T,V,_,$,tt,it,et){return{layout:"default",data:[{html:'<h1 id="%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B" tabindex="-1">快速上手</h1>\n<h2 id="%E8%8E%B7%E5%8F%96-apache-echarts" tabindex="-1">获取 Apache ECharts</h2>\n<p>Apache ECharts 支持多种下载方式,可以在下一篇教程<a href="zh/basics/download">安装</a>中查看所有方式。这里,我们以从 <a href="https://www.jsdelivr.com/package/npm/echarts">jsDelivr</a> CDN 上获取为例,介绍如何快速安装。</p>\n<p>在 <a href="https://www.jsdelivr.com/package/npm/echarts">https://www.jsdelivr.com/package/npm/echarts</a> 选择 <code>dist/echarts.js</code>,点击并保存为 <code>echarts.js</code> 文件。</p>\n<blockquote>\n<p>关于这些文件的介绍,可以在下一篇教程<a href="zh/basics/download">安装</a>中了解更多信息。</p>\n</blockquote>\n<h2 id="%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">引入 Apache ECharts</h2>\n<p>在刚才保存 <code>echarts.js</code> 的目录新建一个 <code>index.html</code> 文件,内容如下:</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLmpzIj48L3NjcmlwdD4KICA8L2hlYWQ-CjwvaHRtbD4\'" line-highlights="\'\'" />\n<p>打开这个 <code>index.html</code>,你会看到一片空白。但是不要担心,打开控制台确认没有报错信息,就可以进行下一步。</p>\n<h2 id="%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8" tabindex="-1">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 <code></head></code> 之后,添加:</p>\n<md-code-block lang="html" code="\'PGJvZHk-CiAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogIDxkaXYgaWQ9Im1haW4iIHN0eWxlPSJ3aWR0aDogNjAwcHg7aGVpZ2h0OjQwMHB4OyI-PC9kaXY-CjwvYm9keT4\'" line-highlights="\'\'" />\n<p>然后就可以通过 <a href="https://echarts.apache.org//api.html#echarts.init">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href="https://echarts.apache.org//api.html#echartsInstance.setOption">setOption</a> 方法生成一个简单的柱状图,下面是完整代码。</p>\n<md-code-block lang="html" code="\'PCFET0NUWVBFIGh0bWw-CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0idXRmLTgiIC8-CiAgICA8dGl0bGU-RUNoYXJ0czwvdGl0bGU-CiAgICA8IS0tIOW8leWFpeWImuWImuS4i-i9veeahCBFQ2hhcnRzIOaWh-S7tiAtLT4KICAgIDxzY3JpcHQgc3JjPSJlY2hhcnRzLm1pbi5qcyI-PC9zY3JpcHQ-CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSDkuLogRUNoYXJ0cyDlh4blpIfkuIDkuKrlrprkuYnkuoblrr3pq5jnmoQgRE9NIC0tPgogICAgPGRpdiBpZD0ibWFpbiIgc3R5bGU9IndpZHRoOiA2MDBweDtoZWlnaHQ6NDAwcHg7Ij48L2Rpdj4KICAgIDxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4KICAgICAgLy8g5Z-65LqO5YeG5aSH5aW955qEZG9t77yM5Yid5aeL5YyWZWNoYXJ0c-WunuS-iwogICAgICB2YXIgbXlDaGFydCA9IGVjaGFydHMuaW5pdChkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnbWFpbicpKTsKCiAgICAgIC8vIOaMh-WumuWbvuihqOeahOmFjee9rumhueWSjOaVsOaNrgogICAgICB2YXIgb3B0aW9uID0gewogICAgICAgIHRpdGxlOiB7CiAgICAgICAgICB0ZXh0OiAnRUNoYXJ0cyDlhaXpl6jnpLrkvosnCiAgICAgICAgfSwKICAgICAgICB0b29sdGlwOiB7fSwKICAgICAgICBsZWdlbmQ6IHsKICAgICAgICAgIGRhdGE6IFsn6ZSA6YePJ10KICAgICAgICB9LAogICAgICAgIHhBeGlzOiB7CiAgICAgICAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICAgICAgICB9LAogICAgICAgIHlBeGlzOiB7fSwKICAgICAgICBzZXJpZXM6IFsKICAgICAgICAgIHsKICAgICAgICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgICAgICAgfQogICAgICAgIF0KICAgICAgfTsKCiAgICAgIC8vIOS9v-eUqOWImuaMh-WumueahOmFjee9rumhueWSjOaVsOaNruaYvuekuuWbvuihqOOAggogICAgICBteUNoYXJ0LnNldE9wdGlvbihvcHRpb24pOwogICAgPC9zY3JpcHQ-CiAgPC9ib2R5Pgo8L2h0bWw-\'" line-highlights="\'\'" />\n<p>这样你的第一个图表就诞生了!</p>\n<p><md-example src="doc-example/getting-started"></md-example></p>\n',postPath:"zh/get-started"}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:a,children:[{title:"获取 ECharts",dir:l},{title:"在项目中引入 ECharts",dir:h},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:n},{title:"寻求帮助",dir:o},{title:"版本特性",dir:g,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:p,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:m,draft:t},{title:"系列",dir:b,draft:t},{title:"样式",dir:u},{title:"数据集",dir:B},{title:"数据转换",dir:f},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:w},{title:"视觉映射",dir:e},{title:"图例",dir:W},{title:"事件与行为",dir:k}]},{title:"应用篇",dir:P,children:[{title:"常用图表类型",dir:D,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:G},{title:"堆叠柱状图",dir:v},{title:"动态排序柱状图",dir:O},{title:"极坐标系柱状图",dir:R,draft:t},{title:"阶梯瀑布图",dir:S},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:L,children:[{title:"基础折线图",dir:j},{title:"堆叠折线图",dir:Y},{title:"区域面积图",dir:x},{title:"平滑曲线图",dir:F},{title:"阶梯线图",dir:H}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:J},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:X}]},{title:"散点图",dir:Z,children:[{title:"基础散点图",dir:y}]}]},{title:K,dir:i,draft:t},{title:"跨平台方案",dir:z,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:Q}]},{title:"数据处理",dir:M,children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:q,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:V,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t}]}]},{title:"最佳实践",dir:$,children:[{title:K,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:a,children:[{title:"Download ECharts",dir:l},{title:"Import ECharts",dir:h},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:n},{title:"Get Help",dir:o},{title:"What's New",dir:g,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:p,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:m,draft:t},{title:"Series",dir:b,draft:t},{title:"Style",dir:u},{title:"Dataset",dir:B},{title:"Data Transform",dir:f},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:w},{title:"Visual Mapping",dir:e},{title:"Legend",dir:W},{title:"Event and Action",dir:k}]},{title:"Application",dir:P,children:[{title:"Common Charts",dir:D,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:G},{title:"Stacked Bar",dir:v},{title:"Bar Racing",dir:O},{title:"Bar Polar",dir:R,draft:t},{title:"Waterfall",dir:S}]},{title:"Line",dir:L,children:[{title:"Basic Line",dir:j},{title:"Stacked Line",dir:Y},{title:"Area Chart",dir:x},{title:"Smoothed Line",dir:F},{title:"Step Line",dir:H}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:J},{title:"Ring Style",dir:N},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:Z,children:[{title:"Basic Scatter",dir:y}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:z,children:[{title:"Server Side Rendering",dir:Q}]},{title:"Data",dir:M,children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:q,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:V,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t}]}]},{title:"Best Practice",dir:$,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/get-started",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/index.html b/handbook/zh/index.html
index 95fa6eb..3b095d3 100644
--- a/handbook/zh/index.html
+++ b/handbook/zh/index.html
@@ -3,10 +3,10 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,b,g,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,z,M,H,I,T,U,N,O,$,F,W,X,j,q,J,K,Q,Y,Z,tt,it,et,rt){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本介绍",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 新特性",dir:b},{title:"ECharts 5 升级指南",dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:u},{title:"配置项",dir:C,draft:t},{title:"系列",dir:v,draft:t},{title:"样式",dir:S},{title:"数据集",dir:P},{title:"数据转换",dir:B},{title:"坐标系",dir:E,draft:t},{title:"坐标轴",dir:k},{title:"视觉映射",dir:e},{title:"图例",dir:w},{title:"事件与行为",dir:x}]},{title:"应用篇",dir:R,children:[{title:"常用图表类型",dir:y,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:L},{title:"动态排序柱状图",dir:A,draft:t},{title:"极坐标系柱状图",dir:_,draft:t},{title:"瀑布图",dir:G,draft:t},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:z},{title:"堆叠折线图",dir:M},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:N},{title:"南丁格尔图(玫瑰图)",dir:O}]},{title:"散点图",dir:$,children:[{title:"基础散点图",dir:F}]}]},{title:W,dir:i,draft:t},{title:"跨平台方案",dir:X,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:j}]},{title:"数据处理",dir:q,children:[{title:"动态的异步数据",dir:J},{title:"数据下钻",dir:K,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Q}]},{title:"交互",dir:Y,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Z,draft:t}]}]},{title:"最佳实践",dir:tt,children:[{title:W,dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:rt}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"Release Note",dir:h,children:[{title:p,draft:t,dir:f},{title:"ECharts 5 Features",dir:b},{title:"ECharts 5 Upgrade Guide",dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:u},{title:"Chart Option",dir:C,draft:t},{title:"Series",dir:v,draft:t},{title:"Style",dir:S},{title:"Dataset",dir:P},{title:"Data Transform",dir:B},{title:"Coordinate",dir:E,draft:t},{title:"Axis",dir:k},{title:"Visual Mapping",dir:e},{title:"Legend",dir:w},{title:"Event and Action",dir:x}]},{title:"Application",dir:R,children:[{title:"Common Charts",dir:y,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:L},{title:"Bar Racing",dir:A,draft:t},{title:"Bar Polar",dir:_,draft:t},{title:"Waterfall",dir:G,draft:t}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:z},{title:"Stacked Line",dir:M},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:N},{title:"Rose Style",dir:O}]},{title:"Scatter",dir:$,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:X,children:[{title:"Server Side Rendering",dir:j}]},{title:"Data",dir:q,children:[{title:"Dynamic Data",dir:J},{title:"Drilldown",dir:K,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Q}]},{title:"Interaction",dir:Y,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Z,draft:t}]}]},{title:"Best Practice",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:rt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r},content:{dbHash:"570e7c13"}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/1973e756ccd8175e73c2.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><a href="/handbook/zh/get-started">中文</a> <a href="/handbook/en/get-started">English</a></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,r,d,l,a,n,c,o,s,h,p,f,g,b,m,u,C,v,S,P,B,E,k,w,x,R,y,D,L,A,_,G,V,z,M,I,T,U,H,N,O,W,$,F,X,j,q,J,K,Q,Y,Z,tt,it,et){return{layout:"default",data:[{}],fetch:{},error:r,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:d},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:a},{title:"在项目中引入 ECharts",dir:n},{title:"资源列表",dir:c,draft:t},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:s},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:p},{title:"ECharts 5 升级指南",dir:f},{title:5.2,dir:g}]}]},{title:"概念篇",dir:b,children:[{title:"图表容器及大小",dir:m},{title:"配置项",dir:u,draft:t},{title:"系列",dir:C,draft:t},{title:"样式",dir:v},{title:"数据集",dir:S},{title:"数据转换",dir:P},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:E},{title:"视觉映射",dir:e},{title:"图例",dir:k},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:x,children:[{title:"常用图表类型",dir:R,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:y},{title:"堆叠柱状图",dir:D},{title:"动态排序柱状图",dir:L},{title:"极坐标系柱状图",dir:A,draft:t},{title:"阶梯瀑布图",dir:_},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:G,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:M},{title:"平滑曲线图",dir:I},{title:"阶梯线图",dir:T}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:U},{title:"圆环图",dir:H},{title:"南丁格尔图(玫瑰图)",dir:N}]},{title:"散点图",dir:O,children:[{title:"基础散点图",dir:W}]}]},{title:$,dir:i,draft:t},{title:"跨平台方案",dir:F,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:X}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:q},{title:"数据下钻",dir:J,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:K}]},{title:"交互",dir:Q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:Y,draft:t}]}]},{title:"最佳实践",dir:Z,children:[{title:$,dir:i,draft:t},{title:tt,dir:it},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:et}]}],en:[{title:"Get Started",dir:d},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:a},{title:"Import ECharts",dir:n},{title:"Resources",dir:c,draft:t},{title:"Inspiration",dir:o},{title:"Get Help",dir:s},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:p},{title:"ECharts 5 Upgrade Guide",dir:f},{title:5.2,dir:g}]}]},{title:"Concepts",dir:b,children:[{title:"Chart Container",dir:m},{title:"Chart Option",dir:u,draft:t},{title:"Series",dir:C,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:S},{title:"Data Transform",dir:P},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:E},{title:"Visual Mapping",dir:e},{title:"Legend",dir:k},{title:"Event and Action",dir:w}]},{title:"Application",dir:x,children:[{title:"Common Charts",dir:R,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:y},{title:"Stacked Bar",dir:D},{title:"Bar Racing",dir:L},{title:"Bar Polar",dir:A,draft:t},{title:"Waterfall",dir:_}]},{title:"Line",dir:G,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:M},{title:"Smoothed Line",dir:I},{title:"Step Line",dir:T}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:U},{title:"Ring Style",dir:H},{title:"Rose Style",dir:N}]},{title:"Scatter",dir:O,children:[{title:"Basic Scatter",dir:W}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:F,children:[{title:"Server Side Rendering",dir:X}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:q},{title:"Drilldown",dir:J,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:K}]},{title:"Interaction",dir:Q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:Y,draft:t}]}]},{title:"Best Practice",dir:Z,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:tt,dir:it},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:et}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:r}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/87d073533b02b80c9f5a.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>
diff --git a/handbook/zh/meta/edit-guide/index.html b/handbook/zh/meta/edit-guide/index.html
index 70c4b6f..6446192 100644
--- a/handbook/zh/meta/edit-guide/index.html
+++ b/handbook/zh/meta/edit-guide/index.html
@@ -3,105 +3,180 @@
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.css">
- <title>Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="description" name="description" content="Apache ECharts Handbook"><base href="/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="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.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="/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="/handbook/_nuxt/a88c0dc.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/a0d901b415da8e86775e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/647e5e1.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/d986efb.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/89761e6.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a8538eba3f241a324560.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/647e5e1.css"><link rel="stylesheet" href="/handbook/_nuxt/css/d986efb.css"><link rel="stylesheet" href="/handbook/_nuxt/css/89761e6.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css">
</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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="文档编辑指南"><a href="#%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>文档编辑指南</h1>
-<h2 id="新增一个-markdown-文件"><a href="#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>新增一个 markdown 文件</h2>
-<p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>
-<p>markdown 文件名称小写。</p>
-<h2 id="使用-prettier-来自动格式化代码"><a href="#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>使用 prettier 来自动格式化代码</h2>
-<p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" rel="nofollow noopener noreferrer" target="_blank">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p>
-<p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p>
-<h2 id="内置变量"><a href="#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>内置变量</h2>
-<ul>
-<li><code>optionPath</code></li>
-<li><code>mainSitePath</code></li>
-<li><code>exampleViewPath</code></li>
-<li><code>exampleEditorPath</code></li>
-</ul>
-<p>使用方式:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="引用代码"><a href="#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用代码</h2>
-<h3 id="基础使用"><a href="#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>基础使用</h3>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="代码推荐写法"><a href="#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>代码推荐写法</h3>
-<p>为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。</p>
-<p>比如注释 <code>...</code></p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="实时预览和编辑"><a href="#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>实时预览和编辑</h3>
-<blockquote>
-<p>目前只支持对 Option 代码的预览</p>
-</blockquote>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><!----></div>
-<h3 id="更多预览布局"><a href="#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多预览布局</h3>
-<h4 id="左右"><a href="#%E5%B7%A6%E5%8F%B3" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>左右</h4>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><!----></div>
-<h4 id="右左"><a href="#%E5%8F%B3%E5%B7%A6" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>右左</h4>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><!----></div>
-<h4 id="下上"><a href="#%E4%B8%8B%E4%B8%8A" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>下上</h4>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<div class="nuxt-content-highlight"><!----></div>
-<h3 id="高亮代码行以及添加文件名"><a href="#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮代码行以及添加文件名</h3>
-<p>使用:</p>
-
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-
-<p>效果:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></code></pre></div> <span class="filename">option.js</span> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="引用图片"><a href="#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>引用图片</h2>
-<p>图片实际存放地址在 <code>static/images/</code> 下。</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h3 id="设置图片高宽"><a href="#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>设置图片高宽</h3>
-<p>对于当前页面的临时样式,可以直接写 html:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<h2 id="添加示例-iframe"><a href="#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加示例 iframe</h2>
-<p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple" rel="nofollow noopener noreferrer" target="_blank">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p>
-<p>使用:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>效果:
-<iframe width="100%" height="300" src="https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started"></iframe></p>
-<h2 id="添加配置项链接"><a href="#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>添加配置项链接</h2>
-<p>使用:</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<p>效果:
-<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p>
-<h2 id="更多组件使用"><a href="#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>更多组件使用</h2>
-<p>文档支持使用全局注册的<code>markdown</code>组件,除了刚才介绍的<code>md-example</code>组件,还有下面几种组件</p>
-<h3 id="md-alert"><a href="#md-alert" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>md-alert</h3>
-<p>提示组件</p>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+ <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="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues(GitHub)<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="Search Handbook"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">ECharts 5 升级指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/application/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图(玫瑰图)</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/application/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/application/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1> <h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2> <p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p> <p>markdown 文件名称小写。</p> <h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2> <p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p> <p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code><span class="token comment"><!-- prettier-ignore-start --></span>
+<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 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p> <h2 id="%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" tabindex="-1">内置变量</h2> <ul><li><code>optionPath</code></li> <li><code>mainSitePath</code></li> <li><code>exampleViewPath</code></li> <li><code>exampleEditorPath</code></li></ul> <p>使用方式:</p> <pre><code>${xxxxx}
+</code></pre> <h2 id="%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" tabindex="-1">引用代码</h2> <h3 id="%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">基础使用</h3> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>```js
+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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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 number">28</span><span class="token punctuation">,</span> <span class="token number">25</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" tabindex="-1">代码推荐写法</h3> <p>为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。</p> <p>比如注释 <code>...</code></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>
+ 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 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" tabindex="-1">实时预览和编辑</h3> <blockquote><p>目前只支持对 Option 代码的预览</p></blockquote> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live
+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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live layout-tb"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" tabindex="-1">更多预览布局</h3> <h4 id="%E5%B7%A6%E5%8F%B3" tabindex="-1">左右</h4> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live {layout: 'lr'}
+option = {
+ ...
+};
+\```</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live layout-lr"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h4 id="%E5%8F%B3%E5%B7%A6" tabindex="-1">右左</h4> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live {layout: 'rl'}
+option = {
+ ...
+};
+\```</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h4 id="%E4%B8%8B%E4%B8%8A" tabindex="-1">下上</h4> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js live {layout: 'bt'}
+option = {
+ ...
+};
+\```</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live layout-bt"><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 = {
+ 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 class="token string">'Sat'</span><span class="token punctuation">,</span> <span class="token string">'Sun'</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">27</span><span class="token punctuation">,</span> <span class="token number">28</span><span class="token punctuation">,</span> <span class="token number">25</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" 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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <div class="md-live-preview"></div></div> <h3 id="%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C" tabindex="-1">高亮代码行</h3> <p>使用:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code>\```js {1,3-5}
+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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <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>
+ 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 number">28</span><span class="token punctuation">,</span> <span class="token number">25</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 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" tabindex="-1">引用图片</h2> <p>图片实际存放地址在 <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">图片说明</span>](<span class="token url">images/demo.png</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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h3 id="%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" tabindex="-1">设置图片高宽</h3> <p>对于当前页面的临时样式,可以直接写 html:</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>img</span> <span class="token attr-name">data-src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/demo.png<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="token punctuation">"</span><span class="token value css language-css"><span class="token property">width</span><span class="token punctuation">:</span> 50px</span><span class="token punctuation">"</span></span></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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" tabindex="-1">添加示例 iframe</h2> <p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p> <p>使用:</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-example</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>doc-example/getting-started<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>300<span class="token punctuation">"</span></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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>效果:
+<iframe width="100%" height="300" src=""></iframe></p> <h2 id="%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" tabindex="-1">添加配置项链接</h2> <p>使用:</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><span class="token punctuation">"</span>series-bar.itemStyle.color<span class="token punctuation">"</span></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="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>效果:
+<a href="https://echarts.apache.org/option.html#series-bar.itemStyle.color" target="_blank">series-bar.itemStyle.color</a></p> <h2 id="%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" tabindex="-1">更多组件使用</h2> <p>文档支持使用全局注册的<code>markdown</code>组件,除了刚才介绍的<code>md-example</code>组件,还有下面几种组件</p> <h3 id="md-alert" tabindex="-1">md-alert</h3> <p>提示组件</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-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>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
This is an info alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-info" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a success alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-success" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a warning alert.
-</p></blockquote>
-<div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-markdown line-numbers"><code></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></div>
-<blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-warning" data-v-a47f983e><p data-v-a47f983e>
+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">></span></span>
This is a danger alert.
-</p></blockquote></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6">新增一个 markdown 文件</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81">使用 prettier 来自动格式化代码</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F">内置变量</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81">引用代码</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8">基础使用</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95">代码推荐写法</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91">实时预览和编辑</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80">更多预览布局</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D">高亮代码行以及添加文件名</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87">引用图片</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD">设置图片高宽</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe">添加示例 iframe</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5">添加配置项链接</a></li><li class="toc2"><a href="/handbook/zh/meta/edit-guide#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8">更多组件使用</a></li><li class="toc3"><a href="/handbook/zh/meta/edit-guide#md-alert">md-alert</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,i,p,l,r,d,n,s,h,y,o,c,g,u,v,m,E,B,f,A,x,b,N,C,w,k,S,H,I,D,P,T,F,R,j,z,L,_,V,M,G,O,U,W,$,Z,q,X,J,K,Q,Y,ee,te,ae,ie,pe,le,re,de,ne,se,he,ye,oe,ce,ge,ue,ve,me,Ee,Be,fe,Ae,xe,be,Ne,Ce,we,ke,Se,He,Ie,De,Pe,Te,Fe,Re,je,ze,Le,_e,Ve){return{layout:"default",data:[{article:{slug:j,toc:[{id:M,depth:2,text:G},{id:O,depth:2,text:U},{id:A,depth:2,text:A},{id:x,depth:2,text:x},{id:b,depth:3,text:b},{id:N,depth:3,text:N},{id:C,depth:3,text:C},{id:w,depth:3,text:w},{id:k,depth:3,text:k},{id:S,depth:2,text:S},{id:H,depth:3,text:H},{id:W,depth:2,text:$},{id:I,depth:2,text:I},{id:D,depth:2,text:D},{id:m,depth:3,text:m}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:z},children:[{type:t,tag:d,props:{href:"#%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:z}]},{type:e,value:a},{type:t,tag:E,props:{id:M},children:[{type:t,tag:d,props:{href:"#%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:G}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在 "},{type:t,tag:u,props:{},children:[{type:e,value:"contents/zh/"}]},{type:e,value:"(中文文章)或 "},{type:t,tag:u,props:{},children:[{type:e,value:"contents/en/"}]},{type:e,value:"(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 "},{type:t,tag:u,props:{},children:[{type:e,value:"contents/zh/posts.yml"}]},{type:e,value:" 或 "},{type:t,tag:u,props:{},children:[{type:e,value:"contents/en/posts.yml"}]},{type:e,value:"。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"markdown 文件名称小写。"}]},{type:e,value:a},{type:t,tag:E,props:{id:O},children:[{type:t,tag:d,props:{href:"#%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:U}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在开始之前,我们推荐安装"},{type:t,tag:u,props:{},children:[{type:e,value:Z}]},{type:e,value:"的 "},{type:t,tag:d,props:{href:"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode",rel:[q,X,J],target:"_blank"},children:[{type:e,value:"VSCode 插件"}]},{type:e,value:",该插件可以在你保存的时候自动帮你格式化代码。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止"},{type:t,tag:u,props:{},children:[{type:e,value:Z}]},{type:e,value:"格式化该部分代码"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"\x3c!-- prettier-ignore-start --\x3e\n\x3c!-- prettier-ignore-end --\x3e\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。"}]},{type:e,value:a},{type:t,tag:E,props:{id:A},children:[{type:t,tag:d,props:{href:"#%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:A}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:P,props:{},children:[{type:t,tag:u,props:{},children:[{type:e,value:"optionPath"}]}]},{type:e,value:a},{type:t,tag:P,props:{},children:[{type:t,tag:u,props:{},children:[{type:e,value:"mainSitePath"}]}]},{type:e,value:a},{type:t,tag:P,props:{},children:[{type:t,tag:u,props:{},children:[{type:e,value:"exampleViewPath"}]}]},{type:e,value:a},{type:t,tag:P,props:{},children:[{type:t,tag:u,props:{},children:[{type:e,value:"exampleEditorPath"}]}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"使用方式:"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:"null","line-highlights":i,"file-name":i},children:[{type:e,value:"${xxxxx}\n"}]}]},{type:e,value:a},{type:t,tag:E,props:{id:x},children:[{type:t,tag:d,props:{href:"#%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:x}]},{type:e,value:a},{type:t,tag:B,props:{id:b},children:[{type:t,tag:d,props:{href:"#%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:b}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```js\noption = {\n series: [{\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }]\n};\n\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:f,"line-highlights":i,"file-name":i},children:[{type:e,value:K}]}]},{type:e,value:a},{type:t,tag:B,props:{id:N},children:[{type:t,tag:d,props:{href:"#%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:N}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"比如注释 "},{type:t,tag:u,props:{},children:[{type:e,value:"..."}]}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:f,"line-highlights":i,"file-name":i},children:[{type:e,value:"option = {\n series: [\n {\n type: 'bar'\n // ...\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:C},children:[{type:t,tag:d,props:{href:"#%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:C}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"目前只支持对 Option 代码的预览"}]},{type:e,value:a}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```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\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:T,props:{lang:f,layout:"tb"},children:[{type:e,value:F}]}]},{type:e,value:a},{type:t,tag:B,props:{id:w},children:[{type:t,tag:d,props:{href:"#%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:w}]},{type:e,value:a},{type:t,tag:L,props:{id:"左右"},children:[{type:t,tag:d,props:{href:"#%E5%B7%A6%E5%8F%B3",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:"左右"}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```js [live-lr]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:T,props:{lang:f,layout:"lr"},children:[{type:e,value:F}]}]},{type:e,value:a},{type:t,tag:L,props:{id:"右左"},children:[{type:t,tag:d,props:{href:"#%E5%8F%B3%E5%B7%A6",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:"右左"}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```js [live-rl]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:T,props:{lang:f,layout:"rl"},children:[{type:e,value:F}]}]},{type:e,value:a},{type:t,tag:L,props:{id:"下上"},children:[{type:t,tag:d,props:{href:"#%E4%B8%8B%E4%B8%8A",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:"下上"}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```js [live-bt]\noption = {\n ...\n};\n\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:T,props:{lang:f,layout:"bt"},children:[{type:e,value:F}]}]},{type:e,value:a},{type:t,tag:B,props:{id:k},children:[{type:t,tag:d,props:{href:"#%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C%E4%BB%A5%E5%8F%8A%E6%B7%BB%E5%8A%A0%E6%96%87%E4%BB%B6%E5%90%8D",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:k}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:_}]},{type:e,value:a},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"```js{1,3-5}[option.js]\noption = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n\\```\n"}]}]},{type:e,value:a},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"效果:"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:f,"line-highlights":"1,3-5","file-name":"option.js"},children:[{type:e,value:K}]}]},{type:e,value:a},{type:t,tag:E,props:{id:S},children:[{type:t,tag:d,props:{href:"#%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:S}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"图片实际存放地址在 "},{type:t,tag:u,props:{},children:[{type:e,value:"static/images/"}]},{type:e,value:" 下。"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:"![图片说明](images/demo.png)\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:H},children:[{type:t,tag:d,props:{href:"#%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:H}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"对于当前页面的临时样式,可以直接写 html:"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<img src="images/demo.png" style="width: 50px" />\n'}]}]},{type:e,value:a},{type:t,tag:E,props:{id:W},children:[{type:t,tag:d,props:{href:"#%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:$}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:u,props:{},children:[{type:e,value:"src"}]},{type:e,value:"为 "},{type:t,tag:d,props:{href:Q,rel:[q,X,J],target:"_blank"},children:[{type:e,value:Q}]},{type:e,value:" 地址中"},{type:t,tag:u,props:{},children:[{type:e,value:"?c="}]},{type:e,value:"后面这一串"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:_}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-example src="doc-example/getting-started" width="100%" height="300"></md-example>\n'}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"效果:\n"},{type:t,tag:Y,props:{src:"doc-example/getting-started",width:"100%",height:300},children:[]}]},{type:e,value:a},{type:t,tag:E,props:{id:I},children:[{type:t,tag:d,props:{href:"#%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:I}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:_}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-option link="series-bar.itemStyle.color"></md-option>\n'}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"效果:\n"},{type:t,tag:"md-option",props:{link:"series-bar.itemStyle.color"},children:[]}]},{type:e,value:a},{type:t,tag:E,props:{id:D},children:[{type:t,tag:d,props:{href:"#%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:D}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"文档支持使用全局注册的"},{type:t,tag:u,props:{},children:[{type:e,value:v}]},{type:e,value:"组件,除了刚才介绍的"},{type:t,tag:u,props:{},children:[{type:e,value:Y}]},{type:e,value:"组件,还有下面几种组件"}]},{type:e,value:a},{type:t,tag:B,props:{id:m},children:[{type:t,tag:d,props:{href:"#md-alert",ariaHidden:s,tabIndex:h},children:[{type:t,tag:y,props:{className:[o,c]},children:[]}]},{type:e,value:m}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"提示组件"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-alert type="info">\nThis is an info alert.\n</md-alert>\n'}]}]},{type:e,value:a},{type:t,tag:m,props:{type:"info"},children:[{type:e,value:"\nThis is an info alert.\n"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-alert type="success">\nThis is a success alert.\n</md-alert>\n'}]}]},{type:e,value:a},{type:t,tag:m,props:{type:"success"},children:[{type:e,value:"\nThis is a success alert.\n"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n'}]}]},{type:e,value:a},{type:t,tag:m,props:{type:"warning"},children:[{type:e,value:"\nThis is a warning alert.\n"}]},{type:e,value:a},{type:t,tag:l,props:{className:[r]},children:[{type:t,tag:g,props:{lang:v,"line-highlights":i,"file-name":i},children:[{type:e,value:'<md-alert type="warning">\nThis is a danger alert.\n</md-alert>\n'}]}]},{type:e,value:a},{type:t,tag:m,props:{type:"danger"},children:[{type:e,value:"\nThis is a danger alert.\n"}]}]},dir:"/zh/meta",path:ee,extension:".md",createdAt:"2021-06-04T12:26:37.935Z",updatedAt:"2021-07-21T09:50:31.746Z"},postPath:"zh/meta/edit-guide"}],fetch:{},error:te,state:{filled:!1,docVersion:i,ghVersion:i,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:ae},{title:"入门篇",dir:"basics",children:[{title:"获取 ECharts",dir:ie},{title:"在项目中引入 ECharts",dir:"import"},{title:"资源列表",dir:pe,draft:p},{title:"获取灵感",dir:le},{title:"寻求帮助",dir:"help"},{title:"版本介绍",dir:re,children:[{title:de,draft:p,dir:"5-2-0"},{title:"ECharts 5 新特性",dir:ne},{title:"ECharts 5 升级指南",dir:se}]}]},{title:"概念篇",dir:he,children:[{title:"图表容器及大小",dir:ye},{title:"配置项",dir:oe,draft:p},{title:"系列",dir:"series",draft:p},{title:"样式",dir:"style"},{title:"数据集",dir:ce},{title:"数据转换",dir:ge},{title:"坐标系",dir:ue,draft:p},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:V},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ve,children:[{title:"常用图表类型",dir:me,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Ee},{title:"堆叠柱状图",dir:Be},{title:"动态排序柱状图",dir:fe,draft:p},{title:"极坐标系柱状图",dir:Ae,draft:p},{title:"瀑布图",dir:xe,draft:p},{title:"视觉映射的柱状图",dir:V,draft:p}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:be},{title:"堆叠折线图",dir:Ne},{title:"区域面积图",dir:Ce},{title:"平滑曲线图",dir:we},{title:"阶梯线图",dir:ke}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:Se},{title:"圆环图",dir:He},{title:"南丁格尔图(玫瑰图)",dir:"rose"}]},{title:"散点图",dir:Ie,children:[{title:"基础散点图",dir:De}]}]},{title:"移动端优化",dir:R,draft:p},{title:"跨平台方案",dir:Pe,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Te},{title:"数据下钻",dir:Fe,draft:p}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:Re}]},{title:"交互",dir:je,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ze,draft:p}]}]},{title:"最佳实践",dir:Le,children:[{title:"移动端优化",dir:R,draft:p},{title:_e,dir:Ve},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:z,dir:j}]}],en:[{title:"Get Started",dir:ae},{title:"Basics",dir:"basics",children:[{title:"Download ECharts",dir:ie},{title:"Import ECharts",dir:"import"},{title:"Resources",dir:pe,draft:p},{title:"Inspiration",dir:le},{title:"Get Help",dir:"help"},{title:"Release Note",dir:re,children:[{title:de,draft:p,dir:"5-2-0"},{title:"ECharts 5 Features",dir:ne},{title:"ECharts 5 Upgrade Guide",dir:se}]}]},{title:"Concepts",dir:he,children:[{title:"Chart Container",dir:ye},{title:"Chart Option",dir:oe,draft:p},{title:"Series",dir:"series",draft:p},{title:"Style",dir:"style"},{title:"Dataset",dir:ce},{title:"Data Transform",dir:ge},{title:"Coordinate",dir:ue,draft:p},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:V},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ve,children:[{title:"Common Charts",dir:me,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Ee},{title:"Stacked Bar",dir:Be},{title:"Bar Racing",dir:fe,draft:p},{title:"Bar Polar",dir:Ae,draft:p},{title:"Waterfall",dir:xe,draft:p}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:be},{title:"Stacked Line",dir:Ne},{title:"Area Chart",dir:Ce},{title:"Smoothed Line",dir:we},{title:"Step Line",dir:ke}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:Se},{title:"Ring Style",dir:He},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:Ie,children:[{title:"Basic Scatter",dir:De}]}]},{title:"Mobile",dir:R,draft:p},{title:"Cross Platform",dir:Pe,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Te},{title:"Drilldown",dir:Fe,draft:p}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:Re}]},{title:"Interaction",dir:je,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ze,draft:p}]}]},{title:"Best Practice",dir:Le,children:[{title:"Mobile Optimization",dir:R,draft:p},{title:_e,dir:Ve},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:j}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:p,routePath:ee,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:te},content:{dbHash:"570e7c13"}}}}("text","element","\n","",!0,"div","nuxt-content-highlight","a","p","true",-1,"span","icon","icon-link","md-code-block","code","markdown","md-alert","h2","h3","js","内置变量","引用代码","基础使用","代码推荐写法","实时预览和编辑","更多预览布局","高亮代码行以及添加文件名","引用图片","设置图片高宽","添加配置项链接","更多组件使用","li","md-live","option = {\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","mobile","edit-guide","文档编辑指南","h4","使用:","visual-map","新增一个-markdown-文件","新增一个 markdown 文件","使用-prettier-来自动格式化代码","使用 prettier 来自动格式化代码","添加示例-iframe","添加示例 iframe","prettier","nofollow","noopener","noreferrer","option = {\n series: [\n {\n type: 'bar',\n data: [23, 24, 18, 25, 27, 28, 25]\n }\n ]\n};\n","https://echarts.apache.org/examples/zh/editor.html?c=line-simple","md-example","/zh/meta/edit-guide",null,"get-started","download","resource","inspiration","release-note","ECharts 5.2.0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script>
+<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-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-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote class="md-alert md-alert-danger" data-v-a47f983e><p data-v-a47f983e>
+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/zh/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-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(i,e,t,d,r,l,n,a,g,o,c,h,s,C,I,B,A,p,m,E,b,w,k,G,y,L,u,x,D,W,X,z,f,J,V,O,Y,U,M,R,v,P,S,F,Z,j,H,N,K,Q,T,_,$,q,ii,ei,ti){return{layout:"default",data:[{html:'<h1 id="%E6%96%87%E6%A1%A3%E7%BC%96%E8%BE%91%E6%8C%87%E5%8D%97" tabindex="-1">文档编辑指南</h1>\n<h2 id="%E6%96%B0%E5%A2%9E%E4%B8%80%E4%B8%AA-markdown-%E6%96%87%E4%BB%B6" tabindex="-1">新增一个 markdown 文件</h2>\n<p>在 <code>contents/zh/</code>(中文文章)或 <code>contents/en/</code>(英文文章)目录下新增一个 markdown 文件,最多支持三级目录。将路径及标题信息更新在 <code>contents/zh/posts.yml</code> 或 <code>contents/en/posts.yml</code>。</p>\n<p>markdown 文件名称小写。</p>\n<h2 id="%E4%BD%BF%E7%94%A8-prettier-%E6%9D%A5%E8%87%AA%E5%8A%A8%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81" tabindex="-1">使用 prettier 来自动格式化代码</h2>\n<p>在开始之前,我们推荐安装<code>prettier</code>的 <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">VSCode 插件</a>,该插件可以在你保存的时候自动帮你格式化代码。</p>\n<p>如果你觉得自动的格式化破坏了你的代码块,你可以在在代码块外面加上下面代码阻止<code>prettier</code>格式化该部分代码</p>\n<md-code-block lang="markdown" code="\'PCEtLSBwcmV0dGllci1pZ25vcmUtc3RhcnQgLS0-CjwhLS0gcHJldHRpZXItaWdub3JlLWVuZCAtLT4\'" line-highlights="\'\'" />\n<p>如果你发现有的代码块并没有被格式化,请先检查该代码是否存在语法上的错误。</p>\n<h2 id="%E5%86%85%E7%BD%AE%E5%8F%98%E9%87%8F" tabindex="-1">内置变量</h2>\n<ul>\n<li><code>optionPath</code></li>\n<li><code>mainSitePath</code></li>\n<li><code>exampleViewPath</code></li>\n<li><code>exampleEditorPath</code></li>\n</ul>\n<p>使用方式:</p>\n<pre><code>${xxxxx}\n</code></pre>\n<h2 id="%E5%BC%95%E7%94%A8%E4%BB%A3%E7%A0%81" tabindex="-1">引用代码</h2>\n<h3 id="%E5%9F%BA%E7%A1%80%E4%BD%BF%E7%94%A8" tabindex="-1">基础使用</h3>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'YGBganMKb3B0aW9uID0gewogICAgc2VyaWVzOiBbewogICAgICAgIHR5cGU6ICdiYXInLAogICAgICAgIGRhdGE6IFsyMywgMjQsIDE4LCAyNSwgMjcsIDI4LCAyNV0KICAgIH1dCn07ClxgYGA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'\'" />\n<h3 id="%E4%BB%A3%E7%A0%81%E6%8E%A8%E8%8D%90%E5%86%99%E6%B3%95" tabindex="-1">代码推荐写法</h3>\n<p>为了可以让工具帮助我们对代码进行格式化,我们应该尽量避免有语法问题的写法。</p>\n<p>比如注释 <code>...</code></p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJwogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h3 id="%E5%AE%9E%E6%97%B6%E9%A2%84%E8%A7%88%E5%92%8C%E7%BC%96%E8%BE%91" tabindex="-1">实时预览和编辑</h3>\n<blockquote>\n<p>目前只支持对 Option 代码的预览</p>\n</blockquote>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUKb3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h3 id="%E6%9B%B4%E5%A4%9A%E9%A2%84%E8%A7%88%E5%B8%83%E5%B1%80" tabindex="-1">更多预览布局</h3>\n<h4 id="%E5%B7%A6%E5%8F%B3" tabindex="-1">左右</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2xyJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<h4 id="%E5%8F%B3%E5%B7%A6" tabindex="-1">右左</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ3JsJ30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'rl\'}" />\n<h4 id="%E4%B8%8B%E4%B8%8A" tabindex="-1">下上</h4>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIGxpdmUge2xheW91dDogJ2J0J30Kb3B0aW9uID0gewogIC4uLgp9OwpcYGBg\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ01vbicsICdUdWUnLCAnV2VkJywgJ1RodScsICdGcmknLCAnU2F0JywgJ1N1biddCiAgfSwKICB5QXhpczoge30sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbMjMsIDI0LCAxOCwgMjUsIDI3LCAyOCwgMjVdCiAgICB9CiAgXQp9Ow\'" v-bind="{layout: \'bt\'}" />\n<h3 id="%E9%AB%98%E4%BA%AE%E4%BB%A3%E7%A0%81%E8%A1%8C" tabindex="-1">高亮代码行</h3>\n<p>使用:</p>\n\x3c!-- prettier-ignore-start --\x3e\n<md-code-block lang="markdown" code="\'XGBgYGpzIHsxLDMtNX0Kb3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTsKXGBgYA\'" line-highlights="\'\'" />\n\x3c!-- prettier-ignore-end --\x3e\n<p>效果:</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnYmFyJywKICAgICAgZGF0YTogWzIzLCAyNCwgMTgsIDI1LCAyNywgMjgsIDI1XQogICAgfQogIF0KfTs\'" line-highlights="\'{1,3-5}\'" />\n<h2 id="%E5%BC%95%E7%94%A8%E5%9B%BE%E7%89%87" tabindex="-1">引用图片</h2>\n<p>图片实际存放地址在 <code>static/images/</code> 下。</p>\n<md-code-block lang="markdown" code="\'IVvlm77niYfor7TmmI5dKGltYWdlcy9kZW1vLnBuZyk\'" line-highlights="\'\'" />\n<h3 id="%E8%AE%BE%E7%BD%AE%E5%9B%BE%E7%89%87%E9%AB%98%E5%AE%BD" tabindex="-1">设置图片高宽</h3>\n<p>对于当前页面的临时样式,可以直接写 html:</p>\n<md-code-block lang="markdown" code="\'PGltZyBkYXRhLXNyYz0iaW1hZ2VzL2RlbW8ucG5nIiBzdHlsZT0id2lkdGg6IDUwcHgiIC8-\'" line-highlights="\'\'" />\n<h2 id="%E6%B7%BB%E5%8A%A0%E7%A4%BA%E4%BE%8B-iframe" tabindex="-1">添加示例 iframe</h2>\n<p><code>src</code>为 <a href="https://echarts.apache.org/examples/zh/editor.html?c=line-simple">https://echarts.apache.org/examples/zh/editor.html?c=line-simple</a> 地址中<code>?c=</code>后面这一串</p>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLWV4YW1wbGUgc3JjPSJkb2MtZXhhbXBsZS9nZXR0aW5nLXN0YXJ0ZWQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjMwMCIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-example src="doc-example/getting-started" width="100%" height="300" /></p>\n<h2 id="%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%E9%93%BE%E6%8E%A5" tabindex="-1">添加配置项链接</h2>\n<p>使用:</p>\n<md-code-block lang="markdown" code="\'PG1kLW9wdGlvbiBsaW5rPSJzZXJpZXMtYmFyLml0ZW1TdHlsZS5jb2xvciIgLz4\'" line-highlights="\'\'" />\n<p>效果:\n<md-option link="series-bar.itemStyle.color" /></p>\n<h2 id="%E6%9B%B4%E5%A4%9A%E7%BB%84%E4%BB%B6%E4%BD%BF%E7%94%A8" tabindex="-1">更多组件使用</h2>\n<p>文档支持使用全局注册的<code>markdown</code>组件,除了刚才介绍的<code>md-example</code>组件,还有下面几种组件</p>\n<h3 id="md-alert" tabindex="-1">md-alert</h3>\n<p>提示组件</p>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9ImluZm8iPgpUaGlzIGlzIGFuIGluZm8gYWxlcnQuCjwvbWQtYWxlcnQ-\'" line-highlights="\'\'" />\n<md-alert type="info">\nThis is an info alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9InN1Y2Nlc3MiPgpUaGlzIGlzIGEgc3VjY2VzcyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="success">\nThis is a success alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgd2FybmluZyBhbGVydC4KPC9tZC1hbGVydD4\'" line-highlights="\'\'" />\n<md-alert type="warning">\nThis is a warning alert.\n</md-alert>\n<md-code-block lang="markdown" code="\'PG1kLWFsZXJ0IHR5cGU9Indhcm5pbmciPgpUaGlzIGlzIGEgZGFuZ2VyIGFsZXJ0Lgo8L21kLWFsZXJ0Pg\'" line-highlights="\'\'" />\n<md-alert type="danger">\nThis is a danger alert.\n</md-alert>\n',postPath:"zh/meta/edit-guide"}],fetch:{},error:d,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:r},{title:"入门篇",dir:l,children:[{title:"获取 ECharts",dir:n},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:g,draft:i},{title:"获取灵感",dir:o},{title:"寻求帮助",dir:c},{title:"版本特性",dir:h,children:[{title:"ECharts 5 特性介绍",dir:s},{title:"ECharts 5 升级指南",dir:C},{title:5.2,dir:I}]}]},{title:"概念篇",dir:B,children:[{title:"图表容器及大小",dir:A},{title:"配置项",dir:p,draft:i},{title:"系列",dir:m,draft:i},{title:"样式",dir:E},{title:"数据集",dir:b},{title:"数据转换",dir:w},{title:"坐标系",dir:k,draft:i},{title:"坐标轴",dir:G},{title:"视觉映射",dir:t},{title:"图例",dir:y},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:u,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:D},{title:"堆叠柱状图",dir:W},{title:"动态排序柱状图",dir:X},{title:"极坐标系柱状图",dir:z,draft:i},{title:"阶梯瀑布图",dir:f},{title:"视觉映射的柱状图",dir:t,draft:i}]},{title:"折线图",dir:J,children:[{title:"基础折线图",dir:V},{title:"堆叠折线图",dir:O},{title:"区域面积图",dir:Y},{title:"平滑曲线图",dir:U},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:R},{title:"圆环图",dir:v},{title:"南丁格尔图(玫瑰图)",dir:P}]},{title:"散点图",dir:S,children:[{title:"基础散点图",dir:F}]}]},{title:Z,dir:e,draft:i},{title:"跨平台方案",dir:j,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:H}]},{title:"数据处理",dir:N,children:[{title:"动态的异步数据",dir:K},{title:"数据下钻",dir:Q,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"交互",dir:_,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:$,draft:i}]}]},{title:"最佳实践",dir:q,children:[{title:Z,dir:e,draft:i},{title:ii,dir:ei},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:ti}]}],en:[{title:"Get Started",dir:r},{title:"Basics",dir:l,children:[{title:"Download ECharts",dir:n},{title:"Import ECharts",dir:a},{title:"Resources",dir:g,draft:i},{title:"Inspiration",dir:o},{title:"Get Help",dir:c},{title:"What's New",dir:h,children:[{title:"ECharts 5 Features",dir:s},{title:"ECharts 5 Upgrade Guide",dir:C},{title:5.2,dir:I}]}]},{title:"Concepts",dir:B,children:[{title:"Chart Container",dir:A},{title:"Chart Option",dir:p,draft:i},{title:"Series",dir:m,draft:i},{title:"Style",dir:E},{title:"Dataset",dir:b},{title:"Data Transform",dir:w},{title:"Coordinate",dir:k,draft:i},{title:"Axis",dir:G},{title:"Visual Mapping",dir:t},{title:"Legend",dir:y},{title:"Event and Action",dir:L}]},{title:"Application",dir:u,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:D},{title:"Stacked Bar",dir:W},{title:"Bar Racing",dir:X},{title:"Bar Polar",dir:z,draft:i},{title:"Waterfall",dir:f}]},{title:"Line",dir:J,children:[{title:"Basic Line",dir:V},{title:"Stacked Line",dir:O},{title:"Area Chart",dir:Y},{title:"Smoothed Line",dir:U},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:R},{title:"Ring Style",dir:v},{title:"Rose Style",dir:P}]},{title:"Scatter",dir:S,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:e,draft:i},{title:"Cross Platform",dir:j,children:[{title:"Server Side Rendering",dir:H}]},{title:"Data",dir:N,children:[{title:"Dynamic Data",dir:K},{title:"Drilldown",dir:Q,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Interaction",dir:_,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:$,draft:i}]}]},{title:"Best Practice",dir:q,children:[{title:"Mobile Optimization",dir:e,draft:i},{title:ii,dir:ei},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:ti}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:i,routePath:"/zh/meta/edit-guide",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:d}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","inspiration","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","server","data","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a88c0dc.js" defer></script><script src="/handbook/_nuxt/js/f9d67c6b735d3ad1caf6.js" defer></script><script src="/handbook/_nuxt/js/a8538eba3f241a324560.js" defer></script><script src="/handbook/_nuxt/js/a0d901b415da8e86775e.js" defer></script><script src="/handbook/_nuxt/js/08435746bb3f8ba825bd.js" defer></script><script src="/handbook/_nuxt/js/e18c48f98e76e79545a4.js" defer></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>
</body>